diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index defd7e58..b7d18711 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -1325,7 +1325,11 @@ Current v8 docs home: https://www.ayanova.com/docs/
 BUILD 8.0.0-beta.0.11 CHANGES OF NOTE
 
 
+- Changed web app build process to remove support for "legacy" browsers now is set to only support browsers with > 1% usage and most recent two versions only
 - Changed "Service" role translation to "Service manager" (and other languages equivalent) 
 - admin -> attachments not using correct icon, changed to paperclip from folder icon 
-- TODO BEFORE POST THIS UPDATE VUE AND ETC
+- History form event "utility file downloaded" wasn't properly enabled, fixed
+- refactor
+  *** TODO: check that about form properly shows user name and some other fields due to removing this. from template
+
 
diff --git a/ayanova/package.json b/ayanova/package.json
index 540de536..e1167538 100644
--- a/ayanova/package.json
+++ b/ayanova/package.json
@@ -67,7 +67,8 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/strongly-recommended",
+      "plugin:vue/recommended",
+      "eslint:recommended",
       "@vue/prettier"
     ],
     "parserOptions": {
diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue
index 97841e1e..e168bac7 100644
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -31,9 +31,9 @@
           <!-- TOP LEVEL HOLDER -->
           <template v-if="!item.route">
             <v-list-group
+              :key="item.key"
               :prepend-icon="item.icon"
               :value="false"
-              :key="item.key"
               :data-cy="item.testid"
             >
               <template v-slot:activator>
@@ -45,12 +45,12 @@
               <template v-for="subitem in item.navItems">
                 <template v-if="!subitem.route">
                   <!-- SECOND LEVEL HOLDER -->
-                  <div class="pl-2" :key="subitem.key">
+                  <div :key="subitem.key" class="pl-2">
                     <v-list-group
+                      :key="subitem.key"
                       no-action
                       sub-group
                       :value="false"
-                      :key="subitem.key"
                     >
                       <!-- Second level activator -->
                       <template v-slot:activator>
@@ -68,8 +68,8 @@
                       >
                         <v-list-item-action>
                           <v-icon
-                            :color="item.color ? item.color : ''"
                             v-if="subsub.icon"
+                            :color="item.color ? item.color : ''"
                             >{{ subsub.icon }}</v-icon
                           >
                         </v-list-item-action>
@@ -83,15 +83,15 @@
                 </template>
                 <template v-else>
                   <!-- SECOND LEVEL ACTION -->
-                  <div class="pl-3" :key="subitem.key">
+                  <div :key="subitem.key" class="pl-3">
                     <v-list-item
                       :to="subitem.route"
                       :data-cy="'nav' + subitem.testid"
                     >
                       <v-list-item-action>
                         <v-icon
-                          :color="item.color ? item.color : ''"
                           v-if="subitem.icon"
+                          :color="item.color ? item.color : ''"
                           >{{ subitem.icon }}</v-icon
                         >
                       </v-list-item-action>
@@ -138,8 +138,8 @@
     </v-navigation-drawer>
     <v-app-bar v-if="isAuthenticated" :color="appBar.color" dark fixed app>
       <v-app-bar-nav-icon
-        @click.stop="drawer = !drawer"
         data-cy="navicon"
+        @click.stop="drawer = !drawer"
       ></v-app-bar-nav-icon>
       <v-toolbar-title class="ml-n5 ml-sm-0 pl-sm-4">
         <v-icon>{{ appBar.icon }}</v-icon>
@@ -163,13 +163,13 @@
       <v-toolbar-items>
         <template v-for="item in appBar.menuItems">
           <v-btn
+            v-if="item.surface"
             :key="item.key"
             class="hidden-xs-only"
             icon
-            v-if="item.surface"
             :disabled="item.disabled"
-            @click="clickMenuItem(item)"
             :data-cy="item.key"
+            @click="clickMenuItem(item)"
           >
             <v-icon :color="item.color ? item.color : ''">
               {{ item.icon }}
@@ -181,7 +181,7 @@
 
         <v-menu float-left>
           <template v-slot:activator="{ on }">
-            <v-btn text icon v-on="on" data-cy="contextmenu">
+            <v-btn text icon data-cy="contextmenu" v-on="on">
               <v-icon>$ayiEllipsisV</v-icon>
             </v-btn>
           </template>
@@ -202,9 +202,9 @@
                 :disabled="item.disabled"
                 :href="item.href"
                 :target="item.target"
-                @click="clickMenuItem(item)"
                 :class="{ 'hidden-sm-and-up': item.surface }"
                 :data-cy="item.key"
+                @click="clickMenuItem(item)"
               >
                 <v-list-item-action>
                   <v-icon
@@ -228,7 +228,7 @@
     <v-main>
       <v-container fluid class="my-8">
         <transition name="fade" mode="out-in" @after-leave="afterLeave">
-          <router-view class="view" :key="$route.fullPath"></router-view>
+          <router-view :key="$route.fullPath" class="view"></router-view>
         </transition>
       </v-container>
     </v-main>
@@ -245,6 +245,9 @@ export default {
     gzconfirm,
     gznotify
   },
+  props: {
+    source: { type: String, default: null }
+  },
   data() {
     return {
       drawer: null,
@@ -262,6 +265,23 @@ export default {
       updateExists: false
     };
   },
+  computed: {
+    isAuthenticated() {
+      return this.$store.state.authenticated === true;
+    },
+    navItems() {
+      return this.$store.state.navItems;
+    },
+    helpUrl() {
+      return this.$store.state.helpUrl;
+    },
+    titleDisplay() {
+      if (this.appBar.title == null || this.appBar.title == "") {
+        return null;
+      }
+      return this.appBar.title;
+    }
+  },
   async created() {
     //Don't call this unless there is a service worker (https or localhost only, not private network) or else vuetify goes snakey and things start breaking
     if (navigator.serviceWorker) {
@@ -346,26 +366,6 @@ export default {
     //FUTURE: If need to detect a reload, this works reliably
     //OK if here then is this a reliable way to detect a reload or refresh or re-open of the app from a closed window but still authenticated?
   },
-  computed: {
-    isAuthenticated() {
-      return this.$store.state.authenticated === true;
-    },
-    navItems() {
-      return this.$store.state.navItems;
-    },
-    helpUrl() {
-      return this.$store.state.helpUrl;
-    },
-    titleDisplay() {
-      if (this.appBar.title == null || this.appBar.title == "") {
-        return null;
-      }
-      return this.appBar.title;
-    }
-  },
-  props: {
-    source: { type: String, default: null }
-  },
   methods: {
     afterLeave() {
       this.$root.$emit("triggerScroll");
diff --git a/ayanova/src/api/authutil.js b/ayanova/src/api/authutil.js
index cd59786f..19d576a1 100644
--- a/ayanova/src/api/authutil.js
+++ b/ayanova/src/api/authutil.js
@@ -3,6 +3,7 @@ import initialize from "./initialize";
 import notifypoll from "./notifypoll";
 
 export function processLogin(authResponse, loggedInWithKnownPassword) {
+  // eslint-disable-next-line no-async-promise-executor
   return new Promise(async function(resolve, reject) {
     try {
       //check there is a response of some kind
diff --git a/ayanova/src/api/enums.js b/ayanova/src/api/enums.js
index 58480709..1d0af7fd 100644
--- a/ayanova/src/api/enums.js
+++ b/ayanova/src/api/enums.js
@@ -16,7 +16,7 @@ export default {
       const availableRoles = this.getSelectionList("AuthorizationRoles");
       for (let i = 0; i < availableRoles.length; i++) {
         const role = availableRoles[i];
-        if (!!(enumValue & role.id)) {
+        if (enumValue & role.id) {
           ret.push(role.name);
         }
       }
@@ -70,7 +70,7 @@ export default {
       //enums is an object this is checking if that object has a key with the name in k
       if (!window.$gz.util.has(window.$gz.store.state.enums, k)) {
         const that = this;
-        // eslint-disable-next-line
+
         const dat = await that.fetchEnumKey(k);
         //massage the data as necessary
         const e = { enumKey: k, items: {} };
@@ -84,10 +84,10 @@ export default {
     }
   },
   async fetchEnumKey(enumKey) {
-    // eslint-disable-next-line
     const res = await window.$gz.api.get("enum-list/list/" + enumKey);
     //We never expect there to be no data here
-    if (!res.hasOwnProperty("data")) {
+    //if (!Object.prototype.hasOwnProperty.call(res, "data")) {
+    if (!Object.prototype.hasOwnProperty.call(res, "data")) {
       return Promise.reject(res);
     }
     return res.data;
diff --git a/ayanova/src/api/errorhandler.js b/ayanova/src/api/errorhandler.js
index 48775bb1..d8beacd1 100644
--- a/ayanova/src/api/errorhandler.js
+++ b/ayanova/src/api/errorhandler.js
@@ -32,6 +32,7 @@ async function dealWithError(msg, vm) {
     // eslint-disable-next-line no-console
     console.error(errMsg);
 
+    // eslint-disable-next-line no-debugger
     debugger;
   }
 
@@ -142,7 +143,7 @@ function decodeError(e, vm) {
 
   //Javascript Fetch API Response object?
   if (e instanceof Response) {
-    return `http error: ${err.statusText} - ${err.status} Url: ${err.url}`;
+    return `http error: ${e.statusText} - ${e.status} Url: ${e.url}`;
   }
 
   //last resort
diff --git a/ayanova/src/api/gzapi.js b/ayanova/src/api/gzapi.js
index 897f52ad..775f667b 100644
--- a/ayanova/src/api/gzapi.js
+++ b/ayanova/src/api/gzapi.js
@@ -542,7 +542,7 @@ export default {
       r = await that.extractBodyEx(r);
       return r;
     } catch (error) {
-      handleError("POSTATTACHMENT", error, route);
+      handleError("POSTATTACHMENT", error, "uploadAttachmentRoute");
     }
   },
   //////////////////////////////////////////////
@@ -616,7 +616,7 @@ export default {
       r = await that.extractBodyEx(r);
       return r;
     } catch (error) {
-      handleError("uploadLogo", error, route);
+      handleError("uploadLogo", error, "postLogoRoute");
     }
   },
   ///////////////////////////////////
@@ -633,7 +633,6 @@ export default {
       LanguageName: window.$gz.locale.getResolvedLanguage(),
       Hour12: window.$gz.locale.getHour12(),
       CurrencyName: window.$gz.locale.getCurrencyName(),
-      LanguageName: window.$gz.locale.getResolvedLanguage(),
       DefaultLocale: window.$gz.locale.getResolvedLanguage().split("-", 1)[0], //kind of suspect, maybe it can be removed
       PDFDate: window.$gz.locale.utcDateToShortDateLocalized(nowUtc),
       PDFTime: window.$gz.locale.utcDateToShortTimeLocalized(nowUtc)
@@ -646,7 +645,7 @@ export default {
   async fetchBizObjectName(ayaType, objectId) {
     const res = await this.get(`name/${ayaType}/${objectId}`);
     //We never expect there to be no data here
-    if (!res.hasOwnProperty("data")) {
+    if (!Object.prototype.hasOwnProperty.call(res, "data")) {
       return Promise.reject(res);
     } else {
       return res.data;
diff --git a/ayanova/src/api/gzmenu.js b/ayanova/src/api/gzmenu.js
index 1107b1c2..cc8ab0df 100644
--- a/ayanova/src/api/gzmenu.js
+++ b/ayanova/src/api/gzmenu.js
@@ -239,9 +239,10 @@ export default {
       vm: vm
     });
     */
+    let key = null;
     //Find the last report key and update it if present
     for (let i = 0; i < vm.appBar.menuItems.length; i++) {
-      var key = vm.appBar.menuItems[i].key;
+      key = vm.appBar.menuItems[i].key;
       if (key && key.includes(":report:")) {
         vm.appBar.menuItems[i].key = newItem.key;
         vm.appBar.menuItems[i].title = newItem.title;
@@ -250,7 +251,7 @@ export default {
     }
     //No prior last report so slot it in under the report one
     for (let i = 0; i < vm.appBar.menuItems.length; i++) {
-      var key = vm.appBar.menuItems[i].key;
+      key = vm.appBar.menuItems[i].key;
       if (key && key.endsWith(":report")) {
         vm.appBar.menuItems.splice(i + 1, 0, newItem);
       }
diff --git a/ayanova/src/api/gzutil.js b/ayanova/src/api/gzutil.js
index 9f69c9af..43c29379 100644
--- a/ayanova/src/api/gzutil.js
+++ b/ayanova/src/api/gzutil.js
@@ -118,7 +118,7 @@ export default {
 
   removeAllPropertiesFromObject: function(o) {
     for (let variableKey in o) {
-      if (o.hasOwnProperty(variableKey)) {
+      if (Object.prototype.hasOwnProperty.call(o, variableKey)) {
         delete o[variableKey];
       }
     }
@@ -136,7 +136,7 @@ export default {
       if (
         !key.endsWith("Viz") &&
         !skipNames.some(x => x == key) &&
-        source.hasOwnProperty(key)
+        Object.prototype.hasOwnProperty.call(source, key)
       ) {
         o[key] = source[key];
       }
@@ -201,7 +201,7 @@ export default {
   // ROUNDING
   // //https://medium.com/swlh/how-to-round-to-a-certain-number-of-decimal-places-in-javascript-ed74c471c1b8
   roundAccurately: function(number, decimalPlaces) {
-    if (!number || number == 0 || number == NaN) {
+    if (!number || number == 0 || Number.isNaN(number)) {
       return number;
     }
     const wasNegative = number < 0;
@@ -300,7 +300,7 @@ export default {
 
     //A number already then parse and return
     if (this.isNumeric(string)) {
-      if (string === NaN) {
+      if (Number.isNaN(string)) {
         return 0;
       }
       return parseFloat(string);
@@ -312,7 +312,7 @@ export default {
     }
 
     const ret = parseFloat(string.replace(/[^\d.-]/g, ""));
-    if (ret == NaN) {
+    if (Number.isNaN(ret)) {
       return 0;
     }
 
@@ -324,7 +324,7 @@ export default {
   //
   isNegative: function(v) {
     //null or empty then zero
-    if (!v || v == 0 || v == NaN) {
+    if (!v || v == 0 || Number.isNaN(v)) {
       return false;
     }
     return parseFloat(v) < 0;
@@ -943,25 +943,25 @@ export default {
     const ret = [];
 
     //turn EXCLUDE selected gzDaysOfWeek into INCLUDE selected days for vCalendar
-    if (!!!(dow & 64)) {
+    if (!(dow & 64)) {
       ret.push(0);
     }
-    if (!!!(dow & 1)) {
+    if (!(dow & 1)) {
       ret.push(1);
     }
-    if (!!!(dow & 2)) {
+    if (!(dow & 2)) {
       ret.push(2);
     }
-    if (!!!(dow & 4)) {
+    if (!(dow & 4)) {
       ret.push(3);
     }
-    if (!!!(dow & 8)) {
+    if (!(dow & 8)) {
       ret.push(4);
     }
-    if (!!!(dow & 16)) {
+    if (!(dow & 16)) {
       ret.push(5);
     }
-    if (!!!(dow & 32)) {
+    if (!(dow & 32)) {
       ret.push(6);
     }
     return ret;
diff --git a/ayanova/src/api/initialize.js b/ayanova/src/api/initialize.js
index ef250b6a..714c4421 100644
--- a/ayanova/src/api/initialize.js
+++ b/ayanova/src/api/initialize.js
@@ -862,8 +862,7 @@ async function getUserOptions() {
       "logItem",
       "Initialize::() fetch useroptions -> error" + error
     );
-    // throw new Error(error);
-    throw new Error(window.$gz.errorHandler.errorToString(res));
+    throw new Error(window.$gz.errorHandler.errorToString(error));
   }
 }
 
@@ -871,6 +870,7 @@ async function getUserOptions() {
 // Initialize the app
 // on change of authentication status
 export default function initialize() {
+  // eslint-disable-next-line no-async-promise-executor
   return new Promise(async function(resolve, reject) {
     if (!window.$gz.store.state.authenticated) {
       throw new Error("initialize: Error, called but user not authenticated!");
diff --git a/ayanova/src/api/locale.js b/ayanova/src/api/locale.js
index 6b64e647..333bbe41 100644
--- a/ayanova/src/api/locale.js
+++ b/ayanova/src/api/locale.js
@@ -453,12 +453,7 @@ export default {
   ///////////////////////////////////////////////
   // Get default start date time in api format
   // (this is used to centralize and for future)
-  defaultStartDateTime(ofType) {
-    //ofType in future could be for
-    //different areas having different custom start / top times
-    //so will set that in all callers for future purposes, but
-    //for now, here going to ignore it and just default to now
-    //and now plus one hour
+  defaultStartDateTime() {
     return {
       start: window.$gz.DateTime.local()
         .toUTC()
diff --git a/ayanova/src/api/translation.js b/ayanova/src/api/translation.js
index 713fc007..519acb33 100644
--- a/ayanova/src/api/translation.js
+++ b/ayanova/src/api/translation.js
@@ -10,7 +10,7 @@ export default {
 
     if (editedTranslation) {
       //iterate the keys that are cached and set them from whatever is in editedTranslation for that key
-      for (const [key, value] of Object.entries(
+      for (const [key] of Object.entries(
         window.$gz.store.state.translationText
       )) {
         const display = editedTranslation.translationItems.find(
@@ -55,6 +55,7 @@ export default {
     return window.$gz.store.state.translationText[key];
   },
   async cacheTranslations(keys, forceTranslationId) {
+    // eslint-disable-next-line no-async-promise-executor
     return new Promise(async function fetchTranslationKeysFromServer(resolve) {
       //
       //step 1: build an array of keys that we don't have already
diff --git a/ayanova/src/components/_barebones_template.vue b/ayanova/src/components/_barebones_template.vue
index ba2a7598..2ea44238 100644
--- a/ayanova/src/components/_barebones_template.vue
+++ b/ayanova/src/components/_barebones_template.vue
@@ -9,10 +9,6 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 export default {
-  data() {
-    return {};
-  },
-
   props: {
     value: {
       default: null,
@@ -27,6 +23,10 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {};
+  },
+  computed: {},
 
   methods: {
     form() {
@@ -37,7 +37,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {}
+  }
 };
 </script>
diff --git a/ayanova/src/components/alert-control.vue b/ayanova/src/components/alert-control.vue
index 073855eb..e68dffa8 100644
--- a/ayanova/src/components/alert-control.vue
+++ b/ayanova/src/components/alert-control.vue
@@ -2,9 +2,9 @@
   <v-col v-if="alertMessage" cols="12" mt-1 mb-2>
     <template v-if="popAlert">
       <v-alert
+        v-show="alertMessage"
         ref="alertBox"
         data-cy="alertbox"
-        v-show="alertMessage"
         color="accent"
         type="error"
         icon="$ayiExclamationTriangle"
@@ -15,9 +15,9 @@
     >
     <template v-else>
       <v-alert
+        v-show="alertMessage"
         ref="alertBox"
         data-cy="alertbox"
-        v-show="alertMessage"
         color="primary"
         icon="$ayiInfoCircle"
         class="multi-line"
@@ -29,10 +29,10 @@
 </template>
 <script>
 export default {
-  data: () => ({}),
   props: {
     alertMessage: { type: String, default: null },
     popAlert: { type: Boolean, default: false }
-  }
+  },
+  data: () => ({})
 };
 </script>
diff --git a/ayanova/src/components/attachment-control.vue b/ayanova/src/components/attachment-control.vue
index fc1fc629..4c95ee74 100644
--- a/ayanova/src/components/attachment-control.vue
+++ b/ayanova/src/components/attachment-control.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="mt-6" v-resize="onResize">
+  <div v-resize="onResize" class="mt-6">
     <div>
       <v-btn depressed tile @click="revealedClicked">
         {{ $ay.t("Attachments")
-        }}<v-icon v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'" right></v-icon
+        }}<v-icon right v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"></v-icon
       ></v-btn>
     </div>
 
@@ -52,12 +52,12 @@
               <v-tab-item key="list">
                 <div
                   v-cloak
+                  id="dropDiv"
+                  class="mt-4"
+                  :style="cardTextStyle()"
                   @drop.prevent="onDrop"
                   @dragover.prevent="onDragOver"
                   @dragleave="onDragEnd"
-                  class="mt-4"
-                  :style="cardTextStyle()"
-                  id="dropDiv"
                 >
                   <span v-if="!hasFiles()">{{ $ay.t("DropFilesHere") }}</span>
                   <v-list three-line>
@@ -86,18 +86,18 @@
                       </v-list-item-content>
 
                       <v-list-item-action>
-                        <v-btn large @click="openEditMenu(item, $event)" icon>
+                        <v-btn large icon @click="openEditMenu(item, $event)">
                           <v-icon>$ayiEdit</v-icon>
                         </v-btn>
                       </v-list-item-action>
                     </v-list-item>
                   </v-list>
                 </div>
-                <v-btn depressed tile @click="revealedClicked" class="mt-8">
+                <v-btn depressed tile class="mt-8" @click="revealedClicked">
                   {{ $ay.t("Attachments")
                   }}<v-icon
-                    v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
                     right
+                    v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
                   ></v-icon
                 ></v-btn>
               </v-tab-item>
@@ -123,8 +123,8 @@
             </v-tabs-items>
           </v-tabs>
           <v-menu
-            min-width="360"
             v-model="editMenu"
+            min-width="360"
             :close-on-content-click="false"
             offset-y
             :position-x="menuX"
@@ -144,7 +144,7 @@
                 ></v-text-field>
               </div>
               <v-card-actions>
-                <v-btn @click="remove()" text>
+                <v-btn text @click="remove()">
                   {{ $ay.t("Delete") }}
                 </v-btn>
                 <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
@@ -164,6 +164,11 @@
 </template>
 <script>
 export default {
+  props: {
+    ayaType: { type: Number, default: null },
+    ayaId: { type: Number, default: null },
+    readonly: Boolean
+  },
   data() {
     return {
       reveal: false,
@@ -180,11 +185,6 @@ export default {
       editId: null
     };
   },
-  props: {
-    ayaType: { type: Number, default: null },
-    ayaId: { type: Number, default: null },
-    readonly: Boolean
-  },
   computed: {},
   methods: {
     revealedClicked() {
@@ -361,14 +361,14 @@ export default {
         this.upload();
       }
     },
-    onDragOver(ev) {
+    onDragOver() {
       if (!dropDiv) {
         dropDiv = document.getElementById("dropDiv");
       }
 
       dropDiv.style.border = "4px dashed #00ff00";
     },
-    onDragEnd(ev) {
+    onDragEnd() {
       dropDiv.style.border = "none";
       dropDiv = null;
     }
diff --git a/ayanova/src/components/currency-control.vue b/ayanova/src/components/currency-control.vue
index af6900de..7b67c163 100644
--- a/ayanova/src/components/currency-control.vue
+++ b/ayanova/src/components/currency-control.vue
@@ -2,18 +2,18 @@
   <div>
     <v-text-field
       ref="textField"
-      :value="currencyValue"
-      @input="updateValue"
       v-currency="{
         currency: currencyName,
         locale: languageName
       }"
+      :value="currencyValue"
       :readonly="readonly"
       :disabled="disabled"
       :label="label"
       :rules="rules"
       :error-messages="errorMessages"
       :append-outer-icon="appendOuterIcon"
+      @input="updateValue"
       @click:append-outer="$emit('gz-append-outer')"
     ></v-text-field>
   </div>
@@ -29,15 +29,8 @@
 //which is purported to be exactly what I'm trying to do here with a v-text-field but better I guess??
 //or look at the source for ideas?
 
-import { setValue, parseCurrency } from "vue-currency-input";
+import { parseCurrency } from "vue-currency-input";
 export default {
-  data() {
-    return {
-      currencyName: window.$gz.locale.getCurrencyName(),
-      languageName: window.$gz.locale.getResolvedLanguage(),
-      initializing: true
-    };
-  },
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -47,6 +40,13 @@ export default {
     errorMessages: { type: Array, default: null },
     appendOuterIcon: { type: String, default: null }
   },
+  data() {
+    return {
+      currencyName: window.$gz.locale.getCurrencyName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      initializing: true
+    };
+  },
   computed: {
     currencyValue() {
       return this.value;
diff --git a/ayanova/src/components/custom-fields-control.vue b/ayanova/src/components/custom-fields-control.vue
index 3dd42205..c5b4e7cb 100644
--- a/ayanova/src/components/custom-fields-control.vue
+++ b/ayanova/src/components/custom-fields-control.vue
@@ -13,11 +13,11 @@
             <!-- DATETIME  -->
             <div v-if="item.type === 1">
               <gz-date-time-picker
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -34,11 +34,11 @@
             <!-- DATE -->
             <div v-else-if="item.type === 2">
               <gz-date-picker
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -54,11 +54,11 @@
             <!-- TIME -->
             <div v-else-if="item.type === 3">
               <gz-time-picker
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -74,11 +74,11 @@
             <!-- TEXT -->
             <div v-else-if="item.type === 4">
               <v-textarea
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -96,11 +96,11 @@
             <!-- INTEGER -->
             <div v-else-if="item.type === 5">
               <v-text-field
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -120,11 +120,11 @@
             <!-- BOOL -->
             <div v-else-if="item.type === 6">
               <v-checkbox
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -140,11 +140,11 @@
             <!-- DECIMAL -->
             <div v-else-if="item.type === 7">
               <gz-decimal
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -160,11 +160,11 @@
             <!-- CURRENCY -->
             <div v-else-if="item.type === 8">
               <gz-currency
+                :ref="item.fld"
                 v-model="_self[item.dataKey]"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="$ay.t(item.tKey)"
-                :ref="item.fld"
                 :data-cy="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
                 :rules="[
@@ -190,10 +190,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {};
-  },
-
   props: {
     value: {
       default: "{}",
@@ -208,124 +204,8 @@ export default {
       type: Object
     }
   },
-
-  methods: {
-    form() {
-      //nothing
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (
-        !this.parentVM.formState.loading &&
-        !this.parentVM.formState.readonly
-      ) {
-        window.$gz.form.fieldValueChanged(this.parentVM, ref);
-      }
-    },
-    GetValueForField: function(dataKey) {
-      let cData = {};
-      //get the data out of the JSON string value
-      if (this.value != null) {
-        cData = JSON.parse(this.value);
-      }
-
-      //Custom field types can be changed by the user and cause old entered data to be invalid for that field type
-      //Here we need to take action if the data is of an incompatible type for the control field type and attempt to coerce or simply nullify if not co-ercable the data
-      //  - CURRENT TEXT fields could handle any data so they don't need to be changed
-      //	- CURRENT BOOL fields can only handle empty or true false so they would need to be set null
-      //	- CURRENT TIME, DATE, DATETIME are pretty specific but all use a datetime string so any value not datetime like should be nulled
-      //  - CURRENT NUMBER, CURRENCY are also pretty specific but easy to identify if not fully numeric and then sb nulled or attempt to convert then null if not
-
-      const ctrlType = this.$store.state.formCustomTemplate[this.formKey].find(
-        z => z.dataKey == dataKey
-      ).type;
-
-      //First get current value for the data that came from the server
-      let ret = cData[dataKey];
-      //Only process if value is non-null since all control types can handle null
-      if (ret != null) {
-        //check types that matter
-        /*thes are all types, not necessarily all custom field types
-           NoType = 0,
-        DateTime = 1,
-        Date = 2,
-        Time = 3,
-        Text = 4,
-        Integer = 5,
-        Bool = 6,
-        Decimal = 7,
-        Currency = 8,
-        Tags = 9,
-        Enum = 10,
-        EmailAddress = 11,
-        HTTP = 12,
-        InternalId = 13,
-        MemorySize=14
-        */
-        switch (ctrlType) {
-          //DateLike?
-          case 1:
-          case 2:
-          case 3:
-            //can it be parsed into a date using the same library as the components use?
-            if (!window.$gz.DateTime.fromISO(ret).isValid) {
-              ret = null;
-            }
-            break;
-          case 6:
-            //if it's not already a boolean
-            if (!window.$gz.util.isBoolean(ret)) {
-              //it's not a bool and it's not null, it came from some other data type,
-              //perhaps though, it's a truthy string so check for that before giving up and nulling
-              if (window.$gz.util.isString(ret)) {
-                ret = window.$gz.util.stringToBoolean(ret);
-                break;
-              }
-              if (ret === 1) {
-                ret = true;
-                break;
-              }
-              if (ret === 0) {
-                ret = false;
-                break;
-              }
-            }
-            break;
-          case 8:
-          case 7:
-            if (!window.$gz.util.isNumeric(ret)) {
-              ret = window.$gz.util.stringToFloat(ret);
-
-              break;
-            }
-            break;
-        }
-      }
-
-      return ret;
-    },
-    SetValueForField: function(dataKey, newValue) {
-      //Get the current data out of the json string value
-      //
-      let cData = {};
-      if (this.value != null) {
-        cData = JSON.parse(this.value);
-      }
-
-      if (!window.$gz.util.has(cData, dataKey)) {
-        cData[dataKey] = null;
-      }
-
-      //handle null or undefined
-      if (newValue === null || newValue === undefined) {
-        cData[dataKey] = null;
-      } else {
-        //then set item in the cData
-        cData[dataKey] = newValue.toString();
-      }
-
-      this.$emit("input", JSON.stringify(cData));
-    }
+  data() {
+    return {};
   },
   computed: {
     availableCustomFields() {
@@ -474,6 +354,125 @@ export default {
         this.SetValueForField("c16", newValue);
       }
     }
+  },
+
+  methods: {
+    form() {
+      //nothing
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (
+        !this.parentVM.formState.loading &&
+        !this.parentVM.formState.readonly
+      ) {
+        window.$gz.form.fieldValueChanged(this.parentVM, ref);
+      }
+    },
+    GetValueForField: function(dataKey) {
+      let cData = {};
+      //get the data out of the JSON string value
+      if (this.value != null) {
+        cData = JSON.parse(this.value);
+      }
+
+      //Custom field types can be changed by the user and cause old entered data to be invalid for that field type
+      //Here we need to take action if the data is of an incompatible type for the control field type and attempt to coerce or simply nullify if not co-ercable the data
+      //  - CURRENT TEXT fields could handle any data so they don't need to be changed
+      //	- CURRENT BOOL fields can only handle empty or true false so they would need to be set null
+      //	- CURRENT TIME, DATE, DATETIME are pretty specific but all use a datetime string so any value not datetime like should be nulled
+      //  - CURRENT NUMBER, CURRENCY are also pretty specific but easy to identify if not fully numeric and then sb nulled or attempt to convert then null if not
+
+      const ctrlType = this.$store.state.formCustomTemplate[this.formKey].find(
+        z => z.dataKey == dataKey
+      ).type;
+
+      //First get current value for the data that came from the server
+      let ret = cData[dataKey];
+      //Only process if value is non-null since all control types can handle null
+      if (ret != null) {
+        //check types that matter
+        /*thes are all types, not necessarily all custom field types
+           NoType = 0,
+        DateTime = 1,
+        Date = 2,
+        Time = 3,
+        Text = 4,
+        Integer = 5,
+        Bool = 6,
+        Decimal = 7,
+        Currency = 8,
+        Tags = 9,
+        Enum = 10,
+        EmailAddress = 11,
+        HTTP = 12,
+        InternalId = 13,
+        MemorySize=14
+        */
+        switch (ctrlType) {
+          //DateLike?
+          case 1:
+          case 2:
+          case 3:
+            //can it be parsed into a date using the same library as the components use?
+            if (!window.$gz.DateTime.fromISO(ret).isValid) {
+              ret = null;
+            }
+            break;
+          case 6:
+            //if it's not already a boolean
+            if (!window.$gz.util.isBoolean(ret)) {
+              //it's not a bool and it's not null, it came from some other data type,
+              //perhaps though, it's a truthy string so check for that before giving up and nulling
+              if (window.$gz.util.isString(ret)) {
+                ret = window.$gz.util.stringToBoolean(ret);
+                break;
+              }
+              if (ret === 1) {
+                ret = true;
+                break;
+              }
+              if (ret === 0) {
+                ret = false;
+                break;
+              }
+            }
+            break;
+          case 8:
+          case 7:
+            if (!window.$gz.util.isNumeric(ret)) {
+              ret = window.$gz.util.stringToFloat(ret);
+
+              break;
+            }
+            break;
+        }
+      }
+
+      return ret;
+    },
+    SetValueForField: function(dataKey, newValue) {
+      //Get the current data out of the json string value
+      //
+      let cData = {};
+      if (this.value != null) {
+        cData = JSON.parse(this.value);
+      }
+
+      if (!window.$gz.util.has(cData, dataKey)) {
+        cData[dataKey] = null;
+      }
+
+      //handle null or undefined
+      if (newValue === null || newValue === undefined) {
+        cData[dataKey] = null;
+      } else {
+        //then set item in the cData
+        cData[dataKey] = newValue.toString();
+      }
+
+      this.$emit("input", JSON.stringify(cData));
+    }
   }
 };
 </script>
diff --git a/ayanova/src/components/dash-base.vue b/ayanova/src/components/dash-base.vue
index 33bb1bdf..54981b64 100644
--- a/ayanova/src/components/dash-base.vue
+++ b/ayanova/src/components/dash-base.vue
@@ -140,11 +140,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      timer: ""
-    };
-  },
   props: {
     id: {
       type: String,
@@ -158,6 +153,19 @@ export default {
     maxListItems: { type: Number, default: 10 },
     icon: { type: String, default: "$ayiTachometer" }
   },
+  data() {
+    return {
+      timer: ""
+    };
+  },
+  computed: {
+    hasAddUrl: function() {
+      return this.addUrl && this.addUrl != "";
+    },
+    translatedTitle() {
+      return this.$ay.t(this.title);
+    }
+  },
   created() {
     this.refresh();
     if (this.updateFrequency > 0) {
@@ -169,14 +177,6 @@ export default {
   beforeDestroy() {
     clearInterval(this.timer);
   },
-  computed: {
-    hasAddUrl: function() {
-      return this.addUrl && this.addUrl != "";
-    },
-    translatedTitle() {
-      return this.$ay.t(this.title);
-    }
-  },
   methods: {
     refresh: function() {
       this.$emit("dash-refresh");
diff --git a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue b/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
index 6f749cad..e5fce40d 100644
--- a/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
+++ b/ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue
@@ -4,9 +4,9 @@
     :add-url="'widgets/0'"
     :update-frequency="58000"
     :count="23"
+    v-bind="$attrs"
     @dash-refresh="loadData"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template slot="main">
       <gz-chart-bar-horizontal
@@ -47,14 +47,14 @@ export default {
   components: {
     GzDash
   },
+  props: {},
   data() {
     return {
       obj: {}
     };
   },
-  props: {},
-  created() {},
   computed: {},
+  created() {},
   methods: {
     loadData: function() {
       this.obj = {
diff --git a/ayanova/src/components/dash-test-day-calendar-widget.vue b/ayanova/src/components/dash-test-day-calendar-widget.vue
index 6a9db783..530e0073 100644
--- a/ayanova/src/components/dash-test-day-calendar-widget.vue
+++ b/ayanova/src/components/dash-test-day-calendar-widget.vue
@@ -3,9 +3,9 @@
     icon="$ayiTools"
     :add-url="'widgets/0'"
     :update-frequency="0"
+    v-bind="$attrs"
     @dash-refresh="loadData"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template slot="main">
       <v-calendar
@@ -18,8 +18,8 @@
         interval-width="45"
         :events="events"
         :event-color="getEventColor"
-        @click:event="showEvent"
         :locale="languageName"
+        @click:event="showEvent"
       ></v-calendar>
     </template>
   </gz-dash>
@@ -30,17 +30,17 @@ export default {
   components: {
     GzDash
   },
+  props: {},
   data() {
     return {
       events: [],
       languageName: window.$gz.locale.getResolvedLanguage()
     };
   },
-  props: {},
+  computed: {},
   created() {
     // this.loadData();
   },
-  computed: {},
   methods: {
     loadData: function() {
       const events = [];
diff --git a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue b/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
index 1503fba8..6c7aa43f 100644
--- a/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
+++ b/ayanova/src/components/dash-test-line-widget-monthly-total-price.vue
@@ -3,9 +3,9 @@
     icon="$ayiSplotch"
     :add-url="'widgets/0'"
     :update-frequency="32000"
+    v-bind="$attrs"
     @dash-refresh="loadData"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template slot="main">
       <div class="ml-4 mt-1">
@@ -30,14 +30,14 @@ export default {
   components: {
     GzDash
   },
+  props: {},
   data() {
     return {
       obj: {}
     };
   },
-  props: {},
-  created() {},
   computed: {},
+  created() {},
   methods: {
     loadData: function() {
       this.obj = {
diff --git a/ayanova/src/components/dash-test-list-widgets-priciest.vue b/ayanova/src/components/dash-test-list-widgets-priciest.vue
index 2a859231..3864ddcb 100644
--- a/ayanova/src/components/dash-test-list-widgets-priciest.vue
+++ b/ayanova/src/components/dash-test-list-widgets-priciest.vue
@@ -4,10 +4,10 @@
     :add-url="'widgets/0'"
     :show-more-button="true"
     :update-frequency="60000"
+    v-bind="$attrs"
     @dash-refresh="getDataFromApi()"
     @dash-more-click="moreClick()"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template slot="main">
       <div class="ml-4 mt-1">
@@ -38,6 +38,9 @@ export default {
   components: {
     GzDash
   },
+  props: {
+    maxListItems: { type: Number, default: 10 }
+  },
   data() {
     return {
       obj: [],
@@ -45,11 +48,8 @@ export default {
       languageName: window.$gz.locale.getResolvedLanguage()
     };
   },
-  props: {
-    maxListItems: { type: Number, default: 10 }
-  },
-  created() {},
   computed: {},
+  created() {},
   methods: {
     moreClick() {
       const LIST_FORM_KEY = "widget-list";
diff --git a/ayanova/src/components/data-table-filter-control.vue b/ayanova/src/components/data-table-filter-control.vue
index f7211428..8b14213b 100644
--- a/ayanova/src/components/data-table-filter-control.vue
+++ b/ayanova/src/components/data-table-filter-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
-    max-width="600px"
     v-model="isVisible"
-    @keydown.esc="close()"
+    max-width="600px"
     data-cy="dataTableFilterControl"
+    @keydown.esc="close()"
   >
     <v-card>
       <v-card-title>{{ tableColumnData.text }}</v-card-title>
@@ -42,9 +42,9 @@
                 ></gz-date-time-picker>
               </div>
               <v-btn
+                v-if="editItem.tempFilterToken != null"
                 large
                 block
-                v-if="editItem.tempFilterToken != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -77,9 +77,9 @@
                 :clearable="!formState.readOnly"
               ></v-text-field>
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -112,9 +112,9 @@
                 type="number"
               ></v-text-field>
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -130,12 +130,12 @@
                 prepend-icon="$ayiFilter"
               ></v-select>
               <v-radio-group
-                v-model="editItem.tempFilterValue"
                 v-if="
                   editItem.tempFilterOperator != null &&
                     editItem.tempFilterOperator != '*NOVALUE*' &&
                     editItem.tempFilterOperator != '*HASVALUE*'
                 "
+                v-model="editItem.tempFilterValue"
                 row
               >
                 <v-radio :label="$ay.t('False')" :value="false"></v-radio>
@@ -143,9 +143,9 @@
               </v-radio-group>
 
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -171,9 +171,9 @@
                 :clearable="!formState.readOnly"
               ></gz-decimal>
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -198,9 +198,9 @@
                 :clearable="!formState.readOnly"
               ></gz-currency>
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -222,9 +222,9 @@
               ></gz-tag-picker>
 
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -245,9 +245,9 @@
               ></gz-role-picker>
 
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -276,9 +276,9 @@
               ></v-select>
 
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -302,9 +302,9 @@
                 :readonly="formState.readOnly"
               ></gz-duration-picker>
               <v-btn
+                v-if="editItem.tempFilterOperator != null"
                 large
                 block
-                v-if="editItem.tempFilterOperator != null"
                 @click="addFilterCondition(editItem)"
                 ><v-icon large>$ayiPlus</v-icon></v-btn
               >
@@ -347,23 +347,23 @@
         </template>
       </v-card-text>
       <v-card-actions>
-        <v-btn text @click="close()" color="primary">{{
+        <v-btn text color="primary" @click="close()">{{
           $ay.t("Cancel")
         }}</v-btn>
         <v-spacer />
         <v-btn
           v-if="editItem.filter.items.length > 0"
           text
-          @click="clearAllFilterConditions()"
           color="primary"
+          @click="clearAllFilterConditions()"
           >{{ $ay.t("Delete") }}</v-btn
         >
         <v-spacer />
         <v-btn
           :disabled="formState.dirty == false"
           text
-          @click="saveAndExit()"
           color="primary"
+          @click="saveAndExit()"
           >{{ $ay.t("Save") }}</v-btn
         >
       </v-card-actions>
@@ -373,8 +373,10 @@
 <script>
 export default {
   components: {},
-  async created() {
-    await initForm(this);
+
+  props: {
+    dataListKey: { type: String, default: null },
+    activeFilterId: { type: Number, default: null }
   },
   data: () => ({
     isVisible: false,
@@ -407,10 +409,8 @@ export default {
       serverError: {}
     }
   }),
-
-  props: {
-    dataListKey: { type: String, default: null },
-    activeFilterId: { type: Number, default: null }
+  async created() {
+    await initForm(this);
   },
   methods: {
     async saveAndExit() {
@@ -457,7 +457,7 @@ export default {
         this.activeFilter
       );
       if (res.error) {
-        throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        throw new Error(window.$gz.errorHandler.errorToString(res, this));
       } else {
         this.close({ refresh: true });
       }
@@ -601,7 +601,7 @@ export default {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   populateSelectionLists(vm);
   await populateFieldDefinitions(vm);
 }
@@ -647,7 +647,7 @@ async function fetchActiveFilter(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Filter",
     "GridFilterDialogAndRadioText",
@@ -1029,8 +1029,7 @@ function getDisplayForFilter(
       valueDisplay = window.$gz.locale.decimalLocalized(filterValue);
       break;
     case 6: //BOOL translate
-      const tKey = filterValue ? "True" : "False";
-      valueDisplay = vm.$ay.t(tKey);
+      valueDisplay = vm.$ay.t(filterValue ? "True" : "False");
       break;
     case 10: //ENUM translate
       valueDisplay = window.$gz.enums.get(enumType, filterValue);
@@ -1039,20 +1038,22 @@ function getDisplayForFilter(
       valueDisplay = window.$gz.locale.durationLocalized(filterValue);
       break;
     case 17: //Authorization Roles
-      const availableRoles = window.$gz.enums.getSelectionList(
-        "AuthorizationRoles"
-      ); //will already be cached from viewing datatable
-      const roles = filterValue;
-      const roleNames = [];
-      if (roles != null && roles != 0) {
-        for (let i = 0; i < availableRoles.length; i++) {
-          const role = availableRoles[i];
-          if (!!(roles & role.id)) {
-            roleNames.push(role.name);
+      {
+        const availableRoles = window.$gz.enums.getSelectionList(
+          "AuthorizationRoles"
+        ); //will already be cached from viewing datatable
+        const roles = filterValue;
+        const roleNames = [];
+        if (roles != null && roles != 0) {
+          for (let i = 0; i < availableRoles.length; i++) {
+            const role = availableRoles[i];
+            if (roles & role.id) {
+              roleNames.push(role.name);
+            }
           }
         }
+        valueDisplay = roleNames.join(", ");
       }
-      valueDisplay = roleNames.join(", ");
       break;
     default:
       valueDisplay = filterValue;
diff --git a/ayanova/src/components/data-table-filter-manager-control.vue b/ayanova/src/components/data-table-filter-manager-control.vue
index 751b4dda..019bd8df 100644
--- a/ayanova/src/components/data-table-filter-manager-control.vue
+++ b/ayanova/src/components/data-table-filter-manager-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
-    max-width="600px"
     v-model="isVisible"
-    @keydown.esc="close()"
+    max-width="600px"
     data-cy="dataTableFilterManagerControl"
+    @keydown.esc="close()"
   >
     <v-card>
       <v-card-title>{{ $ay.t("Filter") }} </v-card-title>
@@ -12,38 +12,38 @@
       >
       <v-card-text>
         <v-text-field
-          :readonly="formState.readOnly"
           v-model="activeFilter.name"
+          :readonly="formState.readOnly"
           :label="$ay.t('GridFilterName')"
           required
         ></v-text-field>
         <v-checkbox
+          ref="public"
           v-model="activeFilter.public"
           :readonly="formState.readOnly"
           :label="$ay.t('AnyUser')"
-          ref="public"
           data-cy="public"
         ></v-checkbox>
       </v-card-text>
       <v-card-actions>
-        <v-btn text @click="close()" color="primary">{{
+        <v-btn text color="primary" @click="close()">{{
           $ay.t("Cancel")
         }}</v-btn>
         <v-spacer />
         <template v-if="isSelfOwned">
-          <v-btn text @click="deleteFilter()" color="primary">{{
+          <v-btn text color="primary" @click="deleteFilter()">{{
             $ay.t("Delete")
           }}</v-btn>
           <v-spacer />
         </template>
 
-        <v-btn text @click="saveAndExit(true)" color="primary">{{
+        <v-btn text color="primary" @click="saveAndExit(true)">{{
           $ay.t("SaveACopy")
         }}</v-btn>
 
         <template v-if="activeFilter.defaultFilter == false && isSelfOwned">
           <v-spacer />
-          <v-btn text @click="saveAndExit()" color="primary">{{
+          <v-btn text color="primary" @click="saveAndExit()">{{
             $ay.t("Save")
           }}</v-btn>
         </template>
@@ -54,8 +54,9 @@
 <script>
 export default {
   components: {},
-  async created() {
-    await initForm(this);
+  props: {
+    dataListKey: { type: String, default: null },
+    activeFilterId: { type: Number, default: null }
   },
   data: () => ({
     isVisible: false,
@@ -84,9 +85,8 @@ export default {
       serverError: {}
     }
   }),
-  props: {
-    dataListKey: { type: String, default: null },
-    activeFilterId: { type: Number, default: null }
+  async created() {
+    await initForm(this);
   },
   methods: {
     async deleteFilter() {
@@ -186,8 +186,8 @@ export default {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 ////////////////////
@@ -206,7 +206,7 @@ async function fetchActiveFilter(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations(["GridFilterName", "AnyUser"]);
 }
 </script>
diff --git a/ayanova/src/components/data-table-mobile-filter-column-selector-control.vue b/ayanova/src/components/data-table-mobile-filter-column-selector-control.vue
index 11ac8603..8ad939b1 100644
--- a/ayanova/src/components/data-table-mobile-filter-column-selector-control.vue
+++ b/ayanova/src/components/data-table-mobile-filter-column-selector-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
-    max-width="600px"
     v-model="isVisible"
-    @keydown.esc="close()"
+    max-width="600px"
     data-cy="dataTableMobileFilterColumnSelectorControl"
+    @keydown.esc="close()"
   >
     <v-list>
       <v-subheader>{{ $ay.t("Filter") }}</v-subheader>
diff --git a/ayanova/src/components/data-table.vue b/ayanova/src/components/data-table.vue
index b2787781..7d61ec2b 100644
--- a/ayanova/src/components/data-table.vue
+++ b/ayanova/src/components/data-table.vue
@@ -2,20 +2,20 @@
   <div>
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <gz-data-table-filter
+      ref="dataTableFilter"
       :data-list-key="dataListKey"
       :active-filter-id="activeFilterId"
-      ref="dataTableFilter"
     >
     </gz-data-table-filter>
     <gz-data-table-filter-manager
+      ref="dataTableFilterManager"
       :data-list-key="dataListKey"
       :active-filter-id="activeFilterId"
-      ref="dataTableFilterManager"
     >
     </gz-data-table-filter-manager>
     <gz-data-table-mobile-filter-column-selector
-      :headers="headers"
       ref="dataTableMobileFilterColumnSelector"
+      :headers="headers"
     >
     </gz-data-table-mobile-filter-column-selector>
     <v-card>
@@ -25,7 +25,7 @@
             <v-btn text @click="preFilterNav()">
               <v-icon data-cy="clickThru">{{ preFilterMode.icon }}</v-icon>
             </v-btn>
-            <span @click="preFilterNav()" class="text-h5">
+            <span class="text-h5" @click="preFilterNav()">
               {{ preFilterMode.viz }}</span
             >
             <v-btn
@@ -44,12 +44,12 @@
             item-text="name"
             item-value="id"
             :label="$ay.t('Filter')"
-            @input="selectedFilterChanged"
             prepend-icon="$ayiEdit"
-            @click:prepend="editFilter()"
             :append-outer-icon="clearFilterIcon()"
-            @click:append-outer="clearFilter(true)"
             data-cy="selectSavedFilter"
+            @input="selectedFilterChanged"
+            @click:prepend="editFilter()"
+            @click:append-outer="clearFilter(true)"
           >
           </v-select>
         </template>
@@ -61,8 +61,8 @@
           </v-btn>
 
           <v-btn
-            text
             v-if="$vuetify.breakpoint.xs"
+            text
             class="ml-12"
             @click="mobileColumnFilterSelect"
           >
@@ -79,8 +79,8 @@
         </div>
       </v-card-title>
       <div
-        class="text-h5 ml-3 accent--text"
         v-if="!loading && records.length < 1"
+        class="text-h5 ml-3 accent--text"
       >
         {{ $ay.t("NoData") }}
       </div>
@@ -92,9 +92,9 @@
         -->
       <template v-if="$vuetify.breakpoint.smAndUp">
         <v-data-table
+          v-model="selected"
           :headers="headers"
           :items="records"
-          v-model="selected"
           :options.sync="dataTablePagingOptions"
           :server-items-length="totalRecords"
           :loading="loading"
@@ -120,8 +120,8 @@
               <v-btn
                 v-if="h.flt"
                 icon
-                @click.stop="filter(h)"
                 class="ml-n4 mr-1"
+                @click.stop="filter(h)"
                 ><v-icon :color="filterColor(h)">$ayiFilter</v-icon></v-btn
               >
               {{ h.text }}
@@ -299,9 +299,9 @@
         -->
       <template v-else>
         <v-data-table
+          v-model="selected"
           :headers="headers"
           :items="records"
-          v-model="selected"
           :options.sync="dataTablePagingOptions"
           :server-items-length="totalRecords"
           :loading="loading"
@@ -345,9 +345,9 @@
                   </template>
                   <v-list dense>
                     <v-list-item
-                      two-line
                       v-for="c in item.columns"
                       :key="c.key"
+                      two-line
                     >
                       <v-list-item-content>
                         <v-list-item-title>
@@ -519,6 +519,34 @@
 //has duplicate values in it and should be unique in every row
 const MAX_TEXT_COLUMN_LENGTH = 1024;
 export default {
+  props: {
+    formKey: { type: String, default: null },
+    dataListKey: { type: String, default: null },
+    clientCriteria: {
+      type: String,
+      default: undefined
+    },
+    preFilterMode: {
+      type: Object,
+      default: null
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    },
+    singleSelect: {
+      type: Boolean,
+      default: false
+    },
+    reload: {
+      type: Boolean,
+      default: false
+    },
+    ridColumnOpenable: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       loading: true,
@@ -550,34 +578,6 @@ export default {
       }
     };
   },
-  props: {
-    formKey: { type: String, default: null },
-    dataListKey: { type: String, default: null },
-    clientCriteria: {
-      type: String,
-      default: undefined
-    },
-    preFilterMode: {
-      type: Object,
-      default: null
-    },
-    showSelect: {
-      type: Boolean,
-      default: false
-    },
-    singleSelect: {
-      type: Boolean,
-      default: false
-    },
-    reload: {
-      type: Boolean,
-      default: false
-    },
-    ridColumnOpenable: {
-      type: Boolean,
-      default: true
-    }
-  },
   watch: {
     dataTablePagingOptions: {
       async handler() {
@@ -645,6 +645,13 @@ export default {
       }
     }
   },
+  async created() {
+    //get pick lists
+    const vm = this;
+    await initForm(vm);
+    vm.loading = false;
+    vm.getDataFromApi();
+  },
   methods: {
     ensureUrlFormat: function(u) {
       if (u && u.length > 0) {
@@ -699,8 +706,8 @@ export default {
         `data-list-filter/${this.activeFilterId}`
       );
       if (res.error) {
-        vm.formState.serverError = res.error;
-        window.$gz.form.setErrorBoxErrors(vm);
+        this.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(this);
       } else {
         await fetchSavedFilterList(this);
         if (reloadData) {
@@ -747,7 +754,7 @@ export default {
       const sortBy = [];
       const sortDesc = [];
       if (rsort != null) {
-        Object.keys(rsort).forEach((key, index) => {
+        Object.keys(rsort).forEach(key => {
           //Pull column header name "value" from "fk"matching "key" here  from this.headers columns.c0 etc here from this.headers see above method
           const found = this.headers.find(z => z.fk == key);
           if (found != null) {
@@ -961,13 +968,6 @@ export default {
         });
       }
     }
-  },
-  async created() {
-    //get pick lists
-    const vm = this;
-    await initForm(vm);
-    vm.loading = false;
-    vm.getDataFromApi();
   }
 };
 
@@ -1161,24 +1161,25 @@ async function buildRecords(listData, columndefinitions, ridColumnOpenable) {
             display = window.$gz.locale.durationLocalized(display, true); //duration localized with no seconds
             break;
           case 17: //Authorization Roles
-            if (availableRoles == null) {
-              availableRoles = window.$gz.enums.getSelectionList(
-                "AuthorizationRoles"
-              );
-            }
-            const roles = display;
-            const roleNames = [];
+            {
+              if (availableRoles == null) {
+                availableRoles = window.$gz.enums.getSelectionList(
+                  "AuthorizationRoles"
+                );
+              }
+              const roles = display;
+              const roleNames = [];
 
-            if (roles != null && roles != 0) {
-              for (let i = 0; i < availableRoles.length; i++) {
-                const role = availableRoles[i];
-                if (!!(roles & role.id)) {
-                  roleNames.push(role.name);
+              if (roles != null && roles != 0) {
+                for (let i = 0; i < availableRoles.length; i++) {
+                  const role = availableRoles[i];
+                  if (roles & role.id) {
+                    roleNames.push(role.name);
+                  }
                 }
               }
+              display = roleNames.join(", ");
             }
-            display = roleNames.join(", ");
-
             break;
           default:
           //do nothing, allow it to stay as is (checkbox, plain text etc)
diff --git a/ayanova/src/components/date-control.vue b/ayanova/src/components/date-control.vue
index 11d6a96a..23ed8b6f 100644
--- a/ayanova/src/components/date-control.vue
+++ b/ayanova/src/components/date-control.vue
@@ -7,20 +7,20 @@
             <v-dialog v-model="dlgdate" width="300px">
               <template v-slot:activator="{ on }">
                 <v-text-field
-                  v-on="on"
                   prepend-icon="$ayiCalendarAlt"
-                  @click:prepend="dlgdate = true"
                   :value="dateValue"
                   :label="label"
                   :rules="rules"
                   readonly
                   :error="!!hasErrors"
+                  v-on="on"
+                  @click:prepend="dlgdate = true"
                 ></v-text-field>
               </template>
               <v-date-picker
                 :value="dateValue"
-                @input="updateDateValue"
                 :locale="languageName"
+                @input="updateDateValue"
               >
                 <v-btn text color="primary" @click="$emit('input', null)">{{
                   $ay.t("Delete")
@@ -43,7 +43,6 @@
             <v-text-field
               ref="dateField"
               :value="dateValue"
-              @change="updateDateValue"
               :readonly="readonly"
               :disabled="disabled"
               :label="label"
@@ -51,6 +50,7 @@
               type="date"
               :error-messages="errorMessages"
               :data-cy="`${dataCy}:time`"
+              @change="updateDateValue"
             ></v-text-field>
           </v-col>
         </template>
@@ -76,11 +76,6 @@
 <script>
 //******************************** NOTE: this control also captures the TIME even though it's DATE only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
 export default {
-  data: () => ({
-    dlgdate: false,
-    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-    languageName: window.$gz.locale.getResolvedLanguage()
-  }),
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -90,6 +85,11 @@ export default {
     disabled: { type: Boolean, default: false },
     dataCy: { type: String, default: null }
   },
+  data: () => ({
+    dlgdate: false,
+    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+    languageName: window.$gz.locale.getResolvedLanguage()
+  }),
   computed: {
     hasErrors() {
       return this.errorMessages != null && this.errorMessages.length > 0;
diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue
index 494d9b3f..6d5c98cf 100644
--- a/ayanova/src/components/date-time-control.vue
+++ b/ayanova/src/components/date-time-control.vue
@@ -8,20 +8,20 @@
               <v-dialog v-model="dlgdate" width="300px">
                 <template v-slot:activator="{ on }">
                   <v-text-field
-                    v-on="on"
                     prepend-icon="$ayiCalendarAlt"
-                    @click:prepend="dlgdate = true"
                     :value="dateValue"
                     :label="label"
                     :rules="rules"
                     readonly
                     :error="!!hasErrors"
+                    v-on="on"
+                    @click:prepend="dlgdate = true"
                   ></v-text-field>
                 </template>
                 <v-date-picker
                   :value="dateValue"
-                  @input="updateDateValue"
                   :locale="languageName"
+                  @input="updateDateValue"
                 >
                   <v-btn text color="primary" @click="$emit('input', null)">{{
                     $ay.t("Delete")
@@ -41,13 +41,13 @@
               <v-dialog v-model="dlgtime" width="300px">
                 <template v-slot:activator="{ on }">
                   <v-text-field
-                    v-on="on"
                     :value="readonlyTimeFormat()"
                     label
                     prepend-icon="$ayiClock"
-                    @click:prepend="dlgtime = true"
                     readonly
                     :error="!!hasErrors"
+                    v-on="on"
+                    @click:prepend="dlgtime = true"
                   ></v-text-field>
                 </template>
                 <v-time-picker
@@ -77,7 +77,6 @@
               <v-text-field
                 ref="dateField"
                 :value="dateValue"
-                @change="updateDateValue"
                 :readonly="readonly"
                 :disabled="disabled"
                 :label="label"
@@ -85,17 +84,18 @@
                 type="date"
                 :error-messages="errorMessages"
                 :data-cy="`${dataCy}:date`"
+                @change="updateDateValue"
               ></v-text-field>
             </v-col>
             <v-col cols="6">
               <v-text-field
                 ref="timeField"
                 :value="timeValue"
-                @change="updateTimeValue"
                 :readonly="readonly"
                 :disabled="disabled"
                 type="time"
                 :data-cy="`${dataCy}:time`"
+                @change="updateTimeValue"
               ></v-text-field>
             </v-col>
           </template>
@@ -121,14 +121,6 @@
 </template>
 <script>
 export default {
-  data: () => ({
-    nativeInput: true,
-    dlgdate: false,
-    dlgtime: false,
-    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-    languageName: window.$gz.locale.getResolvedLanguage(),
-    hour12: window.$gz.locale.getHour12()
-  }),
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -138,6 +130,14 @@ export default {
     disabled: { type: Boolean, default: false },
     dataCy: { type: String, default: null }
   },
+  data: () => ({
+    nativeInput: true,
+    dlgdate: false,
+    dlgtime: false,
+    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+    languageName: window.$gz.locale.getResolvedLanguage(),
+    hour12: window.$gz.locale.getHour12()
+  }),
   computed: {
     hasErrors() {
       return this.errorMessages != null && this.errorMessages.length > 0;
diff --git a/ayanova/src/components/days-of-week-control.vue b/ayanova/src/components/days-of-week-control.vue
index 2862be27..9ccaa831 100644
--- a/ayanova/src/components/days-of-week-control.vue
+++ b/ayanova/src/components/days-of-week-control.vue
@@ -7,13 +7,13 @@
     chips
     deletable-chips
     :value="selectedValue"
-    @input="handleInput"
     :readonly="readonly"
     :disabled="disabled"
     :label="label"
     :rules="rules"
     :error-messages="errorMessages"
     :data-cy="'dayinput:' + testId"
+    @input="handleInput"
   ></v-select>
 </template>
 <script>
@@ -21,16 +21,6 @@
 //https://stackoverflow.com/a/24174625/8939
 
 export default {
-  async created() {
-    await window.$gz.enums.fetchEnumList("AyaDaysOfWeek");
-    this.daysOfWeek = window.$gz.enums.getSelectionList("AyaDaysOfWeek", true);
-  },
-  data() {
-    return {
-      internalValue: null,
-      daysOfWeek: []
-    };
-  },
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -40,13 +30,19 @@ export default {
     disabled: { type: Boolean, default: false },
     testId: { type: String, default: null }
   },
+  data() {
+    return {
+      internalValue: null,
+      daysOfWeek: []
+    };
+  },
   computed: {
     selectedValue() {
       const ret = [];
       if (this.value != null && this.value != 0) {
         for (let i = 0; i < this.daysOfWeek.length; i++) {
           const day = this.daysOfWeek[i];
-          if (!!(this.value & day.id)) {
+          if (this.value & day.id) {
             ret.push(day.id);
           }
         }
@@ -54,6 +50,10 @@ export default {
       return ret;
     }
   },
+  async created() {
+    await window.$gz.enums.fetchEnumList("AyaDaysOfWeek");
+    this.daysOfWeek = window.$gz.enums.getSelectionList("AyaDaysOfWeek", true);
+  },
   methods: {
     handleInput(value) {
       let newValue = 0;
diff --git a/ayanova/src/components/decimal-control.vue b/ayanova/src/components/decimal-control.vue
index 3116ad9a..d03a3474 100644
--- a/ayanova/src/components/decimal-control.vue
+++ b/ayanova/src/components/decimal-control.vue
@@ -2,18 +2,18 @@
   <div>
     <v-text-field
       ref="textField"
-      :value="currencyValue"
-      @input="updateValue"
       v-currency="{
         currency: null,
         locale: languageName,
         precision: precision
       }"
+      :value="currencyValue"
       :readonly="readonly"
       :disabled="disabled"
       :label="label"
       :rules="rules"
       :error-messages="errorMessages"
+      @input="updateValue"
     ></v-text-field>
   </div>
 </template>
@@ -23,13 +23,8 @@
 //https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
 //https://github.com/dm4t2/vue-currency-input
 //https://github.com/dm4t2/vue-currency-input/releases
-import { setValue, parseCurrency } from "vue-currency-input";
+import { parseCurrency } from "vue-currency-input";
 export default {
-  data() {
-    return {
-      languageName: window.$gz.locale.getResolvedLanguage()
-    };
-  },
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -39,6 +34,11 @@ export default {
     errorMessages: { type: Array, default: null },
     precision: { type: Number, default: undefined }
   },
+  data() {
+    return {
+      languageName: window.$gz.locale.getResolvedLanguage()
+    };
+  },
   computed: {
     currencyValue() {
       return this.value;
diff --git a/ayanova/src/components/duration-control.vue b/ayanova/src/components/duration-control.vue
index 6603da06..6a0fdbcc 100644
--- a/ayanova/src/components/duration-control.vue
+++ b/ayanova/src/components/duration-control.vue
@@ -10,53 +10,53 @@
             v-show="showDays"
             ref="daysPicker"
             :value="splitSpan.days"
-            @input="updateSpan()"
             :readonly="readonly"
             :disabled="disabled"
             :label="$ay.t('TimeSpanDays')"
             type="number"
             :data-cy="`${dataCy}:days`"
             :error="!!hasErrors"
+            @input="updateSpan()"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
           <v-text-field
-            :value="splitSpan.hours"
             ref="hoursPicker"
-            @input="updateSpan()"
+            :value="splitSpan.hours"
             :readonly="readonly"
             :disabled="disabled"
             :label="$ay.t('TimeSpanHours')"
             type="number"
             :data-cy="`${dataCy}:hours`"
             :error="!!hasErrors"
+            @input="updateSpan()"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
           <v-text-field
-            :value="splitSpan.minutes"
             ref="minutesPicker"
-            @input="updateSpan()"
+            :value="splitSpan.minutes"
             :readonly="readonly"
             :disabled="disabled"
             :label="$ay.t('TimeSpanMinutes')"
             type="number"
             :data-cy="`${dataCy}:minutes`"
             :error="!!hasErrors"
+            @input="updateSpan()"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
           <v-text-field
             v-show="showSeconds"
-            :value="splitSpan.seconds"
             ref="secondsPicker"
-            @input="updateSpan()"
+            :value="splitSpan.seconds"
             :readonly="readonly"
             :disabled="disabled"
             :label="$ay.t('TimeSpanSeconds')"
             type="number"
             :data-cy="`${dataCy}:seconds`"
             :error="!!hasErrors"
+            @input="updateSpan()"
           ></v-text-field>
         </v-col>
       </v-row>
diff --git a/ayanova/src/components/email-control.vue b/ayanova/src/components/email-control.vue
index dfc6d5e4..db7329d8 100644
--- a/ayanova/src/components/email-control.vue
+++ b/ayanova/src/components/email-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-text-field
     v-bind="$attrs"
-    v-on="$listeners"
     type="email"
     prepend-icon="$ayiAt"
+    v-on="$listeners"
     @click:prepend="openUrl"
   ></v-text-field>
 </template>
diff --git a/ayanova/src/components/error-control.vue b/ayanova/src/components/error-control.vue
index f0fae286..f169e49a 100644
--- a/ayanova/src/components/error-control.vue
+++ b/ayanova/src/components/error-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-col v-if="errorBoxMessage" cols="12" mt-1 mb-2>
     <v-alert
+      v-show="errorBoxMessage"
       ref="generalerror"
       data-cy="generalerror"
-      v-show="errorBoxMessage"
       color="error"
       icon="$ayiExclamationTriangle"
       class="multi-line"
@@ -14,9 +14,9 @@
 </template>
 <script>
 export default {
-  data: () => ({}),
   props: {
     errorBoxMessage: { type: String, default: null }
-  }
+  },
+  data: () => ({})
 };
 </script>
diff --git a/ayanova/src/components/extension-delete-control.vue b/ayanova/src/components/extension-delete-control.vue
index 326d7499..2517d1ba 100644
--- a/ayanova/src/components/extension-delete-control.vue
+++ b/ayanova/src/components/extension-delete-control.vue
@@ -15,8 +15,8 @@
         :disabled="!canDoAction()"
         color="blue darken-1"
         text
-        @click="doAction()"
         :loading="jobActive"
+        @click="doAction()"
         >{{ $ay.t("StartJob") }}</v-btn
       >
     </v-expansion-panel-content>
@@ -24,9 +24,17 @@
 </template>
 <script>
 export default {
+  props: {
+    dataListSelection: { type: Object, default: null }
+  },
+  data: () => ({
+    jobActive: false,
+    rights: window.$gz.role.defaultRightsObject(),
+    available: false
+  }),
   async created() {
     const vm = this;
-    await fetchTranslatedText(vm);
+    await fetchTranslatedText();
     //NOTE: if extension doesn't support a particular object add it here to the NoType default
     if (
       vm.dataListSelection.AType != 0 &&
@@ -36,11 +44,6 @@ export default {
     }
     vm.available = vm.rights.change;
   },
-  data: () => ({
-    jobActive: false,
-    rights: window.$gz.role.defaultRightsObject(),
-    available: false
-  }),
   methods: {
     goHelp() {
       window.open(this.$store.state.helpUrl + "ay-ex-delete", "_blank");
@@ -107,9 +110,6 @@ export default {
         window.$gz.eventBus.$emit("notify-error", vm.$ay.t("JobFailed"));
       }
     }
-  },
-  props: {
-    dataListSelection: { type: Object, default: null }
   }
 };
 
@@ -117,7 +117,7 @@ export default {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "EraseMultipleObjectsWarning"
   ]);
diff --git a/ayanova/src/components/extension-export-control.vue b/ayanova/src/components/extension-export-control.vue
index d7b385ff..0edab67e 100644
--- a/ayanova/src/components/extension-export-control.vue
+++ b/ayanova/src/components/extension-export-control.vue
@@ -20,6 +20,9 @@
 </template>
 <script>
 export default {
+  props: {
+    dataListSelection: { type: Object, default: null }
+  },
   data: () => ({
     exportFormat: "json",
     jobActive: false
@@ -58,9 +61,6 @@ export default {
         window.$gz.eventBus.$emit("notify-error", this.$ay.t("JobFailed"));
       }
     }
-  },
-  props: {
-    dataListSelection: { type: Object, default: null }
   }
 };
 </script>
diff --git a/ayanova/src/components/extension-tags-control.vue b/ayanova/src/components/extension-tags-control.vue
index c4484c7c..21ce7507 100644
--- a/ayanova/src/components/extension-tags-control.vue
+++ b/ayanova/src/components/extension-tags-control.vue
@@ -19,12 +19,12 @@
           ></v-text-field>
         </v-col>
 
-        <v-col cols="12" v-if="action == 'Replace'">
+        <v-col v-if="action == 'Replace'" cols="12">
           <v-text-field
             :value="replace"
             :label="$ay.t('Replace')"
-            @input="normalizeReplace"
             required
+            @input="normalizeReplace"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -33,8 +33,8 @@
         :disabled="!canDoAction()"
         color="blue darken-1"
         text
-        @click="doAction()"
         :loading="jobActive"
+        @click="doAction()"
         >{{ $ay.t("StartJob") }}</v-btn
       >
     </v-expansion-panel-content>
@@ -42,6 +42,17 @@
 </template>
 <script>
 export default {
+  props: {
+    dataListSelection: { type: Object, default: null }
+  },
+  data: () => ({
+    action: "Add",
+    tag: null,
+    replace: null,
+    jobActive: false,
+    rights: window.$gz.role.defaultRightsObject(),
+    available: false
+  }),
   created() {
     const vm = this;
 
@@ -53,14 +64,6 @@ export default {
     }
     vm.available = vm.rights.change;
   },
-  data: () => ({
-    action: "Add",
-    tag: null,
-    replace: null,
-    jobActive: false,
-    rights: window.$gz.role.defaultRightsObject(),
-    available: false
-  }),
   methods: {
     goHelp() {
       window.open(this.$store.state.helpUrl + "ay-ex-tags", "_blank");
@@ -134,8 +137,11 @@ export default {
       value = value.split(" ").join("-");
       //Remove multiple dash sequences
       value = value.replace(/-+/g, "-");
+
       //Ensure doesn't start or end with a dash
-      value = value.replace(/^\-+-\-+$/g, "");
+      //linter says this is an unnecessary escape character so going with it but if issues with tag normalization here's maybe the culprit
+      //value = value.replace(/^\-+-\-+$/g, "");
+      value = value.replace(/^-+--+$/g, "");
       return value;
     },
     normalizeTag(value) {
@@ -146,9 +152,6 @@ export default {
       value = this.normalize(value);
       this.replace = value;
     }
-  },
-  props: {
-    dataListSelection: { type: Object, default: null }
   }
 };
 </script>
diff --git a/ayanova/src/components/extensions-control.vue b/ayanova/src/components/extensions-control.vue
index ad131d0f..e4276786 100644
--- a/ayanova/src/components/extensions-control.vue
+++ b/ayanova/src/components/extensions-control.vue
@@ -25,14 +25,14 @@
           <ExtensionTags :data-list-selection="dataListSelection" />
           <ExtensionExport :data-list-selection="dataListSelection" />
           <ExtensionDelete
+            :data-list-selection="dataListSelection"
             @ext-close-refresh="close({ refresh: true })"
             @ext-show-job-log="handleError($event)"
-            :data-list-selection="dataListSelection"
           />
         </v-expansion-panels>
       </v-card-text>
       <v-card-actions>
-        <v-btn text @click="close()" color="primary">{{
+        <v-btn text color="primary" @click="close()">{{
           $ay.t("Close")
         }}</v-btn>
       </v-card-actions>
@@ -50,9 +50,6 @@ export default {
     ExtensionExport,
     ExtensionDelete
   },
-  async created() {
-    await initForm(this);
-  },
   data: () => ({
     isVisible: false,
     resolve: null,
@@ -68,6 +65,9 @@ export default {
     languageName: window.$gz.locale.getResolvedLanguage(),
     hour12: window.$gz.locale.getHour12()
   }),
+  async created() {
+    await initForm(this);
+  },
   methods: {
     titleText() {
       if (this.dataListSelection.selectedRowIds.length < 1) {
@@ -141,7 +141,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations(["TimeStamp", "ID", "Status"]);
 }
 
diff --git a/ayanova/src/components/gzconfirm.vue b/ayanova/src/components/gzconfirm.vue
index 3e2edffd..d8ad763b 100644
--- a/ayanova/src/components/gzconfirm.vue
+++ b/ayanova/src/components/gzconfirm.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="text-center">
     <v-dialog
-      persistent
       v-model="isVisible"
+      persistent
       :max-width="maxWidth"
       :width="width"
-      @keydown.esc="cancel"
       data-cy="gzconfirm"
+      @keydown.esc="cancel"
     >
       <v-card elevation="24">
         <v-card-title class="text-h6 text-sm-h5 grey lighten-4">
@@ -37,9 +37,9 @@
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn
+            v-if="options.helpUrl"
             data-cy="gzconfirm:morebutton"
             text
-            v-if="options.helpUrl"
             @click="helpClick()"
           >
             {{ this.$root.$gz.translation.get("More") }}
@@ -48,15 +48,15 @@
             v-if="options.noButtonText"
             color="primary"
             text
-            @click.native="cancel"
             data-cy="gzconfirm:nobutton"
+            @click.native="cancel"
             >{{ options.noButtonText }}</v-btn
           >
           <v-btn
             color="primary"
             text
-            @click.native="agree"
             data-cy="gzconfirm:yesbutton"
+            @click.native="agree"
             >{{ options.yesButtonText }}</v-btn
           >
         </v-card-actions>
diff --git a/ayanova/src/components/gznotify.vue b/ayanova/src/components/gznotify.vue
index 160845e3..07eb27eb 100644
--- a/ayanova/src/components/gznotify.vue
+++ b/ayanova/src/components/gznotify.vue
@@ -10,9 +10,9 @@
     </v-alert>
 
     <v-btn
+      v-if="currentNotification.helpUrl"
       data-cy="gznotify:morebutton"
       text
-      v-if="currentNotification.helpUrl"
       @click="helpClick()"
     >
       {{ this.$root.$gz.translation.get("More") }}
diff --git a/ayanova/src/components/percent-control.vue b/ayanova/src/components/percent-control.vue
index 278135fa..54313245 100644
--- a/ayanova/src/components/percent-control.vue
+++ b/ayanova/src/components/percent-control.vue
@@ -2,19 +2,19 @@
   <div>
     <v-text-field
       ref="textField"
-      :value="currencyValue"
-      @input="updateValue"
       v-currency="{
         currency: null,
         locale: languageName,
         precision: precision
       }"
+      :value="currencyValue"
       :readonly="readonly"
       :disabled="disabled"
       :label="label"
       :rules="rules"
       :error-messages="errorMessages"
       append-icon="$ayiPercent"
+      @input="updateValue"
     ></v-text-field>
   </div>
 </template>
@@ -24,13 +24,8 @@
 //https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
 //https://github.com/dm4t2/vue-currency-input
 //https://github.com/dm4t2/vue-currency-input/releases
-import { setValue, parseCurrency } from "vue-currency-input";
+import { parseCurrency } from "vue-currency-input";
 export default {
-  data() {
-    return {
-      languageName: window.$gz.locale.getResolvedLanguage()
-    };
-  },
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -40,6 +35,11 @@ export default {
     errorMessages: { type: Array, default: null },
     precision: { type: Number, default: 3 }
   },
+  data() {
+    return {
+      languageName: window.$gz.locale.getResolvedLanguage()
+    };
+  },
   computed: {
     currencyValue() {
       return this.value;
diff --git a/ayanova/src/components/phone-control.vue b/ayanova/src/components/phone-control.vue
index ac52e563..8a71d34a 100644
--- a/ayanova/src/components/phone-control.vue
+++ b/ayanova/src/components/phone-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-text-field
     v-bind="$attrs"
-    v-on="$listeners"
     type="tel"
     prepend-icon="$ayiPhoneAlt"
+    v-on="$listeners"
     @click:prepend="openUrl"
   ></v-text-field>
 </template>
diff --git a/ayanova/src/components/pick-list.vue b/ayanova/src/components/pick-list.vue
index 1200afbf..fa6884e4 100644
--- a/ayanova/src/components/pick-list.vue
+++ b/ayanova/src/components/pick-list.vue
@@ -2,7 +2,6 @@
   <div>
     <v-autocomplete
       :value="value"
-      @input="selectionMade($event)"
       :readonly="readonly"
       :disabled="disabled"
       return-object
@@ -23,10 +22,11 @@
       :clearable="!readonly && canClear"
       :no-filter="isTagFilter"
       :append-icon="errorIcon"
+      @input="selectionMade($event)"
       @click:append="handleErrorClick"
       @mousedown="dropdown"
     >
-      <template v-slot:prepend-item v-if="hasError()">
+      <template v-if="hasError()" v-slot:prepend-item>
         <div class="pl-2">
           <span class="error--text"> {{ entryError }}</span>
         </div>
@@ -40,21 +40,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.fetchValueIfNotPresent();
-  },
-  data() {
-    return {
-      searchResults: [],
-      entryError: null,
-      searchEntry: null,
-      lastSelection: null,
-      fetching: false,
-      isTagFilter: false,
-      errorIcon: null,
-      initialized: false
-    };
-  },
   props: {
     value: {
       type: Number,
@@ -95,6 +80,18 @@ export default {
       default: null
     }
   },
+  data() {
+    return {
+      searchResults: [],
+      entryError: null,
+      searchEntry: null,
+      lastSelection: null,
+      fetching: false,
+      isTagFilter: false,
+      errorIcon: null,
+      initialized: false
+    };
+  },
   watch: {
     ayaType(val, oldVal) {
       if (val != oldVal && oldVal != null) {
@@ -105,10 +102,10 @@ export default {
         this.initialized = false;
       }
     },
-    value(val) {
+    value() {
       this.fetchValueIfNotPresent();
     },
-    searchEntry(val, oldVal) {
+    searchEntry(val) {
       this.clearErrors();
       //if the search entry is in the results list then it's a drop down selection not a typed search so bail
       for (let i = 0; i < this.searchResults.length; i++) {
@@ -126,7 +123,7 @@ export default {
       }
       this.doSearch(val);
     },
-    entryError(val) {
+    entryError() {
       if (this.hasError()) {
         this.errorIcon = "$ayiQuestionCircle";
       } else {
@@ -134,6 +131,9 @@ export default {
       }
     }
   },
+  created() {
+    this.fetchValueIfNotPresent();
+  },
   methods: {
     //Get full selection for use on forms where we need the
     //full selection including name, active, id
@@ -232,7 +232,7 @@ export default {
       //Not there so insert it
       this.searchResults.push(this.lastSelection);
     },
-    dropdown(e) {
+    dropdown() {
       const vm = this;
       //check if we have only the initial loaded item and no selection item
       if (vm.searchResults.length < 3) {
@@ -240,7 +240,7 @@ export default {
         vm.getList();
       }
     },
-    customFilter(item, queryText, itemText) {
+    customFilter(item, queryText) {
       //NOTE: I wanted this to work with tags but all it does is highlight all of each row if tag query is present
       //I guess because it later on attempts to do the highlighting and can't find all the entered query
       //it's not clean so I'm just going to make it only highlight if it's a non tag query for now
@@ -286,7 +286,7 @@ export default {
         );
 
         this.fetching = false;
-        if (!res.hasOwnProperty("data")) {
+        if (!Object.prototype.hasOwnProperty.call(res, "data")) {
           return Promise.reject(res);
         }
         this.searchResults = res.data;
diff --git a/ayanova/src/components/pm-header.vue b/ayanova/src/components/pm-header.vue
index 9c5fa6d9..969a492b 100644
--- a/ayanova/src/components/pm-header.vue
+++ b/ayanova/src/components/pm-header.vue
@@ -2,17 +2,17 @@
   <div>
     <v-row>
       <v-col
+        v-if="value.serial != 0 && canEditSerial"
         cols="12"
         sm="6"
         lg="4"
         xl="3"
-        v-if="value.serial != 0 && canEditSerial"
       >
         <v-text-field
+          ref="serial"
           v-model="value.serial"
           :readonly="formState.readOnly"
           :label="$ay.t('PMSerialNumber')"
-          ref="serial"
           data-cy="serial"
           :rules="[
             form().integerValid(this, 'serial'),
@@ -24,13 +24,13 @@
       </v-col>
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-pick-list
+          ref="customerId"
+          v-model="value.customerId"
           :aya-type="$ay.ayt().Customer"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.customerId"
           :readonly="formState.readOnly || value.userIsRestrictedType"
           :label="$ay.t('Customer')"
           :can-clear="false"
-          ref="customerId"
           data-cy="customerId"
           :rules="[form().required(this, 'customerId')]"
           :error-messages="form().serverErrors(this, 'customerId')"
@@ -62,25 +62,25 @@
         <v-row>
           <v-col cols="5">
             <v-text-field
+              ref="repeatInterval"
               v-model="value.repeatInterval"
               :readonly="formState.readOnly"
               :label="$ay.t('RepeatInterval')"
-              ref="repeatInterval"
               data-cy="repeatInterval"
               :rules="[form().integerValid(this, 'repeatInterval')]"
               :error-messages="form().serverErrors(this, 'repeatInterval')"
-              @input="fieldValueChanged('repeatInterval')"
               type="number"
+              @input="fieldValueChanged('repeatInterval')"
             ></v-text-field>
           </v-col>
           <v-col cols="5">
             <v-select
+              :ref="`repeatUnit`"
               v-model="value.repeatUnit"
               :items="pvm.selectLists.pmTimeUnits"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
-              :ref="`repeatUnit`"
               data-cy="usertype"
               :rules="[form().integerValid(this, `repeatUnit`)]"
               :error-messages="form().serverErrors(this, `repeatUnit`)"
@@ -94,27 +94,27 @@
         <v-row>
           <v-col cols="5">
             <v-text-field
+              ref="generateBeforeInterval"
               v-model="value.generateBeforeInterval"
               :readonly="formState.readOnly"
               :label="$ay.t('GenerateBefore')"
-              ref="generateBeforeInterval"
               data-cy="generateBeforeInterval"
               :rules="[form().integerValid(this, 'generateBeforeInterval')]"
               :error-messages="
                 form().serverErrors(this, 'generateBeforeInterval')
               "
-              @input="fieldValueChanged('generateBeforeInterval')"
               type="number"
+              @input="fieldValueChanged('generateBeforeInterval')"
             ></v-text-field>
           </v-col>
           <v-col cols="5">
             <v-select
+              :ref="`generateBeforeUnit`"
               v-model="value.generateBeforeUnit"
               :items="pvm.selectLists.pmTimeUnits"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
-              :ref="`generateBeforeUnit`"
               data-cy="usertype"
               :rules="[form().integerValid(this, `generateBeforeUnit`)]"
               :error-messages="form().serverErrors(this, `generateBeforeUnit`)"
@@ -126,10 +126,10 @@
 
       <v-col cols="12" sm="6" lg="4" xl="3">
         <GZDaysOfWeek
-          :label="$ay.t('ExcludeDaysOfWeek')"
-          v-model="value.excludeDaysOfWeek"
-          :readonly="formState.readOnly"
           ref="excludeDaysOfWeek"
+          v-model="value.excludeDaysOfWeek"
+          :label="$ay.t('ExcludeDaysOfWeek')"
+          :readonly="formState.readOnly"
           data-cy="excludeDaysOfWeek"
           :error-messages="form().serverErrors(this, 'excludeDaysOfWeek')"
           @input="fieldValueChanged('excludeDaysOfWeek')"
@@ -138,10 +138,10 @@
 
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-date-time-picker
-          :label="$ay.t('PMNextServiceDate')"
-          v-model="value.nextServiceDate"
-          :readonly="formState.readOnly"
           ref="nextServiceDate"
+          v-model="value.nextServiceDate"
+          :label="$ay.t('PMNextServiceDate')"
+          :readonly="formState.readOnly"
           data-cy="nextServiceDate"
           :rules="[form().required(this, 'nextServiceDate')]"
           :error-messages="form().serverErrors(this, 'nextServiceDate')"
@@ -151,10 +151,10 @@
 
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-date-time-picker
-          :label="$ay.t('PMStopGeneratingDate')"
-          v-model="value.stopGeneratingDate"
-          :readonly="formState.readOnly"
           ref="stopGeneratingDate"
+          v-model="value.stopGeneratingDate"
+          :label="$ay.t('PMStopGeneratingDate')"
+          :readonly="formState.readOnly"
           data-cy="stopGeneratingDate"
           :error-messages="form().serverErrors(this, 'stopGeneratingDate')"
           @input="fieldValueChanged('stopGeneratingDate')"
@@ -169,10 +169,10 @@
         xl="3"
       >
         <v-checkbox
+          ref="copyWiki"
           v-model="value.copyWiki"
           :readonly="formState.readOnly"
           :label="$ay.t('CopyWiki')"
-          ref="copyWiki"
           data-cy="copyWiki"
           :error-messages="form().serverErrors(this, 'copyWiki')"
           @change="fieldValueChanged('copyWiki')"
@@ -187,10 +187,10 @@
         xl="3"
       >
         <v-checkbox
+          ref="copyAttachments"
           v-model="value.copyAttachments"
           :readonly="formState.readOnly"
           :label="$ay.t('CopyAttachments')"
-          ref="copyAttachments"
           data-cy="copyAttachments"
           :error-messages="form().serverErrors(this, 'copyAttachments')"
           @change="fieldValueChanged('copyAttachments')"
@@ -199,10 +199,10 @@
 
       <v-col cols="12" sm="6" lg="4" xl="3">
         <v-checkbox
+          ref="active"
           v-model="value.active"
           :readonly="formState.readOnly"
           :label="$ay.t('Active')"
-          ref="active"
           data-cy="active"
           :error-messages="form().serverErrors(this, 'active')"
           @change="fieldValueChanged('active')"
@@ -221,14 +221,14 @@
         cols="12"
       >
         <v-textarea
+          ref="notes"
           v-model="value.notes"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderSummary')"
           :error-messages="form().serverErrors(this, 'notes')"
-          ref="notes"
           data-cy="notes"
-          @input="fieldValueChanged('notes')"
           auto-grow
+          @input="fieldValueChanged('notes')"
         ></v-textarea>
       </v-col>
 
@@ -246,12 +246,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="contractId"
+          v-model="value.contractId"
           :aya-type="$ay.ayt().Contract"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.contractId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Contract')"
-          ref="contractId"
           data-cy="contractId"
           :error-messages="form().serverErrors(this, 'contractId')"
           @input="fieldValueChanged('contractId')"
@@ -272,12 +272,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="projectId"
+          v-model="value.projectId"
           :aya-type="$ay.ayt().Project"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.projectId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Project')"
-          ref="projectId"
           data-cy="projectId"
           :error-messages="form().serverErrors(this, 'projectId')"
           @input="fieldValueChanged('projectId')"
@@ -292,6 +292,7 @@
         xl="3"
       >
         <v-text-field
+          ref="customerContactName"
           v-model="value.customerContactName"
           :readonly="
             formState.readOnly ||
@@ -300,7 +301,6 @@
               value.userIsSubContractorRestricted
           "
           :label="$ay.t('WorkOrderCustomerContactName')"
-          ref="customerContactName"
           data-cy="customerContactName"
           :error-messages="form().serverErrors(this, 'customerContactName')"
           @input="fieldValueChanged('customerContactName')"
@@ -321,10 +321,10 @@
         xl="3"
       >
         <v-text-field
+          ref="customerReferenceNumber"
           v-model="value.customerReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderCustomerReferenceNumber')"
-          ref="customerReferenceNumber"
           data-cy="customerReferenceNumber"
           :error-messages="form().serverErrors(this, 'customerReferenceNumber')"
           @input="fieldValueChanged('customerReferenceNumber')"
@@ -345,10 +345,10 @@
         xl="3"
       >
         <v-text-field
+          ref="internalReferenceNumber"
           v-model="value.internalReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderInternalReferenceNumber')"
-          ref="internalReferenceNumber"
           data-cy="internalReferenceNumber"
           :error-messages="form().serverErrors(this, 'internalReferenceNumber')"
           @input="fieldValueChanged('internalReferenceNumber')"
@@ -369,10 +369,10 @@
         xl="3"
       >
         <v-checkbox
+          ref="onsite"
           v-model="value.onsite"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderOnsite')"
-          ref="onsite"
           data-cy="onsite"
           :error-messages="form().serverErrors(this, 'onsite')"
           @change="fieldValueChanged('onsite')"
@@ -390,9 +390,9 @@
         cols="12"
       >
         <gz-tag-picker
+          ref="tags"
           v-model="value.tags"
           :readonly="formState.readOnly || value.userIsTechRestricted"
-          ref="tags"
           data-cy="tags"
           :error-messages="form().serverErrors(this, 'tags')"
           @input="fieldValueChanged('tags')"
@@ -408,12 +408,12 @@
         cols="12"
       >
         <gz-custom-fields
+          ref="customFields"
           v-model="value.customFields"
           :form-key="formCustomTemplateKey"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :parent-v-m="this"
           key-start-with="WorkOrderCustom"
-          ref="customFields"
           data-cy="customFields"
           :error-messages="form().serverErrors(this, 'customFields')"
           @input="fieldValueChanged('customFields')"
@@ -431,10 +431,10 @@
         cols="12"
       >
         <gz-wiki
-          :aya-type="pvm.ayaType"
-          :aya-id="value.id"
           ref="wiki"
           v-model="value.wiki"
+          :aya-type="pvm.ayaType"
+          :aya-id="value.id"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           @input="fieldValueChanged('wiki')"
         ></gz-wiki
@@ -468,13 +468,6 @@ export default {
     GzWoAddress,
     GZDaysOfWeek
   },
-  data() {
-    return {
-      canEditSerial: window.$gz.role.hasRole([
-        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
-      ])
-    };
-  },
 
   props: {
     value: {
@@ -486,6 +479,21 @@ export default {
       type: Object
     }
   },
+  data() {
+    return {
+      canEditSerial: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
+      ])
+    };
+  },
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  },
 
   methods: {
     form() {
@@ -498,14 +506,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-expenses.vue b/ayanova/src/components/pm-item-expenses.vue
index 1d38d3d2..ced79f9e 100644
--- a/ayanova/src/components/pm-item-expenses.vue
+++ b/ayanova/src/components/pm-item-expenses.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.reimburseUser`]="{ item }">
               <v-simple-checkbox
@@ -86,8 +86,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -100,15 +100,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].name
             "
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseName')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -131,15 +131,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].totalCost
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTotalCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
-            "
             data-cy="expenseTotalCost"
             :error-messages="
               form().serverErrors(
@@ -176,6 +176,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeAmount
@@ -183,9 +186,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeAmount')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
-            "
             data-cy="expenseChargeAmount"
             :error-messages="
               form().serverErrors(
@@ -222,6 +222,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeToCustomer
@@ -229,9 +232,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeToCustomer')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
-            "
             data-cy="chargeToCustomer"
             :error-messages="
               form().serverErrors(
@@ -255,15 +255,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].taxPaid
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTaxPaid')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
-            "
             data-cy="expenseTaxPaid"
             :error-messages="
               form().serverErrors(
@@ -300,18 +300,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeTaxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeTaxCodeID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
-            "
             data-cy="expenseChargeTaxCode"
             :error-messages="
               form().serverErrors(
@@ -339,6 +339,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .reimburseUser
@@ -346,9 +349,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseReimburseUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
-            "
             data-cy="expenseReimburseUser"
             :error-messages="
               form().serverErrors(
@@ -372,20 +372,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -407,6 +407,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .description
@@ -420,16 +423,13 @@
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
-            "
             data-cy="expenseDescription"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -438,15 +438,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -465,144 +456,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.expensetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
-
-      //#################################### IMPORTANT ##################################################
-      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
-      //so that they are in agreement otherwise restricted users will never be able to create new records
-
-      this.value.items[this.activeWoItemIndex].expenses.push({
-        id: 0,
-        concurrency: 0,
-        description: null,
-        name: null,
-        totalCost: 0,
-        chargeAmount: 0,
-        taxPaid: 0,
-        chargeTaxCodeId: null,
-        taxCodeViz: null,
-        reimburseUser: false,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        chargeToCustomer: false,
-        isDirty: true,
-        pmItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now()
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].expenses.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.hasData &&
-        this.value.items[this.activeWoItemIndex].expenses.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].expenses[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].expenses[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -784,6 +642,148 @@ export default {
     canDeleteAll: function() {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.expensetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
+
+      //#################################### IMPORTANT ##################################################
+      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
+      //so that they are in agreement otherwise restricted users will never be able to create new records
+
+      this.value.items[this.activeWoItemIndex].expenses.push({
+        id: 0,
+        concurrency: 0,
+        description: null,
+        name: null,
+        totalCost: 0,
+        chargeAmount: 0,
+        taxPaid: 0,
+        chargeTaxCodeId: null,
+        taxCodeViz: null,
+        reimburseUser: false,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        chargeToCustomer: false,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now()
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].expenses.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.hasData &&
+        this.value.items[this.activeWoItemIndex].expenses.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].expenses[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].expenses[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-labors.vue b/ayanova/src/components/pm-item-labors.vue
index 0f349386..d05cbdea 100644
--- a/ayanova/src/components/pm-item-labors.vue
+++ b/ayanova/src/components/pm-item-labors.vue
@@ -58,10 +58,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -70,9 +70,9 @@
             data-cy="laborsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -82,8 +82,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -96,16 +96,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStartDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
-            "
             data-cy="serviceStartDate"
             :error-messages="
               form().serverErrors(
@@ -129,16 +129,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStopDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
-            "
             data-cy="serviceStopDate"
             :rules="[
               form().datePrecedence(
@@ -169,6 +169,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateQuantity
@@ -176,9 +179,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
-            "
             data-cy="laborServiceRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -212,19 +212,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
-            "
             data-cy="labors.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -249,20 +249,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
-            "
             data-cy="labors.userid"
             :error-messages="
               form().serverErrors(
@@ -287,6 +287,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .noChargeQuantity
@@ -294,9 +297,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="laborNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -333,18 +333,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="laborTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -372,6 +372,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .priceOverride
@@ -380,9 +383,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
-            "
             data-cy="laborpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -409,6 +409,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceDetails
@@ -422,16 +425,13 @@
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
-            "
             data-cy="laborserviceDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -440,15 +440,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -467,237 +458,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.labortopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    appendTasks() {
-      const tasks = this.value.items[this.activeWoItemIndex].tasks;
-      if (tasks.length == 0) {
-        return;
-      }
-      const l = this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ];
-      let at = "";
-      tasks.forEach(z => {
-        at += `${z.task} - ${z.statusViz}\n`;
-      });
-      l.serviceDetails += `\n${at}`;
-    },
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].serviceRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
-
-      this.value.items[this.activeWoItemIndex].labors.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        serviceStartDate: null,
-        serviceStopDate: null,
-        serviceRateId: null,
-        serviceDetails: null,
-        serviceRateQuantity: 0,
-        noChargeQuantity: 0,
-        taxCodeSaleId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        pmItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        serviceRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].labors.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStopDate;
-        if (ref.includes("serviceStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("serviceStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -983,6 +748,241 @@ export default {
     canDeleteAll: function() {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.labortopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    appendTasks() {
+      const tasks = this.value.items[this.activeWoItemIndex].tasks;
+      if (tasks.length == 0) {
+        return;
+      }
+      const l = this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ];
+      let at = "";
+      tasks.forEach(z => {
+        at += `${z.task} - ${z.statusViz}\n`;
+      });
+      l.serviceDetails += `\n${at}`;
+    },
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].serviceRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
+
+      this.value.items[this.activeWoItemIndex].labors.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        serviceStartDate: null,
+        serviceStopDate: null,
+        serviceRateId: null,
+        serviceDetails: null,
+        serviceRateQuantity: 0,
+        noChargeQuantity: 0,
+        taxCodeSaleId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        serviceRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].labors.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStopDate;
+        if (ref.includes("serviceStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("serviceStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-loans.vue b/ayanova/src/components/pm-item-loans.vue
index 055e7b49..3afa2334 100644
--- a/ayanova/src/components/pm-item-loans.vue
+++ b/ayanova/src/components/pm-item-loans.vue
@@ -50,10 +50,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -62,9 +62,9 @@
             data-cy="loansTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -74,8 +74,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -88,19 +88,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().LoanUnit"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].loanUnitId
             "
+            :aya-type="$ay.ayt().LoanUnit"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanUnit')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
-            "
             data-cy="loans.loanUnitId"
             :rules="[
               form().required(
@@ -134,6 +134,7 @@
           xl="3"
         >
           <v-select
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             v-model="value.items[activeWoItemIndex].loans[activeItemIndex].rate"
             :items="pvm.selectLists.loanUnitRateUnits"
             item-text="name"
@@ -141,7 +142,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanRate')"
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             data-cy="loanUnitRateUnit"
             :error-messages="
               form().serverErrors(
@@ -169,15 +169,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].quantity
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
-            "
             data-cy="loanQuantity"
             :error-messages="
               form().serverErrors(
@@ -211,15 +211,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanOutDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].outDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
+            "
+            :label="$ay.t('WorkOrderItemLoanOutDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitOutDate"
             :error-messages="
               form().serverErrors(
@@ -243,15 +243,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanDueDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].dueDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
+            "
+            :label="$ay.t('WorkOrderItemLoanDueDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitDueDate"
             :error-messages="
               form().serverErrors(
@@ -275,15 +275,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanReturnDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].returnDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
+            "
+            :label="$ay.t('WorkOrderItemLoanReturnDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitReturnDate"
             :error-messages="
               form().serverErrors(
@@ -310,17 +310,17 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
-            "
-            :readonly="formState.readOnly || isDeleted"
-            :disabled="isDeleted"
-            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].taxCodeId`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
+            "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             data-cy="loanTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -348,6 +348,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex]
                 .priceOverride
@@ -356,9 +359,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
-            "
             data-cy="loanpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -382,6 +382,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemLoanNotes')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].notes
             "
@@ -394,14 +395,13 @@
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             data-cy="loanUnitNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -410,15 +410,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -437,151 +428,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.loantopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    loanUnitRateUnitChange(newId) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
-        s => s.id == newId
-      ).name;
-    },
-    loanUnitChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].loanUnitViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
-
-      this.value.items[this.activeWoItemIndex].loans.push({
-        id: 0,
-        concurrency: 0,
-        notes: null,
-        outDate: null,
-        dueDate: null,
-        returnDate: null,
-        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
-        loanUnitId: 0, //zero to break rule on new
-        quantity: 1,
-        rate: 1,
-        cost: 0,
-        priceOverride: null,
-        isDirty: true,
-        pmItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        loanUnitViz: null,
-        taxCodeViz: null,
-        unitOfMeasureViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].loanUnitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].loans.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -870,6 +721,155 @@ export default {
     canDeleteAll: function() {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.loantopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    loanUnitRateUnitChange(newId) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
+        s => s.id == newId
+      ).name;
+    },
+    loanUnitChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].loanUnitViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
+
+      this.value.items[this.activeWoItemIndex].loans.push({
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        outDate: null,
+        dueDate: null,
+        returnDate: null,
+        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
+        loanUnitId: 0, //zero to break rule on new
+        quantity: 1,
+        rate: 1,
+        cost: 0,
+        priceOverride: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        loanUnitViz: null,
+        taxCodeViz: null,
+        unitOfMeasureViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].loanUnitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].loans.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-outside-services.vue b/ayanova/src/components/pm-item-outside-services.vue
index 8107c70b..312f5d48 100644
--- a/ayanova/src/components/pm-item-outside-services.vue
+++ b/ayanova/src/components/pm-item-outside-services.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="outsideServicesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,18 +87,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
-            "
             data-cy="outsideServices.unitId"
             :rules="[
               form().required(
@@ -131,18 +131,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentToId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentToID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
-            "
             data-cy="outsideServices.vendorSentToId"
             :error-messages="
               form().serverErrors(
@@ -167,6 +167,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .rmaNumber
@@ -174,9 +177,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRMANumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -198,6 +198,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairCost
@@ -206,9 +209,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -238,6 +238,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairPrice
@@ -246,9 +249,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -280,18 +280,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentViaId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentViaID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
-            "
             data-cy="outsideServices.vendorSentViaId"
             :error-messages="
               form().serverErrors(
@@ -318,6 +318,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .trackingNumber
@@ -325,9 +328,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceTrackingNumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -349,6 +349,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingCost
@@ -357,9 +360,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -389,6 +389,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingPrice
@@ -397,9 +400,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -429,16 +429,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .sentDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
-            "
             data-cy="outsideServiceSentDate"
             :error-messages="
               form().serverErrors(
@@ -462,16 +462,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .etaDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
-            "
             data-cy="outsideServiceEtaDate"
             :error-messages="
               form().serverErrors(
@@ -495,16 +495,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .returnDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
-            "
             data-cy="outsideServiceDateReturned"
             :error-messages="
               form().serverErrors(
@@ -528,18 +528,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .taxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('TaxCode')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
-            "
             data-cy="outsideServiceTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -561,6 +561,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .notes
@@ -574,16 +577,13 @@
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
-            "
             data-cy="outsideServiceNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -592,15 +592,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -619,162 +610,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.outsideservicetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    unitChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].unitViz = newName;
-    },
-    vendorSentToChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentToViz = newName;
-    },
-    vendorSentViaChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentViaViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
-        .length;
-
-      this.value.items[this.activeWoItemIndex].outsideServices.push({
-        id: 0,
-        concurrency: 0,
-        unitId: 0, //zero to break rule on new
-        notes: null,
-        vendorSentToId: null,
-        vendorSentViaId: null,
-        rmaNumber: null,
-        trackingNumber: null,
-        repairCost: 0,
-        repairPrice: 0,
-        shippingCost: 0,
-        shippingPrice: 0,
-        sentDate: window.$gz.locale.nowUTC8601String(),
-        etaDate: null,
-        returnDate: null,
-        taxCodeId: null,
-        isDirty: true,
-        pmItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        unitViz: null,
-        vendorSentToViz: null,
-        vendorSentViaViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].unitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1085,6 +925,166 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.outsideservicetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    unitChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].unitViz = newName;
+    },
+    vendorSentToChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentToViz = newName;
+    },
+    vendorSentViaChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentViaViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
+        .length;
+
+      this.value.items[this.activeWoItemIndex].outsideServices.push({
+        id: 0,
+        concurrency: 0,
+        unitId: 0, //zero to break rule on new
+        notes: null,
+        vendorSentToId: null,
+        vendorSentViaId: null,
+        rmaNumber: null,
+        trackingNumber: null,
+        repairCost: 0,
+        repairPrice: 0,
+        shippingCost: 0,
+        shippingPrice: 0,
+        sentDate: window.$gz.locale.nowUTC8601String(),
+        etaDate: null,
+        returnDate: null,
+        taxCodeId: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        unitViz: null,
+        vendorSentToViz: null,
+        vendorSentViaViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].unitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-parts.vue b/ayanova/src/components/pm-item-parts.vue
index d0bfdd59..5554b3ea 100644
--- a/ayanova/src/components/pm-item-parts.vue
+++ b/ayanova/src/components/pm-item-parts.vue
@@ -66,10 +66,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -78,9 +78,9 @@
             data-cy="partsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -90,8 +90,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -104,19 +104,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Part"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].partId
             "
+            :aya-type="$ay.ayt().Part"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
-            "
             data-cy="parts.partId"
             :error-messages="
               form().serverErrors(
@@ -151,18 +151,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().PartWarehouse"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .partWarehouseId
             "
+            :aya-type="$ay.ayt().PartWarehouse"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
-            "
             data-cy="parts.partWarehouseId"
             :error-messages="
               form().serverErrors(
@@ -186,6 +186,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].quantity
             "
@@ -194,9 +197,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -243,6 +243,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].suggestedQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .suggestedQuantity
@@ -252,9 +255,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartSuggestedQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].suggestedQuantity`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -284,6 +284,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].description
             "
@@ -292,9 +295,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartDescription')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -321,18 +321,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .taxPartSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartTaxPartSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
-            "
             data-cy="partTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -360,6 +360,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .priceOverride
@@ -368,9 +371,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
-            "
             data-cy="partpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -394,6 +394,9 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemPartSerials')" cols="12">
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].serials
             "
@@ -406,17 +409,14 @@
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
-            "
             data-cy="partSerials"
+            auto-grow
+            prepend-icon="$ayiListUl"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            auto-grow
-            prepend-icon="$ayiListUl"
             @click:prepend="selectSerials()"
           ></v-textarea>
         </v-col>
@@ -427,16 +427,16 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="partAssemblyDialog">
+        <v-dialog v-model="partAssemblyDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedPartAssembly"
+                v-model="selectedPartAssembly"
                 :aya-type="$ay.ayt().PartAssembly"
                 show-edit-icon
-                v-model="selectedPartAssembly"
                 :label="$ay.t('PartAssemblyList')"
-                ref="selectedPartAssembly"
                 data-cy="selectedPartAssembly"
               ></gz-pick-list>
 
@@ -445,16 +445,16 @@
                   pvm.useInventory &&
                     form().showMe(this, 'WorkOrderItemPartPartWarehouseID')
                 "
+                ref="selectedPartWarehouse"
+                v-model="selectedPartWarehouse"
                 :aya-type="$ay.ayt().PartWarehouse"
                 show-edit-icon
-                v-model="selectedPartWarehouse"
                 :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-                ref="selectedPartWarehouse"
                 data-cy="selectedPartWarehouse"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="partAssemblyDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="partAssemblyDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -462,8 +462,8 @@
                 :disabled="selectedPartAssembly == null"
                 color="primary"
                 text
-                @click="addPartAssembly()"
                 class="ml-4"
+                @click="addPartAssembly()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -476,10 +476,10 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="serialDialog">
+        <v-dialog v-model="serialDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>
-              <v-btn text @click="serialDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="serialDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -507,21 +507,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      partAssemblyDialog: false,
-      selectedPartAssembly: null,
-      selectedPartWarehouse: 1,
-      serialDialog: false,
-      availableSerials: [],
-      selectedSerials: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -540,6 +525,320 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      partAssemblyDialog: false,
+      selectedPartAssembly: null,
+      selectedPartWarehouse: 1,
+      serialDialog: false,
+      availableSerials: [],
+      selectedSerials: []
+    };
+  },
+  computed: {
+    requestMore: function() {
+      return this.$ay
+        .t("WorkOrderItemPartRequestMore")
+        .replace(
+          "{n}",
+          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+            .requestAmountViz
+        );
+    },
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartID"),
+          align: "left",
+          value: "partNameViz"
+        });
+      }
+
+      if (
+        this.pvm.useInventory &&
+        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
+          align: "left",
+          value: "partWarehouseViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartQuantity"),
+          align: "right",
+          value: "quantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartSuggestedQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartSuggestedQuantity"),
+          align: "right",
+          value: "suggestedQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "PartDescription")) {
+        headers.push({
+          text: this.$ay.t("PartDescription"),
+          align: "left",
+          value: "partDescriptionViz"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUPC")) {
+        headers.push({
+          text: this.$ay.t("PartUPC"),
+          align: "left",
+          value: "upcViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartDescription"),
+          align: "left",
+          value: "description"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
+        headers.push({
+          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
+          align: "left",
+          value: "serials"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
+        headers.push({
+          text: this.$ay.t("UnitOfMeasure"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartCost") &&
+        this.value.userCanViewPartCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "cost"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartListPrice") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPrice"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          partNameViz: x.partNameViz,
+          partWarehouseViz: x.partWarehouseViz,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.pvm.languageName
+          ),
+          suggestedQuantity: window.$gz.locale.decimalLocalized(
+            x.suggestedQuantity,
+            this.pvm.languageName
+          ),
+          partDescriptionViz: x.partDescriptionViz,
+          upcViz: x.upcViz,
+          description: x.description,
+          serials: window.$gz.util.truncateString(
+            x.serials,
+            this.pvm.maxTableNotesLength
+          ),
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          cost: window.$gz.locale.currencyLocalized(
+            x.cost,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          listPrice: window.$gz.locale.currencyLocalized(
+            x.listPrice,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          priceViz: window.$gz.locale.currencyLocalized(
+            x.priceViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxCodeViz: x.taxCodeViz,
+          priceOverride: window.$gz.locale.currencyLocalized(
+            x.priceOverride,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          netViz: window.$gz.locale.currencyLocalized(
+            x.netViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxAViz: window.$gz.locale.currencyLocalized(
+            x.taxAViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxBViz: window.$gz.locale.currencyLocalized(
+            x.taxBViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          lineTotalViz: window.$gz.locale.currencyLocalized(
+            x.lineTotalViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].parts.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+
+    //----
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -564,6 +863,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     generateUnit() {
       const thisPart = this.value.items[this.activeWoItemIndex].parts[
@@ -871,308 +1173,6 @@ export default {
       return ret;
     }
     //---
-  },
-  computed: {
-    requestMore: function() {
-      return this.$ay
-        .t("WorkOrderItemPartRequestMore")
-        .replace(
-          "{n}",
-          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-            .requestAmountViz
-        );
-    },
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartID"),
-          align: "left",
-          value: "partNameViz"
-        });
-      }
-
-      if (
-        this.pvm.useInventory &&
-        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
-          align: "left",
-          value: "partWarehouseViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartQuantity"),
-          align: "right",
-          value: "quantity"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartSuggestedQuantity")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartSuggestedQuantity"),
-          align: "right",
-          value: "suggestedQuantity"
-        });
-      }
-
-      if (this.form().showMe(this, "PartDescription")) {
-        headers.push({
-          text: this.$ay.t("PartDescription"),
-          align: "left",
-          value: "partDescriptionViz"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUPC")) {
-        headers.push({
-          text: this.$ay.t("PartUPC"),
-          align: "left",
-          value: "upcViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartDescription"),
-          align: "left",
-          value: "description"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
-        headers.push({
-          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
-          align: "left",
-          value: "serials"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
-        headers.push({
-          text: this.$ay.t("UnitOfMeasure"),
-          align: "left",
-          value: "unitOfMeasureViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartCost") &&
-        this.value.userCanViewPartCosts &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Cost"),
-          align: "right",
-          value: "cost"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartListPrice") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("ListPrice"),
-          align: "right",
-          value: "listPrice"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceOverride") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("PriceOverride"),
-          align: "right",
-          value: "priceOverride"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Price"),
-          align: "right",
-          value: "priceViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Tax"),
-          align: "left",
-          value: "taxCodeViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartNetViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("NetPrice"),
-          align: "right",
-          value: "netViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxAViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxAAmt"),
-          align: "right",
-          value: "taxAViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxBViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxBAmt"),
-          align: "right",
-          value: "taxBViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartLineTotalViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("LineTotal"),
-          align: "right",
-          value: "lineTotalViz"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          partNameViz: x.partNameViz,
-          partWarehouseViz: x.partWarehouseViz,
-          quantity: window.$gz.locale.decimalLocalized(
-            x.quantity,
-            this.pvm.languageName
-          ),
-          suggestedQuantity: window.$gz.locale.decimalLocalized(
-            x.suggestedQuantity,
-            this.pvm.languageName
-          ),
-          partDescriptionViz: x.partDescriptionViz,
-          upcViz: x.upcViz,
-          description: x.description,
-          serials: window.$gz.util.truncateString(
-            x.serials,
-            this.pvm.maxTableNotesLength
-          ),
-          unitOfMeasureViz: x.unitOfMeasureViz,
-          cost: window.$gz.locale.currencyLocalized(
-            x.cost,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          listPrice: window.$gz.locale.currencyLocalized(
-            x.listPrice,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          priceViz: window.$gz.locale.currencyLocalized(
-            x.priceViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxCodeViz: x.taxCodeViz,
-          priceOverride: window.$gz.locale.currencyLocalized(
-            x.priceOverride,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          netViz: window.$gz.locale.currencyLocalized(
-            x.netViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxAViz: window.$gz.locale.currencyLocalized(
-            x.taxAViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxBViz: window.$gz.locale.currencyLocalized(
-            x.taxBViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          lineTotalViz: window.$gz.locale.currencyLocalized(
-            x.lineTotalViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].parts.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
-
-    //----
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-scheduled-users.vue b/ayanova/src/components/pm-item-scheduled-users.vue
index a8555a98..ce92f281 100644
--- a/ayanova/src/components/pm-item-scheduled-users.vue
+++ b/ayanova/src/components/pm-item-scheduled-users.vue
@@ -71,10 +71,10 @@
         <!-- ################################ SCHEDULED USERS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -83,9 +83,9 @@
             data-cy="scheduledUsersTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -95,8 +95,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -109,16 +109,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .startDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
-            "
             data-cy="startDate"
             :error-messages="
               form().serverErrors(
@@ -142,16 +142,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .stopDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
-            "
             data-cy="stopDate"
             :rules="[
               form().datePrecedence(
@@ -184,6 +184,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .estimatedQuantity
@@ -193,9 +196,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
-            "
             data-cy="scheduledUsers.EstimatedQuantity"
             :error-messages="
               form().serverErrors(
@@ -229,21 +229,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
-            "
             data-cy="scheduledUsers.userid"
             :error-messages="
               form().serverErrors(
@@ -268,21 +268,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
-            "
             data-cy="scheduledUsers.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -304,15 +304,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -331,6 +322,136 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ].deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
+          align: "right",
+          value: "startDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
+          align: "right",
+          value: "stopDate"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
+          align: "right",
+          value: "estimatedQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
+          align: "left",
+          value: "serviceRateViz"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
+        (x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.startDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.stopDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            estimatedQuantity: window.$gz.locale.decimalLocalized(
+              x.estimatedQuantity,
+              this.pvm.languageName
+            ),
+            userViz: x.userViz,
+            serviceRateViz: x.serviceRateViz
+          };
+        }
+      );
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    hasMultipleItems: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -355,6 +476,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     convertAllToLabor() {
       this.value.items[this.activeWoItemIndex].scheduledUsers.forEach(z => {
@@ -574,130 +698,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ] == null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ].deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
-          align: "right",
-          value: "startDate"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
-          align: "right",
-          value: "stopDate"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
-          align: "right",
-          value: "estimatedQuantity"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
-          align: "left",
-          value: "userViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
-          align: "left",
-          value: "serviceRateViz"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
-        (x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.startDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.stopDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            estimatedQuantity: window.$gz.locale.decimalLocalized(
-              x.estimatedQuantity,
-              this.pvm.languageName
-            ),
-            userViz: x.userViz,
-            serviceRateViz: x.serviceRateViz
-          };
-        }
-      );
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    hasMultipleItems: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-tasks.vue b/ayanova/src/components/pm-item-tasks.vue
index 394b9ebd..072dd7c9 100644
--- a/ayanova/src/components/pm-item-tasks.vue
+++ b/ayanova/src/components/pm-item-tasks.vue
@@ -55,10 +55,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -67,9 +67,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -79,8 +79,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -93,15 +93,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].sequence
             "
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
-            "
             :rules="[
               form().integerValid(
                 this,
@@ -114,12 +114,12 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
+            type="number"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
-            type="number"
           ></v-text-field>
         </v-col>
 
@@ -136,6 +136,9 @@
           xl="3"
         >
           <v-select
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].status
             "
@@ -145,9 +148,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskWorkOrderItemTaskCompletionType')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
-            "
             data-cy="usertype"
             :rules="[
               form().integerValid(
@@ -178,21 +178,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedByUserId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -217,16 +217,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedDate
             "
+            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
-            "
             data-cy="travelCompletedDate"
             :error-messages="
               form().serverErrors(
@@ -244,6 +244,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTaskTaskID')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             v-model="value.items[activeWoItemIndex].tasks[activeItemIndex].task"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -260,14 +261,13 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             ]"
-            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             data-cy="task"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -277,21 +277,21 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="taskGroupDialog">
+        <v-dialog v-model="taskGroupDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedTaskGroup"
+                v-model="selectedTaskGroup"
                 :aya-type="$ay.ayt().TaskGroup"
                 show-edit-icon
-                v-model="selectedTaskGroup"
                 :label="$ay.t('TaskGroupList')"
-                ref="selectedTaskGroup"
                 data-cy="selectedTaskGroup"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="taskGroupDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="taskGroupDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -299,8 +299,8 @@
                 :disabled="selectedTaskGroup == null"
                 color="primary"
                 text
-                @click="addTaskGroup()"
                 class="ml-4"
+                @click="addTaskGroup()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -312,17 +312,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      taskGroupDialog: false,
-      selectedTaskGroup: null
-    };
-  },
   props: {
     value: {
       default: null,
@@ -341,6 +330,127 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      taskGroupDialog: false,
+      selectedTaskGroup: null
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
+        headers.push({
+          text: this.$ay.t("Sequence"),
+          align: "left",
+          value: "sequence"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskTaskID"),
+          align: "start",
+          value: "task"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskUser"),
+          align: "start",
+          value: "completedByUserViz"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
+          align: "start",
+          value: "statusViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
+          align: "right",
+          value: "completedDate"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].tasks
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task,
+            completedByUserViz: x.completedByUserViz,
+            statusViz: x.statusViz,
+            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.completedDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -365,6 +475,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async addTaskGroup() {
       const res = await window.$gz.api.get(
@@ -533,119 +646,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
-        headers.push({
-          text: this.$ay.t("Sequence"),
-          align: "left",
-          value: "sequence"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskTaskID"),
-          align: "start",
-          value: "task"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskUser"),
-          align: "start",
-          value: "completedByUserViz"
-        });
-      }
-
-      if (
-        this.form().showMe(
-          this,
-          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
-        )
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
-          align: "start",
-          value: "statusViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
-          align: "right",
-          value: "completedDate"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].tasks
-        .map((x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            sequence: x.sequence,
-            task: x.task,
-            completedByUserViz: x.completedByUserViz,
-            statusViz: x.statusViz,
-            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.completedDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            )
-          };
-        })
-        .sort((a, b) => a.sequence - b.sequence);
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-travels.vue b/ayanova/src/components/pm-item-travels.vue
index f3254840..468ecb8b 100644
--- a/ayanova/src/components/pm-item-travels.vue
+++ b/ayanova/src/components/pm-item-travels.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="travelsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,16 +87,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStartDate
             "
+            :label="$ay.t('WorkOrderItemTravelStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
-            "
             data-cy="travelStartDate"
             :error-messages="
               form().serverErrors(
@@ -120,16 +120,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStopDate
             "
+            :label="$ay.t('WorkOrderItemTravelStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
-            "
             data-cy="travelStopDate"
             :rules="[
               form().datePrecedence(
@@ -160,6 +160,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateQuantity
@@ -167,9 +170,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
-            "
             data-cy="travelTravelRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -202,15 +202,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].distance
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelDistance')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
-            "
             data-cy="travelTravelRateDistance"
             :error-messages="
               form().serverErrors(
@@ -243,19 +243,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TravelRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateId
             "
+            :aya-type="$ay.ayt().TravelRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
-            "
             data-cy="travels.travelRateId"
             :error-messages="
               form().serverErrors(
@@ -280,20 +280,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
-            "
             data-cy="travels.userid"
             :error-messages="
               form().serverErrors(
@@ -318,6 +318,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .noChargeQuantity
@@ -325,9 +328,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="travelNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -364,18 +364,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="travelTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -403,6 +403,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .priceOverride
@@ -411,9 +414,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
-            "
             data-cy="travelpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -440,6 +440,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelDetails
@@ -453,16 +456,13 @@
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
-            "
             data-cy="traveltravelDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -471,15 +471,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -498,225 +489,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.traveltopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].travelRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
-
-      this.value.items[this.activeWoItemIndex].travels.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        travelStartDate: null,
-        travelStopDate: null,
-        travelRateId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        travelDetails: null,
-        travelRateQuantity: 0,
-        noChargeQuantity: 0,
-        distance: 0,
-        taxCodeSaleId: null,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        pmItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        travelRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].travels.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStopDate;
-        if (ref.includes("travelStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("travelStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1015,6 +792,229 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.traveltopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].travelRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
+
+      this.value.items[this.activeWoItemIndex].travels.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        travelStartDate: null,
+        travelStopDate: null,
+        travelRateId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        travelDetails: null,
+        travelRateQuantity: 0,
+        noChargeQuantity: 0,
+        distance: 0,
+        taxCodeSaleId: null,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        travelRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].travels.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStopDate;
+        if (ref.includes("travelStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("travelStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-item-units.vue b/ayanova/src/components/pm-item-units.vue
index 0af4a691..b40259a8 100644
--- a/ayanova/src/components/pm-item-units.vue
+++ b/ayanova/src/components/pm-item-units.vue
@@ -57,10 +57,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -69,9 +69,9 @@
             data-cy="unitsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -81,8 +81,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -94,20 +94,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            :variant="'customerid:' + value.customerId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            :variant="'customerid:' + value.customerId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
-            "
             data-cy="units.unitId"
             :rules="[
               form().required(
@@ -166,6 +166,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].notes
             "
@@ -178,14 +179,13 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             data-cy="unitUnitNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
 
@@ -197,6 +197,7 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].tags"
             :readonly="formState.readOnly"
             data-cy="unitTags"
@@ -206,7 +207,6 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
@@ -217,6 +217,9 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].customFields
             "
@@ -224,9 +227,6 @@
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemUnitCustom"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
-            "
             data-cy="unitCustomFields"
             :error-messages="
               form().serverErrors(
@@ -250,10 +250,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].wiki`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="
               fieldValueChanged(
@@ -284,22 +284,22 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="bulkUnitsDialog">
+        <v-dialog v-model="bulkUnitsDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("AddMultipleUnits") }}</v-card-title>
             <v-card-text>
               <gz-tag-picker v-model="selectedBulkUnitTags"></gz-tag-picker>
               <gz-pick-list
+                v-model="selectedBulkUnitCustomer"
                 :aya-type="$ay.ayt().Customer"
                 :show-edit-icon="false"
-                v-model="selectedBulkUnitCustomer"
                 :label="$ay.t('Customer')"
                 :can-clear="true"
               ></gz-pick-list>
 
               <v-data-table
-                dense
                 v-model="selectedBulkUnits"
+                dense
                 :headers="bulkUnitTableHeaders"
                 :items="availableBulkUnits"
                 class="my-10"
@@ -312,7 +312,7 @@
               </v-data-table>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="bulkUnitsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="bulkUnitsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -339,21 +339,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      bulkUnitsDialog: false,
-      selectedBulkUnitCustomer: this.value.customerId,
-      availableBulkUnits: [],
-      selectedBulkUnits: [],
-      selectedBulkUnitTags: [],
-      bulkUnitTableHeaders: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -376,6 +361,126 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      bulkUnitsDialog: false,
+      selectedBulkUnitCustomer: this.value.customerId,
+      availableBulkUnits: [],
+      selectedBulkUnits: [],
+      selectedBulkUnitTags: [],
+      bulkUnitTableHeaders: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemUnit")) {
+        headers.push({
+          text: this.$ay.t("Unit"),
+          align: "left",
+          value: "unitViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelName")) {
+        headers.push({
+          text: this.$ay.t("UnitModelName"),
+          align: "left",
+          value: "unitModelNameViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelVendorID")) {
+        headers.push({
+          text: this.$ay.t("UnitModelVendorID"),
+          align: "left",
+          value: "unitModelVendorViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitDescription")) {
+        headers.push({
+          text: this.$ay.t("UnitDescription"),
+          align: "left",
+          value: "unitDescriptionViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemUnitNotes"),
+          align: "left",
+          value: "notes"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          unitViz: x.unitViz,
+          unitModelVendorViz: x.unitModelVendorViz,
+          unitModelNameViz: x.unitModelNameViz,
+          unitDescriptionViz: x.unitDescriptionViz,
+          notes: window.$gz.util.truncateString(
+            x.notes,
+            this.pvm.maxTableNotesLength
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].units.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -400,6 +505,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async updateContractIfApplicable() {
       const id = this.value.items[this.activeWoItemIndex].units[
@@ -688,114 +796,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemUnit")) {
-        headers.push({
-          text: this.$ay.t("Unit"),
-          align: "left",
-          value: "unitViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelName")) {
-        headers.push({
-          text: this.$ay.t("UnitModelName"),
-          align: "left",
-          value: "unitModelNameViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelVendorID")) {
-        headers.push({
-          text: this.$ay.t("UnitModelVendorID"),
-          align: "left",
-          value: "unitModelVendorViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitDescription")) {
-        headers.push({
-          text: this.$ay.t("UnitDescription"),
-          align: "left",
-          value: "unitDescriptionViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemUnitNotes"),
-          align: "left",
-          value: "notes"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          unitViz: x.unitViz,
-          unitModelVendorViz: x.unitModelVendorViz,
-          unitModelNameViz: x.unitModelNameViz,
-          unitDescriptionViz: x.unitDescriptionViz,
-          notes: window.$gz.util.truncateString(
-            x.notes,
-            this.pvm.maxTableNotesLength
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].units.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/pm-items.vue b/ayanova/src/components/pm-items.vue
index f9987fa1..4520e6a3 100644
--- a/ayanova/src/components/pm-items.vue
+++ b/ayanova/src/components/pm-items.vue
@@ -163,10 +163,10 @@
         <!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -175,9 +175,9 @@
             data-cy="itemsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.status`]="{ item }">
               <template v-if="item.status.id != null">
@@ -208,8 +208,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -219,6 +219,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`items[${activeItemIndex}].notes`"
             v-model="value.items[activeItemIndex].notes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -226,11 +227,10 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].notes`)
             "
-            :ref="`items[${activeItemIndex}].notes`"
             :rules="[form().required(this, `items[${activeItemIndex}].notes`)]"
             data-cy="Items.Notes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
           ></v-textarea>
         </v-col>
 
@@ -245,24 +245,25 @@
           xl="3"
         >
           <v-text-field
+            :ref="`items[${activeItemIndex}].sequence`"
             v-model="value.items[activeItemIndex].sequence"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="`items[${activeItemIndex}].sequence`"
             :rules="[
               form().integerValid(this, `items[${activeItemIndex}].sequence`)
             ]"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].sequence`)
             "
-            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
             type="number"
+            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
           ></v-text-field>
         </v-col>
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTechNotes')" cols="12">
           <v-textarea
+            :ref="`items[${activeItemIndex}].techNotes`"
             v-model="value.items[activeItemIndex].techNotes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -270,10 +271,9 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].techNotes`)
             "
-            :ref="`items[${activeItemIndex}].techNotes`"
             data-cy="items.techNotes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
           ></v-textarea>
         </v-col>
 
@@ -288,11 +288,11 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemRequestDate')"
+            :ref="`items[${activeItemIndex}].requestDate`"
             v-model="value.items[activeItemIndex].requestDate"
+            :label="$ay.t('WorkOrderItemRequestDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="`items[${activeItemIndex}].requestDate`"
             data-cy="requestDate"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].requestDate`)
@@ -312,10 +312,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             v-model="value.items[activeItemIndex].workOrderItemStatusId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemStatusId')"
             :items="selectableStatusList"
             item-text="name"
             item-value="id"
@@ -326,9 +326,9 @@
                 `items[${activeItemIndex}].workOrderItemStatusId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             data-cy="workOrderItemStatusId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemStatusId')"
             @click:prepend="handleEditItemStatusClick()"
           >
             <template v-slot:selection="{ item }">
@@ -368,10 +368,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             v-model="value.items[activeItemIndex].workOrderItemPriorityId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemPriorityId')"
             :items="selectablePriorityList"
             item-text="name"
             item-value="id"
@@ -382,9 +382,9 @@
                 `items[${activeItemIndex}].workOrderItemPriorityId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             data-cy="workOrderItemPriorityId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemPriorityId')"
             @click:prepend="handleEditItemPriorityClick()"
           >
             <template v-slot:selection="{ item }">
@@ -423,11 +423,11 @@
           xl="3"
         >
           <v-checkbox
+            :ref="`items[${activeItemIndex}].warrantyService`"
             v-model="value.items[activeItemIndex].warrantyService"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemWarrantyService')"
-            :ref="`items[${activeItemIndex}].warrantyService`"
             data-cy="warrantyService"
             :error-messages="
               form().serverErrors(
@@ -447,9 +447,9 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`items[${activeItemIndex}].tags`"
             v-model="value.items[activeItemIndex].tags"
             :readonly="formState.readOnly"
-            :ref="`items[${activeItemIndex}].tags`"
             data-cy="tags"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].tags`)
@@ -460,12 +460,12 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="`items[${activeItemIndex}].customFields`"
             v-model="value.items[activeItemIndex].customFields"
             :form-key="formCustomTemplateKey"
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemCustom"
-            :ref="`items[${activeItemIndex}].customFields`"
             data-cy="customFields"
             :error-messages="
               form().serverErrors(
@@ -485,10 +485,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`items[${activeItemIndex}].wiki`"
             v-model="value.items[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="fieldValueChanged('wiki')"
           ></gz-wiki
@@ -513,7 +513,7 @@
                                         GRANDCHILDREN
               ############################################################################ -->
 
-        <v-col cols="12" v-show="showUnits">
+        <v-col v-show="showUnits" cols="12">
           <GzPMItemUnits
             v-model="value"
             :pvm="pvm"
@@ -524,7 +524,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showScheduledUsers">
+        <v-col v-show="showScheduledUsers" cols="12">
           <GzPMItemScheduledUsers
             v-model="value"
             :pvm="pvm"
@@ -534,7 +534,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTasks">
+        <v-col v-show="showTasks" cols="12">
           <GzPMItemTasks
             v-model="value"
             :pvm="pvm"
@@ -545,7 +545,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showParts">
+        <v-col v-show="showParts" cols="12">
           <GzPMItemParts
             v-model="value"
             :pvm="pvm"
@@ -556,7 +556,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLabors">
+        <v-col v-show="showLabors" cols="12">
           <GzPMItemLabors
             v-model="value"
             :pvm="pvm"
@@ -566,7 +566,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTravels">
+        <v-col v-show="showTravels" cols="12">
           <GzPMItemTravels
             v-model="value"
             :pvm="pvm"
@@ -576,7 +576,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showExpenses">
+        <v-col v-show="showExpenses" cols="12">
           <GzPMItemExpenses
             v-model="value"
             :pvm="pvm"
@@ -587,7 +587,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLoans">
+        <v-col v-show="showLoans" cols="12">
           <GzPMItemLoans
             v-model="value"
             :pvm="pvm"
@@ -597,7 +597,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showOutsideServices">
+        <v-col v-show="showOutsideServices" cols="12">
           <GzPMItemOutsideServices
             v-model="value"
             :pvm="pvm"
@@ -634,8 +634,19 @@ export default {
     GzPMItemLoans,
     GzPMItemOutsideServices
   },
-  created() {
-    this.setDefaultView();
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    goto: {
+      default: null,
+      type: Object
+    }
   },
   data() {
     return {
@@ -652,308 +663,6 @@ export default {
       gotoUnitIndex: null
     };
   },
-  props: {
-    value: {
-      default: null,
-      type: Object
-    },
-    pvm: {
-      default: null,
-      type: Object
-    },
-    goto: {
-      default: null,
-      type: Object
-    }
-  },
-  watch: {
-    goto(val, oldVal) {
-      if (val != oldVal) {
-        const navto = { woitemindex: null, childindex: null };
-        //find the item in question then trigger the nav
-        let keepgoing = true;
-        this.value.items.forEach((z, itemindex) => {
-          if (keepgoing) {
-            switch (val.type) {
-              case window.$gz.type.PMItem:
-                if (z.id == val.id) {
-                  navto.woitemindex = itemindex;
-                  keepgoing = false;
-                }
-                break;
-              case window.$gz.type.PMItemOutsideService:
-                z.outsideServices.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemExpense:
-                z.expenses.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemLabor:
-                z.labors.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemLoan:
-                z.loans.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemPart:
-                z.parts.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemScheduledUser:
-                z.scheduledUsers.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemTask:
-                z.tasks.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemTravel:
-                z.travels.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.PMItemUnit:
-                z.units.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-            }
-          }
-        });
-
-        if (navto.woitemindex != null) {
-          this.selectedRow = [{ index: navto.woitemindex }];
-          this.activeItemIndex = navto.woitemindex;
-
-          this.$nextTick(() => {
-            const el = this.$refs.topform;
-            if (el) {
-              el.scrollIntoView({ behavior: "smooth" });
-            }
-          });
-
-          if (navto.childindex != null) {
-            this.$nextTick(() => {
-              switch (val.type) {
-                case window.$gz.type.PMItemOutsideService:
-                  this.gotoOutsideServiceIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemExpense:
-                  this.gotoExpenseIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemLabor:
-                  this.gotoLaborIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemLoan:
-                  this.gotoLoanIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemPart:
-                  this.gotoPartIndex = navto.childindex;
-                  break;
-
-                case window.$gz.type.PMItemTask:
-                  this.gotoTaskIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemScheduledUser:
-                  this.gotoScheduledUserIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemTravel:
-                  this.gotoTravelIndex = navto.childindex;
-                  break;
-                case window.$gz.type.PMItemUnit:
-                  this.gotoUnitIndex = navto.childindex;
-                  break;
-              }
-            });
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    newItem() {
-      const newIndex = this.value.items.length;
-
-      this.value.items.push({
-        id: 0,
-        concurrency: 0,
-        notes: undefined, //to trigger validation on new
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        pmId: this.value.id,
-        techNotes: null,
-        workOrderItemStatusId: null,
-        workOrderItemPriorityId: null,
-        requestDate: null,
-        warrantyService: false,
-        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
-        isDirty: true,
-        expenses: [],
-        labors: [],
-        loans: [],
-        parts: [],
-        scheduledUsers: [],
-        tasks: [],
-        travels: [],
-        units: [],
-        outsideServices: [],
-        uid: Date.now() //used for error tracking / display
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeItemIndex].notes = null;
-        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
-      });
-    },
-    newSubItem(atype) {
-      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
-      const newId = -Math.abs(Date.now());
-      switch (atype) {
-        case window.$gz.type.WorkOrderItemOutsideService:
-          this.gotoOutsideServiceIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemExpense:
-          this.gotoExpenseIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLabor:
-          this.gotoLaborIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLoan:
-          this.gotoLoanIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemPart:
-          this.gotoPartIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTask:
-          this.gotoTaskIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemScheduledUser:
-          this.gotoScheduledUserIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTravel:
-          this.gotoTravelIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemUnit:
-          this.gotoUnitIndex = newId;
-          break;
-      }
-    },
-    unDeleteItem() {
-      this.value.items[this.activeItemIndex].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeItemIndex].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items.forEach(z => (z.deleted = true));
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value && this.value.items && this.value.items.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    handleEditItemStatusClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemStatus,
-        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
-      });
-    },
-    handleEditItemPriorityClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemPriority,
-        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
-      });
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeItemIndex].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted = this.value.items[item.index].deleted === true;
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-  },
   computed: {
     isDeleted: function() {
       if (this.value.items[this.activeItemIndex] == null) {
@@ -1217,6 +926,297 @@ export default {
         !this.value.userIsRestrictedType
       );
     }
+  },
+  watch: {
+    goto(val, oldVal) {
+      if (val != oldVal) {
+        const navto = { woitemindex: null, childindex: null };
+        //find the item in question then trigger the nav
+        let keepgoing = true;
+        this.value.items.forEach((z, itemindex) => {
+          if (keepgoing) {
+            switch (val.type) {
+              case window.$gz.type.PMItem:
+                if (z.id == val.id) {
+                  navto.woitemindex = itemindex;
+                  keepgoing = false;
+                }
+                break;
+              case window.$gz.type.PMItemOutsideService:
+                z.outsideServices.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemExpense:
+                z.expenses.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemLabor:
+                z.labors.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemLoan:
+                z.loans.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemPart:
+                z.parts.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemScheduledUser:
+                z.scheduledUsers.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemTask:
+                z.tasks.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemTravel:
+                z.travels.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.PMItemUnit:
+                z.units.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+            }
+          }
+        });
+
+        if (navto.woitemindex != null) {
+          this.selectedRow = [{ index: navto.woitemindex }];
+          this.activeItemIndex = navto.woitemindex;
+
+          this.$nextTick(() => {
+            const el = this.$refs.topform;
+            if (el) {
+              el.scrollIntoView({ behavior: "smooth" });
+            }
+          });
+
+          if (navto.childindex != null) {
+            this.$nextTick(() => {
+              switch (val.type) {
+                case window.$gz.type.PMItemOutsideService:
+                  this.gotoOutsideServiceIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemExpense:
+                  this.gotoExpenseIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemLabor:
+                  this.gotoLaborIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemLoan:
+                  this.gotoLoanIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemPart:
+                  this.gotoPartIndex = navto.childindex;
+                  break;
+
+                case window.$gz.type.PMItemTask:
+                  this.gotoTaskIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemScheduledUser:
+                  this.gotoScheduledUserIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemTravel:
+                  this.gotoTravelIndex = navto.childindex;
+                  break;
+                case window.$gz.type.PMItemUnit:
+                  this.gotoUnitIndex = navto.childindex;
+                  break;
+              }
+            });
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    newItem() {
+      const newIndex = this.value.items.length;
+
+      this.value.items.push({
+        id: 0,
+        concurrency: 0,
+        notes: undefined, //to trigger validation on new
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        pmId: this.value.id,
+        techNotes: null,
+        workOrderItemStatusId: null,
+        workOrderItemPriorityId: null,
+        requestDate: null,
+        warrantyService: false,
+        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
+        isDirty: true,
+        expenses: [],
+        labors: [],
+        loans: [],
+        parts: [],
+        scheduledUsers: [],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: [],
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeItemIndex].notes = null;
+        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
+      });
+    },
+    newSubItem(atype) {
+      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
+      const newId = -Math.abs(Date.now());
+      switch (atype) {
+        case window.$gz.type.WorkOrderItemOutsideService:
+          this.gotoOutsideServiceIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemExpense:
+          this.gotoExpenseIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLabor:
+          this.gotoLaborIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLoan:
+          this.gotoLoanIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemPart:
+          this.gotoPartIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTask:
+          this.gotoTaskIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemScheduledUser:
+          this.gotoScheduledUserIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTravel:
+          this.gotoTravelIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemUnit:
+          this.gotoUnitIndex = newId;
+          break;
+      }
+    },
+    unDeleteItem() {
+      this.value.items[this.activeItemIndex].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeItemIndex].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items.forEach(z => (z.deleted = true));
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value && this.value.items && this.value.items.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    handleEditItemStatusClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemStatus,
+        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
+      });
+    },
+    handleEditItemPriorityClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemPriority,
+        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
+      });
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeItemIndex].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted = this.value.items[item.index].deleted === true;
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 
diff --git a/ayanova/src/components/quote-header.vue b/ayanova/src/components/quote-header.vue
index 2218caf4..e56a2a46 100644
--- a/ayanova/src/components/quote-header.vue
+++ b/ayanova/src/components/quote-header.vue
@@ -2,17 +2,17 @@
   <div>
     <v-row>
       <v-col
+        v-if="value.serial != 0 && canEditSerial"
         cols="12"
         sm="6"
         lg="4"
         xl="3"
-        v-if="value.serial != 0 && canEditSerial"
       >
         <v-text-field
+          ref="serial"
           v-model="value.serial"
           :readonly="formState.readOnly"
           :label="$ay.t('QuoteSerialNumber')"
-          ref="serial"
           data-cy="serial"
           :rules="[
             form().integerValid(this, 'serial'),
@@ -24,13 +24,13 @@
       </v-col>
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-pick-list
+          ref="customerId"
+          v-model="value.customerId"
           :aya-type="$ay.ayt().Customer"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.customerId"
           :readonly="formState.readOnly || value.userIsRestrictedType"
           :label="$ay.t('Customer')"
           :can-clear="false"
-          ref="customerId"
           data-cy="customerId"
           :rules="[form().required(this, 'customerId')]"
           :error-messages="form().serverErrors(this, 'customerId')"
@@ -52,12 +52,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="preparedById"
+          v-model="value.preparedById"
           :aya-type="$ay.ayt().User"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.preparedById"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('QuotePreparedByID')"
-          ref="preparedById"
           data-cy="preparedById"
           :error-messages="form().serverErrors(this, 'preparedById')"
           @input="fieldValueChanged('preparedById')"
@@ -116,14 +116,14 @@
         cols="12"
       >
         <v-textarea
+          ref="introduction"
           v-model="value.introduction"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('QuoteIntroduction')"
           :error-messages="form().serverErrors(this, 'introduction')"
-          ref="introduction"
           data-cy="introduction"
-          @input="fieldValueChanged('introduction')"
           auto-grow
+          @input="fieldValueChanged('introduction')"
         ></v-textarea>
       </v-col>
       <v-col
@@ -137,14 +137,14 @@
         cols="12"
       >
         <v-textarea
+          ref="notes"
           v-model="value.notes"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderSummary')"
           :error-messages="form().serverErrors(this, 'notes')"
-          ref="notes"
           data-cy="notes"
-          @input="fieldValueChanged('notes')"
           auto-grow
+          @input="fieldValueChanged('notes')"
         ></v-textarea>
       </v-col>
 
@@ -162,10 +162,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('QuoteQuoteRequestDate')"
-          v-model="value.requested"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="requested"
+          v-model="value.requested"
+          :label="$ay.t('QuoteQuoteRequestDate')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="requested"
           :error-messages="form().serverErrors(this, 'requested')"
           @input="fieldValueChanged('requested')"
@@ -186,10 +186,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('QuoteValidUntilDate')"
-          v-model="value.validUntil"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="validUntil"
+          v-model="value.validUntil"
+          :label="$ay.t('QuoteValidUntilDate')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="validUntil"
           :error-messages="form().serverErrors(this, 'validUntil')"
           @input="fieldValueChanged('validUntil')"
@@ -210,10 +210,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('QuoteDateSubmitted')"
-          v-model="value.submitted"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="submitted"
+          v-model="value.submitted"
+          :label="$ay.t('QuoteDateSubmitted')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="submitted"
           :error-messages="form().serverErrors(this, 'submitted')"
           @input="fieldValueChanged('submitted')"
@@ -234,10 +234,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('QuoteDateApproved')"
-          v-model="value.approved"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="approved"
+          v-model="value.approved"
+          :label="$ay.t('QuoteDateApproved')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="approved"
           :error-messages="form().serverErrors(this, 'approved')"
           @input="fieldValueChanged('approved')"
@@ -258,12 +258,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="contractId"
+          v-model="value.contractId"
           :aya-type="$ay.ayt().Contract"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.contractId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Contract')"
-          ref="contractId"
           data-cy="contractId"
           :error-messages="form().serverErrors(this, 'contractId')"
           @input="fieldValueChanged('contractId')"
@@ -284,12 +284,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="projectId"
+          v-model="value.projectId"
           :aya-type="$ay.ayt().Project"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.projectId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Project')"
-          ref="projectId"
           data-cy="projectId"
           :error-messages="form().serverErrors(this, 'projectId')"
           @input="fieldValueChanged('projectId')"
@@ -304,6 +304,7 @@
         xl="3"
       >
         <v-text-field
+          ref="customerContactName"
           v-model="value.customerContactName"
           :readonly="
             formState.readOnly ||
@@ -312,7 +313,6 @@
               value.userIsSubContractorRestricted
           "
           :label="$ay.t('WorkOrderCustomerContactName')"
-          ref="customerContactName"
           data-cy="customerContactName"
           :error-messages="form().serverErrors(this, 'customerContactName')"
           @input="fieldValueChanged('customerContactName')"
@@ -333,10 +333,10 @@
         xl="3"
       >
         <v-text-field
+          ref="customerReferenceNumber"
           v-model="value.customerReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderCustomerReferenceNumber')"
-          ref="customerReferenceNumber"
           data-cy="customerReferenceNumber"
           :error-messages="form().serverErrors(this, 'customerReferenceNumber')"
           @input="fieldValueChanged('customerReferenceNumber')"
@@ -357,10 +357,10 @@
         xl="3"
       >
         <v-text-field
+          ref="internalReferenceNumber"
           v-model="value.internalReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderInternalReferenceNumber')"
-          ref="internalReferenceNumber"
           data-cy="internalReferenceNumber"
           :error-messages="form().serverErrors(this, 'internalReferenceNumber')"
           @input="fieldValueChanged('internalReferenceNumber')"
@@ -381,10 +381,10 @@
         xl="3"
       >
         <v-checkbox
+          ref="onsite"
           v-model="value.onsite"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderOnsite')"
-          ref="onsite"
           data-cy="onsite"
           :error-messages="form().serverErrors(this, 'onsite')"
           @change="fieldValueChanged('onsite')"
@@ -402,9 +402,9 @@
         cols="12"
       >
         <gz-tag-picker
+          ref="tags"
           v-model="value.tags"
           :readonly="formState.readOnly || value.userIsTechRestricted"
-          ref="tags"
           data-cy="tags"
           :error-messages="form().serverErrors(this, 'tags')"
           @input="fieldValueChanged('tags')"
@@ -420,12 +420,12 @@
         cols="12"
       >
         <gz-custom-fields
+          ref="customFields"
           v-model="value.customFields"
           :form-key="formCustomTemplateKey"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :parent-v-m="this"
           key-start-with="WorkOrderCustom"
-          ref="customFields"
           data-cy="customFields"
           :error-messages="form().serverErrors(this, 'customFields')"
           @input="fieldValueChanged('customFields')"
@@ -443,10 +443,10 @@
         cols="12"
       >
         <gz-wiki
-          :aya-type="pvm.ayaType"
-          :aya-id="value.id"
           ref="wiki"
           v-model="value.wiki"
+          :aya-type="pvm.ayaType"
+          :aya-id="value.id"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           @input="fieldValueChanged('wiki')"
         ></gz-wiki
@@ -480,13 +480,6 @@ export default {
     GzQuoteState,
     GzWoAddress
   },
-  data() {
-    return {
-      canEditSerial: window.$gz.role.hasRole([
-        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
-      ])
-    };
-  },
 
   props: {
     value: {
@@ -498,6 +491,21 @@ export default {
       type: Object
     }
   },
+  data() {
+    return {
+      canEditSerial: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
+      ])
+    };
+  },
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  },
 
   methods: {
     form() {
@@ -510,14 +518,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-expenses.vue b/ayanova/src/components/quote-item-expenses.vue
index ed036eef..dbcae7db 100644
--- a/ayanova/src/components/quote-item-expenses.vue
+++ b/ayanova/src/components/quote-item-expenses.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.reimburseUser`]="{ item }">
               <v-simple-checkbox
@@ -86,8 +86,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -100,15 +100,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].name
             "
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseName')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -131,15 +131,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].totalCost
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTotalCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
-            "
             data-cy="expenseTotalCost"
             :error-messages="
               form().serverErrors(
@@ -176,6 +176,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeAmount
@@ -183,9 +186,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeAmount')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
-            "
             data-cy="expenseChargeAmount"
             :error-messages="
               form().serverErrors(
@@ -222,6 +222,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeToCustomer
@@ -229,9 +232,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeToCustomer')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
-            "
             data-cy="chargeToCustomer"
             :error-messages="
               form().serverErrors(
@@ -255,15 +255,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].taxPaid
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTaxPaid')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
-            "
             data-cy="expenseTaxPaid"
             :error-messages="
               form().serverErrors(
@@ -300,18 +300,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeTaxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeTaxCodeID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
-            "
             data-cy="expenseChargeTaxCode"
             :error-messages="
               form().serverErrors(
@@ -339,6 +339,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .reimburseUser
@@ -346,9 +349,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseReimburseUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
-            "
             data-cy="expenseReimburseUser"
             :error-messages="
               form().serverErrors(
@@ -372,20 +372,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -407,6 +407,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .description
@@ -420,16 +423,13 @@
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
-            "
             data-cy="expenseDescription"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -438,15 +438,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -465,144 +456,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.expensetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
-
-      //#################################### IMPORTANT ##################################################
-      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
-      //so that they are in agreement otherwise restricted users will never be able to create new records
-
-      this.value.items[this.activeWoItemIndex].expenses.push({
-        id: 0,
-        concurrency: 0,
-        description: null,
-        name: null,
-        totalCost: 0,
-        chargeAmount: 0,
-        taxPaid: 0,
-        chargeTaxCodeId: null,
-        taxCodeViz: null,
-        reimburseUser: false,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        chargeToCustomer: false,
-        isDirty: true,
-        quoteItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now() //used for error tracking / display
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].expenses.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.hasData &&
-        this.value.items[this.activeWoItemIndex].expenses.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].expenses[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].expenses[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -780,6 +638,148 @@ export default {
     canDeleteAll: function() {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.expensetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
+
+      //#################################### IMPORTANT ##################################################
+      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
+      //so that they are in agreement otherwise restricted users will never be able to create new records
+
+      this.value.items[this.activeWoItemIndex].expenses.push({
+        id: 0,
+        concurrency: 0,
+        description: null,
+        name: null,
+        totalCost: 0,
+        chargeAmount: 0,
+        taxPaid: 0,
+        chargeTaxCodeId: null,
+        taxCodeViz: null,
+        reimburseUser: false,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        chargeToCustomer: false,
+        isDirty: true,
+        quoteItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].expenses.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.hasData &&
+        this.value.items[this.activeWoItemIndex].expenses.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].expenses[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].expenses[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-labors.vue b/ayanova/src/components/quote-item-labors.vue
index 4bc3fcd0..83ced50f 100644
--- a/ayanova/src/components/quote-item-labors.vue
+++ b/ayanova/src/components/quote-item-labors.vue
@@ -58,10 +58,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -70,9 +70,9 @@
             data-cy="laborsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -82,8 +82,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -96,16 +96,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStartDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
-            "
             data-cy="serviceStartDate"
             :error-messages="
               form().serverErrors(
@@ -129,16 +129,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStopDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
-            "
             data-cy="serviceStopDate"
             :rules="[
               form().datePrecedence(
@@ -169,6 +169,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateQuantity
@@ -176,9 +179,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
-            "
             data-cy="laborServiceRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -212,19 +212,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
-            "
             data-cy="labors.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -249,20 +249,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
-            "
             data-cy="labors.userid"
             :error-messages="
               form().serverErrors(
@@ -287,6 +287,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .noChargeQuantity
@@ -294,9 +297,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="laborNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -333,18 +333,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="laborTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -372,6 +372,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .priceOverride
@@ -380,9 +383,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
-            "
             data-cy="laborpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -409,6 +409,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceDetails
@@ -422,16 +425,13 @@
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
-            "
             data-cy="laborserviceDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -440,15 +440,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -467,238 +458,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.labortopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    appendTasks() {
-      const tasks = this.value.items[this.activeWoItemIndex].tasks;
-      if (tasks.length == 0) {
-        return;
-      }
-      const l = this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ];
-      let at = "";
-      tasks.forEach(z => {
-        at += `${z.task} - ${z.statusViz}\n`;
-      });
-      l.serviceDetails += `\n${at}`;
-    },
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].serviceRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
-
-      this.value.items[this.activeWoItemIndex].labors.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        serviceStartDate: null,
-        serviceStopDate: null,
-        serviceRateId: null,
-        serviceDetails: null,
-        serviceRateQuantity: 0,
-        noChargeQuantity: 0,
-        taxCodeSaleId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        quoteItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        serviceRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].labors.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStopDate;
-        if (ref.includes("serviceStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("serviceStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -985,6 +749,242 @@ export default {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.labortopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    appendTasks() {
+      const tasks = this.value.items[this.activeWoItemIndex].tasks;
+      if (tasks.length == 0) {
+        return;
+      }
+      const l = this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ];
+      let at = "";
+      tasks.forEach(z => {
+        at += `${z.task} - ${z.statusViz}\n`;
+      });
+      l.serviceDetails += `\n${at}`;
+    },
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].serviceRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
+
+      this.value.items[this.activeWoItemIndex].labors.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        serviceStartDate: null,
+        serviceStopDate: null,
+        serviceRateId: null,
+        serviceDetails: null,
+        serviceRateQuantity: 0,
+        noChargeQuantity: 0,
+        taxCodeSaleId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        quoteItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        serviceRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].labors.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStopDate;
+        if (ref.includes("serviceStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("serviceStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-loans.vue b/ayanova/src/components/quote-item-loans.vue
index 240eef85..84554332 100644
--- a/ayanova/src/components/quote-item-loans.vue
+++ b/ayanova/src/components/quote-item-loans.vue
@@ -50,10 +50,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -62,9 +62,9 @@
             data-cy="loansTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -74,8 +74,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -88,19 +88,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().LoanUnit"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].loanUnitId
             "
+            :aya-type="$ay.ayt().LoanUnit"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanUnit')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
-            "
             data-cy="loans.loanUnitId"
             :rules="[
               form().required(
@@ -134,6 +134,7 @@
           xl="3"
         >
           <v-select
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             v-model="value.items[activeWoItemIndex].loans[activeItemIndex].rate"
             :items="pvm.selectLists.loanUnitRateUnits"
             item-text="name"
@@ -141,7 +142,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanRate')"
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             data-cy="loanUnitRateUnit"
             :error-messages="
               form().serverErrors(
@@ -169,15 +169,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].quantity
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
-            "
             data-cy="loanQuantity"
             :error-messages="
               form().serverErrors(
@@ -211,15 +211,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanOutDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].outDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
+            "
+            :label="$ay.t('WorkOrderItemLoanOutDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitOutDate"
             :error-messages="
               form().serverErrors(
@@ -243,15 +243,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanDueDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].dueDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
+            "
+            :label="$ay.t('WorkOrderItemLoanDueDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitDueDate"
             :error-messages="
               form().serverErrors(
@@ -275,15 +275,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanReturnDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].returnDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
+            "
+            :label="$ay.t('WorkOrderItemLoanReturnDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loanUnitReturnDate"
             :error-messages="
               form().serverErrors(
@@ -310,17 +310,17 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
-            "
-            :readonly="formState.readOnly || isDeleted"
-            :disabled="isDeleted"
-            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].taxCodeId`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
+            "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             data-cy="loanTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -348,6 +348,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex]
                 .priceOverride
@@ -356,9 +359,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
-            "
             data-cy="loanpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -382,6 +382,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemLoanNotes')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].notes
             "
@@ -394,14 +395,13 @@
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             data-cy="loanUnitNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -410,15 +410,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -437,151 +428,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.loantopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    loanUnitRateUnitChange(newId) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
-        s => s.id == newId
-      ).name;
-    },
-    loanUnitChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].loanUnitViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
-
-      this.value.items[this.activeWoItemIndex].loans.push({
-        id: 0,
-        concurrency: 0,
-        notes: null,
-        outDate: null,
-        dueDate: null,
-        returnDate: null,
-        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
-        loanUnitId: 0, //zero to break rule on new
-        quantity: 1,
-        rate: 1,
-        cost: 0,
-        priceOverride: null,
-        isDirty: true,
-        quoteItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        loanUnitViz: null,
-        taxCodeViz: null,
-        unitOfMeasureViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].loanUnitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].loans.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -872,6 +723,155 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.loantopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    loanUnitRateUnitChange(newId) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
+        s => s.id == newId
+      ).name;
+    },
+    loanUnitChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].loanUnitViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
+
+      this.value.items[this.activeWoItemIndex].loans.push({
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        outDate: null,
+        dueDate: null,
+        returnDate: null,
+        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
+        loanUnitId: 0, //zero to break rule on new
+        quantity: 1,
+        rate: 1,
+        cost: 0,
+        priceOverride: null,
+        isDirty: true,
+        quoteItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        loanUnitViz: null,
+        taxCodeViz: null,
+        unitOfMeasureViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].loanUnitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].loans.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-outside-services.vue b/ayanova/src/components/quote-item-outside-services.vue
index 70241b34..df0ad831 100644
--- a/ayanova/src/components/quote-item-outside-services.vue
+++ b/ayanova/src/components/quote-item-outside-services.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="outsideServicesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,18 +87,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
-            "
             data-cy="outsideServices.unitId"
             :rules="[
               form().required(
@@ -131,18 +131,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentToId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentToID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
-            "
             data-cy="outsideServices.vendorSentToId"
             :error-messages="
               form().serverErrors(
@@ -167,6 +167,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .rmaNumber
@@ -174,9 +177,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRMANumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -198,6 +198,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairCost
@@ -206,9 +209,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -238,6 +238,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairPrice
@@ -246,9 +249,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -280,18 +280,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentViaId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentViaID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
-            "
             data-cy="outsideServices.vendorSentViaId"
             :error-messages="
               form().serverErrors(
@@ -318,6 +318,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .trackingNumber
@@ -325,9 +328,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceTrackingNumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
@@ -349,6 +349,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingCost
@@ -357,9 +360,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -389,6 +389,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingPrice
@@ -397,9 +400,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
-            "
             data-cy="outsideServicepriceoverride"
             :error-messages="
               form().serverErrors(
@@ -429,16 +429,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .sentDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
-            "
             data-cy="outsideServiceSentDate"
             :error-messages="
               form().serverErrors(
@@ -462,16 +462,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .etaDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
-            "
             data-cy="outsideServiceEtaDate"
             :error-messages="
               form().serverErrors(
@@ -495,16 +495,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .returnDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
-            "
             data-cy="outsideServiceDateReturned"
             :error-messages="
               form().serverErrors(
@@ -528,18 +528,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .taxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('TaxCode')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
-            "
             data-cy="outsideServiceTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -561,6 +561,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .notes
@@ -574,16 +577,13 @@
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
-            "
             data-cy="outsideServiceNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -592,15 +592,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -619,162 +610,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.outsideservicetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    unitChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].unitViz = newName;
-    },
-    vendorSentToChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentToViz = newName;
-    },
-    vendorSentViaChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentViaViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
-        .length;
-
-      this.value.items[this.activeWoItemIndex].outsideServices.push({
-        id: 0,
-        concurrency: 0,
-        unitId: 0, //zero to break rule on new
-        notes: null,
-        vendorSentToId: null,
-        vendorSentViaId: null,
-        rmaNumber: null,
-        trackingNumber: null,
-        repairCost: 0,
-        repairPrice: 0,
-        shippingCost: 0,
-        shippingPrice: 0,
-        sentDate: window.$gz.locale.nowUTC8601String(),
-        etaDate: null,
-        returnDate: null,
-        taxCodeId: null,
-        isDirty: true,
-        quoteItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        unitViz: null,
-        vendorSentToViz: null,
-        vendorSentViaViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].unitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1085,6 +925,166 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.outsideservicetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    unitChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].unitViz = newName;
+    },
+    vendorSentToChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentToViz = newName;
+    },
+    vendorSentViaChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentViaViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
+        .length;
+
+      this.value.items[this.activeWoItemIndex].outsideServices.push({
+        id: 0,
+        concurrency: 0,
+        unitId: 0, //zero to break rule on new
+        notes: null,
+        vendorSentToId: null,
+        vendorSentViaId: null,
+        rmaNumber: null,
+        trackingNumber: null,
+        repairCost: 0,
+        repairPrice: 0,
+        shippingCost: 0,
+        shippingPrice: 0,
+        sentDate: window.$gz.locale.nowUTC8601String(),
+        etaDate: null,
+        returnDate: null,
+        taxCodeId: null,
+        isDirty: true,
+        quoteItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        unitViz: null,
+        vendorSentToViz: null,
+        vendorSentViaViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].unitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-parts.vue b/ayanova/src/components/quote-item-parts.vue
index a3aa7287..41079c51 100644
--- a/ayanova/src/components/quote-item-parts.vue
+++ b/ayanova/src/components/quote-item-parts.vue
@@ -66,10 +66,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -78,9 +78,9 @@
             data-cy="partsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -90,8 +90,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -104,19 +104,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Part"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].partId
             "
+            :aya-type="$ay.ayt().Part"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
-            "
             data-cy="parts.partId"
             :error-messages="
               form().serverErrors(
@@ -151,18 +151,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().PartWarehouse"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .partWarehouseId
             "
+            :aya-type="$ay.ayt().PartWarehouse"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
-            "
             data-cy="parts.partWarehouseId"
             :error-messages="
               form().serverErrors(
@@ -186,6 +186,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].quantity
             "
@@ -194,9 +197,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -243,6 +243,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].description
             "
@@ -251,9 +254,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartDescription')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -280,18 +280,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .taxPartSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartTaxPartSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
-            "
             data-cy="partTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -319,6 +319,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .priceOverride
@@ -327,9 +330,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
-            "
             data-cy="partpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -353,6 +353,9 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemPartSerials')" cols="12">
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].serials
             "
@@ -365,17 +368,14 @@
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
-            "
             data-cy="partSerials"
+            auto-grow
+            prepend-icon="$ayiListUl"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            auto-grow
-            prepend-icon="$ayiListUl"
             @click:prepend="selectSerials()"
           ></v-textarea>
         </v-col>
@@ -386,16 +386,16 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="partAssemblyDialog">
+        <v-dialog v-model="partAssemblyDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedPartAssembly"
+                v-model="selectedPartAssembly"
                 :aya-type="$ay.ayt().PartAssembly"
                 show-edit-icon
-                v-model="selectedPartAssembly"
                 :label="$ay.t('PartAssemblyList')"
-                ref="selectedPartAssembly"
                 data-cy="selectedPartAssembly"
               ></gz-pick-list>
 
@@ -404,16 +404,16 @@
                   pvm.useInventory &&
                     form().showMe(this, 'WorkOrderItemPartPartWarehouseID')
                 "
+                ref="selectedPartWarehouse"
+                v-model="selectedPartWarehouse"
                 :aya-type="$ay.ayt().PartWarehouse"
                 show-edit-icon
-                v-model="selectedPartWarehouse"
                 :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-                ref="selectedPartWarehouse"
                 data-cy="selectedPartWarehouse"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="partAssemblyDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="partAssemblyDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -421,8 +421,8 @@
                 :disabled="selectedPartAssembly == null"
                 color="primary"
                 text
-                @click="addPartAssembly()"
                 class="ml-4"
+                @click="addPartAssembly()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -435,10 +435,10 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="serialDialog">
+        <v-dialog v-model="serialDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>
-              <v-btn text @click="serialDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="serialDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -466,21 +466,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      partAssemblyDialog: false,
-      selectedPartAssembly: null,
-      selectedPartWarehouse: 1,
-      serialDialog: false,
-      availableSerials: [],
-      selectedSerials: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -499,6 +484,308 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      partAssemblyDialog: false,
+      selectedPartAssembly: null,
+      selectedPartWarehouse: 1,
+      serialDialog: false,
+      availableSerials: [],
+      selectedSerials: []
+    };
+  },
+  computed: {
+    requestMore: function() {
+      return this.$ay
+        .t("WorkOrderItemPartRequestMore")
+        .replace(
+          "{n}",
+          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+            .requestAmountViz
+        );
+    },
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartID"),
+          align: "left",
+          value: "partNameViz"
+        });
+      }
+
+      if (
+        this.pvm.useInventory &&
+        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
+          align: "left",
+          value: "partWarehouseViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartQuantity"),
+          align: "right",
+          value: "quantity"
+        });
+      }
+
+      if (this.form().showMe(this, "PartDescription")) {
+        headers.push({
+          text: this.$ay.t("PartDescription"),
+          align: "left",
+          value: "partDescriptionViz"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUPC")) {
+        headers.push({
+          text: this.$ay.t("PartUPC"),
+          align: "left",
+          value: "upcViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartDescription"),
+          align: "left",
+          value: "description"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
+        headers.push({
+          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
+          align: "left",
+          value: "serials"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
+        headers.push({
+          text: this.$ay.t("UnitOfMeasure"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartCost") &&
+        this.value.userCanViewPartCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "cost"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartListPrice") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPrice"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          partNameViz: x.partNameViz,
+          partWarehouseViz: x.partWarehouseViz,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.pvm.languageName
+          ),
+          partDescriptionViz: x.partDescriptionViz,
+          upcViz: x.upcViz,
+          description: x.description,
+          serials: window.$gz.util.truncateString(
+            x.serials,
+            this.pvm.maxTableNotesLength
+          ),
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          cost: window.$gz.locale.currencyLocalized(
+            x.cost,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          listPrice: window.$gz.locale.currencyLocalized(
+            x.listPrice,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          priceViz: window.$gz.locale.currencyLocalized(
+            x.priceViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxCodeViz: x.taxCodeViz,
+          priceOverride: window.$gz.locale.currencyLocalized(
+            x.priceOverride,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          netViz: window.$gz.locale.currencyLocalized(
+            x.netViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxAViz: window.$gz.locale.currencyLocalized(
+            x.taxAViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxBViz: window.$gz.locale.currencyLocalized(
+            x.taxBViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          lineTotalViz: window.$gz.locale.currencyLocalized(
+            x.lineTotalViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].parts.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+
+    //----
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -523,6 +810,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     generateUnit() {
       const thisPart = this.value.items[this.activeWoItemIndex].parts[
@@ -828,296 +1118,6 @@ export default {
       return ret;
     }
     //---
-  },
-  computed: {
-    requestMore: function() {
-      return this.$ay
-        .t("WorkOrderItemPartRequestMore")
-        .replace(
-          "{n}",
-          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-            .requestAmountViz
-        );
-    },
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartID"),
-          align: "left",
-          value: "partNameViz"
-        });
-      }
-
-      if (
-        this.pvm.useInventory &&
-        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
-          align: "left",
-          value: "partWarehouseViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartQuantity"),
-          align: "right",
-          value: "quantity"
-        });
-      }
-
-      if (this.form().showMe(this, "PartDescription")) {
-        headers.push({
-          text: this.$ay.t("PartDescription"),
-          align: "left",
-          value: "partDescriptionViz"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUPC")) {
-        headers.push({
-          text: this.$ay.t("PartUPC"),
-          align: "left",
-          value: "upcViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartDescription"),
-          align: "left",
-          value: "description"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
-        headers.push({
-          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
-          align: "left",
-          value: "serials"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
-        headers.push({
-          text: this.$ay.t("UnitOfMeasure"),
-          align: "left",
-          value: "unitOfMeasureViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartCost") &&
-        this.value.userCanViewPartCosts &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Cost"),
-          align: "right",
-          value: "cost"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartListPrice") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("ListPrice"),
-          align: "right",
-          value: "listPrice"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceOverride") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("PriceOverride"),
-          align: "right",
-          value: "priceOverride"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Price"),
-          align: "right",
-          value: "priceViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Tax"),
-          align: "left",
-          value: "taxCodeViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartNetViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("NetPrice"),
-          align: "right",
-          value: "netViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxAViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxAAmt"),
-          align: "right",
-          value: "taxAViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxBViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxBAmt"),
-          align: "right",
-          value: "taxBViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartLineTotalViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("LineTotal"),
-          align: "right",
-          value: "lineTotalViz"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          partNameViz: x.partNameViz,
-          partWarehouseViz: x.partWarehouseViz,
-          quantity: window.$gz.locale.decimalLocalized(
-            x.quantity,
-            this.pvm.languageName
-          ),
-          partDescriptionViz: x.partDescriptionViz,
-          upcViz: x.upcViz,
-          description: x.description,
-          serials: window.$gz.util.truncateString(
-            x.serials,
-            this.pvm.maxTableNotesLength
-          ),
-          unitOfMeasureViz: x.unitOfMeasureViz,
-          cost: window.$gz.locale.currencyLocalized(
-            x.cost,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          listPrice: window.$gz.locale.currencyLocalized(
-            x.listPrice,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          priceViz: window.$gz.locale.currencyLocalized(
-            x.priceViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxCodeViz: x.taxCodeViz,
-          priceOverride: window.$gz.locale.currencyLocalized(
-            x.priceOverride,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          netViz: window.$gz.locale.currencyLocalized(
-            x.netViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxAViz: window.$gz.locale.currencyLocalized(
-            x.taxAViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxBViz: window.$gz.locale.currencyLocalized(
-            x.taxBViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          lineTotalViz: window.$gz.locale.currencyLocalized(
-            x.lineTotalViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].parts.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
-
-    //----
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-scheduled-users.vue b/ayanova/src/components/quote-item-scheduled-users.vue
index db77c129..d3ebb044 100644
--- a/ayanova/src/components/quote-item-scheduled-users.vue
+++ b/ayanova/src/components/quote-item-scheduled-users.vue
@@ -71,10 +71,10 @@
         <!-- ################################ SCHEDULED USERS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -83,9 +83,9 @@
             data-cy="scheduledUsersTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -95,8 +95,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -109,16 +109,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .startDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
-            "
             data-cy="startDate"
             :error-messages="
               form().serverErrors(
@@ -142,16 +142,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .stopDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
-            "
             data-cy="stopDate"
             :rules="[
               form().datePrecedence(
@@ -184,6 +184,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .estimatedQuantity
@@ -193,9 +196,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
-            "
             data-cy="scheduledUsers.EstimatedQuantity"
             :error-messages="
               form().serverErrors(
@@ -229,21 +229,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
-            "
             data-cy="scheduledUsers.userid"
             :error-messages="
               form().serverErrors(
@@ -268,21 +268,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
-            "
             data-cy="scheduledUsers.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -304,15 +304,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -331,6 +322,136 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ].deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
+          align: "right",
+          value: "startDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
+          align: "right",
+          value: "stopDate"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
+          align: "right",
+          value: "estimatedQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
+          align: "left",
+          value: "serviceRateViz"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
+        (x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.startDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.stopDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            estimatedQuantity: window.$gz.locale.decimalLocalized(
+              x.estimatedQuantity,
+              this.pvm.languageName
+            ),
+            userViz: x.userViz,
+            serviceRateViz: x.serviceRateViz
+          };
+        }
+      );
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    hasMultipleItems: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -355,6 +476,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     convertAllToLabor() {
       this.value.items[this.activeWoItemIndex].scheduledUsers.forEach(z => {
@@ -574,130 +698,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ] == null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ].deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
-          align: "right",
-          value: "startDate"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
-          align: "right",
-          value: "stopDate"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
-          align: "right",
-          value: "estimatedQuantity"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
-          align: "left",
-          value: "userViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
-          align: "left",
-          value: "serviceRateViz"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
-        (x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.startDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.stopDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            estimatedQuantity: window.$gz.locale.decimalLocalized(
-              x.estimatedQuantity,
-              this.pvm.languageName
-            ),
-            userViz: x.userViz,
-            serviceRateViz: x.serviceRateViz
-          };
-        }
-      );
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    hasMultipleItems: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-tasks.vue b/ayanova/src/components/quote-item-tasks.vue
index 635e6439..6bb4bfe4 100644
--- a/ayanova/src/components/quote-item-tasks.vue
+++ b/ayanova/src/components/quote-item-tasks.vue
@@ -55,10 +55,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -67,9 +67,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -79,8 +79,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -93,15 +93,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].sequence
             "
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
-            "
             :rules="[
               form().integerValid(
                 this,
@@ -114,12 +114,12 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
+            type="number"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
-            type="number"
           ></v-text-field>
         </v-col>
 
@@ -136,6 +136,9 @@
           xl="3"
         >
           <v-select
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].status
             "
@@ -145,9 +148,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskWorkOrderItemTaskCompletionType')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
-            "
             data-cy="usertype"
             :rules="[
               form().integerValid(
@@ -178,21 +178,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedByUserId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -217,16 +217,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedDate
             "
+            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
-            "
             data-cy="travelCompletedDate"
             :error-messages="
               form().serverErrors(
@@ -244,6 +244,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTaskTaskID')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             v-model="value.items[activeWoItemIndex].tasks[activeItemIndex].task"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -260,14 +261,13 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             ]"
-            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             data-cy="task"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -277,21 +277,21 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="taskGroupDialog">
+        <v-dialog v-model="taskGroupDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedTaskGroup"
+                v-model="selectedTaskGroup"
                 :aya-type="$ay.ayt().TaskGroup"
                 show-edit-icon
-                v-model="selectedTaskGroup"
                 :label="$ay.t('TaskGroupList')"
-                ref="selectedTaskGroup"
                 data-cy="selectedTaskGroup"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="taskGroupDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="taskGroupDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -299,8 +299,8 @@
                 :disabled="selectedTaskGroup == null"
                 color="primary"
                 text
-                @click="addTaskGroup()"
                 class="ml-4"
+                @click="addTaskGroup()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -312,17 +312,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      taskGroupDialog: false,
-      selectedTaskGroup: null
-    };
-  },
   props: {
     value: {
       default: null,
@@ -341,6 +330,127 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      taskGroupDialog: false,
+      selectedTaskGroup: null
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
+        headers.push({
+          text: this.$ay.t("Sequence"),
+          align: "left",
+          value: "sequence"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskTaskID"),
+          align: "start",
+          value: "task"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskUser"),
+          align: "start",
+          value: "completedByUserViz"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
+          align: "start",
+          value: "statusViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
+          align: "right",
+          value: "completedDate"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].tasks
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task,
+            completedByUserViz: x.completedByUserViz,
+            statusViz: x.statusViz,
+            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.completedDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -365,6 +475,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async addTaskGroup() {
       const res = await window.$gz.api.get(
@@ -532,119 +645,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
-        headers.push({
-          text: this.$ay.t("Sequence"),
-          align: "left",
-          value: "sequence"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskTaskID"),
-          align: "start",
-          value: "task"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskUser"),
-          align: "start",
-          value: "completedByUserViz"
-        });
-      }
-
-      if (
-        this.form().showMe(
-          this,
-          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
-        )
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
-          align: "start",
-          value: "statusViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
-          align: "right",
-          value: "completedDate"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].tasks
-        .map((x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            sequence: x.sequence,
-            task: x.task,
-            completedByUserViz: x.completedByUserViz,
-            statusViz: x.statusViz,
-            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.completedDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            )
-          };
-        })
-        .sort((a, b) => a.sequence - b.sequence);
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-travels.vue b/ayanova/src/components/quote-item-travels.vue
index 7a031c07..b746e9ac 100644
--- a/ayanova/src/components/quote-item-travels.vue
+++ b/ayanova/src/components/quote-item-travels.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="travelsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,16 +87,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStartDate
             "
+            :label="$ay.t('WorkOrderItemTravelStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
-            "
             data-cy="travelStartDate"
             :error-messages="
               form().serverErrors(
@@ -120,16 +120,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStopDate
             "
+            :label="$ay.t('WorkOrderItemTravelStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
-            "
             data-cy="travelStopDate"
             :rules="[
               form().datePrecedence(
@@ -160,6 +160,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateQuantity
@@ -167,9 +170,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
-            "
             data-cy="travelTravelRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -202,15 +202,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].distance
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelDistance')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
-            "
             data-cy="travelTravelRateDistance"
             :error-messages="
               form().serverErrors(
@@ -243,19 +243,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TravelRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateId
             "
+            :aya-type="$ay.ayt().TravelRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
-            "
             data-cy="travels.travelRateId"
             :error-messages="
               form().serverErrors(
@@ -280,20 +280,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
-            "
             data-cy="travels.userid"
             :error-messages="
               form().serverErrors(
@@ -318,6 +318,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .noChargeQuantity
@@ -325,9 +328,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="travelNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -364,18 +364,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="travelTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -403,6 +403,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .priceOverride
@@ -411,9 +414,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
-            "
             data-cy="travelpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -440,6 +440,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelDetails
@@ -453,16 +456,13 @@
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
-            "
             data-cy="traveltravelDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -471,15 +471,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -498,225 +489,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.traveltopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].travelRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
-
-      this.value.items[this.activeWoItemIndex].travels.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        travelStartDate: null,
-        travelStopDate: null,
-        travelRateId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        travelDetails: null,
-        travelRateQuantity: 0,
-        noChargeQuantity: 0,
-        distance: 0,
-        taxCodeSaleId: null,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        quoteItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        travelRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].travels.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStopDate;
-        if (ref.includes("travelStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("travelStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1015,6 +792,229 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.traveltopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].travelRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
+
+      this.value.items[this.activeWoItemIndex].travels.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        travelStartDate: null,
+        travelStopDate: null,
+        travelRateId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        travelDetails: null,
+        travelRateQuantity: 0,
+        noChargeQuantity: 0,
+        distance: 0,
+        taxCodeSaleId: null,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        quoteItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        travelRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].travels.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStopDate;
+        if (ref.includes("travelStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("travelStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-item-units.vue b/ayanova/src/components/quote-item-units.vue
index 1cfcf080..41ec604e 100644
--- a/ayanova/src/components/quote-item-units.vue
+++ b/ayanova/src/components/quote-item-units.vue
@@ -57,10 +57,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -69,9 +69,9 @@
             data-cy="unitsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -81,8 +81,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -94,20 +94,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            :variant="'customerid:' + value.customerId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            :variant="'customerid:' + value.customerId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
-            "
             data-cy="units.unitId"
             :rules="[
               form().required(
@@ -166,6 +166,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].notes
             "
@@ -178,14 +179,13 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             data-cy="unitUnitNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
 
@@ -197,6 +197,7 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].tags"
             :readonly="formState.readOnly"
             data-cy="unitTags"
@@ -206,7 +207,6 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
@@ -217,6 +217,9 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].customFields
             "
@@ -224,9 +227,6 @@
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemUnitCustom"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
-            "
             data-cy="unitCustomFields"
             :error-messages="
               form().serverErrors(
@@ -250,10 +250,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].wiki`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="
               fieldValueChanged(
@@ -284,22 +284,22 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="bulkUnitsDialog">
+        <v-dialog v-model="bulkUnitsDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("AddMultipleUnits") }}</v-card-title>
             <v-card-text>
               <gz-tag-picker v-model="selectedBulkUnitTags"></gz-tag-picker>
               <gz-pick-list
+                v-model="selectedBulkUnitCustomer"
                 :aya-type="$ay.ayt().Customer"
                 :show-edit-icon="false"
-                v-model="selectedBulkUnitCustomer"
                 :label="$ay.t('Customer')"
                 :can-clear="true"
               ></gz-pick-list>
 
               <v-data-table
-                dense
                 v-model="selectedBulkUnits"
+                dense
                 :headers="bulkUnitTableHeaders"
                 :items="availableBulkUnits"
                 class="my-10"
@@ -312,7 +312,7 @@
               </v-data-table>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="bulkUnitsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="bulkUnitsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -339,21 +339,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      bulkUnitsDialog: false,
-      selectedBulkUnitCustomer: this.value.customerId,
-      availableBulkUnits: [],
-      selectedBulkUnits: [],
-      selectedBulkUnitTags: [],
-      bulkUnitTableHeaders: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -376,6 +361,126 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      bulkUnitsDialog: false,
+      selectedBulkUnitCustomer: this.value.customerId,
+      availableBulkUnits: [],
+      selectedBulkUnits: [],
+      selectedBulkUnitTags: [],
+      bulkUnitTableHeaders: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemUnit")) {
+        headers.push({
+          text: this.$ay.t("Unit"),
+          align: "left",
+          value: "unitViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelName")) {
+        headers.push({
+          text: this.$ay.t("UnitModelName"),
+          align: "left",
+          value: "unitModelNameViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelVendorID")) {
+        headers.push({
+          text: this.$ay.t("UnitModelVendorID"),
+          align: "left",
+          value: "unitModelVendorViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitDescription")) {
+        headers.push({
+          text: this.$ay.t("UnitDescription"),
+          align: "left",
+          value: "unitDescriptionViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemUnitNotes"),
+          align: "left",
+          value: "notes"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          unitViz: x.unitViz,
+          unitModelVendorViz: x.unitModelVendorViz,
+          unitModelNameViz: x.unitModelNameViz,
+          unitDescriptionViz: x.unitDescriptionViz,
+          notes: window.$gz.util.truncateString(
+            x.notes,
+            this.pvm.maxTableNotesLength
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].units.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -400,6 +505,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async updateContractIfApplicable() {
       const id = this.value.items[this.activeWoItemIndex].units[
@@ -689,114 +797,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemUnit")) {
-        headers.push({
-          text: this.$ay.t("Unit"),
-          align: "left",
-          value: "unitViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelName")) {
-        headers.push({
-          text: this.$ay.t("UnitModelName"),
-          align: "left",
-          value: "unitModelNameViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelVendorID")) {
-        headers.push({
-          text: this.$ay.t("UnitModelVendorID"),
-          align: "left",
-          value: "unitModelVendorViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitDescription")) {
-        headers.push({
-          text: this.$ay.t("UnitDescription"),
-          align: "left",
-          value: "unitDescriptionViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemUnitNotes"),
-          align: "left",
-          value: "notes"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          unitViz: x.unitViz,
-          unitModelVendorViz: x.unitModelVendorViz,
-          unitModelNameViz: x.unitModelNameViz,
-          unitDescriptionViz: x.unitDescriptionViz,
-          notes: window.$gz.util.truncateString(
-            x.notes,
-            this.pvm.maxTableNotesLength
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].units.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/quote-items.vue b/ayanova/src/components/quote-items.vue
index 9b85e0a7..507dcbba 100644
--- a/ayanova/src/components/quote-items.vue
+++ b/ayanova/src/components/quote-items.vue
@@ -164,10 +164,10 @@
         <!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -176,9 +176,9 @@
             data-cy="itemsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.status`]="{ item }">
               <template v-if="item.status.id != null">
@@ -209,8 +209,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -220,6 +220,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`items[${activeItemIndex}].notes`"
             v-model="value.items[activeItemIndex].notes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -227,11 +228,10 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].notes`)
             "
-            :ref="`items[${activeItemIndex}].notes`"
             :rules="[form().required(this, `items[${activeItemIndex}].notes`)]"
             data-cy="Items.Notes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
           ></v-textarea>
         </v-col>
 
@@ -246,24 +246,25 @@
           xl="3"
         >
           <v-text-field
+            :ref="`items[${activeItemIndex}].sequence`"
             v-model="value.items[activeItemIndex].sequence"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="`items[${activeItemIndex}].sequence`"
             :rules="[
               form().integerValid(this, `items[${activeItemIndex}].sequence`)
             ]"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].sequence`)
             "
-            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
             type="number"
+            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
           ></v-text-field>
         </v-col>
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTechNotes')" cols="12">
           <v-textarea
+            :ref="`items[${activeItemIndex}].techNotes`"
             v-model="value.items[activeItemIndex].techNotes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -271,10 +272,9 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].techNotes`)
             "
-            :ref="`items[${activeItemIndex}].techNotes`"
             data-cy="items.techNotes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
           ></v-textarea>
         </v-col>
 
@@ -289,11 +289,11 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemRequestDate')"
+            :ref="`items[${activeItemIndex}].requestDate`"
             v-model="value.items[activeItemIndex].requestDate"
+            :label="$ay.t('WorkOrderItemRequestDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="`items[${activeItemIndex}].requestDate`"
             data-cy="requestDate"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].requestDate`)
@@ -313,10 +313,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             v-model="value.items[activeItemIndex].workOrderItemStatusId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemStatusId')"
             :items="selectableStatusList"
             item-text="name"
             item-value="id"
@@ -327,9 +327,9 @@
                 `items[${activeItemIndex}].workOrderItemStatusId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             data-cy="workOrderItemStatusId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemStatusId')"
             @click:prepend="handleEditItemStatusClick()"
           >
             <template v-slot:selection="{ item }">
@@ -369,10 +369,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             v-model="value.items[activeItemIndex].workOrderItemPriorityId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemPriorityId')"
             :items="selectablePriorityList"
             item-text="name"
             item-value="id"
@@ -383,9 +383,9 @@
                 `items[${activeItemIndex}].workOrderItemPriorityId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             data-cy="workOrderItemPriorityId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemPriorityId')"
             @click:prepend="handleEditItemPriorityClick()"
           >
             <template v-slot:selection="{ item }">
@@ -424,11 +424,11 @@
           xl="3"
         >
           <v-checkbox
+            :ref="`items[${activeItemIndex}].warrantyService`"
             v-model="value.items[activeItemIndex].warrantyService"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemWarrantyService')"
-            :ref="`items[${activeItemIndex}].warrantyService`"
             data-cy="warrantyService"
             :error-messages="
               form().serverErrors(
@@ -448,9 +448,9 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`items[${activeItemIndex}].tags`"
             v-model="value.items[activeItemIndex].tags"
             :readonly="formState.readOnly"
-            :ref="`items[${activeItemIndex}].tags`"
             data-cy="tags"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].tags`)
@@ -461,12 +461,12 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="`items[${activeItemIndex}].customFields`"
             v-model="value.items[activeItemIndex].customFields"
             :form-key="formCustomTemplateKey"
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemCustom"
-            :ref="`items[${activeItemIndex}].customFields`"
             data-cy="customFields"
             :error-messages="
               form().serverErrors(
@@ -486,10 +486,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`items[${activeItemIndex}].wiki`"
             v-model="value.items[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="fieldValueChanged('wiki')"
           ></gz-wiki
@@ -514,7 +514,7 @@
                                         GRANDCHILDREN
               ############################################################################ -->
 
-        <v-col cols="12" v-show="showUnits">
+        <v-col v-show="showUnits" cols="12">
           <GzQuoteItemUnits
             v-model="value"
             :pvm="pvm"
@@ -525,7 +525,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showScheduledUsers">
+        <v-col v-show="showScheduledUsers" cols="12">
           <GzQuoteItemScheduledUsers
             v-model="value"
             :pvm="pvm"
@@ -535,7 +535,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTasks">
+        <v-col v-show="showTasks" cols="12">
           <GzQuoteItemTasks
             v-model="value"
             :pvm="pvm"
@@ -546,7 +546,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showParts">
+        <v-col v-show="showParts" cols="12">
           <GzQuoteItemParts
             v-model="value"
             :pvm="pvm"
@@ -557,7 +557,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLabors">
+        <v-col v-show="showLabors" cols="12">
           <GzQuoteItemLabors
             v-model="value"
             :pvm="pvm"
@@ -567,7 +567,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTravels">
+        <v-col v-show="showTravels" cols="12">
           <GzQuoteItemTravels
             v-model="value"
             :pvm="pvm"
@@ -577,7 +577,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showExpenses">
+        <v-col v-show="showExpenses" cols="12">
           <GzQuoteItemExpenses
             v-model="value"
             :pvm="pvm"
@@ -588,7 +588,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLoans">
+        <v-col v-show="showLoans" cols="12">
           <GzQuoteItemLoans
             v-model="value"
             :pvm="pvm"
@@ -598,7 +598,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showOutsideServices">
+        <v-col v-show="showOutsideServices" cols="12">
           <GzQuoteItemOutsideServices
             v-model="value"
             :pvm="pvm"
@@ -635,8 +635,19 @@ export default {
     GzQuoteItemLoans,
     GzQuoteItemOutsideServices
   },
-  created() {
-    this.setDefaultView();
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    goto: {
+      default: null,
+      type: Object
+    }
   },
   data() {
     return {
@@ -653,308 +664,6 @@ export default {
       gotoUnitIndex: null
     };
   },
-  props: {
-    value: {
-      default: null,
-      type: Object
-    },
-    pvm: {
-      default: null,
-      type: Object
-    },
-    goto: {
-      default: null,
-      type: Object
-    }
-  },
-  watch: {
-    goto(val, oldVal) {
-      if (val != oldVal) {
-        const navto = { woitemindex: null, childindex: null };
-        //find the item in question then trigger the nav
-        let keepgoing = true;
-        this.value.items.forEach((z, itemindex) => {
-          if (keepgoing) {
-            switch (val.type) {
-              case window.$gz.type.QuoteItem:
-                if (z.id == val.id) {
-                  navto.woitemindex = itemindex;
-                  keepgoing = false;
-                }
-                break;
-              case window.$gz.type.QuoteItemOutsideService:
-                z.outsideServices.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemExpense:
-                z.expenses.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemLabor:
-                z.labors.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemLoan:
-                z.loans.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemPart:
-                z.parts.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemScheduledUser:
-                z.scheduledUsers.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemTask:
-                z.tasks.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemTravel:
-                z.travels.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.QuoteItemUnit:
-                z.units.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-            }
-          }
-        });
-
-        if (navto.woitemindex != null) {
-          this.selectedRow = [{ index: navto.woitemindex }];
-          this.activeItemIndex = navto.woitemindex;
-
-          this.$nextTick(() => {
-            const el = this.$refs.topform;
-            if (el) {
-              el.scrollIntoView({ behavior: "smooth" });
-            }
-          });
-
-          if (navto.childindex != null) {
-            this.$nextTick(() => {
-              switch (val.type) {
-                case window.$gz.type.QuoteItemOutsideService:
-                  this.gotoOutsideServiceIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemExpense:
-                  this.gotoExpenseIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemLabor:
-                  this.gotoLaborIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemLoan:
-                  this.gotoLoanIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemPart:
-                  this.gotoPartIndex = navto.childindex;
-                  break;
-
-                case window.$gz.type.QuoteItemTask:
-                  this.gotoTaskIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemScheduledUser:
-                  this.gotoScheduledUserIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemTravel:
-                  this.gotoTravelIndex = navto.childindex;
-                  break;
-                case window.$gz.type.QuoteItemUnit:
-                  this.gotoUnitIndex = navto.childindex;
-                  break;
-              }
-            });
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    newItem() {
-      const newIndex = this.value.items.length;
-
-      this.value.items.push({
-        id: 0,
-        concurrency: 0,
-        notes: undefined, //to trigger validation on new
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        quoteId: this.value.id,
-        techNotes: null,
-        workOrderItemStatusId: null,
-        workOrderItemPriorityId: null,
-        requestDate: null,
-        warrantyService: false,
-        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
-        isDirty: true,
-        expenses: [],
-        labors: [],
-        loans: [],
-        parts: [],
-        scheduledUsers: [],
-        tasks: [],
-        travels: [],
-        units: [],
-        outsideServices: [],
-        uid: Date.now() //used for error tracking / display
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeItemIndex].notes = null;
-        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
-      });
-    },
-    newSubItem(atype) {
-      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
-      const newId = -Math.abs(Date.now());
-      switch (atype) {
-        case window.$gz.type.WorkOrderItemOutsideService:
-          this.gotoOutsideServiceIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemExpense:
-          this.gotoExpenseIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLabor:
-          this.gotoLaborIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLoan:
-          this.gotoLoanIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemPart:
-          this.gotoPartIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTask:
-          this.gotoTaskIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemScheduledUser:
-          this.gotoScheduledUserIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTravel:
-          this.gotoTravelIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemUnit:
-          this.gotoUnitIndex = newId;
-          break;
-      }
-    },
-    unDeleteItem() {
-      this.value.items[this.activeItemIndex].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeItemIndex].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items.forEach(z => (z.deleted = true));
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value && this.value.items && this.value.items.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    handleEditItemStatusClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemStatus,
-        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
-      });
-    },
-    handleEditItemPriorityClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemPriority,
-        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
-      });
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeItemIndex].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted = this.value.items[item.index].deleted === true;
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-  },
   computed: {
     isDeleted: function() {
       if (this.value.items[this.activeItemIndex] == null) {
@@ -1218,6 +927,297 @@ export default {
         !this.value.userIsRestrictedType
       );
     }
+  },
+  watch: {
+    goto(val, oldVal) {
+      if (val != oldVal) {
+        const navto = { woitemindex: null, childindex: null };
+        //find the item in question then trigger the nav
+        let keepgoing = true;
+        this.value.items.forEach((z, itemindex) => {
+          if (keepgoing) {
+            switch (val.type) {
+              case window.$gz.type.QuoteItem:
+                if (z.id == val.id) {
+                  navto.woitemindex = itemindex;
+                  keepgoing = false;
+                }
+                break;
+              case window.$gz.type.QuoteItemOutsideService:
+                z.outsideServices.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemExpense:
+                z.expenses.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemLabor:
+                z.labors.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemLoan:
+                z.loans.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemPart:
+                z.parts.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemScheduledUser:
+                z.scheduledUsers.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemTask:
+                z.tasks.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemTravel:
+                z.travels.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.QuoteItemUnit:
+                z.units.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+            }
+          }
+        });
+
+        if (navto.woitemindex != null) {
+          this.selectedRow = [{ index: navto.woitemindex }];
+          this.activeItemIndex = navto.woitemindex;
+
+          this.$nextTick(() => {
+            const el = this.$refs.topform;
+            if (el) {
+              el.scrollIntoView({ behavior: "smooth" });
+            }
+          });
+
+          if (navto.childindex != null) {
+            this.$nextTick(() => {
+              switch (val.type) {
+                case window.$gz.type.QuoteItemOutsideService:
+                  this.gotoOutsideServiceIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemExpense:
+                  this.gotoExpenseIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemLabor:
+                  this.gotoLaborIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemLoan:
+                  this.gotoLoanIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemPart:
+                  this.gotoPartIndex = navto.childindex;
+                  break;
+
+                case window.$gz.type.QuoteItemTask:
+                  this.gotoTaskIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemScheduledUser:
+                  this.gotoScheduledUserIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemTravel:
+                  this.gotoTravelIndex = navto.childindex;
+                  break;
+                case window.$gz.type.QuoteItemUnit:
+                  this.gotoUnitIndex = navto.childindex;
+                  break;
+              }
+            });
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    newItem() {
+      const newIndex = this.value.items.length;
+
+      this.value.items.push({
+        id: 0,
+        concurrency: 0,
+        notes: undefined, //to trigger validation on new
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        quoteId: this.value.id,
+        techNotes: null,
+        workOrderItemStatusId: null,
+        workOrderItemPriorityId: null,
+        requestDate: null,
+        warrantyService: false,
+        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
+        isDirty: true,
+        expenses: [],
+        labors: [],
+        loans: [],
+        parts: [],
+        scheduledUsers: [],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: [],
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeItemIndex].notes = null;
+        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
+      });
+    },
+    newSubItem(atype) {
+      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
+      const newId = -Math.abs(Date.now());
+      switch (atype) {
+        case window.$gz.type.WorkOrderItemOutsideService:
+          this.gotoOutsideServiceIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemExpense:
+          this.gotoExpenseIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLabor:
+          this.gotoLaborIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLoan:
+          this.gotoLoanIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemPart:
+          this.gotoPartIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTask:
+          this.gotoTaskIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemScheduledUser:
+          this.gotoScheduledUserIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTravel:
+          this.gotoTravelIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemUnit:
+          this.gotoUnitIndex = newId;
+          break;
+      }
+    },
+    unDeleteItem() {
+      this.value.items[this.activeItemIndex].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeItemIndex].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items.forEach(z => (z.deleted = true));
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value && this.value.items && this.value.items.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    handleEditItemStatusClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemStatus,
+        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
+      });
+    },
+    handleEditItemPriorityClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemPriority,
+        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
+      });
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeItemIndex].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted = this.value.items[item.index].deleted === true;
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 
diff --git a/ayanova/src/components/quote-state.vue b/ayanova/src/components/quote-state.vue
index 1adaa287..61e4fb6c 100644
--- a/ayanova/src/components/quote-state.vue
+++ b/ayanova/src/components/quote-state.vue
@@ -14,10 +14,10 @@
           pvm.currentState.name
         }}</span>
         <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
-        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
+        <v-icon v-if="pvm.currentState.locked" color="primary" class="ml-4"
           >$ayiLock</v-icon
         >
-        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
+        <v-icon v-if="pvm.currentState.completed" color="primary" class="ml-4"
           >$ayiCheckCircle</v-icon
         >
       </div>
@@ -37,10 +37,10 @@
                 <span class="ml-3">{{ item.user }}</span>
                 <span class="font-weight-bold ml-3">{{ item.name }}</span>
                 <v-icon small :color="item.color" class="ml-4">$ayiFlag</v-icon>
-                <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                <v-icon v-if="item.locked" small color="primary" class="ml-4"
                   >$ayiLock</v-icon
                 >
-                <v-icon small color="primary" v-if="item.completed" class="ml-4"
+                <v-icon v-if="item.completed" small color="primary" class="ml-4"
                   >$ayiCheckCircle</v-icon
                 >
               </div>
@@ -55,13 +55,13 @@
                   <v-icon small :color="item.color" class="ml-4"
                     >$ayiFlag</v-icon
                   >
-                  <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                  <v-icon v-if="item.locked" small color="primary" class="ml-4"
                     >$ayiLock</v-icon
                   >
                   <v-icon
+                    v-if="item.completed"
                     small
                     color="primary"
-                    v-if="item.completed"
                     class="ml-4"
                     >$ayiCheckCircle</v-icon
                   >
@@ -92,17 +92,17 @@
                           data.item.name
                         }}</span
                         ><v-icon
+                          v-if="data.item.locked"
                           small
                           color="disabled"
                           class="ml-2"
-                          v-if="data.item.locked"
                           >$ayiLock</v-icon
                         >
                         <v-icon
+                          v-if="data.item.completed"
                           color="disabled"
                           class="ml-1"
                           small
-                          v-if="data.item.completed"
                           >$ayiCheckCircle</v-icon
                         ></v-list-item-title
                       >
@@ -137,13 +137,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      selectedStatus: null,
-      openDialog: false
-    };
-  },
-
   props: {
     value: {
       default: null,
@@ -165,6 +158,53 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false
+    };
+  },
+  computed: {
+    hasState() {
+      return this.value.states != null && this.value.states.length > 0;
+    },
+    stateDisplayList() {
+      const ret = [];
+      this.value.states.forEach(z => {
+        ret.push(this.getStateForDisplay(z));
+      });
+      return ret;
+    },
+    canAdd: function() {
+      //first check most obvious disqualifying properties
+      if (!this.pvm.rights.change) {
+        return false;
+      }
+
+      //not currently locked, user has rights to do it so allow it
+      if (!this.value.isLockedAtServer) {
+        return true;
+      }
+
+      //locked, confirm if user can change it
+      //if any role then no problem
+
+      //ok, only thing left to check is if the current user can unlock this
+      //get remove roles required for current state
+      const cs = this.pvm.currentState;
+      if (cs.removeRoles == null || cs.removeRoles == 0) {
+        //no state set yet
+        return true;
+      }
+
+      //ok, need to check the role here against current user roles to see if this is valid
+      if (window.$gz.role.hasRole(cs.removeRoles)) {
+        return true;
+      }
+
+      return false;
+    }
+  },
 
   methods: {
     addState() {
@@ -249,47 +289,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    hasState() {
-      return this.value.states != null && this.value.states.length > 0;
-    },
-    stateDisplayList() {
-      const ret = [];
-      this.value.states.forEach(z => {
-        ret.push(this.getStateForDisplay(z));
-      });
-      return ret;
-    },
-    canAdd: function() {
-      //first check most obvious disqualifying properties
-      if (!this.pvm.rights.change) {
-        return false;
-      }
-
-      //not currently locked, user has rights to do it so allow it
-      if (!this.value.isLockedAtServer) {
-        return true;
-      }
-
-      //locked, confirm if user can change it
-      //if any role then no problem
-
-      //ok, only thing left to check is if the current user can unlock this
-      //get remove roles required for current state
-      const cs = this.pvm.currentState;
-      if (cs.removeRoles == null || cs.removeRoles == 0) {
-        //no state set yet
-        return true;
-      }
-
-      //ok, need to check the role here against current user roles to see if this is valid
-      if (window.$gz.role.hasRole(cs.removeRoles)) {
-        return true;
-      }
-
-      return false;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/report-control.vue b/ayanova/src/components/report-control.vue
index c70aa28d..488ffeb1 100644
--- a/ayanova/src/components/report-control.vue
+++ b/ayanova/src/components/report-control.vue
@@ -2,11 +2,11 @@
   <div>
     <v-row justify="center">
       <v-dialog
+        v-model="isVisible"
         scrollable
         max-width="600px"
-        v-model="isVisible"
-        @keydown.esc="cancel"
         data-cy="reportselector"
+        @keydown.esc="cancel"
       >
         <v-card elevation="24">
           <v-card-title class="text-h5 lighten-2" primary-title>
@@ -34,17 +34,17 @@
               v-if="rights.change"
               color="primary"
               text
-              @click.native="newReport"
               data-cy="reportselector:ok"
               class="d-none d-sm-flex"
+              @click.native="newReport"
               >{{ $ay.t("New") }}</v-btn
             >
             <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
             <v-btn
               color="primary"
               text
-              @click.native="cancel"
               data-cy="reportselector:cancel"
+              @click.native="cancel"
               >{{ $ay.t("Cancel") }}</v-btn
             >
           </v-card-actions>
@@ -56,7 +56,7 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="360px" v-model="jobActive">
+        <v-dialog v-model="jobActive" persistent max-width="360px">
           <v-card>
             <v-card-title>{{ $ay.t("RenderingReport") }}</v-card-title>
             <v-card-text>
@@ -70,7 +70,7 @@
               </div>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="cancelJob" color="primary">{{
+              <v-btn text color="primary" @click="cancelJob">{{
                 $ay.t("Cancel")
               }}</v-btn>
             </v-card-actions>
diff --git a/ayanova/src/components/role-control.vue b/ayanova/src/components/role-control.vue
index b6744576..7e230ae6 100644
--- a/ayanova/src/components/role-control.vue
+++ b/ayanova/src/components/role-control.vue
@@ -7,17 +7,47 @@
     chips
     deletable-chips
     :value="selectedValue"
-    @input="handleInput"
     :readonly="readonly"
     :disabled="disabled"
     :label="label"
     :rules="rules"
     :error-messages="errorMessages"
     :data-cy="'roleinput:' + testId"
+    @input="handleInput"
   ></v-select>
 </template>
 <script>
 export default {
+  props: {
+    label: { type: String, default: null },
+    rules: { type: Array, default: undefined },
+    errorMessages: { type: Array, default: null },
+    value: { type: Number, default: 0 },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    limitSelectionTo: { type: String, default: null }, //"inside" - no customer roles, "outside" - no non-customer roles
+    testId: { type: String, default: null }
+  },
+  data() {
+    return {
+      internalValue: null,
+      availableRoles: []
+    };
+  },
+  computed: {
+    selectedValue() {
+      const ret = [];
+      if (this.value != null && this.value != 0) {
+        for (let i = 0; i < this.availableRoles.length; i++) {
+          const role = this.availableRoles[i];
+          if (this.value & role.id) {
+            ret.push(role.id);
+          }
+        }
+      }
+      return ret;
+    }
+  },
   async created() {
     await window.$gz.enums.fetchEnumList("AuthorizationRoles");
     const rawRoles = window.$gz.enums.getSelectionList("AuthorizationRoles");
@@ -36,36 +66,6 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      internalValue: null,
-      availableRoles: []
-    };
-  },
-  props: {
-    label: { type: String, default: null },
-    rules: { type: Array, default: undefined },
-    errorMessages: { type: Array, default: null },
-    value: { type: Number, default: 0 },
-    readonly: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    limitSelectionTo: { type: String, default: null }, //"inside" - no customer roles, "outside" - no non-customer roles
-    testId: { type: String, default: null }
-  },
-  computed: {
-    selectedValue() {
-      const ret = [];
-      if (this.value != null && this.value != 0) {
-        for (let i = 0; i < this.availableRoles.length; i++) {
-          const role = this.availableRoles[i];
-          if (!!(this.value & role.id)) {
-            ret.push(role.id);
-          }
-        }
-      }
-      return ret;
-    }
-  },
   methods: {
     handleInput(value) {
       let newValue = 0;
diff --git a/ayanova/src/components/tag-picker.vue b/ayanova/src/components/tag-picker.vue
index b4aea64c..eb915eb1 100644
--- a/ayanova/src/components/tag-picker.vue
+++ b/ayanova/src/components/tag-picker.vue
@@ -1,11 +1,10 @@
 <template>
   <div>
-    <span class="text-caption" v-if="!noLabel">
+    <span v-if="!noLabel" class="text-caption">
       {{ title }}
     </span>
     <v-autocomplete
       :value="value"
-      @input="input($event)"
       :readonly="readonly"
       :items="sourcetags"
       :loading="tagSearchUnderway"
@@ -23,10 +22,11 @@
       cache-items
       :rules="rules"
       :error-messages="errorMessages"
+      @input="input($event)"
     >
-      <template slot="no-data" v-if="offerAdd()">
+      <template v-if="offerAdd()" slot="no-data">
         <v-chip color="primary" text-color="white" class="text-h4">
-          {{ this.normalizeTag(tagSearchEntry) }}</v-chip
+          {{ normalizeTag(tagSearchEntry) }}</v-chip
         >
         <v-btn large icon @click="addTag()">
           <v-icon large color="success">$ayiPlusCircle</v-icon>
@@ -37,21 +37,6 @@
 </template>
 <script>
 export default {
-  created() {
-    //Set the initial list items based on the record items, this only needs to be called once at init
-    if (!this.initialized && this.value != null && this.value.length > 0) {
-      this.sourcetags = this.value;
-      this.initialized = true;
-    }
-  },
-  data() {
-    return {
-      sourcetags: [],
-      tagSearchEntry: null,
-      tagSearchUnderway: false,
-      initialized: false
-    };
-  },
   props: {
     value: {
       default() {
@@ -87,27 +72,13 @@ export default {
       }
     }
   },
-  watch: {
-    async tagSearchEntry(val) {
-      if (!val || this.tagSearchUnderway) {
-        return;
-      }
-      this.tagSearchUnderway = true;
-      try {
-        const res = await window.$gz.api.get("tag-list/list?query=" + val);
-        //We never expect there to be no data here
-        if (!res.hasOwnProperty("data")) {
-          throw new Error(res);
-        }
-        //adding this to the property will automatically have it cached by the autocomplete component
-        //as cache-items has been set so this just needs to be set here once and all is well in future
-        //Any search will be kept for later so this is very efficient
-        this.sourcetags = res.data;
-        this.tagSearchUnderway = false;
-      } catch (err) {
-        window.$gz.errorHandler.handleFormError(err);
-      }
-    }
+  data() {
+    return {
+      sourcetags: [],
+      tagSearchEntry: null,
+      tagSearchUnderway: false,
+      initialized: false
+    };
   },
   computed: {
     title() {
@@ -123,6 +94,35 @@ export default {
       return this.$ay.t("TypeToSearchOrAdd");
     }
   },
+  watch: {
+    async tagSearchEntry(val) {
+      if (!val || this.tagSearchUnderway) {
+        return;
+      }
+      this.tagSearchUnderway = true;
+      try {
+        const res = await window.$gz.api.get("tag-list/list?query=" + val);
+        //We never expect there to be no data here
+        if (!Object.prototype.hasOwnProperty.call(res, "data")) {
+          throw new Error(res);
+        }
+        //adding this to the property will automatically have it cached by the autocomplete component
+        //as cache-items has been set so this just needs to be set here once and all is well in future
+        //Any search will be kept for later so this is very efficient
+        this.sourcetags = res.data;
+        this.tagSearchUnderway = false;
+      } catch (err) {
+        window.$gz.errorHandler.handleFormError(err);
+      }
+    }
+  },
+  created() {
+    //Set the initial list items based on the record items, this only needs to be called once at init
+    if (!this.initialized && this.value != null && this.value.length > 0) {
+      this.sourcetags = this.value;
+      this.initialized = true;
+    }
+  },
   methods: {
     offerAdd() {
       if (
diff --git a/ayanova/src/components/time-control.vue b/ayanova/src/components/time-control.vue
index 3cda8ac2..3d07fef5 100644
--- a/ayanova/src/components/time-control.vue
+++ b/ayanova/src/components/time-control.vue
@@ -7,13 +7,13 @@
             <v-dialog v-model="dlgtime" width="300px">
               <template v-slot:activator="{ on }">
                 <v-text-field
-                  v-on="on"
                   :value="readonlyFormat()"
                   :label="label"
                   prepend-icon="$ayiClock"
-                  @click:prepend="dlgtime = true"
                   readonly
                   :error="!!hasErrors"
+                  v-on="on"
+                  @click:prepend="dlgtime = true"
                 ></v-text-field>
               </template>
               <v-time-picker
@@ -42,11 +42,11 @@
             <v-text-field
               ref="timeField"
               :value="timeValue"
-              @change="updateTimeValue"
               :readonly="readonly"
               :disabled="disabled"
               type="time"
               :data-cy="`${dataCy}:time`"
+              @change="updateTimeValue"
             ></v-text-field>
           </v-col>
         </template>
@@ -73,12 +73,6 @@
 //NOTE: this control also captures the date even though it's time only
 //this is an intentional design decision to support field change to date or date AND time and is considered a display issue
 export default {
-  data: () => ({
-    dlgtime: false,
-    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-    languageName: window.$gz.locale.getResolvedLanguage(),
-    hour12: window.$gz.locale.getHour12()
-  }),
   props: {
     label: { type: String, default: null },
     rules: { type: Array, default: undefined },
@@ -88,6 +82,12 @@ export default {
     disabled: { type: Boolean, default: false },
     dataCy: { type: String, default: null }
   },
+  data: () => ({
+    dlgtime: false,
+    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+    languageName: window.$gz.locale.getResolvedLanguage(),
+    hour12: window.$gz.locale.getHour12()
+  }),
   computed: {
     hasErrors() {
       return this.errorMessages != null && this.errorMessages.length > 0;
diff --git a/ayanova/src/components/url-control.vue b/ayanova/src/components/url-control.vue
index 76c0faf4..09f8a4f2 100644
--- a/ayanova/src/components/url-control.vue
+++ b/ayanova/src/components/url-control.vue
@@ -1,9 +1,9 @@
 <template>
   <v-text-field
     v-bind="$attrs"
-    v-on="$listeners"
     type="url"
     prepend-icon="$ayiExternalLinkAlt"
+    v-on="$listeners"
     @click:prepend="openUrl"
   ></v-text-field>
 </template>
diff --git a/ayanova/src/components/wiki-control.vue b/ayanova/src/components/wiki-control.vue
index 7010b7af..8e9db8cc 100644
--- a/ayanova/src/components/wiki-control.vue
+++ b/ayanova/src/components/wiki-control.vue
@@ -4,10 +4,10 @@
       <v-btn
         depressed
         tile
-        @click="toggleReveal"
         :color="isEmpty ? null : 'primary'"
+        @click="toggleReveal"
       >
-        Wiki<v-icon v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'" right></v-icon
+        Wiki<v-icon right v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"></v-icon
       ></v-btn>
     </div>
     <template v-if="reveal">
@@ -23,8 +23,8 @@
           <v-btn
             text
             :outlined="currentView == view.DESIGN_VIEW"
-            @click="currentView = view.DESIGN_VIEW"
             data-cy="wikiDesignView"
+            @click="currentView = view.DESIGN_VIEW"
           >
             <v-icon>$ayiEdit</v-icon>
           </v-btn>
@@ -38,7 +38,7 @@
         </div>
       </template>
       <v-sheet
-        v-if="currentView != this.view.HIDDEN_VIEW"
+        v-if="currentView != view.HIDDEN_VIEW"
         elevation="2"
         class="aywiki pa-2 pa-sm-6 mt-2"
       >
@@ -131,20 +131,20 @@
 
                   <div class="ma-8">
                     <v-slider
+                      v-model="tableMenuColumns"
                       thumb-size="24"
                       thumb-label="always"
-                      v-model="tableMenuColumns"
                       min="1"
                       max="10"
                       prepend-icon="$ayiArrowsAltH"
                     ></v-slider>
 
                     <v-slider
+                      v-model="tableMenuRows"
                       prepend-icon="$ayiArrowsAltV"
                       class="mt-8"
                       thumb-size="24"
                       thumb-label="always"
-                      v-model="tableMenuRows"
                       min="1"
                       max="15"
                     ></v-slider>
@@ -169,8 +169,8 @@
                 <v-icon>$ayiLink</v-icon>
               </v-btn>
               <v-menu
-                min-width="300"
                 v-model="linkMenu"
+                min-width="300"
                 :close-on-content-click="false"
                 offset-y
                 :position-x="menuX"
@@ -211,8 +211,8 @@
                 <v-icon>$ayiImage</v-icon>
               </v-btn>
               <v-menu
-                min-width="360"
                 v-model="imageMenu"
+                min-width="360"
                 :close-on-content-click="false"
                 offset-y
                 :position-x="menuX"
@@ -240,13 +240,13 @@
                         <v-tab-item key="file"
                           ><div class="ma-6">
                             <v-select
-                              @click="getAttachments"
-                              :label="$ay.t('Attachments')"
                               v-model="selectedImageAttachment"
+                              :label="$ay.t('Attachments')"
                               :items="attachments"
                               item-text="name"
                               item-value="id"
                               return-object
+                              @click="getAttachments"
                             ></v-select>
 
                             <v-text-field
@@ -297,16 +297,16 @@
             <div :style="editStyle()">
               <v-textarea
                 v-cloak
-                @drop.prevent="onDrop"
-                @dragover.prevent
+                ref="editArea"
+                v-model="localVal"
                 solo
                 no-resize
                 :height="editAreaHeight"
-                ref="editArea"
+                data-cy="wikiEditor"
+                @drop.prevent="onDrop"
+                @dragover.prevent
                 @input="handleInput"
                 @dblclick="handleDoubleClick"
-                v-model="localVal"
-                data-cy="wikiEditor"
               ></v-textarea>
             </div>
           </v-col>
@@ -324,8 +324,8 @@
         </v-row>
         <v-btn depressed tile @click="toggleReveal">
           Wiki<v-icon
-            v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
             right
+            v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
           ></v-icon
         ></v-btn>
       </v-sheet>
@@ -336,27 +336,11 @@
 import marked from "marked";
 import DOMPurify from "dompurify";
 export default {
-  created() {
-    // Add a hook to make all links open a new window
-    //https://github.com/cure53/DOMPurify/blob/master/demos/hooks-target-blank-demo.html
-    DOMPurify.addHook("afterSanitizeAttributes", function(node) {
-      // set all elements owning target to target=_blank
-      if ("target" in node) {
-        node.setAttribute("target", "_blank");
-        // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
-        node.setAttribute("rel", "noopener noreferrer");
-      }
-      // set non-HTML/MathML links to xlink:show=new
-      if (
-        !node.hasAttribute("target") &&
-        (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
-      ) {
-        node.setAttribute("xlink:show", "new");
-      }
-    });
-  },
-  beforeDestroy() {
-    DOMPurify.removeAllHooks();
+  props: {
+    value: { type: String, default: "" },
+    ayaType: { type: Number, default: null },
+    ayaId: { type: Number, default: null },
+    readonly: Boolean
   },
   data() {
     return {
@@ -395,21 +379,37 @@ export default {
       uploadFiles: [] //attachment upload files
     };
   },
-  props: {
-    value: { type: String, default: "" },
-    ayaType: { type: Number, default: null },
-    ayaId: { type: Number, default: null },
-    readonly: Boolean
+  computed: {
+    isEmpty() {
+      return this.value == null;
+    }
   },
   watch: {
     value(value) {
       this.localVal = value ?? "";
     }
   },
-  computed: {
-    isEmpty() {
-      return this.value == null;
-    }
+  created() {
+    // Add a hook to make all links open a new window
+    //https://github.com/cure53/DOMPurify/blob/master/demos/hooks-target-blank-demo.html
+    DOMPurify.addHook("afterSanitizeAttributes", function(node) {
+      // set all elements owning target to target=_blank
+      if ("target" in node) {
+        node.setAttribute("target", "_blank");
+        // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+      // set non-HTML/MathML links to xlink:show=new
+      if (
+        !node.hasAttribute("target") &&
+        (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
+      ) {
+        node.setAttribute("xlink:show", "new");
+      }
+    });
+  },
+  beforeDestroy() {
+    DOMPurify.removeAllHooks();
   },
   methods: {
     goHelp() {
@@ -542,7 +542,7 @@ export default {
       //emit input event to parent form for dirty tracking
       this.handleInput(this.localVal);
     },
-    handleDoubleClick(i) {
+    handleDoubleClick() {
       //the purpose of this is only to change the selection if it's got an extra space to the right
       //because double clicking on a word with another word after it causes the space to be included
       this.getSelectedRange();
@@ -929,10 +929,10 @@ export default {
     },
     onDrop(ev) {
       //Drop image file
-      var files = Array.from(ev.dataTransfer.files);
+      let files = Array.from(ev.dataTransfer.files);
       if (files.length > 0) {
         //handle file drop
-        var files = Array.from(ev.dataTransfer.files);
+        files = Array.from(ev.dataTransfer.files);
         if (files.length > 0) {
           this.uploadFiles = files;
           this.upload();
diff --git a/ayanova/src/components/work-order-address.vue b/ayanova/src/components/work-order-address.vue
index a4ca4eeb..59a98eaf 100644
--- a/ayanova/src/components/work-order-address.vue
+++ b/ayanova/src/components/work-order-address.vue
@@ -8,8 +8,8 @@
         <v-btn
           icon
           class="ml-n1 mr-2"
-          @click="openDialog = true"
           :data-cy="`${dataCy}:open`"
+          @click="openDialog = true"
         >
           <v-icon>$ayiEdit</v-icon>
         </v-btn>
@@ -25,7 +25,7 @@
           <v-card-text>
             <v-row>
               <v-col cols="12">
-                <v-menu offset-y v-if="!readonly">
+                <v-menu v-if="!readonly" offset-y>
                   <template v-slot:activator="{ on, attrs }">
                     <span class="text-h6">
                       {{ $ay.t("AddressTypePhysical") }}</span
@@ -66,7 +66,7 @@
                     </v-list-item>
                   </v-list>
                 </v-menu>
-                <span class="text-h6" v-else>
+                <span v-else class="text-h6">
                   {{ $ay.t("AddressTypePhysical") }}</span
                 >
               </v-col>
@@ -78,10 +78,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="address"
                   v-model="value.address"
                   :readonly="readonly"
                   :label="$ay.t('AddressDeliveryAddress')"
-                  ref="address"
                   data-cy="address"
                   :error-messages="form().serverErrors(this, 'address')"
                   @input="fieldValueChanged('address')"
@@ -96,10 +96,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="city"
                   v-model="value.city"
                   :readonly="readonly"
                   :label="$ay.t('AddressCity')"
-                  ref="city"
                   data-cy="city"
                   :error-messages="form().serverErrors(this, 'city')"
                   @input="fieldValueChanged('city')"
@@ -114,10 +114,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="region"
                   v-model="value.region"
                   :readonly="readonly"
                   :label="$ay.t('AddressStateProv')"
-                  ref="region"
                   data-cy="region"
                   :error-messages="form().serverErrors(this, 'region')"
                   @input="fieldValueChanged('region')"
@@ -132,10 +132,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="country"
                   v-model="value.country"
                   :readonly="readonly"
                   :label="$ay.t('AddressCountry')"
-                  ref="country"
                   data-cy="country"
                   :error-messages="form().serverErrors(this, 'country')"
                   @input="fieldValueChanged('country')"
@@ -150,15 +150,15 @@
                 xl="3"
               >
                 <gz-decimal
+                  ref="latitude"
                   v-model="value.latitude"
                   :readonly="readonly"
                   :label="$ay.t('AddressLatitude')"
-                  ref="latitude"
                   data-cy="latitude"
                   :rules="[form().decimalValid(this, 'latitude')]"
                   :error-messages="form().serverErrors(this, 'latitude')"
-                  @input="fieldValueChanged('latitude')"
                   :precision="6"
+                  @input="fieldValueChanged('latitude')"
                 ></gz-decimal>
               </v-col>
 
@@ -170,20 +170,20 @@
                 xl="3"
               >
                 <gz-decimal
+                  ref="longitude"
                   v-model="value.longitude"
                   :readonly="readonly"
                   :label="$ay.t('AddressLongitude')"
-                  ref="longitude"
                   data-cy="longitude"
                   :rules="[form().decimalValid(this, 'longitude')]"
                   :error-messages="form().serverErrors(this, 'longitude')"
-                  @input="fieldValueChanged('longitude')"
                   :precision="6"
+                  @input="fieldValueChanged('longitude')"
                 ></gz-decimal>
               </v-col>
 
               <v-col cols="12">
-                <v-menu offset-y v-if="!readonly">
+                <v-menu v-if="!readonly" offset-y>
                   <template v-slot:activator="{ on, attrs }">
                     <span class="text-h6">
                       {{ $ay.t("AddressTypePostal") }}</span
@@ -216,7 +216,7 @@
                     </v-list-item>
                   </v-list>
                 </v-menu>
-                <span class="text-h6" v-else>
+                <span v-else class="text-h6">
                   {{ $ay.t("AddressTypePostal") }}</span
                 >
               </v-col>
@@ -229,10 +229,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="postAddress"
                   v-model="value.postAddress"
                   :readonly="readonly"
                   :label="$ay.t('AddressPostalDeliveryAddress')"
-                  ref="postAddress"
                   data-cy="postAddress"
                   :error-messages="form().serverErrors(this, 'postAddress')"
                   @input="fieldValueChanged('postAddress')"
@@ -247,10 +247,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="postCity"
                   v-model="value.postCity"
                   :readonly="readonly"
                   :label="$ay.t('AddressPostalCity')"
-                  ref="postCity"
                   data-cy="postCity"
                   :error-messages="form().serverErrors(this, 'postCity')"
                   @input="fieldValueChanged('postCity')"
@@ -265,10 +265,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="postRegion"
                   v-model="value.postRegion"
                   :readonly="readonly"
                   :label="$ay.t('AddressPostalStateProv')"
-                  ref="postRegion"
                   data-cy="postRegion"
                   :error-messages="form().serverErrors(this, 'postRegion')"
                   @input="fieldValueChanged('postRegion')"
@@ -283,10 +283,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="postCountry"
                   v-model="value.postCountry"
                   :readonly="readonly"
                   :label="$ay.t('AddressPostalCountry')"
-                  ref="postCountry"
                   data-cy="postCountry"
                   :error-messages="form().serverErrors(this, 'postCountry')"
                   @input="fieldValueChanged('postCountry')"
@@ -301,10 +301,10 @@
                 xl="3"
               >
                 <v-text-field
+                  ref="postCode"
                   v-model="value.postCode"
                   :readonly="readonly"
                   :label="$ay.t('AddressPostalPostal')"
-                  ref="postCode"
                   data-cy="postCode"
                   :error-messages="form().serverErrors(this, 'postCode')"
                   @input="fieldValueChanged('postCode')"
@@ -318,15 +318,15 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="close()"
               :data-cy="`${dataCy}:btnok`"
+              @click="close()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
         </v-card>
       </v-dialog>
     </v-row>
-    <v-dialog max-width="600px" v-model="openSelectDialog">
+    <v-dialog v-model="openSelectDialog" max-width="600px">
       <v-card>
         <v-card-title>
           <span class="text-h5">{{ $ay.t("SelectAlternateAddress") }}</span>
@@ -361,14 +361,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      openDialog: false,
-      openSelectDialog: false,
-      selectType: 1,
-      alternateAddresses: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -383,6 +375,25 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {
+      openDialog: false,
+      openSelectDialog: false,
+      selectType: 1,
+      alternateAddresses: []
+    };
+  },
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    displayServiceAddress() {
+      return formatAddress(this.value).physical;
+    }
+  },
 
   methods: {
     close() {
@@ -525,17 +536,6 @@ export default {
         //could fail on some platforms
       }
     }
-  },
-  computed: {
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    displayServiceAddress() {
-      return formatAddress(this.value).physical;
-    }
   }
 };
 
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index dd3355ed..e4ef1d89 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -2,17 +2,17 @@
   <div>
     <v-row>
       <v-col
+        v-if="value.serial != 0 && canEditSerial"
         cols="12"
         sm="6"
         lg="4"
         xl="3"
-        v-if="value.serial != 0 && canEditSerial"
       >
         <v-text-field
+          ref="serial"
           v-model="value.serial"
           :readonly="formState.readOnly"
           :label="$ay.t('WorkOrderSerialNumber')"
-          ref="serial"
           data-cy="serial"
           :rules="[
             form().integerValid(this, 'serial'),
@@ -24,13 +24,13 @@
       </v-col>
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-pick-list
+          ref="customerId"
+          v-model="value.customerId"
           :aya-type="$ay.ayt().Customer"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.customerId"
           :readonly="formState.readOnly || value.userIsRestrictedType"
           :label="$ay.t('Customer')"
           :can-clear="false"
-          ref="customerId"
           data-cy="customerId"
           :rules="[form().required(this, 'customerId')]"
           :error-messages="form().serverErrors(this, 'customerId')"
@@ -135,14 +135,14 @@
         cols="12"
       >
         <v-textarea
+          ref="notes"
           v-model="value.notes"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderSummary')"
           :error-messages="form().serverErrors(this, 'notes')"
-          ref="notes"
           data-cy="notes"
-          @input="fieldValueChanged('notes')"
           auto-grow
+          @input="fieldValueChanged('notes')"
         ></v-textarea>
       </v-col>
 
@@ -160,10 +160,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('WorkOrderCloseByDate')"
-          v-model="value.completeByDate"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="completeByDate"
+          v-model="value.completeByDate"
+          :label="$ay.t('WorkOrderCloseByDate')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="completeByDate"
           :error-messages="form().serverErrors(this, 'completeByDate')"
           @input="fieldValueChanged('completeByDate')"
@@ -184,12 +184,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="contractId"
+          v-model="value.contractId"
           :aya-type="$ay.ayt().Contract"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.contractId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Contract')"
-          ref="contractId"
           data-cy="contractId"
           :error-messages="form().serverErrors(this, 'contractId')"
           @input="fieldValueChanged('contractId')"
@@ -210,12 +210,12 @@
         xl="3"
       >
         <gz-pick-list
+          ref="projectId"
+          v-model="value.projectId"
           :aya-type="$ay.ayt().Project"
           :show-edit-icon="!value.userIsRestrictedType"
-          v-model="value.projectId"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('Project')"
-          ref="projectId"
           data-cy="projectId"
           :error-messages="form().serverErrors(this, 'projectId')"
           @input="fieldValueChanged('projectId')"
@@ -236,10 +236,10 @@
         xl="3"
       >
         <v-text-field
+          ref="invoiceNumber"
           v-model="value.invoiceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderInvoiceNumber')"
-          ref="invoiceNumber"
           data-cy="invoiceNumber"
           :error-messages="form().serverErrors(this, 'invoiceNumber')"
           @input="fieldValueChanged('invoiceNumber')"
@@ -260,10 +260,10 @@
         xl="3"
       >
         <gz-date-time-picker
-          :label="$ay.t('WorkOrderServiceDate')"
-          v-model="value.serviceDate"
-          :readonly="formState.readOnly || value.userIsTechRestricted"
           ref="serviceDate"
+          v-model="value.serviceDate"
+          :label="$ay.t('WorkOrderServiceDate')"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
           data-cy="serviceDate"
           :error-messages="form().serverErrors(this, 'serviceDate')"
           @input="fieldValueChanged('serviceDate')"
@@ -278,6 +278,7 @@
         xl="3"
       >
         <v-text-field
+          ref="customerContactName"
           v-model="value.customerContactName"
           :readonly="
             formState.readOnly ||
@@ -286,7 +287,6 @@
               value.userIsSubContractorRestricted
           "
           :label="$ay.t('WorkOrderCustomerContactName')"
-          ref="customerContactName"
           data-cy="customerContactName"
           :error-messages="form().serverErrors(this, 'customerContactName')"
           @input="fieldValueChanged('customerContactName')"
@@ -307,10 +307,10 @@
         xl="3"
       >
         <v-text-field
+          ref="customerReferenceNumber"
           v-model="value.customerReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderCustomerReferenceNumber')"
-          ref="customerReferenceNumber"
           data-cy="customerReferenceNumber"
           :error-messages="form().serverErrors(this, 'customerReferenceNumber')"
           @input="fieldValueChanged('customerReferenceNumber')"
@@ -331,10 +331,10 @@
         xl="3"
       >
         <v-text-field
+          ref="internalReferenceNumber"
           v-model="value.internalReferenceNumber"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderInternalReferenceNumber')"
-          ref="internalReferenceNumber"
           data-cy="internalReferenceNumber"
           :error-messages="form().serverErrors(this, 'internalReferenceNumber')"
           @input="fieldValueChanged('internalReferenceNumber')"
@@ -355,10 +355,10 @@
         xl="3"
       >
         <v-checkbox
+          ref="onsite"
           v-model="value.onsite"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :label="$ay.t('WorkOrderOnsite')"
-          ref="onsite"
           data-cy="onsite"
           :error-messages="form().serverErrors(this, 'onsite')"
           @change="fieldValueChanged('onsite')"
@@ -376,9 +376,9 @@
         cols="12"
       >
         <gz-tag-picker
+          ref="tags"
           v-model="value.tags"
           :readonly="formState.readOnly || value.userIsTechRestricted"
-          ref="tags"
           data-cy="tags"
           :error-messages="form().serverErrors(this, 'tags')"
           @input="fieldValueChanged('tags')"
@@ -394,12 +394,12 @@
         cols="12"
       >
         <gz-custom-fields
+          ref="customFields"
           v-model="value.customFields"
           :form-key="formCustomTemplateKey"
           :readonly="formState.readOnly || value.userIsTechRestricted"
           :parent-v-m="this"
           key-start-with="WorkOrderCustom"
-          ref="customFields"
           data-cy="customFields"
           :error-messages="form().serverErrors(this, 'customFields')"
           @input="fieldValueChanged('customFields')"
@@ -417,13 +417,13 @@
         cols="12"
       >
         <gz-wiki
-          :aya-type="pvm.ayaType"
-          :aya-id="value.id"
           ref="wiki"
           v-model="value.wiki"
+          :aya-type="pvm.ayaType"
+          :aya-id="value.id"
           :readonly="formState.readOnly || value.userIsTechRestricted"
-          @input="fieldValueChanged('wiki')"
           data-cy="wiki"
+          @input="fieldValueChanged('wiki')"
         ></gz-wiki
       ></v-col>
 
@@ -458,13 +458,6 @@ export default {
     GzWoAddress,
     GzWoSignature
   },
-  data() {
-    return {
-      canEditSerial: window.$gz.role.hasRole([
-        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
-      ])
-    };
-  },
 
   props: {
     value: {
@@ -476,6 +469,21 @@ export default {
       type: Object
     }
   },
+  data() {
+    return {
+      canEditSerial: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
+      ])
+    };
+  },
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  },
   methods: {
     form() {
       return window.$gz.form;
@@ -486,14 +494,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-expenses.vue b/ayanova/src/components/work-order-item-expenses.vue
index 4c12a7d3..5db4178a 100644
--- a/ayanova/src/components/work-order-item-expenses.vue
+++ b/ayanova/src/components/work-order-item-expenses.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.reimburseUser`]="{ item }">
               <v-simple-checkbox
@@ -86,8 +86,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -100,27 +100,27 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].name
             "
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseName')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
-            "
             :error-messages="
               form().serverErrors(
                 this,
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
               )
             "
+            data-cy="expenses.name"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
               )
             "
-            data-cy="expenses.name"
           ></v-text-field>
         </v-col>
 
@@ -132,15 +132,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].totalCost
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTotalCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
-            "
             data-cy="expenses.totalCost"
             :error-messages="
               form().serverErrors(
@@ -177,6 +177,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeAmount
@@ -184,9 +187,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeAmount')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
-            "
             data-cy="expenses.chargeAmount"
             :error-messages="
               form().serverErrors(
@@ -223,6 +223,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeToCustomer
@@ -230,9 +233,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeToCustomer')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
-            "
             data-cy="expenses.chargeToCustomer"
             :error-messages="
               form().serverErrors(
@@ -256,15 +256,15 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].taxPaid
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseTaxPaid')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
-            "
             data-cy="expenses.taxPaid"
             :error-messages="
               form().serverErrors(
@@ -301,18 +301,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .chargeTaxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseChargeTaxCodeID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
-            "
             data-cy="expenses.chargeTaxCode"
             :error-messages="
               form().serverErrors(
@@ -340,6 +340,9 @@
           xl="3"
         >
           <v-checkbox
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .reimburseUser
@@ -347,9 +350,6 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseReimburseUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
-            "
             data-cy="expenses.reimburseUser"
             :error-messages="
               form().serverErrors(
@@ -373,20 +373,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemExpenseUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
-            "
             data-cy="expenses.user"
             :error-messages="
               form().serverErrors(
@@ -408,6 +408,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].expenses[activeItemIndex]
                 .description
@@ -421,16 +424,13 @@
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
-            "
             data-cy="expenses.description"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -439,15 +439,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -466,144 +457,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.expensetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
-
-      //#################################### IMPORTANT ##################################################
-      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
-      //so that they are in agreement otherwise restricted users will never be able to create new records
-
-      this.value.items[this.activeWoItemIndex].expenses.push({
-        id: 0,
-        concurrency: 0,
-        description: null,
-        name: null,
-        totalCost: 0,
-        chargeAmount: 0,
-        taxPaid: 0,
-        chargeTaxCodeId: null,
-        taxCodeViz: null,
-        reimburseUser: false,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        chargeToCustomer: false,
-        isDirty: true,
-        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now() //used for error tracking / display
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].expenses[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].expenses.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.hasData &&
-        this.value.items[this.activeWoItemIndex].expenses.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].expenses[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].expenses[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -781,6 +639,148 @@ export default {
     canDeleteAll: function() {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.expensetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].expenses.length;
+
+      //#################################### IMPORTANT ##################################################
+      //NOTE: default values are critical and must match server validation ExpenseValidateAsync for restricted users
+      //so that they are in agreement otherwise restricted users will never be able to create new records
+
+      this.value.items[this.activeWoItemIndex].expenses.push({
+        id: 0,
+        concurrency: 0,
+        description: null,
+        name: null,
+        totalCost: 0,
+        chargeAmount: 0,
+        taxPaid: 0,
+        chargeTaxCodeId: null,
+        taxCodeViz: null,
+        reimburseUser: false,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        chargeToCustomer: false,
+        isDirty: true,
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].expenses[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].expenses.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.hasData &&
+        this.value.items[this.activeWoItemIndex].expenses.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].expenses[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].expenses[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Expenses[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-labors.vue b/ayanova/src/components/work-order-item-labors.vue
index 02bb3ff2..71ab2828 100644
--- a/ayanova/src/components/work-order-item-labors.vue
+++ b/ayanova/src/components/work-order-item-labors.vue
@@ -58,10 +58,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -70,9 +70,9 @@
             data-cy="laborsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -82,8 +82,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -96,16 +96,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStartDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
-            "
             data-cy="serviceStartDate"
             :error-messages="
               form().serverErrors(
@@ -129,16 +129,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceStopDate
             "
+            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
-            "
             data-cy="serviceStopDate"
             :rules="[
               form().datePrecedence(
@@ -169,6 +169,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateQuantity
@@ -176,9 +179,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
-            "
             data-cy="laborServiceRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -212,19 +212,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
-            "
             data-cy="labors.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -249,20 +249,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
-            "
             data-cy="labors.userid"
             :error-messages="
               form().serverErrors(
@@ -287,6 +287,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .noChargeQuantity
@@ -294,9 +297,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="laborNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -333,18 +333,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLaborTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="laborTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -372,6 +372,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .priceOverride
@@ -380,9 +383,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
-            "
             data-cy="laborpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -409,6 +409,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].labors[activeItemIndex]
                 .serviceDetails
@@ -422,16 +425,13 @@
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
-            "
             data-cy="laborserviceDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -440,15 +440,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -467,238 +458,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.labortopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    appendTasks() {
-      const tasks = this.value.items[this.activeWoItemIndex].tasks;
-      if (tasks.length == 0) {
-        return;
-      }
-      const l = this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ];
-      let at = "";
-      tasks.forEach(z => {
-        at += `${z.task} - ${z.statusViz}\n`;
-      });
-      l.serviceDetails += `\n${at}`;
-    },
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].serviceRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
-
-      this.value.items[this.activeWoItemIndex].labors.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        serviceStartDate: null,
-        serviceStopDate: null,
-        serviceRateId: null,
-        serviceDetails: null,
-        serviceRateQuantity: 0,
-        noChargeQuantity: 0,
-        taxCodeSaleId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        serviceRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].labors[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].labors.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].labors[
-          this.activeItemIndex
-        ].serviceStopDate;
-        if (ref.includes("serviceStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("serviceStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].labors[
-            this.activeItemIndex
-          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -985,6 +749,242 @@ export default {
       return this.pvm.rights.change && !this.value.userIsRestrictedType;
     }
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.labortopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    appendTasks() {
+      const tasks = this.value.items[this.activeWoItemIndex].tasks;
+      if (tasks.length == 0) {
+        return;
+      }
+      const l = this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ];
+      let at = "";
+      tasks.forEach(z => {
+        at += `${z.task} - ${z.statusViz}\n`;
+      });
+      l.serviceDetails += `\n${at}`;
+    },
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].serviceRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].labors.length;
+
+      this.value.items[this.activeWoItemIndex].labors.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        serviceStartDate: null,
+        serviceStopDate: null,
+        serviceRateId: null,
+        serviceDetails: null,
+        serviceRateQuantity: 0,
+        noChargeQuantity: 0,
+        taxCodeSaleId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        serviceRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].labors[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].labors.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].labors.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].labors[
+          this.activeItemIndex
+        ].serviceStopDate;
+        if (ref.includes("serviceStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("serviceStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workLaborScheduleDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].labors[
+            this.activeItemIndex
+          ].serviceRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].labors[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Labors[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-loans.vue b/ayanova/src/components/work-order-item-loans.vue
index 57dea188..6e913edc 100644
--- a/ayanova/src/components/work-order-item-loans.vue
+++ b/ayanova/src/components/work-order-item-loans.vue
@@ -50,10 +50,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -62,9 +62,9 @@
             data-cy="loansTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -74,8 +74,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -88,23 +88,23 @@
           xl="3"
         >
           <gz-pick-list
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+            "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].loanUnitId
+            "
             :aya-type="$ay.ayt().LoanUnit"
             :variant="
               'availableonly:' +
                 value.items[activeWoItemIndex].loans[activeItemIndex].loanUnitId
             "
             :show-edit-icon="!value.userIsRestrictedType"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].loanUnitId
-            "
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanUnit')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
-            "
             data-cy="loans.loanUnitId"
             :rules="[
               form().required(
@@ -138,6 +138,7 @@
           xl="3"
         >
           <v-select
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             v-model="value.items[activeWoItemIndex].loans[activeItemIndex].rate"
             :items="pvm.selectLists.loanUnitRateUnits"
             item-text="name"
@@ -145,7 +146,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanRate')"
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
             data-cy="loans.rate"
             :error-messages="
               form().serverErrors(
@@ -173,15 +173,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].quantity
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemLoanQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
-            "
             data-cy="loans.quantity"
             :error-messages="
               form().serverErrors(
@@ -215,15 +215,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanOutDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].outDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].outDate
+            "
+            :label="$ay.t('WorkOrderItemLoanOutDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loans.loaned"
             :error-messages="
               form().serverErrors(
@@ -247,15 +247,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanDueDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].dueDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].dueDate
+            "
+            :label="$ay.t('WorkOrderItemLoanDueDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loans.due"
             :error-messages="
               form().serverErrors(
@@ -279,15 +279,15 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemLoanReturnDate')"
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
-            "
-            :readonly="formState.readOnly || value.userIsRestrictedType"
-            :disabled="isDeleted"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].returnDate`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].returnDate
+            "
+            :label="$ay.t('WorkOrderItemLoanReturnDate')"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
             data-cy="loans.returned"
             :error-messages="
               form().serverErrors(
@@ -314,17 +314,17 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
-            v-model="
-              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
-            "
-            :readonly="formState.readOnly || isDeleted"
-            :disabled="isDeleted"
-            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             :ref="
               `Items[${activeWoItemIndex}].loans[${activeItemIndex}].taxCodeId`
             "
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].taxCodeId
+            "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLoanTaxCodeID')"
             data-cy="loans.taxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -352,6 +352,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex]
                 .priceOverride
@@ -360,9 +363,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
-            "
             data-cy="loans.priceoverride"
             :error-messages="
               form().serverErrors(
@@ -386,6 +386,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemLoanNotes')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].loans[activeItemIndex].notes
             "
@@ -398,14 +399,13 @@
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
             data-cy="loans.notes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -414,15 +414,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -441,151 +432,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.loantopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    loanUnitRateUnitChange(newId) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
-        s => s.id == newId
-      ).name;
-    },
-    loanUnitChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].loanUnitViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
-
-      this.value.items[this.activeWoItemIndex].loans.push({
-        id: 0,
-        concurrency: 0,
-        notes: null,
-        outDate: null,
-        dueDate: null,
-        returnDate: null,
-        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
-        loanUnitId: 0, //zero to break rule on new
-        quantity: 1,
-        rate: 1,
-        cost: 0,
-        priceOverride: null,
-        isDirty: true,
-        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        loanUnitViz: null,
-        taxCodeViz: null,
-        unitOfMeasureViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].loanUnitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].loans[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].loans.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].loans[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -876,6 +727,155 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.loantopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    loanUnitRateUnitChange(newId) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].unitOfMeasureViz = this.pvm.selectLists.loanUnitRateUnits.find(
+        s => s.id == newId
+      ).name;
+    },
+    loanUnitChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].loanUnitViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].loans.length;
+
+      this.value.items[this.activeWoItemIndex].loans.push({
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        outDate: null,
+        dueDate: null,
+        returnDate: null,
+        taxCodeId: window.$gz.store.state.globalSettings.defaultTaxPartSaleId,
+        loanUnitId: 0, //zero to break rule on new
+        quantity: 1,
+        rate: 1,
+        cost: 0,
+        priceOverride: null,
+        isDirty: true,
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        loanUnitViz: null,
+        taxCodeViz: null,
+        unitOfMeasureViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].loanUnitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].loans[${this.activeItemIndex}].loanUnitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].loans[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].loans.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].loans.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].loans[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].loans[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Loans[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-outside-services.vue b/ayanova/src/components/work-order-item-outside-services.vue
index c49ccb43..380e083c 100644
--- a/ayanova/src/components/work-order-item-outside-services.vue
+++ b/ayanova/src/components/work-order-item-outside-services.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="outsideServicesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,18 +87,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
-            "
             data-cy="outsideServices.unitId"
             :rules="[
               form().required(
@@ -131,18 +131,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentToId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentToID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
-            "
             data-cy="outsideServices.vendorSentToId"
             :error-messages="
               form().serverErrors(
@@ -167,6 +167,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .rmaNumber
@@ -174,21 +177,18 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRMANumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
               )
             "
+            data-cy="outsideServices.rma"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
               )
             "
-            data-cy="outsideServices.rma"
           ></v-text-field>
         </v-col>
         <v-col
@@ -199,6 +199,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairCost
@@ -207,9 +210,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
-            "
             data-cy="outsideServices.repairCost"
             :error-messages="
               form().serverErrors(
@@ -239,6 +239,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .repairPrice
@@ -247,9 +250,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceRepairPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
-            "
             data-cy="outsideServices.repairPrice"
             :error-messages="
               form().serverErrors(
@@ -281,18 +281,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Vendor"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .vendorSentViaId
             "
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceVendorSentViaID')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
-            "
             data-cy="outsideServices.vendorSentViaId"
             :error-messages="
               form().serverErrors(
@@ -319,6 +319,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .trackingNumber
@@ -326,21 +329,18 @@
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceTrackingNumber')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
-            "
             :error-messages="
               form().serverErrors(
                 this,
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
               )
             "
+            data-cy="outsideServices.trackingNumber"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
               )
             "
-            data-cy="outsideServices.trackingNumber"
           ></v-text-field>
         </v-col>
         <v-col
@@ -351,6 +351,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingCost
@@ -359,9 +362,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingCost')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
-            "
             data-cy="outsideServices.shippingCost"
             :error-messages="
               form().serverErrors(
@@ -391,6 +391,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .shippingPrice
@@ -399,9 +402,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemOutsideServiceShippingPrice')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
-            "
             data-cy="outsideServices.shippingPrice"
             :error-messages="
               form().serverErrors(
@@ -431,16 +431,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .sentDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
-            "
             data-cy="outsideServices.sentDate"
             :error-messages="
               form().serverErrors(
@@ -464,16 +464,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .etaDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
-            "
             data-cy="outsideServices.etaDate"
             :error-messages="
               form().serverErrors(
@@ -497,16 +497,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .returnDate
             "
+            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
-            "
             data-cy="outsideServices.returnDate"
             :error-messages="
               form().serverErrors(
@@ -530,18 +530,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .taxCodeId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('TaxCode')"
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
-            "
             data-cy="outsideServices.taxCodeId"
             :error-messages="
               form().serverErrors(
@@ -563,6 +563,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+            "
             v-model="
               value.items[activeWoItemIndex].outsideServices[activeItemIndex]
                 .notes
@@ -576,16 +579,13 @@
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
-            "
             data-cy="outsideServices.notes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -594,15 +594,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -621,162 +612,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.outsideservicetopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    unitChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].unitViz = newName;
-    },
-    vendorSentToChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentToViz = newName;
-    },
-    vendorSentViaChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].vendorSentViaViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
-        .length;
-
-      this.value.items[this.activeWoItemIndex].outsideServices.push({
-        id: 0,
-        concurrency: 0,
-        unitId: 0, //zero to break rule on new
-        notes: null,
-        vendorSentToId: null,
-        vendorSentViaId: null,
-        rmaNumber: null,
-        trackingNumber: null,
-        repairCost: 0,
-        repairPrice: 0,
-        shippingCost: 0,
-        shippingPrice: 0,
-        sentDate: window.$gz.locale.nowUTC8601String(),
-        etaDate: null,
-        returnDate: null,
-        taxCodeId: null, //Is it labor or parts tax code?  wasn't in v7 leaving empty for now
-        isDirty: true,
-        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        unitViz: null,
-        vendorSentToViz: null,
-        vendorSentViaViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].unitId = null;
-        this.fieldValueChanged(
-          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
-        );
-      });
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (
-        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
-      ) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].outsideServices[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1087,6 +927,166 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.outsideservicetopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    unitChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].unitViz = newName;
+    },
+    vendorSentToChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentToViz = newName;
+    },
+    vendorSentViaChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].vendorSentViaViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].outsideServices
+        .length;
+
+      this.value.items[this.activeWoItemIndex].outsideServices.push({
+        id: 0,
+        concurrency: 0,
+        unitId: 0, //zero to break rule on new
+        notes: null,
+        vendorSentToId: null,
+        vendorSentViaId: null,
+        rmaNumber: null,
+        trackingNumber: null,
+        repairCost: 0,
+        repairPrice: 0,
+        shippingCost: 0,
+        shippingPrice: 0,
+        sentDate: window.$gz.locale.nowUTC8601String(),
+        etaDate: null,
+        returnDate: null,
+        taxCodeId: null, //Is it labor or parts tax code?  wasn't in v7 leaving empty for now
+        isDirty: true,
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        unitViz: null,
+        vendorSentToViz: null,
+        vendorSentViaViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].unitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].outsideServices[${this.activeItemIndex}].unitId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].outsideServices.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (
+        this.value.items[this.activeWoItemIndex].outsideServices.length == 1
+      ) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].outsideServices[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].OutsideServices[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-part-requests.vue b/ayanova/src/components/work-order-item-part-requests.vue
index 51b4fc9b..71dccca4 100644
--- a/ayanova/src/components/work-order-item-part-requests.vue
+++ b/ayanova/src/components/work-order-item-part-requests.vue
@@ -44,10 +44,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -56,9 +56,9 @@
             data-cy="partRequestsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.purchaseOrderOnOrderViz`]="{ item }">
               <v-simple-checkbox
@@ -79,8 +79,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -90,15 +90,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -117,95 +108,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.selectedRow = [{ index: val }];
-        this.activeItemIndex = val;
-        this.$nextTick(() => {
-          const el = this.$refs.partrequesttopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    openPO(item) {
-      if (
-        item != null &&
-        item.purchaseOrderIdViz != null &&
-        item.purchaseOrderIdViz != 0
-      ) {
-        window.$gz.eventBus.$emit("openobject", {
-          type: window.$gz.type.PurchaseOrder,
-          id: item.purchaseOrderIdViz
-        });
-      }
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].partRequests[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].partRequests[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].partRequests.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].partRequests.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].partRequests[item.index]
-          .deleted === true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].PartRequests[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -386,6 +293,99 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.selectedRow = [{ index: val }];
+        this.activeItemIndex = val;
+        this.$nextTick(() => {
+          const el = this.$refs.partrequesttopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    openPO(item) {
+      if (
+        item != null &&
+        item.purchaseOrderIdViz != null &&
+        item.purchaseOrderIdViz != 0
+      ) {
+        window.$gz.eventBus.$emit("openobject", {
+          type: window.$gz.type.PurchaseOrder,
+          id: item.purchaseOrderIdViz
+        });
+      }
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].partRequests[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].partRequests[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].partRequests.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].partRequests.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].partRequests[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].PartRequests[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-parts.vue b/ayanova/src/components/work-order-item-parts.vue
index 9a3afc62..a6d52d05 100644
--- a/ayanova/src/components/work-order-item-parts.vue
+++ b/ayanova/src/components/work-order-item-parts.vue
@@ -14,8 +14,8 @@
                 large
                 icon
                 v-bind="attrs"
-                v-on="on"
                 data-cy="woItemPartsHeader"
+                v-on="on"
               >
                 <v-icon small color="primary">$ayiEllipsisV</v-icon>
               </v-btn>
@@ -41,8 +41,8 @@
             </v-list-item>
             <v-list-item
               v-if="canAdd"
-              @click="partAssemblyDialog = true"
               data-cy="woItemPartAssemblySelect"
+              @click="partAssemblyDialog = true"
             >
               <v-list-item-icon>
                 <v-icon>$ayiObjectGroup</v-icon>
@@ -77,10 +77,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -89,9 +89,9 @@
             data-cy="partsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -101,8 +101,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -115,19 +115,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Part"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].partId
             "
+            :aya-type="$ay.ayt().Part"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
-            "
             data-cy="parts.partId"
             :error-messages="
               form().serverErrors(
@@ -162,18 +162,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().PartWarehouse"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .partWarehouseId
             "
+            :aya-type="$ay.ayt().PartWarehouse"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
-            "
             data-cy="parts.partWarehouseId"
             :error-messages="
               form().serverErrors(
@@ -197,6 +197,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].quantity
             "
@@ -205,9 +208,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -254,6 +254,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].suggestedQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .suggestedQuantity
@@ -263,9 +266,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartSuggestedQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].suggestedQuantity`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -295,6 +295,9 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].description
             "
@@ -303,9 +306,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartDescription')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
-            "
             data-cy="partQuantity"
             :error-messages="
               form().serverErrors(
@@ -332,18 +332,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .taxPartSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemPartTaxPartSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
-            "
             data-cy="partTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -371,6 +371,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex]
                 .priceOverride
@@ -379,9 +382,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
-            "
             data-cy="partpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -405,6 +405,9 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemPartSerials')" cols="12">
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+            "
             v-model="
               value.items[activeWoItemIndex].parts[activeItemIndex].serials
             "
@@ -417,17 +420,14 @@
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
-            "
             data-cy="partSerials"
+            auto-grow
+            prepend-icon="$ayiListUl"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
               )
             "
-            auto-grow
-            prepend-icon="$ayiListUl"
             @click:prepend="selectSerials()"
           ></v-textarea>
         </v-col>
@@ -438,16 +438,16 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="partAssemblyDialog">
+        <v-dialog v-model="partAssemblyDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedPartAssembly"
+                v-model="selectedPartAssembly"
                 :aya-type="$ay.ayt().PartAssembly"
                 show-edit-icon
-                v-model="selectedPartAssembly"
                 :label="$ay.t('PartAssemblyList')"
-                ref="selectedPartAssembly"
                 data-cy="selectedPartAssembly"
               ></gz-pick-list>
 
@@ -456,16 +456,16 @@
                   pvm.useInventory &&
                     form().showMe(this, 'WorkOrderItemPartPartWarehouseID')
                 "
+                ref="selectedPartWarehouse"
+                v-model="selectedPartWarehouse"
                 :aya-type="$ay.ayt().PartWarehouse"
                 show-edit-icon
-                v-model="selectedPartWarehouse"
                 :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
-                ref="selectedPartWarehouse"
                 data-cy="selectedPartWarehouse"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="partAssemblyDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="partAssemblyDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -473,9 +473,9 @@
                 :disabled="selectedPartAssembly == null"
                 color="primary"
                 text
-                @click="addPartAssembly()"
                 class="ml-4"
                 data-cy="woItemPartAssemblyAdd"
+                @click="addPartAssembly()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -488,10 +488,10 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="serialDialog">
+        <v-dialog v-model="serialDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>
-              <v-btn text @click="serialDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="serialDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -519,21 +519,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      partAssemblyDialog: false,
-      selectedPartAssembly: null,
-      selectedPartWarehouse: 1,
-      serialDialog: false,
-      availableSerials: [],
-      selectedSerials: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -552,6 +537,320 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      partAssemblyDialog: false,
+      selectedPartAssembly: null,
+      selectedPartWarehouse: 1,
+      serialDialog: false,
+      availableSerials: [],
+      selectedSerials: []
+    };
+  },
+  computed: {
+    requestMore: function() {
+      return this.$ay
+        .t("WorkOrderItemPartRequestMore")
+        .replace(
+          "{n}",
+          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+            .requestAmountViz
+        );
+    },
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartID"),
+          align: "left",
+          value: "partNameViz"
+        });
+      }
+
+      if (
+        this.pvm.useInventory &&
+        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
+          align: "left",
+          value: "partWarehouseViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartQuantity"),
+          align: "right",
+          value: "quantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartSuggestedQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartSuggestedQuantity"),
+          align: "right",
+          value: "suggestedQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "PartDescription")) {
+        headers.push({
+          text: this.$ay.t("PartDescription"),
+          align: "left",
+          value: "partDescriptionViz"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUPC")) {
+        headers.push({
+          text: this.$ay.t("PartUPC"),
+          align: "left",
+          value: "upcViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartDescription"),
+          align: "left",
+          value: "description"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
+        headers.push({
+          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
+          align: "left",
+          value: "serials"
+        });
+      }
+
+      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
+        headers.push({
+          text: this.$ay.t("UnitOfMeasure"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartCost") &&
+        this.value.userCanViewPartCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "cost"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartListPrice") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPrice"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "PartLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          partNameViz: x.partNameViz,
+          partWarehouseViz: x.partWarehouseViz,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.pvm.languageName
+          ),
+          suggestedQuantity: window.$gz.locale.decimalLocalized(
+            x.suggestedQuantity,
+            this.pvm.languageName
+          ),
+          partDescriptionViz: x.partDescriptionViz,
+          upcViz: x.upcViz,
+          description: x.description,
+          serials: window.$gz.util.truncateString(
+            x.serials,
+            this.pvm.maxTableNotesLength
+          ),
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          cost: window.$gz.locale.currencyLocalized(
+            x.cost,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          listPrice: window.$gz.locale.currencyLocalized(
+            x.listPrice,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          priceViz: window.$gz.locale.currencyLocalized(
+            x.priceViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxCodeViz: x.taxCodeViz,
+          priceOverride: window.$gz.locale.currencyLocalized(
+            x.priceOverride,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          netViz: window.$gz.locale.currencyLocalized(
+            x.netViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxAViz: window.$gz.locale.currencyLocalized(
+            x.taxAViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxBViz: window.$gz.locale.currencyLocalized(
+            x.taxBViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          lineTotalViz: window.$gz.locale.currencyLocalized(
+            x.lineTotalViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].parts.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+
+    //----
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -576,6 +875,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     generateUnit() {
       const thisPart = this.value.items[this.activeWoItemIndex].parts[
@@ -891,308 +1193,6 @@ export default {
       return ret;
     }
     //---
-  },
-  computed: {
-    requestMore: function() {
-      return this.$ay
-        .t("WorkOrderItemPartRequestMore")
-        .replace(
-          "{n}",
-          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-            .requestAmountViz
-        );
-    },
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartID"),
-          align: "left",
-          value: "partNameViz"
-        });
-      }
-
-      if (
-        this.pvm.useInventory &&
-        this.form().showMe(this, "WorkOrderItemPartPartWarehouseID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartPartWarehouseID"),
-          align: "left",
-          value: "partWarehouseViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartQuantity")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartQuantity"),
-          align: "right",
-          value: "quantity"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartSuggestedQuantity")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartSuggestedQuantity"),
-          align: "right",
-          value: "suggestedQuantity"
-        });
-      }
-
-      if (this.form().showMe(this, "PartDescription")) {
-        headers.push({
-          text: this.$ay.t("PartDescription"),
-          align: "left",
-          value: "partDescriptionViz"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUPC")) {
-        headers.push({
-          text: this.$ay.t("PartUPC"),
-          align: "left",
-          value: "upcViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartDescription")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemPartDescription"),
-          align: "left",
-          value: "description"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemPartSerials")) {
-        headers.push({
-          text: this.$ay.t("PurchaseOrderItemSerialNumbers"),
-          align: "left",
-          value: "serials"
-        });
-      }
-
-      if (this.form().showMe(this, "PartUnitOfMeasureViz")) {
-        headers.push({
-          text: this.$ay.t("UnitOfMeasure"),
-          align: "left",
-          value: "unitOfMeasureViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartCost") &&
-        this.value.userCanViewPartCosts &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Cost"),
-          align: "right",
-          value: "cost"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartListPrice") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("ListPrice"),
-          align: "right",
-          value: "listPrice"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceOverride") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("PriceOverride"),
-          align: "right",
-          value: "priceOverride"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartPriceViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Price"),
-          align: "right",
-          value: "priceViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemPartTaxPartSaleID") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("Tax"),
-          align: "left",
-          value: "taxCodeViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartNetViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("NetPrice"),
-          align: "right",
-          value: "netViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxAViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxAAmt"),
-          align: "right",
-          value: "taxAViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartTaxBViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("TaxBAmt"),
-          align: "right",
-          value: "taxBViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "PartLineTotalViz") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("LineTotal"),
-          align: "right",
-          value: "lineTotalViz"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].parts.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          partNameViz: x.partNameViz,
-          partWarehouseViz: x.partWarehouseViz,
-          quantity: window.$gz.locale.decimalLocalized(
-            x.quantity,
-            this.pvm.languageName
-          ),
-          suggestedQuantity: window.$gz.locale.decimalLocalized(
-            x.suggestedQuantity,
-            this.pvm.languageName
-          ),
-          partDescriptionViz: x.partDescriptionViz,
-          upcViz: x.upcViz,
-          description: x.description,
-          serials: window.$gz.util.truncateString(
-            x.serials,
-            this.pvm.maxTableNotesLength
-          ),
-          unitOfMeasureViz: x.unitOfMeasureViz,
-          cost: window.$gz.locale.currencyLocalized(
-            x.cost,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          listPrice: window.$gz.locale.currencyLocalized(
-            x.listPrice,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          priceViz: window.$gz.locale.currencyLocalized(
-            x.priceViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxCodeViz: x.taxCodeViz,
-          priceOverride: window.$gz.locale.currencyLocalized(
-            x.priceOverride,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          netViz: window.$gz.locale.currencyLocalized(
-            x.netViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxAViz: window.$gz.locale.currencyLocalized(
-            x.taxAViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          taxBViz: window.$gz.locale.currencyLocalized(
-            x.taxBViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          ),
-          lineTotalViz: window.$gz.locale.currencyLocalized(
-            x.lineTotalViz,
-            this.pvm.languageName,
-            this.pvm.currencyName
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].parts.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
-
-    //----
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-scheduled-users.vue b/ayanova/src/components/work-order-item-scheduled-users.vue
index 8361fe21..4dc1a3c3 100644
--- a/ayanova/src/components/work-order-item-scheduled-users.vue
+++ b/ayanova/src/components/work-order-item-scheduled-users.vue
@@ -71,10 +71,10 @@
         <!-- ################################ SCHEDULED USERS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -83,9 +83,9 @@
             data-cy="scheduledUsersTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -95,8 +95,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -109,16 +109,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .startDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
-            "
             data-cy="startDate"
             :error-messages="
               form().serverErrors(
@@ -142,16 +142,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .stopDate
             "
+            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
-            "
             data-cy="stopDate"
             :rules="[
               form().datePrecedence(
@@ -184,6 +184,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .estimatedQuantity
@@ -193,9 +196,6 @@
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
-            "
             data-cy="scheduledUsers.EstimatedQuantity"
             :error-messages="
               form().serverErrors(
@@ -229,21 +229,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
-            "
             data-cy="scheduledUsers.userid"
             :error-messages="
               form().serverErrors(
@@ -268,21 +268,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().ServiceRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
                 .serviceRateId
             "
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemScheduledUserServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
-            "
             data-cy="scheduledUsers.serviceRateId"
             :error-messages="
               form().serverErrors(
@@ -304,15 +304,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -331,6 +322,136 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ].deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
+          align: "right",
+          value: "startDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
+          align: "right",
+          value: "stopDate"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
+          align: "right",
+          value: "estimatedQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
+          align: "left",
+          value: "serviceRateViz"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
+        (x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.startDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.stopDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            estimatedQuantity: window.$gz.locale.decimalLocalized(
+              x.estimatedQuantity,
+              this.pvm.languageName
+            ),
+            userViz: x.userViz,
+            serviceRateViz: x.serviceRateViz
+          };
+        }
+      );
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    hasMultipleItems: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -355,6 +476,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     convertAllToLabor() {
       this.value.items[this.activeWoItemIndex].scheduledUsers.forEach(z => {
@@ -574,130 +698,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ] == null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].scheduledUsers[
-          this.activeItemIndex
-        ].deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStartDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
-          align: "right",
-          value: "startDate"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserStopDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
-          align: "right",
-          value: "stopDate"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemScheduledUserEstimatedQuantity")
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
-          align: "right",
-          value: "estimatedQuantity"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserUserID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
-          align: "left",
-          value: "userViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemScheduledUserServiceRateID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
-          align: "left",
-          value: "serviceRateViz"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
-        (x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.startDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.stopDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            ),
-            estimatedQuantity: window.$gz.locale.decimalLocalized(
-              x.estimatedQuantity,
-              this.pvm.languageName
-            ),
-            userViz: x.userViz,
-            serviceRateViz: x.serviceRateViz
-          };
-        }
-      );
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    hasMultipleItems: function() {
-      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-tasks.vue b/ayanova/src/components/work-order-item-tasks.vue
index 62a19b5c..b29b4da2 100644
--- a/ayanova/src/components/work-order-item-tasks.vue
+++ b/ayanova/src/components/work-order-item-tasks.vue
@@ -14,8 +14,8 @@
                 large
                 icon
                 v-bind="attrs"
-                v-on="on"
                 data-cy="woItemTasksHeader"
+                v-on="on"
               >
                 <v-icon small color="primary">$ayiEllipsisV</v-icon>
               </v-btn>
@@ -30,8 +30,8 @@
             </v-list-item>
             <v-list-item
               v-if="canAdd"
-              @click="taskGroupDialog = true"
               data-cy="woItemTaskGroupSelect"
+              @click="taskGroupDialog = true"
             >
               <v-list-item-icon>
                 <v-icon>$ayiTasks</v-icon>
@@ -66,10 +66,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -78,9 +78,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -90,8 +90,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -104,15 +104,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].sequence
             "
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
-            "
             :rules="[
               form().integerValid(
                 this,
@@ -125,12 +125,12 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
+            type="number"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
-            type="number"
           ></v-text-field>
         </v-col>
 
@@ -147,6 +147,9 @@
           xl="3"
         >
           <v-select
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].status
             "
@@ -156,9 +159,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskWorkOrderItemTaskCompletionType')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
-            "
             data-cy="usertype"
             :rules="[
               form().integerValid(
@@ -189,21 +189,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedByUserId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -228,16 +228,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedDate
             "
+            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
-            "
             data-cy="travelCompletedDate"
             :error-messages="
               form().serverErrors(
@@ -255,6 +255,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTaskTaskID')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             v-model="value.items[activeWoItemIndex].tasks[activeItemIndex].task"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -271,14 +272,13 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             ]"
-            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             data-cy="task"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -288,21 +288,21 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="taskGroupDialog">
+        <v-dialog v-model="taskGroupDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedTaskGroup"
+                v-model="selectedTaskGroup"
                 :aya-type="$ay.ayt().TaskGroup"
                 show-edit-icon
-                v-model="selectedTaskGroup"
                 :label="$ay.t('TaskGroupList')"
-                ref="selectedTaskGroup"
                 data-cy="selectedTaskGroup"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="taskGroupDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="taskGroupDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -310,9 +310,9 @@
                 :disabled="selectedTaskGroup == null"
                 color="primary"
                 text
-                @click="addTaskGroup()"
                 class="ml-4"
                 data-cy="woItemTaskGroupAdd"
+                @click="addTaskGroup()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -324,17 +324,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      taskGroupDialog: false,
-      selectedTaskGroup: null
-    };
-  },
   props: {
     value: {
       default: null,
@@ -353,6 +342,127 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      taskGroupDialog: false,
+      selectedTaskGroup: null
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
+        headers.push({
+          text: this.$ay.t("Sequence"),
+          align: "left",
+          value: "sequence"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskTaskID"),
+          align: "start",
+          value: "task"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskUser"),
+          align: "start",
+          value: "completedByUserViz"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
+          align: "start",
+          value: "statusViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
+          align: "right",
+          value: "completedDate"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].tasks
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task,
+            completedByUserViz: x.completedByUserViz,
+            statusViz: x.statusViz,
+            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.completedDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -377,6 +487,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async addTaskGroup() {
       const res = await window.$gz.api.get(
@@ -545,119 +658,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
-        headers.push({
-          text: this.$ay.t("Sequence"),
-          align: "left",
-          value: "sequence"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskTaskID"),
-          align: "start",
-          value: "task"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskUser"),
-          align: "start",
-          value: "completedByUserViz"
-        });
-      }
-
-      if (
-        this.form().showMe(
-          this,
-          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
-        )
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
-          align: "start",
-          value: "statusViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
-          align: "right",
-          value: "completedDate"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].tasks
-        .map((x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            sequence: x.sequence,
-            task: x.task,
-            completedByUserViz: x.completedByUserViz,
-            statusViz: x.statusViz,
-            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.completedDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            )
-          };
-        })
-        .sort((a, b) => a.sequence - b.sequence);
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-travels.vue b/ayanova/src/components/work-order-item-travels.vue
index fd130453..d9ffbd42 100644
--- a/ayanova/src/components/work-order-item-travels.vue
+++ b/ayanova/src/components/work-order-item-travels.vue
@@ -49,10 +49,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -61,9 +61,9 @@
             data-cy="travelsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -73,8 +73,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -87,16 +87,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStartDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStartDate
             "
+            :label="$ay.t('WorkOrderItemTravelStartDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
-            "
             data-cy="travelStartDate"
             :error-messages="
               form().serverErrors(
@@ -120,16 +120,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTravelStopDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelStopDate
             "
+            :label="$ay.t('WorkOrderItemTravelStopDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
-            "
             data-cy="travelStopDate"
             :rules="[
               form().datePrecedence(
@@ -160,6 +160,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateQuantity
@@ -167,9 +170,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelRateQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
-            "
             data-cy="travelTravelRateQuantity"
             :error-messages="
               form().serverErrors(
@@ -203,15 +203,15 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].distance
             "
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelDistance')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].distance`
-            "
             data-cy="travelTravelRateDistance"
             :error-messages="
               form().serverErrors(
@@ -245,19 +245,19 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TravelRate"
-            :variant="'contractid:' + value.contractId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelRateId
             "
+            :aya-type="$ay.ayt().TravelRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelServiceRateID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
-            "
             data-cy="travels.travelRateId"
             :error-messages="
               form().serverErrors(
@@ -282,20 +282,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex].userId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelUserID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
-            "
             data-cy="travels.userid"
             :error-messages="
               form().serverErrors(
@@ -320,6 +320,9 @@
           xl="3"
         >
           <gz-decimal
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .noChargeQuantity
@@ -327,9 +330,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelNoChargeQuantity')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
-            "
             data-cy="travelNoChargeQuantity"
             :error-messages="
               form().serverErrors(
@@ -366,18 +366,18 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().TaxCode"
-            show-edit-icon
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .taxCodeSaleId
             "
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTravelTaxRateSaleID')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
-            "
             data-cy="travelTaxCodeSaleId"
             :error-messages="
               form().serverErrors(
@@ -405,6 +405,9 @@
           xl="3"
         >
           <gz-currency
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .priceOverride
@@ -413,9 +416,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('PriceOverride')"
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
-            "
             data-cy="travelpriceoverride"
             :error-messages="
               form().serverErrors(
@@ -442,6 +442,9 @@
           cols="12"
         >
           <v-textarea
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+            "
             v-model="
               value.items[activeWoItemIndex].travels[activeItemIndex]
                 .travelDetails
@@ -455,16 +458,13 @@
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            :ref="
-              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
-            "
             data-cy="traveltravelDetails"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -473,15 +473,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -500,225 +491,11 @@ export default {
       type: Number
     }
   },
-  watch: {
-    activeWoItemIndex(val, oldVal) {
-      if (val != oldVal) {
-        this.setDefaultView();
-      }
-    },
-    gotoIndex(val, oldVal) {
-      if (val != oldVal) {
-        let gotoIndex = val;
-        if (val < 0) {
-          //it's a create request
-          gotoIndex = this.newItem();
-        }
-        this.selectedRow = [{ index: gotoIndex }];
-        this.activeItemIndex = gotoIndex;
-        this.$nextTick(() => {
-          const el = this.$refs.traveltopform;
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth" });
-          }
-        });
-      }
-    }
-  },
-  methods: {
-    userChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].userViz = newName;
-    },
-    rateChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].travelRateViz = newName;
-    },
-    taxCodeChange(newName) {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].taxCodeViz = newName;
-    },
-    newItem() {
-      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
-
-      this.value.items[this.activeWoItemIndex].travels.push({
-        id: 0,
-        concurrency: 0,
-        userId: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userId
-          : null,
-        travelStartDate: null,
-        travelStopDate: null,
-        travelRateId: null,
-        travelDetails: null,
-        travelRateQuantity: 0,
-        noChargeQuantity: 0,
-        distance: 0,
-        taxCodeSaleId:
-          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
-        price: 0,
-        priceOverride: null,
-        isDirty: true,
-        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
-        uid: Date.now(),
-        userViz: this.$store.getters.isScheduleableUser
-          ? this.$store.state.userName
-          : null,
-        travelRateViz: null,
-        taxCodeViz: null
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      return newIndex; //for create new on goto
-    },
-    unDeleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeWoItemIndex].travels[
-        this.activeItemIndex
-      ].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items[this.activeWoItemIndex].travels.forEach(
-        z => (z.deleted = true)
-      );
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-        //------- SPECIAL HANDLING OF CHANGES -----------
-        const isNew =
-          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
-            .id == 0;
-
-        //Auto calculate dates / quantities / global defaults
-        const dStart = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStartDate;
-        const dStop = this.value.items[this.activeWoItemIndex].travels[
-          this.activeItemIndex
-        ].travelStopDate;
-        if (ref.includes("travelStartDate") && dStart != null) {
-          this.handleStartDateChange(isNew, dStart, dStop);
-        }
-        if (ref.includes("travelStopDate") && dStop != null) {
-          this.handleStopDateChange(isNew, dStart, dStop);
-        }
-        //------------------------------------------------------
-      }
-    },
-    handleStartDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStop == null) {
-        if (globalMinutes != 0) {
-          //set stop date based on start date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStart,
-            globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStop != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    handleStopDateChange: function(isNew, dStart, dStop) {
-      const globalMinutes =
-        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
-
-      if (isNew && dStart == null) {
-        if (globalMinutes != 0) {
-          //set start date based on stop date and global minutes
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
-            dStop,
-            0 - globalMinutes
-          );
-
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = globalMinutes;
-        }
-      } else {
-        //Existing record or both dates filled, just update quantity
-        if (dStart != null) {
-          this.value.items[this.activeWoItemIndex].travels[
-            this.activeItemIndex
-          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
-            dStart,
-            dStop
-          );
-        }
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted =
-        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
-        true;
-
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-    //---
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   computed: {
     isDeleted: function() {
@@ -1018,6 +795,229 @@ export default {
     }
 
     //----
+  },
+  watch: {
+    activeWoItemIndex(val, oldVal) {
+      if (val != oldVal) {
+        this.setDefaultView();
+      }
+    },
+    gotoIndex(val, oldVal) {
+      if (val != oldVal) {
+        let gotoIndex = val;
+        if (val < 0) {
+          //it's a create request
+          gotoIndex = this.newItem();
+        }
+        this.selectedRow = [{ index: gotoIndex }];
+        this.activeItemIndex = gotoIndex;
+        this.$nextTick(() => {
+          const el = this.$refs.traveltopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].travelRateViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      const newIndex = this.value.items[this.activeWoItemIndex].travels.length;
+
+      this.value.items[this.activeWoItemIndex].travels.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        travelStartDate: null,
+        travelStopDate: null,
+        travelRateId: null,
+        travelDetails: null,
+        travelRateQuantity: 0,
+        noChargeQuantity: 0,
+        distance: 0,
+        taxCodeSaleId:
+          window.$gz.store.state.globalSettings.defaultTaxRateSaleId,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userName
+          : null,
+        travelRateViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].travels[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].travels.forEach(
+        z => (z.deleted = true)
+      );
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].travels.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
+            .id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStartDate;
+        const dStop = this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ].travelStopDate;
+        if (ref.includes("travelStartDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("travelStopDate") && dStop != null) {
+          this.handleStopDateChange(isNew, dStart, dStop);
+        }
+        //------------------------------------------------------
+      }
+    },
+    handleStartDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStop == null) {
+        if (globalMinutes != 0) {
+          //set stop date based on start date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    handleStopDateChange: function(isNew, dStart, dStop) {
+      const globalMinutes =
+        window.$gz.store.state.globalSettings.workOrderTravelDefaultMinutes;
+
+      if (isNew && dStart == null) {
+        if (globalMinutes != 0) {
+          //set start date based on stop date and global minutes
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelStartDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].travels[
+            this.activeItemIndex
+          ].travelRateQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].travels[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Travels[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
+    //---
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-item-units.vue b/ayanova/src/components/work-order-item-units.vue
index b645dbb7..3c45ea44 100644
--- a/ayanova/src/components/work-order-item-units.vue
+++ b/ayanova/src/components/work-order-item-units.vue
@@ -57,10 +57,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -69,9 +69,9 @@
             data-cy="unitsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -81,8 +81,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -94,20 +94,20 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().Unit"
-            :variant="'customerid:' + value.customerId"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].unitId
             "
+            :aya-type="$ay.ayt().Unit"
+            :variant="'customerid:' + value.customerId"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('Unit')"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
-            "
             data-cy="units.unitId"
             :rules="[
               form().required(
@@ -160,8 +160,8 @@
               <v-btn
                 color="primary"
                 text
-                @click="getWarrantyInfo"
                 data-cy="woItemUnitGetWarrantyInfo"
+                @click="getWarrantyInfo"
                 >{{ $ay.t("Search") }}</v-btn
               >
             </v-card-actions>
@@ -176,6 +176,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].notes
             "
@@ -188,14 +189,13 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
             data-cy="unitUnitNotes"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
 
@@ -207,6 +207,7 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].tags"
             :readonly="formState.readOnly"
             data-cy="unitTags"
@@ -216,7 +217,6 @@
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
               )
             "
-            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
@@ -227,6 +227,9 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+            "
             v-model="
               value.items[activeWoItemIndex].units[activeItemIndex].customFields
             "
@@ -234,9 +237,6 @@
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemUnitCustom"
-            :ref="
-              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
-            "
             data-cy="unitCustomFields"
             :error-messages="
               form().serverErrors(
@@ -260,10 +260,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].wiki`"
             v-model="value.items[activeWoItemIndex].units[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="
               fieldValueChanged(
@@ -294,22 +294,22 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="bulkUnitsDialog">
+        <v-dialog v-model="bulkUnitsDialog" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("AddMultipleUnits") }}</v-card-title>
             <v-card-text>
               <gz-tag-picker v-model="selectedBulkUnitTags"></gz-tag-picker>
               <gz-pick-list
+                v-model="selectedBulkUnitCustomer"
                 :aya-type="$ay.ayt().Customer"
                 :show-edit-icon="false"
-                v-model="selectedBulkUnitCustomer"
                 :label="$ay.t('Customer')"
                 :can-clear="true"
               ></gz-pick-list>
 
               <v-data-table
-                dense
                 v-model="selectedBulkUnits"
+                dense
                 :headers="bulkUnitTableHeaders"
                 :items="availableBulkUnits"
                 class="my-10"
@@ -322,7 +322,7 @@
               </v-data-table>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="bulkUnitsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="bulkUnitsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -349,21 +349,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      bulkUnitsDialog: false,
-      selectedBulkUnitCustomer: this.value.customerId,
-      availableBulkUnits: [],
-      selectedBulkUnits: [],
-      selectedBulkUnitTags: [],
-      bulkUnitTableHeaders: []
-    };
-  },
   props: {
     value: {
       default: null,
@@ -386,6 +371,126 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      bulkUnitsDialog: false,
+      selectedBulkUnitCustomer: this.value.customerId,
+      availableBulkUnits: [],
+      selectedBulkUnits: [],
+      selectedBulkUnitTags: [],
+      bulkUnitTableHeaders: []
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemUnit")) {
+        headers.push({
+          text: this.$ay.t("Unit"),
+          align: "left",
+          value: "unitViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelName")) {
+        headers.push({
+          text: this.$ay.t("UnitModelName"),
+          align: "left",
+          value: "unitModelNameViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelVendorID")) {
+        headers.push({
+          text: this.$ay.t("UnitModelVendorID"),
+          align: "left",
+          value: "unitModelVendorViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitDescription")) {
+        headers.push({
+          text: this.$ay.t("UnitDescription"),
+          align: "left",
+          value: "unitDescriptionViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemUnitNotes"),
+          align: "left",
+          value: "notes"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          unitViz: x.unitViz,
+          unitModelVendorViz: x.unitModelVendorViz,
+          unitModelNameViz: x.unitModelNameViz,
+          unitDescriptionViz: x.unitDescriptionViz,
+          notes: window.$gz.util.truncateString(
+            x.notes,
+            this.pvm.maxTableNotesLength
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].units.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -410,6 +515,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     canOpenMeter: function() {
       return (
@@ -728,114 +836,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].units[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemUnit")) {
-        headers.push({
-          text: this.$ay.t("Unit"),
-          align: "left",
-          value: "unitViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelName")) {
-        headers.push({
-          text: this.$ay.t("UnitModelName"),
-          align: "left",
-          value: "unitModelNameViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitModelVendorID")) {
-        headers.push({
-          text: this.$ay.t("UnitModelVendorID"),
-          align: "left",
-          value: "unitModelVendorViz"
-        });
-      }
-
-      if (this.form().showMe(this, "UnitDescription")) {
-        headers.push({
-          text: this.$ay.t("UnitDescription"),
-          align: "left",
-          value: "unitDescriptionViz"
-        });
-      }
-
-      if (
-        this.form().showMe(this, "WorkOrderItemUnitNotes") &&
-        !this.value.userIsRestrictedType
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemUnitNotes"),
-          align: "left",
-          value: "notes"
-        });
-      }
-
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].units.map((x, i) => {
-        return {
-          index: i,
-          id: x.id,
-          unitViz: x.unitViz,
-          unitModelVendorViz: x.unitModelVendorViz,
-          unitModelNameViz: x.unitModelNameViz,
-          unitDescriptionViz: x.unitDescriptionViz,
-          notes: window.$gz.util.truncateString(
-            x.notes,
-            this.pvm.maxTableNotesLength
-          )
-        };
-      });
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].units.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-items.vue b/ayanova/src/components/work-order-items.vue
index f154211d..9e5b221d 100644
--- a/ayanova/src/components/work-order-items.vue
+++ b/ayanova/src/components/work-order-items.vue
@@ -9,13 +9,13 @@
                 >$ayiWrench</v-icon
               >
               {{ $ay.t("WorkOrderItemList") }}
-              <v-btn large icon v-bind="attrs" v-on="on" data-cy="woItemHeader">
+              <v-btn large icon v-bind="attrs" data-cy="woItemHeader" v-on="on">
                 <v-icon color="primary">$ayiEllipsisV</v-icon>
               </v-btn>
             </div>
           </template>
           <v-list>
-            <v-list-item v-if="canAdd" @click="newItem" data-cy="woItemNew">
+            <v-list-item v-if="canAdd" data-cy="woItemNew" @click="newItem">
               <v-list-item-icon>
                 <v-icon>$ayiPlus</v-icon>
               </v-list-item-icon>
@@ -58,8 +58,8 @@
             <template v-if="hasData && pvm.rights.change">
               <v-divider></v-divider>
               <v-list-item
-                @click="realizeSuggestedParts"
                 data-cy="woItemRealizeSuggestedParts"
+                @click="realizeSuggestedParts"
               >
                 <v-list-item-title>{{
                   $ay.t("WorkOrderItemPartRealizeSuggested")
@@ -73,8 +73,8 @@
 
               <v-list-item
                 v-if="canAddUnit"
-                @click="newSubItem($ay.ayt().WorkOrderItemUnit)"
                 data-cy="woItemAddUnit"
+                @click="newSubItem($ay.ayt().WorkOrderItemUnit)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiFan</v-icon>
@@ -86,8 +86,8 @@
 
               <v-list-item
                 v-if="canAddScheduledUser"
-                @click="newSubItem($ay.ayt().WorkOrderItemScheduledUser)"
                 data-cy="woItemAddScheduledUser"
+                @click="newSubItem($ay.ayt().WorkOrderItemScheduledUser)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiUserClock</v-icon>
@@ -99,8 +99,8 @@
 
               <v-list-item
                 v-if="canAddTask"
-                @click="newSubItem($ay.ayt().WorkOrderItemTask)"
                 data-cy="woItemAddTask"
+                @click="newSubItem($ay.ayt().WorkOrderItemTask)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiTasks</v-icon>
@@ -112,8 +112,8 @@
 
               <v-list-item
                 v-if="canAddPart"
-                @click="newSubItem($ay.ayt().WorkOrderItemPart)"
                 data-cy="woItemAddPart"
+                @click="newSubItem($ay.ayt().WorkOrderItemPart)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiBoxes</v-icon>
@@ -125,8 +125,8 @@
 
               <v-list-item
                 v-if="canAddLabor"
-                @click="newSubItem($ay.ayt().WorkOrderItemLabor)"
                 data-cy="woItemAddLabor"
+                @click="newSubItem($ay.ayt().WorkOrderItemLabor)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiHammer</v-icon>
@@ -138,8 +138,8 @@
 
               <v-list-item
                 v-if="canAddTravel"
-                @click="newSubItem($ay.ayt().WorkOrderItemTravel)"
                 data-cy="woItemAddTravel"
+                @click="newSubItem($ay.ayt().WorkOrderItemTravel)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiTruckMonster</v-icon>
@@ -151,8 +151,8 @@
 
               <v-list-item
                 v-if="canAddExpense"
-                @click="newSubItem($ay.ayt().WorkOrderItemExpense)"
                 data-cy="woItemAddExpense"
+                @click="newSubItem($ay.ayt().WorkOrderItemExpense)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiMoneyBillWave</v-icon>
@@ -164,8 +164,8 @@
 
               <v-list-item
                 v-if="canAddLoan"
-                @click="newSubItem($ay.ayt().WorkOrderItemLoan)"
                 data-cy="woItemAddLoan"
+                @click="newSubItem($ay.ayt().WorkOrderItemLoan)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiPlug</v-icon>
@@ -177,8 +177,8 @@
 
               <v-list-item
                 v-if="canAddOutsideService"
-                @click="newSubItem($ay.ayt().WorkOrderItemOutsideService)"
                 data-cy="woItemAddOutsideService"
+                @click="newSubItem($ay.ayt().WorkOrderItemOutsideService)"
               >
                 <v-list-item-icon>
                   <v-icon>$ayiLuggageCart</v-icon>
@@ -196,10 +196,10 @@
         <!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -208,9 +208,9 @@
             data-cy="itemsTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
             <template v-slot:[`item.status`]="{ item }">
               <template v-if="item.status.id != null">
@@ -241,8 +241,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -267,6 +267,7 @@
           cols="12"
         >
           <v-textarea
+            :ref="`items[${activeItemIndex}].notes`"
             v-model="value.items[activeItemIndex].notes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -274,11 +275,10 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].notes`)
             "
-            :ref="`items[${activeItemIndex}].notes`"
             :rules="[form().required(this, `items[${activeItemIndex}].notes`)]"
             data-cy="Items.Notes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].notes`)"
           ></v-textarea>
         </v-col>
 
@@ -293,24 +293,25 @@
           xl="3"
         >
           <v-text-field
+            :ref="`items[${activeItemIndex}].sequence`"
             v-model="value.items[activeItemIndex].sequence"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="`items[${activeItemIndex}].sequence`"
             :rules="[
               form().integerValid(this, `items[${activeItemIndex}].sequence`)
             ]"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].sequence`)
             "
-            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
             type="number"
+            @input="fieldValueChanged(`items[${activeItemIndex}].sequence`)"
           ></v-text-field>
         </v-col>
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTechNotes')" cols="12">
           <v-textarea
+            :ref="`items[${activeItemIndex}].techNotes`"
             v-model="value.items[activeItemIndex].techNotes"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -318,10 +319,9 @@
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].techNotes`)
             "
-            :ref="`items[${activeItemIndex}].techNotes`"
             data-cy="items.techNotes"
-            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
             auto-grow
+            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
           ></v-textarea>
         </v-col>
 
@@ -336,11 +336,11 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemRequestDate')"
+            :ref="`items[${activeItemIndex}].requestDate`"
             v-model="value.items[activeItemIndex].requestDate"
+            :label="$ay.t('WorkOrderItemRequestDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="`items[${activeItemIndex}].requestDate`"
             data-cy="requestDate"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].requestDate`)
@@ -360,10 +360,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             v-model="value.items[activeItemIndex].workOrderItemStatusId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemStatusId')"
             :items="selectableStatusList"
             item-text="name"
             item-value="id"
@@ -374,9 +374,9 @@
                 `items[${activeItemIndex}].workOrderItemStatusId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemStatusId`"
             data-cy="workOrderItemStatusId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemStatusId')"
             @click:prepend="handleEditItemStatusClick()"
           >
             <template v-slot:selection="{ item }">
@@ -416,10 +416,10 @@
           xl="3"
         >
           <v-autocomplete
+            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             v-model="value.items[activeItemIndex].workOrderItemPriorityId"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            @input="fieldValueChanged('workOrderItemPriorityId')"
             :items="selectablePriorityList"
             item-text="name"
             item-value="id"
@@ -430,9 +430,9 @@
                 `items[${activeItemIndex}].workOrderItemPriorityId`
               )
             "
-            :ref="`items[${activeItemIndex}].workOrderItemPriorityId`"
             data-cy="workOrderItemPriorityId"
             prepend-icon="$ayiEdit"
+            @input="fieldValueChanged('workOrderItemPriorityId')"
             @click:prepend="handleEditItemPriorityClick()"
           >
             <template v-slot:selection="{ item }">
@@ -471,11 +471,11 @@
           xl="3"
         >
           <v-checkbox
+            :ref="`items[${activeItemIndex}].warrantyService`"
             v-model="value.items[activeItemIndex].warrantyService"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemWarrantyService')"
-            :ref="`items[${activeItemIndex}].warrantyService`"
             data-cy="warrantyService"
             :error-messages="
               form().serverErrors(
@@ -495,9 +495,9 @@
           cols="12"
         >
           <gz-tag-picker
+            :ref="`items[${activeItemIndex}].tags`"
             v-model="value.items[activeItemIndex].tags"
             :readonly="formState.readOnly"
-            :ref="`items[${activeItemIndex}].tags`"
             data-cy="tags"
             :error-messages="
               form().serverErrors(this, `items[${activeItemIndex}].tags`)
@@ -508,12 +508,12 @@
 
         <v-col v-if="!value.userIsRestrictedType" cols="12">
           <gz-custom-fields
+            :ref="`items[${activeItemIndex}].customFields`"
             v-model="value.items[activeItemIndex].customFields"
             :form-key="formCustomTemplateKey"
             :readonly="formState.readOnly"
             :parent-v-m="this"
             key-start-with="WorkOrderItemCustom"
-            :ref="`items[${activeItemIndex}].customFields`"
             data-cy="customFields"
             :error-messages="
               form().serverErrors(
@@ -533,10 +533,10 @@
           cols="12"
         >
           <gz-wiki
-            :aya-type="$ay.ayt().WorkOrderItem"
-            :aya-id="value.id"
             :ref="`items[${activeItemIndex}].wiki`"
             v-model="value.items[activeItemIndex].wiki"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
             :readonly="formState.readOnly"
             @input="fieldValueChanged('wiki')"
           ></gz-wiki
@@ -561,7 +561,7 @@
                                         GRANDCHILDREN
               ############################################################################ -->
 
-        <v-col cols="12" v-show="showUnits">
+        <v-col v-show="showUnits" cols="12">
           <GzWoItemUnits
             v-model="value"
             :pvm="pvm"
@@ -572,7 +572,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showScheduledUsers">
+        <v-col v-show="showScheduledUsers" cols="12">
           <GzWoItemScheduledUsers
             v-model="value"
             :pvm="pvm"
@@ -582,7 +582,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTasks">
+        <v-col v-show="showTasks" cols="12">
           <GzWoItemTasks
             v-model="value"
             :pvm="pvm"
@@ -593,7 +593,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showParts">
+        <v-col v-show="showParts" cols="12">
           <GzWoItemParts
             v-model="value"
             :pvm="pvm"
@@ -604,7 +604,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-if="showPartRequests">
+        <v-col v-if="showPartRequests" cols="12">
           <GzWoItemPartRequests
             v-model="value"
             :pvm="pvm"
@@ -615,7 +615,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLabors">
+        <v-col v-show="showLabors" cols="12">
           <GzWoItemLabors
             v-model="value"
             :pvm="pvm"
@@ -625,7 +625,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showTravels">
+        <v-col v-show="showTravels" cols="12">
           <GzWoItemTravels
             v-model="value"
             :pvm="pvm"
@@ -635,7 +635,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showExpenses">
+        <v-col v-show="showExpenses" cols="12">
           <GzWoItemExpenses
             v-model="value"
             :pvm="pvm"
@@ -646,7 +646,7 @@
           />
         </v-col>
 
-        <v-col cols="12" v-show="showLoans">
+        <v-col v-show="showLoans" cols="12">
           <GzWoItemLoans
             v-model="value"
             :pvm="pvm"
@@ -656,7 +656,7 @@
             @change="$emit('change')"
           />
         </v-col>
-        <v-col cols="12" v-show="showOutsideServices">
+        <v-col v-show="showOutsideServices" cols="12">
           <GzWoItemOutsideServices
             v-model="value"
             :pvm="pvm"
@@ -698,8 +698,8 @@
               <v-btn
                 color="blue darken-1"
                 text
-                @click="copyItemToWorkOrder()"
                 :disabled="!copyItemWoNumber"
+                @click="copyItemToWorkOrder()"
                 >{{ $ay.t("OK") }}</v-btn
               >
             </v-card-actions>
@@ -734,8 +734,19 @@ export default {
     GzWoItemLoans,
     GzWoItemOutsideServices
   },
-  created() {
-    this.setDefaultView();
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    goto: {
+      default: null,
+      type: Object
+    }
   },
   data() {
     return {
@@ -755,385 +766,6 @@ export default {
       copyItemWoNumber: null
     };
   },
-  props: {
-    value: {
-      default: null,
-      type: Object
-    },
-    pvm: {
-      default: null,
-      type: Object
-    },
-    goto: {
-      default: null,
-      type: Object
-    }
-  },
-  watch: {
-    goto(val, oldVal) {
-      if (val != oldVal) {
-        const navto = { woitemindex: null, childindex: null };
-        //find the item in question then trigger the nav
-        let keepgoing = true;
-        this.value.items.forEach((z, itemindex) => {
-          if (keepgoing) {
-            switch (val.type) {
-              case window.$gz.type.WorkOrderItem:
-                if (z.id == val.id) {
-                  navto.woitemindex = itemindex;
-                  keepgoing = false;
-                }
-                break;
-              case window.$gz.type.WorkOrderItemOutsideService:
-                z.outsideServices.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemExpense:
-                z.expenses.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemLabor:
-                z.labors.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemLoan:
-                z.loans.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemPart:
-                z.parts.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemPartRequest:
-                z.partRequests.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemScheduledUser:
-                z.scheduledUsers.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemTask:
-                z.tasks.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemTravel:
-                z.travels.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-              case window.$gz.type.WorkOrderItemUnit:
-                z.units.forEach((x, childindex) => {
-                  if (x.id == val.id) {
-                    navto.woitemindex = itemindex;
-                    navto.childindex = childindex;
-                    keepgoing = false;
-                  }
-                });
-                break;
-            }
-          }
-        });
-
-        if (navto.woitemindex != null) {
-          this.selectedRow = [{ index: navto.woitemindex }];
-          this.activeItemIndex = navto.woitemindex;
-
-          this.$nextTick(() => {
-            const el = this.$refs.topform;
-            if (el) {
-              el.scrollIntoView({ behavior: "smooth" });
-            }
-          });
-
-          if (navto.childindex != null) {
-            this.$nextTick(() => {
-              switch (val.type) {
-                case window.$gz.type.WorkOrderItemOutsideService:
-                  this.gotoOutsideServiceIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemExpense:
-                  this.gotoExpenseIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemLabor:
-                  this.gotoLaborIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemLoan:
-                  this.gotoLoanIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemPart:
-                  this.gotoPartIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemPartRequest:
-                  this.gotoPartRequestIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemTask:
-                  this.gotoTaskIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemScheduledUser:
-                  this.gotoScheduledUserIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemTravel:
-                  this.gotoTravelIndex = navto.childindex;
-                  break;
-                case window.$gz.type.WorkOrderItemUnit:
-                  this.gotoUnitIndex = navto.childindex;
-                  break;
-              }
-            });
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    openCSR: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.CustomerServiceRequest,
-        id: this.value.items[this.activeItemIndex].fromCSRId
-      });
-    },
-    async copyItemToWorkOrder() {
-      if (!this.copyItemWoNumber) {
-        return;
-      }
-
-      //Self copy to current workorder??
-      if (this.copyItemWoNumber == this.value.serial) {
-        const newIndex = this.value.items.length;
-
-        const wi = JSON.parse(
-          JSON.stringify(this.value.items[this.activeItemIndex])
-        );
-
-        this.pvm.washWorkOrderItem(wi);
-        wi.workOrderId = this.value.id;
-        wi.sequence = newIndex + 1;
-        this.value.items.push(wi);
-        this.$emit("change");
-        this.selectedRow = [{ index: newIndex }];
-        this.activeItemIndex = newIndex;
-      } else {
-        if (this.pvm.formState.dirty) {
-          if ((await window.$gz.dialog.confirmLeaveUnsaved()) !== true) {
-            return;
-          }
-        }
-        //get id from number then push open
-        const res = await window.$gz.api.get(
-          "workorder/id-from-number/" + this.copyItemWoNumber
-        );
-        if (res.error) {
-          window.$gz.eventBus.$emit(
-            "notify-warning",
-            window.$gz.errorHandler.errorToString(res, this)
-          );
-          return;
-        }
-        this.$router.push({
-          name: "workorder-edit",
-          params: {
-            recordid: res.data,
-            copyItem: this.value.items[this.activeItemIndex]
-          }
-        });
-      }
-      this.copyItemDialog = false;
-    },
-    newItem() {
-      const newIndex = this.value.items.length;
-
-      this.value.items.push({
-        id: 0,
-        concurrency: 0,
-        notes: undefined, //to trigger validation on new
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        workOrderId: this.value.id,
-        fromCSRId: null,
-        techNotes: null,
-        workOrderItemStatusId: null,
-        workOrderItemPriorityId: null,
-        requestDate: null,
-        warrantyService: false,
-        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
-        isDirty: true,
-        expenses: [],
-        labors: [],
-        loans: [],
-        parts: [],
-        partRequests: [],
-        scheduledUsers: [],
-        tasks: [],
-        travels: [],
-        units: [],
-        outsideServices: [],
-        uid: Date.now() //used for error tracking / display
-      });
-      this.$emit("change");
-      this.selectedRow = [{ index: newIndex }];
-      this.activeItemIndex = newIndex;
-      //trigger rule breaking / validation
-      this.$nextTick(() => {
-        this.value.items[this.activeItemIndex].notes = null;
-        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
-      });
-    },
-    newSubItem(atype) {
-      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
-      const newId = -Math.abs(Date.now());
-      switch (atype) {
-        case window.$gz.type.WorkOrderItemOutsideService:
-          this.gotoOutsideServiceIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemExpense:
-          this.gotoExpenseIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLabor:
-          this.gotoLaborIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemLoan:
-          this.gotoLoanIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemPart:
-          this.gotoPartIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTask:
-          this.gotoTaskIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemScheduledUser:
-          this.gotoScheduledUserIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemTravel:
-          this.gotoTravelIndex = newId;
-          break;
-        case window.$gz.type.WorkOrderItemUnit:
-          this.gotoUnitIndex = newId;
-          break;
-      }
-    },
-    unDeleteItem() {
-      this.value.items[this.activeItemIndex].deleted = false;
-      this.setDefaultView();
-    },
-    deleteItem() {
-      this.value.items[this.activeItemIndex].deleted = true;
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    deleteAllItem() {
-      this.value.items.forEach(z => (z.deleted = true));
-      this.setDefaultView();
-      this.$emit("change");
-    },
-    realizeSuggestedParts() {
-      this.value.items.forEach(z => {
-        z.parts.forEach(part => {
-          if (part.quantity == 0 && part.suggestedQuantity > 0) {
-            part.quantity = part.suggestedQuantity;
-            part.isDirty = true;
-          }
-        });
-      });
-      this.$emit("change");
-    },
-    setDefaultView: function() {
-      //if only one record left then display it otherwise just let the datatable show what the user can click on
-      if (this.value && this.value.items && this.value.items.length == 1) {
-        this.selectedRow = [{ index: 0 }];
-        this.activeItemIndex = 0;
-      } else {
-        this.selectedRow = [];
-        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
-      }
-    },
-    handleRowClick: function(item) {
-      this.activeItemIndex = item.index;
-      this.selectedRow = [{ index: item.index }];
-    },
-    handleEditItemStatusClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemStatus,
-        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
-      });
-    },
-    handleEditItemPriorityClick: function() {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.WorkOrderItemPriority,
-        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
-      });
-    },
-    form() {
-      return window.$gz.form;
-    },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readonly) {
-        //flag this record dirty so it gets picked up by save
-        this.value.items[this.activeItemIndex].isDirty = true;
-        window.$gz.form.fieldValueChanged(this.pvm, ref);
-      }
-    },
-    itemRowClasses: function(item) {
-      let ret = "";
-      const isDeleted = this.value.items[item.index].deleted === true;
-      const hasError = this.form().childRowHasError(
-        this,
-        `Items[${item.index}].`
-      );
-
-      if (isDeleted) {
-        ret += this.form().tableRowDeletedClass();
-      }
-      if (hasError) {
-        ret += this.form().tableRowErrorClass();
-      }
-      return ret;
-    }
-  },
   computed: {
     isDeleted: function() {
       if (this.value.items[this.activeItemIndex] == null) {
@@ -1405,6 +1037,374 @@ export default {
         !this.value.userIsRestrictedType
       );
     }
+  },
+  watch: {
+    goto(val, oldVal) {
+      if (val != oldVal) {
+        const navto = { woitemindex: null, childindex: null };
+        //find the item in question then trigger the nav
+        let keepgoing = true;
+        this.value.items.forEach((z, itemindex) => {
+          if (keepgoing) {
+            switch (val.type) {
+              case window.$gz.type.WorkOrderItem:
+                if (z.id == val.id) {
+                  navto.woitemindex = itemindex;
+                  keepgoing = false;
+                }
+                break;
+              case window.$gz.type.WorkOrderItemOutsideService:
+                z.outsideServices.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemExpense:
+                z.expenses.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemLabor:
+                z.labors.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemLoan:
+                z.loans.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemPart:
+                z.parts.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemPartRequest:
+                z.partRequests.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemScheduledUser:
+                z.scheduledUsers.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemTask:
+                z.tasks.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemTravel:
+                z.travels.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemUnit:
+                z.units.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+            }
+          }
+        });
+
+        if (navto.woitemindex != null) {
+          this.selectedRow = [{ index: navto.woitemindex }];
+          this.activeItemIndex = navto.woitemindex;
+
+          this.$nextTick(() => {
+            const el = this.$refs.topform;
+            if (el) {
+              el.scrollIntoView({ behavior: "smooth" });
+            }
+          });
+
+          if (navto.childindex != null) {
+            this.$nextTick(() => {
+              switch (val.type) {
+                case window.$gz.type.WorkOrderItemOutsideService:
+                  this.gotoOutsideServiceIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemExpense:
+                  this.gotoExpenseIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemLabor:
+                  this.gotoLaborIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemLoan:
+                  this.gotoLoanIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemPart:
+                  this.gotoPartIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemPartRequest:
+                  this.gotoPartRequestIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemTask:
+                  this.gotoTaskIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemScheduledUser:
+                  this.gotoScheduledUserIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemTravel:
+                  this.gotoTravelIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemUnit:
+                  this.gotoUnitIndex = navto.childindex;
+                  break;
+              }
+            });
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.setDefaultView();
+  },
+  methods: {
+    openCSR: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.CustomerServiceRequest,
+        id: this.value.items[this.activeItemIndex].fromCSRId
+      });
+    },
+    async copyItemToWorkOrder() {
+      if (!this.copyItemWoNumber) {
+        return;
+      }
+
+      //Self copy to current workorder??
+      if (this.copyItemWoNumber == this.value.serial) {
+        const newIndex = this.value.items.length;
+
+        const wi = JSON.parse(
+          JSON.stringify(this.value.items[this.activeItemIndex])
+        );
+
+        this.pvm.washWorkOrderItem(wi);
+        wi.workOrderId = this.value.id;
+        wi.sequence = newIndex + 1;
+        this.value.items.push(wi);
+        this.$emit("change");
+        this.selectedRow = [{ index: newIndex }];
+        this.activeItemIndex = newIndex;
+      } else {
+        if (this.pvm.formState.dirty) {
+          if ((await window.$gz.dialog.confirmLeaveUnsaved()) !== true) {
+            return;
+          }
+        }
+        //get id from number then push open
+        const res = await window.$gz.api.get(
+          "workorder/id-from-number/" + this.copyItemWoNumber
+        );
+        if (res.error) {
+          window.$gz.eventBus.$emit(
+            "notify-warning",
+            window.$gz.errorHandler.errorToString(res, this)
+          );
+          return;
+        }
+        this.$router.push({
+          name: "workorder-edit",
+          params: {
+            recordid: res.data,
+            copyItem: this.value.items[this.activeItemIndex]
+          }
+        });
+      }
+      this.copyItemDialog = false;
+    },
+    newItem() {
+      const newIndex = this.value.items.length;
+
+      this.value.items.push({
+        id: 0,
+        concurrency: 0,
+        notes: undefined, //to trigger validation on new
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        workOrderId: this.value.id,
+        fromCSRId: null,
+        techNotes: null,
+        workOrderItemStatusId: null,
+        workOrderItemPriorityId: null,
+        requestDate: null,
+        warrantyService: false,
+        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
+        isDirty: true,
+        expenses: [],
+        labors: [],
+        loans: [],
+        parts: [],
+        partRequests: [],
+        scheduledUsers: [],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: [],
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeItemIndex].notes = null;
+        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
+      });
+    },
+    newSubItem(atype) {
+      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
+      const newId = -Math.abs(Date.now());
+      switch (atype) {
+        case window.$gz.type.WorkOrderItemOutsideService:
+          this.gotoOutsideServiceIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemExpense:
+          this.gotoExpenseIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLabor:
+          this.gotoLaborIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemLoan:
+          this.gotoLoanIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemPart:
+          this.gotoPartIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTask:
+          this.gotoTaskIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemScheduledUser:
+          this.gotoScheduledUserIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemTravel:
+          this.gotoTravelIndex = newId;
+          break;
+        case window.$gz.type.WorkOrderItemUnit:
+          this.gotoUnitIndex = newId;
+          break;
+      }
+    },
+    unDeleteItem() {
+      this.value.items[this.activeItemIndex].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeItemIndex].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items.forEach(z => (z.deleted = true));
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    realizeSuggestedParts() {
+      this.value.items.forEach(z => {
+        z.parts.forEach(part => {
+          if (part.quantity == 0 && part.suggestedQuantity > 0) {
+            part.quantity = part.suggestedQuantity;
+            part.isDirty = true;
+          }
+        });
+      });
+      this.$emit("change");
+    },
+    setDefaultView: function() {
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value && this.value.items && this.value.items.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
+      } else {
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
+      }
+    },
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
+    },
+    handleEditItemStatusClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemStatus,
+        id: this.value.items[this.activeItemIndex].workOrderItemStatusId
+      });
+    },
+    handleEditItemPriorityClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.WorkOrderItemPriority,
+        id: this.value.items[this.activeItemIndex].workOrderItemPriorityId
+      });
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.items[this.activeItemIndex].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted = this.value.items[item.index].deleted === true;
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      return ret;
+    }
   }
 };
 
diff --git a/ayanova/src/components/work-order-signature.vue b/ayanova/src/components/work-order-signature.vue
index 07f648a7..230f3623 100644
--- a/ayanova/src/components/work-order-signature.vue
+++ b/ayanova/src/components/work-order-signature.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="mb-8 ml-3">
     <div class="mb-2 ml-8">
-      <span class="text-caption" v-if="variant == 'customer'">{{
+      <span v-if="variant == 'customer'" class="text-caption">{{
         $ay.t("CustomerSignature")
       }}</span>
-      <span class="text-caption" v-else>{{ $ay.t("TechSignature") }}</span>
+      <span v-else class="text-caption">{{ $ay.t("TechSignature") }}</span>
     </div>
 
     <template>
@@ -26,22 +26,22 @@
 
     <v-row justify="center">
       <v-dialog
+        v-model="openDialog"
         overlay-opacity="1"
         overlay-color="primary"
-        v-model="openDialog"
         max-width="600px"
       >
         <v-card>
           <v-card-title>
-            <span class="text-h4" v-if="variant == 'customer'">{{
+            <span v-if="variant == 'customer'" class="text-h4">{{
               $ay.t("CustomerSignature")
             }}</span>
-            <span class="subtitle-4" v-else>{{ $ay.t("TechSignature") }}</span>
+            <span v-else class="subtitle-4">{{ $ay.t("TechSignature") }}</span>
           </v-card-title>
           <v-card-text>
             <div class="mb-5">
               <span class="text-h5"
-                >{{ $ay.t("WorkOrder") }}&nbsp;{{ this.value.serial }}</span
+                >{{ $ay.t("WorkOrder") }}&nbsp;{{ value.serial }}</span
               >
             </div>
 
@@ -52,8 +52,8 @@
                 }}</span>
               </div>
               <div
-                class="mb-5"
                 v-if="$store.state.globalSettings.signatureHeader"
+                class="mb-5"
               >
                 <span class="subtitle-1">{{
                   $store.state.globalSettings.signatureHeader
@@ -106,8 +106,8 @@
             {{ sigDateLocalized }}
             <template v-if="variant == 'customer'">
               <div
-                class="my-5"
                 v-if="$store.state.globalSettings.signatureFooter"
+                class="my-5"
               >
                 <span class="subtitle-2">{{
                   $store.state.globalSettings.signatureFooter
@@ -117,10 +117,10 @@
             <template>
               <div class="mt-8">
                 <v-text-field
+                  ref="sigName"
                   v-model="tempName"
                   :readonly="disabled || imgUrl != null"
                   :label="$ay.t('Name')"
-                  ref="sigName"
                   data-cy="sigName"
                 ></v-text-field>
               </div>
@@ -142,8 +142,8 @@
               v-if="imgUrl == null"
               color="blue darken-1"
               text
-              @click="save()"
               data-cy="sigOK"
+              @click="save()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -158,19 +158,6 @@ export default {
   components: {
     vueSignature
   },
-  data() {
-    return {
-      selectedStatus: null,
-      openDialog: false,
-      sigOption: {
-        penColor: "rgb(0, 0, 0)",
-        backgroundColor: "rgb(245,245,245)"
-      },
-      tempSig: null,
-      tempDate: null,
-      tempName: null
-    };
-  },
   props: {
     value: {
       default: null,
@@ -188,6 +175,64 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false,
+      sigOption: {
+        penColor: "rgb(0, 0, 0)",
+        backgroundColor: "rgb(245,245,245)"
+      },
+      tempSig: null,
+      tempDate: null,
+      tempName: null
+    };
+  },
+  computed: {
+    hasSignature: function() {
+      return this.imgUrl != null;
+    },
+    imgUrl: function() {
+      let sig = null;
+      if (this.variant == "customer") {
+        sig = this.value.customerSignature;
+      } else {
+        sig = this.value.techSignature;
+      }
+      if (sig != null && sig.length > 0 && sig.includes("svg")) {
+        return sig;
+      } else {
+        return null;
+      }
+    },
+    sigDate: function() {
+      if (this.variant == "customer") {
+        return this.value.customerSignatureCaptured;
+      } else {
+        return this.value.techSignatureCaptured;
+      }
+    },
+    sigName: function() {
+      if (this.variant == "customer") {
+        return this.value.customerSignatureName;
+      } else {
+        return this.value.techSignatureName;
+      }
+    },
+    sigDateLocalized: function() {
+      const sd = this.sigDate;
+      if (sd == null) {
+        return null;
+      } else {
+        return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+          sd,
+          this.pvm.timeZoneName,
+          this.pvm.languageName,
+          this.pvm.hour12
+        );
+      }
+    }
+  },
   methods: {
     showSign() {
       if (this.readonly) return;
@@ -257,51 +302,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    hasSignature: function() {
-      return this.imgUrl != null;
-    },
-    imgUrl: function() {
-      let sig = null;
-      if (this.variant == "customer") {
-        sig = this.value.customerSignature;
-      } else {
-        sig = this.value.techSignature;
-      }
-      if (sig != null && sig.length > 0 && sig.includes("svg")) {
-        return sig;
-      } else {
-        return null;
-      }
-    },
-    sigDate: function() {
-      if (this.variant == "customer") {
-        return this.value.customerSignatureCaptured;
-      } else {
-        return this.value.techSignatureCaptured;
-      }
-    },
-    sigName: function() {
-      if (this.variant == "customer") {
-        return this.value.customerSignatureName;
-      } else {
-        return this.value.techSignatureName;
-      }
-    },
-    sigDateLocalized: function() {
-      const sd = this.sigDate;
-      if (sd == null) {
-        return null;
-      } else {
-        return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-          sd,
-          this.pvm.timeZoneName,
-          this.pvm.languageName,
-          this.pvm.hour12
-        );
-      }
-    }
   }
 };
 </script>
diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
index d2ce72f6..ef9625c9 100644
--- a/ayanova/src/components/work-order-state.vue
+++ b/ayanova/src/components/work-order-state.vue
@@ -6,8 +6,8 @@
     <template>
       <div
         class="mb-6 mb-sm-0"
-        @click="openDialog = true"
         :data-cy="`${dataCy}:open`"
+        @click="openDialog = true"
       >
         <v-btn icon class="ml-n1 mr-2">
           <v-icon>{{ openIcon() }}</v-icon>
@@ -15,10 +15,10 @@
 
         <span class="text-h6">{{ pvm.currentState.name }}</span>
         <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
-        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
+        <v-icon v-if="pvm.currentState.locked" color="primary" class="ml-4"
           >$ayiLock</v-icon
         >
-        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
+        <v-icon v-if="pvm.currentState.completed" color="primary" class="ml-4"
           >$ayiCheckCircle</v-icon
         >
       </div>
@@ -37,10 +37,10 @@
                 <span class="ml-3">{{ item.user }}</span>
                 <span class="font-weight-bold ml-3">{{ item.name }}</span>
                 <v-icon small :color="item.color" class="ml-4">$ayiFlag</v-icon>
-                <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                <v-icon v-if="item.locked" small color="primary" class="ml-4"
                   >$ayiLock</v-icon
                 >
-                <v-icon small color="primary" v-if="item.completed" class="ml-4"
+                <v-icon v-if="item.completed" small color="primary" class="ml-4"
                   >$ayiCheckCircle</v-icon
                 >
               </div>
@@ -55,13 +55,13 @@
                   <v-icon small :color="item.color" class="ml-4"
                     >$ayiFlag</v-icon
                   >
-                  <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                  <v-icon v-if="item.locked" small color="primary" class="ml-4"
                     >$ayiLock</v-icon
                   >
                   <v-icon
+                    v-if="item.completed"
                     small
                     color="primary"
-                    v-if="item.completed"
                     class="ml-4"
                     >$ayiCheckCircle</v-icon
                   >
@@ -78,8 +78,8 @@
                   dense
                   :label="$ay.t('NewStatus')"
                   prepend-icon="$ayiEdit"
-                  @click:prepend="handleEditStateClick()"
                   :data-cy="`${dataCy}:picker`"
+                  @click:prepend="handleEditStateClick()"
                 >
                   <template v-slot:item="data">
                     <v-list-item-avatar>
@@ -91,17 +91,17 @@
                           data.item.name
                         }}</span
                         ><v-icon
+                          v-if="data.item.locked"
                           small
                           color="disabled"
                           class="ml-2"
-                          v-if="data.item.locked"
                           >$ayiLock</v-icon
                         >
                         <v-icon
+                          v-if="data.item.completed"
                           color="disabled"
                           class="ml-1"
                           small
-                          v-if="data.item.completed"
                           >$ayiCheckCircle</v-icon
                         ></v-list-item-title
                       >
@@ -125,8 +125,8 @@
               color="blue darken-1"
               :disabled="selectedStatus == null"
               text
-              @click="save()"
               :data-cy="`${dataCy}:btnok`"
+              @click="save()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -137,13 +137,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      selectedStatus: null,
-      openDialog: false
-    };
-  },
-
   props: {
     value: {
       default: null,
@@ -166,6 +159,48 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false
+    };
+  },
+  computed: {
+    hasState() {
+      return this.value.states != null && this.value.states.length > 0;
+    },
+    stateDisplayList() {
+      const ret = [];
+      this.value.states.forEach(z => {
+        ret.push(this.getStateForDisplay(z));
+      });
+      return ret;
+    },
+    canAdd: function() {
+      //first check most obvious disqualifying properties
+      if (!this.pvm.rights.change) {
+        return false;
+      }
+      //not currently locked, user has rights to do it so allow it
+      if (!this.value.isLockedAtServer) {
+        return true;
+      }
+      //locked, confirm if user can change it
+      //if any role then no problem
+      //only thing left to check is if the current user can unlock this
+      //get remove roles required for current state
+      const cs = this.pvm.currentState;
+      if (cs.removeRoles == null || cs.removeRoles == 0) {
+        //no state set yet
+        return true;
+      }
+      //need to check the role here against current user roles to see if this is valid
+      if (window.$gz.role.hasRole(cs.removeRoles)) {
+        return true;
+      }
+      return false;
+    }
+  },
 
   methods: {
     addState() {
@@ -248,42 +283,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    hasState() {
-      return this.value.states != null && this.value.states.length > 0;
-    },
-    stateDisplayList() {
-      const ret = [];
-      this.value.states.forEach(z => {
-        ret.push(this.getStateForDisplay(z));
-      });
-      return ret;
-    },
-    canAdd: function() {
-      //first check most obvious disqualifying properties
-      if (!this.pvm.rights.change) {
-        return false;
-      }
-      //not currently locked, user has rights to do it so allow it
-      if (!this.value.isLockedAtServer) {
-        return true;
-      }
-      //locked, confirm if user can change it
-      //if any role then no problem
-      //only thing left to check is if the current user can unlock this
-      //get remove roles required for current state
-      const cs = this.pvm.currentState;
-      if (cs.removeRoles == null || cs.removeRoles == 0) {
-        //no state set yet
-        return true;
-      }
-      //need to check the role here against current user roles to see if this is valid
-      if (window.$gz.role.hasRole(cs.removeRoles)) {
-        return true;
-      }
-      return false;
-    }
   }
 };
 </script>
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index 5711bfc9..34fb9495 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -1,5 +1,3 @@
-/* Xeslint-disable */
-//import "typeface-roboto/index.css";
 import "fontsource-roboto/latin.css";
 import "github-markdown-css";
 import Vue from "vue";
@@ -106,20 +104,10 @@ window.$gz = {
 Vue.config.errorHandler = errorHandler.handleVueError;
 window.onerror = errorHandler.handleGeneralError;
 
-// //unhandled rejection handler
-//shouldn't need this
-// window.addEventListener("unhandledrejection", function(event) {
-//   // the event object has two special properties:
-//   alert(event.promise); // [object Promise] - the promise that generated the error
-//   alert(event.reason); // Error: Whoops! - the unhandled error object
-// });
-
 //warnings, only occur by default in debug mode not production
 Vue.config.warnHandler = errorHandler.handleVueWarning;
 
-//added for vuetify 2.x to disable annoying prodution mode tip warning
-//but commented out for now just to see what it looks like
-Vue.config.productionTip = false;
+//Vue.config.productionTip = false;
 
 /////////////////////////////////////////////////////////////////
 // AJAX LOADER INDICATOR
diff --git a/ayanova/src/views/acc-service-bank.vue b/ayanova/src/views/acc-service-bank.vue
index dc331903..3d733344 100644
--- a/ayanova/src/views/acc-service-bank.vue
+++ b/ayanova/src/views/acc-service-bank.vue
@@ -4,22 +4,22 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <div class="mb-6" v-if="obj.aType">
+        <div v-if="obj.aType" class="mb-6">
           <v-icon large @click="navToTarget()">{{ iconForType }}</v-icon
           ><span class="text-h5" @click="navToTarget()"> {{ name }}</span>
         </div>
         <v-row>
           <v-col cols="12">
             <v-textarea
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('ServiceBankDescription')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
-              @input="fieldValueChanged('name')"
               auto-grow
+              @input="fieldValueChanged('name')"
             ></v-textarea>
           </v-col>
 
@@ -31,10 +31,10 @@
             xl="3"
           >
             <gz-currency
+              ref="currency"
               v-model="obj.currency"
               :readonly="formState.readOnly"
               :label="$ay.t('ServiceBankCurrency')"
-              ref="currency"
               data-cy="currency"
               :rules="[
                 form().decimalValid(this, 'currency'),
@@ -53,10 +53,10 @@
             xl="3"
           >
             <gz-decimal
+              ref="hours"
               v-model="obj.hours"
               :readonly="formState.readOnly"
               :label="$ay.t('ServiceBankHours')"
-              ref="hours"
               data-cy="hours"
               :rules="[
                 form().decimalValid(this, 'hours'),
@@ -75,10 +75,10 @@
             xl="3"
           >
             <gz-decimal
+              ref="incidents"
               v-model="obj.incidents"
               :readonly="formState.readOnly"
               :label="$ay.t('ServiceBankIncidents')"
-              ref="incidents"
               data-cy="incidents"
               :rules="[
                 form().decimalValid(this, 'incidents'),
@@ -101,6 +101,70 @@ const FORM_KEY = "service-bank-edit";
 const API_BASE_URL = "service-bank/";
 const FORM_CUSTOM_TEMPLATE_KEY = "ServiceBank";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        objectId: null,
+        aType: null,
+        sourceId: 0, //default for manual entries
+        sourceType: window.$gz.type.ServiceBank,
+        incidents: 0,
+        currency: 0,
+        hours: 0
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      name: null
+    };
+  },
+  computed: {
+    iconForType() {
+      return window.$gz.util.iconForType(this.obj.aType);
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -170,70 +234,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        objectId: null,
-        aType: null,
-        sourceId: 0, //default for manual entries
-        sourceType: window.$gz.type.ServiceBank,
-        incidents: 0,
-        currency: 0,
-        hours: 0
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      name: null
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    iconForType() {
-      return window.$gz.util.iconForType(this.obj.aType);
-    }
-  },
   methods: {
     navToTarget: function() {
       window.$gz.eventBus.$emit("openobject", {
@@ -342,17 +342,19 @@ async function clickHandler(menuItem) {
         break;
 
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.ServiceBank,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.ServiceBank,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
@@ -411,7 +413,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "ServiceBank",
     "ServiceBankDescription",
diff --git a/ayanova/src/views/acc-service-banks.vue b/ayanova/src/views/acc-service-banks.vue
index d83e10c3..8a78217a 100644
--- a/ayanova/src/views/acc-service-banks.vue
+++ b/ayanova/src/views/acc-service-banks.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="$ay.ayt().ServiceBank"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -15,9 +15,9 @@
       :show-select="rights.read"
       :reload="reload"
       :rid-column-openable="false"
-      @selection-change="handleSelected"
       data-cy="serviceBanksTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -27,6 +27,18 @@
 <script>
 const FORM_KEY = "service-bank-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aType: null,
+      name: null
+    };
+  },
   async created() {
     const vm = this;
     vm.rights = window.$gz.role.getRights(window.$gz.type.ServiceBank);
@@ -54,18 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aType: null,
-      name: null
-    };
-  },
 
   methods: {
     handleSelected(selected) {
@@ -101,13 +101,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.ServiceBank
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.ServiceBank
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/acc-service-rate.vue b/ayanova/src/views/acc-service-rate.vue
index d6e5f538..c4b8068e 100644
--- a/ayanova/src/views/acc-service-rate.vue
+++ b/ayanova/src/views/acc-service-rate.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('Name')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <v-text-field
+              ref="accountNumber"
               v-model="obj.accountNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('RateAccountNumber')"
-              ref="accountNumber"
               data-cy="accountNumber"
               :error-messages="form().serverErrors(this, 'accountNumber')"
               @input="fieldValueChanged('accountNumber')"
@@ -38,10 +38,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="charge"
               v-model="obj.charge"
               :readonly="formState.readOnly"
               :label="$ay.t('RateCharge')"
-              ref="charge"
               data-cy="charge"
               :rules="[
                 form().decimalValid(this, 'charge'),
@@ -54,10 +54,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="cost"
               v-model="obj.cost"
               :readonly="formState.readOnly"
               :label="$ay.t('Cost')"
-              ref="cost"
               data-cy="cost"
               :rules="[
                 form().decimalValid(this, 'cost'),
@@ -76,14 +76,14 @@
             xl="3"
           >
             <v-combobox
+              ref="unit"
               v-model="obj.unit"
               :readonly="formState.readOnly"
               :label="$ay.t('RateUnitChargeDescriptionID')"
-              ref="unit"
               data-cy="unit"
               :error-messages="form().serverErrors(this, 'unit')"
-              @input="fieldValueChanged('unit')"
               :items="selectLists.priorUnits"
+              @input="fieldValueChanged('unit')"
             ></v-combobox>
           </v-col>
 
@@ -95,10 +95,10 @@
             xl="3"
           >
             <v-checkbox
+              ref="contractOnly"
               v-model="obj.contractOnly"
               :readonly="formState.readOnly"
               :label="$ay.t('RateContractRate')"
-              ref="contractOnly"
               data-cy="contractOnly"
               :error-messages="form().serverErrors(this, 'contractOnly')"
               @change="fieldValueChanged('contractOnly')"
@@ -107,10 +107,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -119,22 +119,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('ServiceRateNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -143,11 +143,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -156,10 +156,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -186,65 +186,6 @@ const API_BASE_URL = "service-rate/";
 const FORM_CUSTOM_TEMPLATE_KEY = "ServiceRate";
 
 export default {
-  async created() {
-    const vm = this;
-
-    try {
-      await initForm(vm);
-
-      vm.rights = window.$gz.role.getRights(window.$gz.type.ServiceRate);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -310,6 +251,65 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.getRights(window.$gz.type.ServiceRate);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -503,17 +503,19 @@ async function clickHandler(menuItem) {
         break;
 
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.ServiceRate,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.ServiceRate,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
@@ -618,7 +620,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "ServiceRate",
     "Name",
diff --git a/ayanova/src/views/acc-service-rates.vue b/ayanova/src/views/acc-service-rates.vue
index e903fa69..1137e21e 100644
--- a/ayanova/src/views/acc-service-rates.vue
+++ b/ayanova/src/views/acc-service-rates.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="ServiceRateDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="serviceRatesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "service-rate-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.ServiceRate);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.ServiceRate);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.ServiceRate
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.ServiceRate
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/acc-tax-code.vue b/ayanova/src/views/acc-tax-code.vue
index efd433dc..d5f4bf0f 100644
--- a/ayanova/src/views/acc-tax-code.vue
+++ b/ayanova/src/views/acc-tax-code.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('Name')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <gz-percent
+              ref="taxAPct"
               v-model="obj.taxAPct"
               :readonly="formState.readOnly"
               :label="$ay.t('TaxCodeTaxA')"
-              ref="taxAPct"
               data-cy="taxAPct"
               :rules="[
                 form().decimalValid(this, 'taxAPct'),
@@ -48,10 +48,10 @@
             xl="3"
           >
             <gz-percent
+              ref="taxBPct"
               v-model="obj.taxBPct"
               :readonly="formState.readOnly"
               :label="$ay.t('TaxCodeTaxB')"
-              ref="taxBPct"
               data-cy="taxBPct"
               :rules="[
                 form().decimalValid(this, 'taxBPct'),
@@ -70,10 +70,10 @@
             xl="3"
           >
             <v-checkbox
+              ref="taxOnTax"
               v-model="obj.taxOnTax"
               :readonly="formState.readOnly"
               :label="$ay.t('TaxCodeTaxOnTax')"
-              ref="taxOnTax"
               data-cy="taxOnTax"
               :error-messages="form().serverErrors(this, 'taxOnTax')"
               @change="fieldValueChanged('taxOnTax')"
@@ -81,10 +81,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -93,22 +93,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('TaxCodeNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -117,11 +117,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -130,10 +130,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -160,64 +160,6 @@ const API_BASE_URL = "tax-code/";
 const FORM_CUSTOM_TEMPLATE_KEY = "TaxCode";
 
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.TaxCode);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -278,6 +220,64 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.TaxCode);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -466,17 +466,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.TaxCode,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.TaxCode,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
@@ -572,7 +574,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -580,7 +582,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TaxCode",
     "Name",
diff --git a/ayanova/src/views/acc-tax-codes.vue b/ayanova/src/views/acc-tax-codes.vue
index be88ff40..866d4776 100644
--- a/ayanova/src/views/acc-tax-codes.vue
+++ b/ayanova/src/views/acc-tax-codes.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="TaxCodeDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="taxCodesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "tax-code-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.TaxCode);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.TaxCode);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.TaxCode)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.TaxCode)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/acc-travel-rate.vue b/ayanova/src/views/acc-travel-rate.vue
index 6aa06bbf..84959bbe 100644
--- a/ayanova/src/views/acc-travel-rate.vue
+++ b/ayanova/src/views/acc-travel-rate.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('Name')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <v-text-field
+              ref="accountNumber"
               v-model="obj.accountNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('RateAccountNumber')"
-              ref="accountNumber"
               data-cy="accountNumber"
               :error-messages="form().serverErrors(this, 'accountNumber')"
               @input="fieldValueChanged('accountNumber')"
@@ -38,10 +38,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="charge"
               v-model="obj.charge"
               :readonly="formState.readOnly"
               :label="$ay.t('RateCharge')"
-              ref="charge"
               data-cy="charge"
               :rules="[
                 form().decimalValid(this, 'charge'),
@@ -54,10 +54,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="cost"
               v-model="obj.cost"
               :readonly="formState.readOnly"
               :label="$ay.t('Cost')"
-              ref="cost"
               data-cy="cost"
               :rules="[
                 form().decimalValid(this, 'cost'),
@@ -76,14 +76,14 @@
             xl="3"
           >
             <v-combobox
+              ref="unit"
               v-model="obj.unit"
               :readonly="formState.readOnly"
               :label="$ay.t('RateUnitChargeDescriptionID')"
-              ref="unit"
               data-cy="unit"
               :error-messages="form().serverErrors(this, 'unit')"
-              @input="fieldValueChanged('unit')"
               :items="selectLists.priorUnits"
+              @input="fieldValueChanged('unit')"
             ></v-combobox>
           </v-col>
           <v-col
@@ -94,10 +94,10 @@
             xl="3"
           >
             <v-checkbox
+              ref="contractOnly"
               v-model="obj.contractOnly"
               :readonly="formState.readOnly"
               :label="$ay.t('RateContractRate')"
-              ref="contractOnly"
               data-cy="contractOnly"
               :error-messages="form().serverErrors(this, 'contractOnly')"
               @change="fieldValueChanged('contractOnly')"
@@ -105,10 +105,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -117,22 +117,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('TravelRateNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -141,11 +141,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -154,10 +154,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -184,62 +184,6 @@ const API_BASE_URL = "travel-rate/";
 const FORM_CUSTOM_TEMPLATE_KEY = "TravelRate";
 
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.TravelRate);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -303,6 +247,62 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.TravelRate);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -489,17 +489,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.TravelRate,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.TravelRate,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -605,7 +607,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TravelRate",
     "Name",
diff --git a/ayanova/src/views/acc-travel-rates.vue b/ayanova/src/views/acc-travel-rates.vue
index 9531804d..bf31b24c 100644
--- a/ayanova/src/views/acc-travel-rates.vue
+++ b/ayanova/src/views/acc-travel-rates.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="TravelRateDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="travelRatesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "travel-rate-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.TravelRate);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.TravelRate);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.TravelRate
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.TravelRate
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/adm-attachments.vue b/ayanova/src/views/adm-attachments.vue
index db0a4fcc..4cff8a32 100644
--- a/ayanova/src/views/adm-attachments.vue
+++ b/ayanova/src/views/adm-attachments.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-row>
-      <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+      <gz-error :error-box-message="formState.errorBoxMessage" />
       <v-col cols="12">
         <gz-data-table
           v-if="!jobActive"
@@ -10,17 +10,12 @@
           :show-select="true"
           :single-select="false"
           :reload="reload"
-          @selection-change="handleSelected"
           data-cy="attachTable"
-        >
-        </gz-data-table>
+          @selection-change="handleSelected"
+        />
 
         <template v-if="jobActive">
-          <v-progress-circular
-            indeterminate
-            color="primary"
-            :size="60"
-          ></v-progress-circular>
+          <v-progress-circular indeterminate color="primary" :size="60" />
         </template>
       </v-col>
     </v-row>
@@ -37,25 +32,25 @@
               item-text="name"
               item-value="id"
               :label="$ay.t('AyaType')"
-            ></v-select>
+            />
 
             <gz-pick-list
               v-if="moveType != 0"
+              v-model="moveId"
               :aya-type="moveType"
               :show-edit-icon="false"
               :include-inactive="true"
-              v-model="moveId"
               label="Id"
-            ></gz-pick-list>
+            />
           </v-card-text>
           <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn color="blue darken-1" text @click="moveDialog = false">{{
-              $ay.t("Cancel")
-            }}</v-btn>
-            <v-btn color="blue darken-1" text @click="moveSelected()">{{
-              $ay.t("OK")
-            }}</v-btn>
+            <v-spacer />
+            <v-btn color="blue darken-1" text @click="moveDialog = false">
+              {{ $ay.t("Cancel") }}
+            </v-btn>
+            <v-btn color="blue darken-1" text @click="moveSelected()">
+              {{ $ay.t("OK") }}
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -65,17 +60,6 @@
 <script>
 const FORM_KEY = "adm-attachments";
 export default {
-  async created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.FileAttachment);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    await fetchTranslatedText(this);
-    await populateSelectionLists(this);
-    generateMenu(this);
-    this.handleSelected([]); //start out read only no selection state for batch ops options
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       jobActive: false,
@@ -100,6 +84,17 @@ export default {
       }
     };
   },
+  async created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.FileAttachment);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    await fetchTranslatedText(this);
+    await populateSelectionLists(this);
+    generateMenu(this);
+    this.handleSelected([]); //start out read only no selection state for batch ops options
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canBatchOp() {
       return (
@@ -294,7 +289,7 @@ function generateMenu(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "StartAttachmentMaintenanceJob",
     "JobExclusiveWarning",
diff --git a/ayanova/src/views/adm-global-logo.vue b/ayanova/src/views/adm-global-logo.vue
index 49ec088f..0d6240c0 100644
--- a/ayanova/src/views/adm-global-logo.vue
+++ b/ayanova/src/views/adm-global-logo.vue
@@ -83,30 +83,6 @@
 //
 const FORM_KEY = "adm-global-logo";
 export default {
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.formState.ready = true;
-      vm.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
-      generateMenu(vm);
-      vm.smallUrl = `${window.$gz.api.logoUrl("small")}?x=${Date.now()}`;
-      vm.mediumUrl = `${window.$gz.api.logoUrl("medium")}?x=${Date.now()}`;
-      vm.largeUrl = `${window.$gz.api.logoUrl("large")}?x=${Date.now()}`;
-      vm.fileSizeExceededWarning = vm.$ay
-        .t("AyaFileFileTooLarge")
-        .replace("{0}", "512KiB");
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       uploadSmall: null,
@@ -132,6 +108,30 @@ export default {
       ]
     };
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.formState.ready = true;
+      vm.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+      generateMenu(vm);
+      vm.smallUrl = `${window.$gz.api.logoUrl("small")}?x=${Date.now()}`;
+      vm.mediumUrl = `${window.$gz.api.logoUrl("medium")}?x=${Date.now()}`;
+      vm.largeUrl = `${window.$gz.api.logoUrl("large")}?x=${Date.now()}`;
+      vm.fileSizeExceededWarning = vm.$ay
+        .t("AyaFileFileTooLarge")
+        .replace("{0}", "512KiB");
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   methods: {
     imageUrl(size) {
       return window.$gz.api.logoUrl(size);
@@ -267,7 +267,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "SmallLogo",
     "MediumLogo",
diff --git a/ayanova/src/views/adm-global-seeds.vue b/ayanova/src/views/adm-global-seeds.vue
index b5c55c87..8a530a7e 100644
--- a/ayanova/src/views/adm-global-seeds.vue
+++ b/ayanova/src/views/adm-global-seeds.vue
@@ -13,10 +13,10 @@
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="purchaseOrderNextSerial"
               v-model="obj.purchaseOrderNextSerial"
               :readonly="formState.readOnly"
               :label="$ay.t('NextPONumber')"
-              ref="purchaseOrderNextSerial"
               data-cy="purchaseOrderNextSerial"
               :rules="[
                 form().integerValid(this, 'purchaseOrderNextSerial'),
@@ -25,8 +25,8 @@
               :error-messages="
                 form().serverErrors(this, 'purchaseOrderNextSerial')
               "
-              @input="fieldValueChanged('purchaseOrderNextSerial')"
               append-outer-icon="$ayiSave"
+              @input="fieldValueChanged('purchaseOrderNextSerial')"
               @click:append-outer="
                 submit(ayaTypes().PurchaseOrder, obj.purchaseOrderNextSerial)
               "
@@ -35,18 +35,18 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="workorderNextSerial"
               v-model="obj.workorderNextSerial"
               :readonly="formState.readOnly"
               :label="$ay.t('NextWorkorderNumber')"
-              ref="workorderNextSerial"
               data-cy="workorderNextSerial"
               :rules="[
                 form().integerValid(this, 'workorderNextSerial'),
                 form().required(this, 'workorderNextSerial')
               ]"
               :error-messages="form().serverErrors(this, 'workorderNextSerial')"
-              @input="fieldValueChanged('workorderNextSerial')"
               append-outer-icon="$ayiSave"
+              @input="fieldValueChanged('workorderNextSerial')"
               @click:append-outer="
                 submit(ayaTypes().WorkOrder, obj.workorderNextSerial)
               "
@@ -55,18 +55,18 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="quoteNextSerial"
               v-model="obj.quoteNextSerial"
               :readonly="formState.readOnly"
               :label="$ay.t('NextQuoteNumber')"
-              ref="quoteNextSerial"
               data-cy="quoteNextSerial"
               :rules="[
                 form().integerValid(this, 'quoteNextSerial'),
                 form().required(this, 'quoteNextSerial')
               ]"
               :error-messages="form().serverErrors(this, 'quoteNextSerial')"
-              @input="fieldValueChanged('quoteNextSerial')"
               append-outer-icon="$ayiSave"
+              @input="fieldValueChanged('quoteNextSerial')"
               @click:append-outer="
                 submit(ayaTypes().Quote, obj.quoteNextSerial)
               "
@@ -75,18 +75,18 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="pmNextSerial"
               v-model="obj.pmNextSerial"
               :readonly="formState.readOnly"
               :label="$ay.t('NextPMNumber')"
-              ref="pmNextSerial"
               data-cy="pmNextSerial"
               :rules="[
                 form().integerValid(this, 'pmNextSerial'),
                 form().required(this, 'pmNextSerial')
               ]"
               :error-messages="form().serverErrors(this, 'pmNextSerial')"
-              @input="fieldValueChanged('pmNextSerial')"
               append-outer-icon="$ayiSave"
+              @input="fieldValueChanged('pmNextSerial')"
               @click:append-outer="submit(ayaTypes().PM, obj.pmNextSerial)"
             ></v-text-field>
           </v-col>
@@ -102,25 +102,6 @@
 const FORM_KEY = "adm-global-seeds";
 const API_BASE_URL = "global-biz-setting/seeds/";
 export default {
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.formState.ready = true;
-      vm.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
-      generateMenu(vm);
-      await vm.getDataFromApi();
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: {
@@ -158,6 +139,25 @@ export default {
       deep: true
     }
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.formState.ready = true;
+      vm.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+      generateMenu(vm);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   methods: {
     ayaTypes: function() {
       return window.$gz.type;
@@ -282,7 +282,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "GlobalNextSeeds",
     "NextPONumber",
diff --git a/ayanova/src/views/adm-global-select-templates.vue b/ayanova/src/views/adm-global-select-templates.vue
index 5fdba996..97627cde 100644
--- a/ayanova/src/views/adm-global-select-templates.vue
+++ b/ayanova/src/views/adm-global-select-templates.vue
@@ -18,9 +18,9 @@
               item-text="name"
               item-value="id"
               :label="$ay.t('PickListTemplates')"
-              @input="templateSelected"
               data-cy="selectTemplate"
               :disabled="formState.dirty"
+              @input="templateSelected"
             >
             </v-select>
           </v-col>
@@ -35,13 +35,13 @@
                 </v-card-subtitle>
                 <v-card-text>
                   <v-checkbox
+                    :ref="item.key"
                     v-model="item.include"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Include')"
-                    :ref="item.key"
                     :disabled="item.required"
-                    @change="includeChanged(item)"
                     :data-cy="item.key + 'Include'"
+                    @change="includeChanged(item)"
                   ></v-checkbox>
                   <!-- RE-ORDER CONTROL -->
                   <div class="d-flex justify-space-between">
@@ -85,27 +85,6 @@ export default {
       next(false);
     }
   },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.formState.ready = true;
-      vm.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
-      generateMenu(vm);
-      //init disable save button so it can be enabled only on edit to show dirty form
-      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":delete");
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: {
@@ -157,8 +136,29 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.formState.ready = true;
+      vm.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+      generateMenu(vm);
+      //init disable save button so it can be enabled only on edit to show dirty form
+      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":delete");
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   methods: {
-    includeChanged: function(item) {
+    includeChanged: function() {
       window.$gz.form.setFormState({
         vm: this,
         dirty: true
@@ -404,7 +404,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -412,7 +412,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations(["Include", "ResetToDefault"]);
 }
 
diff --git a/ayanova/src/views/adm-global-settings.vue b/ayanova/src/views/adm-global-settings.vue
index 14344e0e..5c640f03 100644
--- a/ayanova/src/views/adm-global-settings.vue
+++ b/ayanova/src/views/adm-global-settings.vue
@@ -12,12 +12,12 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="taxPartPurchaseId"
+              v-model="obj.taxPartPurchaseId"
               :aya-type="ayaTypes().TaxCode"
               show-edit-icon
-              v-model="obj.taxPartPurchaseId"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalTaxPartPurchaseID')"
-              ref="taxPartPurchaseId"
               data-cy="taxPartPurchaseId"
               :error-messages="form().serverErrors(this, `taxPartPurchaseId`)"
               @input="fieldValueChanged(`taxPartPurchaseId`)"
@@ -26,12 +26,12 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="taxRateSaleId"
+              v-model="obj.taxRateSaleId"
               :aya-type="ayaTypes().TaxCode"
               show-edit-icon
-              v-model="obj.taxRateSaleId"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalTaxRateSaleID')"
-              ref="taxRateSaleId"
               data-cy="taxRateSaleId"
               :error-messages="form().serverErrors(this, `taxRateSaleId`)"
               @input="fieldValueChanged(`taxRateSaleId`)"
@@ -40,12 +40,12 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="taxPartSaleId"
+              v-model="obj.taxPartSaleId"
               :aya-type="ayaTypes().TaxCode"
               show-edit-icon
-              v-model="obj.taxPartSaleId"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalTaxPartSaleID')"
-              ref="taxPartSaleId"
               data-cy="taxPartSaleId"
               :error-messages="form().serverErrors(this, `taxPartSaleId`)"
               @input="fieldValueChanged(`taxPartSaleId`)"
@@ -54,10 +54,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="filterCaseSensitive"
               v-model="obj.filterCaseSensitive"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalFilterCaseSensitive')"
-              ref="filterCaseSensitive"
               data-cy="filterCaseSensitive"
               @change="fieldValueChanged('filterCaseSensitive')"
             ></v-checkbox>
@@ -65,10 +65,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="useInventory"
               v-model="obj.useInventory"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalUseInventory')"
-              ref="useInventory"
               data-cy="useInventory"
               @change="fieldValueChanged('useInventory')"
             ></v-checkbox>
@@ -76,11 +76,11 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-duration-picker
+              ref="workOrderCompleteByAge"
               v-model="obj.workOrderCompleteByAge"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalWorkOrderCompleteByAge')"
               :show-seconds="false"
-              ref="workOrderCompleteByAge"
               data-cy="workOrderCompleteByAge"
               :error-messages="
                 form().serverErrors(this, 'workOrderCompleteByAge')
@@ -91,10 +91,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="allowScheduleConflicts"
               v-model="obj.allowScheduleConflicts"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalAllowScheduleConflicts')"
-              ref="allowScheduleConflicts"
               data-cy="allowScheduleConflicts"
               @change="fieldValueChanged('allowScheduleConflicts')"
             ></v-checkbox>
@@ -102,10 +102,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="workLaborScheduleDefaultMinutes"
               v-model="obj.workLaborScheduleDefaultMinutes"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalLaborSchedUserDfltTimeSpan')"
-              ref="workLaborScheduleDefaultMinutes"
               data-cy="workLaborScheduleDefaultMinutes"
               :rules="[
                 form().integerValid(this, 'workLaborScheduleDefaultMinutes'),
@@ -120,10 +120,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="workOrderTravelDefaultMinutes"
               v-model="obj.workOrderTravelDefaultMinutes"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalTravelDfltTimeSpan')"
-              ref="workOrderTravelDefaultMinutes"
               data-cy="workOrderTravelDefaultMinutes"
               :rules="[
                 form().integerValid(this, 'workOrderTravelDefaultMinutes'),
@@ -150,10 +150,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-url
+              ref="webAddress"
               v-model="obj.webAddress"
               :readonly="formState.readOnly"
               :label="$ay.t('WebAddress')"
-              ref="webAddress"
               data-cy="webAddress"
               :error-messages="form().serverErrors(this, 'webAddress')"
               @input="fieldValueChanged('webAddress')"
@@ -162,10 +162,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-email
+              ref="emailAddress"
               v-model="obj.emailAddress"
               :readonly="formState.readOnly"
               :label="$ay.t('CompanyEmail')"
-              ref="emailAddress"
               data-cy="emailAddress"
               :error-messages="form().serverErrors(this, 'emailAddress')"
               @input="fieldValueChanged('emailAddress')"
@@ -174,10 +174,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-phone
+              ref="phone1"
               v-model="obj.phone1"
               :readonly="formState.readOnly"
               :label="$ay.t('CompanyPhone1')"
-              ref="phone1"
               data-cy="phone1"
               :error-messages="form().serverErrors(this, 'phone1')"
               @input="fieldValueChanged('phone1')"
@@ -186,10 +186,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-phone
+              ref="phone2"
               v-model="obj.phone2"
               :readonly="formState.readOnly"
               :label="$ay.t('CompanyPhone2')"
-              ref="phone2"
               data-cy="phone2"
               :error-messages="form().serverErrors(this, 'phone2')"
               @input="fieldValueChanged('phone2')"
@@ -203,10 +203,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="address"
               v-model="obj.address"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressDeliveryAddress')"
-              ref="address"
               data-cy="address"
               :error-messages="form().serverErrors(this, 'address')"
               @input="fieldValueChanged('address')"
@@ -215,10 +215,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="city"
               v-model="obj.city"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressCity')"
-              ref="city"
               data-cy="city"
               :error-messages="form().serverErrors(this, 'city')"
               @input="fieldValueChanged('city')"
@@ -227,10 +227,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="region"
               v-model="obj.region"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressStateProv')"
-              ref="region"
               data-cy="region"
               :error-messages="form().serverErrors(this, 'region')"
               @input="fieldValueChanged('region')"
@@ -239,10 +239,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="country"
               v-model="obj.country"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressCountry')"
-              ref="country"
               data-cy="country"
               :error-messages="form().serverErrors(this, 'country')"
               @input="fieldValueChanged('country')"
@@ -251,29 +251,29 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-decimal
+              ref="latitude"
               v-model="obj.latitude"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressLatitude')"
-              ref="latitude"
               data-cy="latitude"
               :rules="[form().decimalValid(this, 'latitude')]"
               :error-messages="form().serverErrors(this, 'latitude')"
-              @input="fieldValueChanged('latitude')"
               :precision="6"
+              @input="fieldValueChanged('latitude')"
             ></gz-decimal>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-decimal
+              ref="longitude"
               v-model="obj.longitude"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressLongitude')"
-              ref="longitude"
               data-cy="longitude"
               :rules="[form().decimalValid(this, 'longitude')]"
               :error-messages="form().serverErrors(this, 'longitude')"
-              @input="fieldValueChanged('longitude')"
               :precision="6"
+              @input="fieldValueChanged('longitude')"
             ></gz-decimal>
           </v-col>
 
@@ -285,10 +285,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="postAddress"
               v-model="obj.postAddress"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressPostalDeliveryAddress')"
-              ref="postAddress"
               data-cy="postAddress"
               :error-messages="form().serverErrors(this, 'postAddress')"
               @input="fieldValueChanged('postAddress')"
@@ -297,10 +297,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="postCity"
               v-model="obj.postCity"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressPostalCity')"
-              ref="postCity"
               data-cy="postCity"
               :error-messages="form().serverErrors(this, 'postCity')"
               @input="fieldValueChanged('postCity')"
@@ -309,10 +309,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="postRegion"
               v-model="obj.postRegion"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressPostalStateProv')"
-              ref="postRegion"
               data-cy="postRegion"
               :error-messages="form().serverErrors(this, 'postRegion')"
               @input="fieldValueChanged('postRegion')"
@@ -321,10 +321,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="postCountry"
               v-model="obj.postCountry"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressPostalCountry')"
-              ref="postCountry"
               data-cy="postCountry"
               :error-messages="form().serverErrors(this, 'postCountry')"
               @input="fieldValueChanged('postCountry')"
@@ -333,10 +333,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="postCode"
               v-model="obj.postCode"
               :readonly="formState.readOnly"
               :label="$ay.t('AddressPostalPostal')"
-              ref="postCode"
               data-cy="postCode"
               :error-messages="form().serverErrors(this, 'postCode')"
               @input="fieldValueChanged('postCode')"
@@ -367,10 +367,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="signatureTitle"
               v-model="obj.signatureTitle"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalSignatureTitle')"
-              ref="signatureTitle"
               data-cy="signatureTitle"
               :error-messages="form().serverErrors(this, 'signatureTitle')"
               @input="fieldValueChanged('signatureTitle')"
@@ -379,10 +379,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="signatureHeader"
               v-model="obj.signatureHeader"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalSignatureHeader')"
-              ref="signatureHeader"
               data-cy="signatureHeader"
               :error-messages="form().serverErrors(this, 'signatureHeader')"
               @input="fieldValueChanged('signatureHeader')"
@@ -391,10 +391,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="signatureFooter"
               v-model="obj.signatureFooter"
               :readonly="formState.readOnly"
               :label="$ay.t('GlobalSignatureFooter')"
-              ref="signatureFooter"
               data-cy="signatureFooter"
               :error-messages="form().serverErrors(this, 'signatureFooter')"
               @input="fieldValueChanged('signatureFooter')"
@@ -420,10 +420,10 @@
                   <v-row>
                     <v-col cols="12" sm="6" lg="2">
                       <v-checkbox
+                        ref="customerAllowCSR"
                         v-model="obj.customerAllowCSR"
                         :readonly="formState.readOnly"
                         :label="$ay.t('Active')"
-                        ref="customerAllowCSR"
                         data-cy="customerAllowCSR"
                         :error-messages="
                           form().serverErrors(this, 'customerAllowCSR')
@@ -434,10 +434,10 @@
                     <template v-if="obj.customerAllowCSR">
                       <v-col cols="12" sm="6" lg="10">
                         <gz-tag-picker
+                          ref="customerAllowCSRInTags"
                           v-model="obj.customerAllowCSRInTags"
                           :readonly="formState.readOnly"
                           :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                          ref="customerAllowCSRInTags"
                           data-cy="customerAllowCSRInTags"
                           :error-messages="
                             form().serverErrors(this, 'customerAllowCSRInTags')
@@ -448,6 +448,7 @@
 
                       <v-col cols="12">
                         <v-textarea
+                          ref="customerServiceRequestInfoText"
                           v-model="obj.customerServiceRequestInfoText"
                           :readonly="formState.readOnly"
                           :label="$ay.t('CSRInfoText')"
@@ -457,21 +458,20 @@
                               'customerServiceRequestInfoText'
                             )
                           "
-                          ref="customerServiceRequestInfoText"
                           data-cy="customerServiceRequestInfoText"
+                          auto-grow
                           @input="
                             fieldValueChanged('customerServiceRequestInfoText')
                           "
-                          auto-grow
                         ></v-textarea>
                       </v-col>
 
                       <v-col cols="12" sm="6" lg="2">
                         <v-checkbox
+                          ref="customerAllowCreateUnit"
                           v-model="obj.customerAllowCreateUnit"
                           :readonly="formState.readOnly"
                           :label="$ay.t('CustomerAllowCreateUnit')"
-                          ref="customerAllowCreateUnit"
                           data-cy="customerAllowCreateUnit"
                           :error-messages="
                             form().serverErrors(this, 'customerAllowCreateUnit')
@@ -482,12 +482,12 @@
                       <template v-if="obj.customerAllowCreateUnit">
                         <v-col cols="12" sm="6" lg="10">
                           <gz-tag-picker
+                            ref="customerAllowCreateUnitInTags"
                             v-model="obj.customerAllowCreateUnitInTags"
                             :readonly="formState.readOnly"
                             :label="
                               $ay.t('ContactCustomerHeadOfficeTaggedWith')
                             "
-                            ref="customerAllowCreateUnitInTags"
                             data-cy="customerAllowCreateUnitInTags"
                             :error-messages="
                               form().serverErrors(
@@ -515,10 +515,10 @@
                   <v-row>
                     <v-col cols="12" sm="6" lg="2">
                       <v-checkbox
+                        ref="customerAllowViewWO"
                         v-model="obj.customerAllowViewWO"
                         :readonly="formState.readOnly"
                         :label="$ay.t('Active')"
-                        ref="customerAllowViewWO"
                         data-cy="customerAllowViewWO"
                         :error-messages="
                           form().serverErrors(this, 'customerAllowViewWO')
@@ -529,10 +529,10 @@
                     <template v-if="obj.customerAllowViewWO">
                       <v-col cols="12" sm="6" lg="10">
                         <gz-tag-picker
+                          ref="customerAllowViewWOInTags"
                           v-model="obj.customerAllowViewWOInTags"
                           :readonly="formState.readOnly"
                           :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                          ref="customerAllowViewWOInTags"
                           data-cy="customerAllowViewWOInTags"
                           :error-messages="
                             form().serverErrors(
@@ -556,13 +556,13 @@
                             <v-row>
                               <v-col cols="12">
                                 <gz-pick-list
+                                  ref="customerDefaultWorkOrderReportId"
+                                  v-model="obj.customerDefaultWorkOrderReportId"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerDefaultWorkOrderReportId"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerDefaultWorkOrderReportId"
                                   data-cy="customerDefaultWorkOrderReportId"
                                   :error-messages="
                                     form().serverErrors(
@@ -581,10 +581,10 @@
                               <!-- ------------ -->
                               <v-col cols="12" sm="6">
                                 <gz-tag-picker
+                                  ref="customerWorkOrderReport1Tags"
                                   v-model="obj.customerWorkOrderReport1Tags"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('WorkOrderCustomerTaggedWith')"
-                                  ref="customerWorkOrderReport1Tags"
                                   data-cy="customerWorkOrderReport1Tags"
                                   :error-messages="
                                     form().serverErrors(
@@ -602,13 +602,13 @@
 
                               <v-col cols="12" sm="6">
                                 <gz-pick-list
+                                  ref="customerTagWorkOrderReport1Id"
+                                  v-model="obj.customerTagWorkOrderReport1Id"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerTagWorkOrderReport1Id"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerTagWorkOrderReport1Id"
                                   data-cy="customerTagWorkOrderReport1Id"
                                   :error-messages="
                                     form().serverErrors(
@@ -627,10 +627,10 @@
                               <!-- ------------ -->
                               <v-col cols="12" sm="6">
                                 <gz-tag-picker
+                                  ref="customerWorkOrderReport2Tags"
                                   v-model="obj.customerWorkOrderReport2Tags"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('WorkOrderCustomerTaggedWith')"
-                                  ref="customerWorkOrderReport2Tags"
                                   data-cy="customerWorkOrderReport2Tags"
                                   :error-messages="
                                     form().serverErrors(
@@ -648,13 +648,13 @@
 
                               <v-col cols="12" sm="6">
                                 <gz-pick-list
+                                  ref="customerTagWorkOrderReport2Id"
+                                  v-model="obj.customerTagWorkOrderReport2Id"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerTagWorkOrderReport2Id"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerTagWorkOrderReport2Id"
                                   data-cy="customerTagWorkOrderReport2Id"
                                   :error-messages="
                                     form().serverErrors(
@@ -673,10 +673,10 @@
                               <!-- ------------ -->
                               <v-col cols="12" sm="6">
                                 <gz-tag-picker
+                                  ref="customerWorkOrderReport3Tags"
                                   v-model="obj.customerWorkOrderReport3Tags"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('WorkOrderCustomerTaggedWith')"
-                                  ref="customerWorkOrderReport3Tags"
                                   data-cy="customerWorkOrderReport3Tags"
                                   :error-messages="
                                     form().serverErrors(
@@ -694,13 +694,13 @@
 
                               <v-col cols="12" sm="6">
                                 <gz-pick-list
+                                  ref="customerTagWorkOrderReport3Id"
+                                  v-model="obj.customerTagWorkOrderReport3Id"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerTagWorkOrderReport3Id"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerTagWorkOrderReport3Id"
                                   data-cy="customerTagWorkOrderReport3Id"
                                   :error-messages="
                                     form().serverErrors(
@@ -719,10 +719,10 @@
                               <!-- ------------ -->
                               <v-col cols="12" sm="6">
                                 <gz-tag-picker
+                                  ref="customerWorkOrderReport4Tags"
                                   v-model="obj.customerWorkOrderReport4Tags"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('WorkOrderCustomerTaggedWith')"
-                                  ref="customerWorkOrderReport4Tags"
                                   data-cy="customerWorkOrderReport4Tags"
                                   :error-messages="
                                     form().serverErrors(
@@ -740,13 +740,13 @@
 
                               <v-col cols="12" sm="6">
                                 <gz-pick-list
+                                  ref="customerTagWorkOrderReport4Id"
+                                  v-model="obj.customerTagWorkOrderReport4Id"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerTagWorkOrderReport4Id"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerTagWorkOrderReport4Id"
                                   data-cy="customerTagWorkOrderReport4Id"
                                   :error-messages="
                                     form().serverErrors(
@@ -765,10 +765,10 @@
                               <!-- ------------ -->
                               <v-col cols="12" sm="6">
                                 <gz-tag-picker
+                                  ref="customerWorkOrderReport5Tags"
                                   v-model="obj.customerWorkOrderReport5Tags"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('WorkOrderCustomerTaggedWith')"
-                                  ref="customerWorkOrderReport5Tags"
                                   data-cy="customerWorkOrderReport5Tags"
                                   :error-messages="
                                     form().serverErrors(
@@ -786,13 +786,13 @@
 
                               <v-col cols="12" sm="6">
                                 <gz-pick-list
+                                  ref="customerTagWorkOrderReport5Id"
+                                  v-model="obj.customerTagWorkOrderReport5Id"
                                   :aya-type="ayaTypes().Report"
                                   :variant="ayaTypes().WorkOrder.toString()"
                                   show-edit-icon
-                                  v-model="obj.customerTagWorkOrderReport5Id"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('DefaultReport')"
-                                  ref="customerTagWorkOrderReport5Id"
                                   data-cy="customerTagWorkOrderReport5Id"
                                   :error-messages="
                                     form().serverErrors(
@@ -820,10 +820,10 @@
                             <v-row>
                               <v-col cols="12" sm="6" lg="2">
                                 <v-checkbox
+                                  ref="customerAllowWOWiki"
                                   v-model="obj.customerAllowWOWiki"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('Active')"
-                                  ref="customerAllowWOWiki"
                                   data-cy="customerAllowWOWiki"
                                   :error-messages="
                                     form().serverErrors(
@@ -839,6 +839,7 @@
                               <template v-if="obj.customerAllowWOWiki">
                                 <v-col cols="12" sm="6" lg="10">
                                   <gz-tag-picker
+                                    ref="customerAllowWOWikiInTags"
                                     v-model="obj.customerAllowWOWikiInTags"
                                     :readonly="formState.readOnly"
                                     :label="
@@ -846,7 +847,6 @@
                                         'WorkOrderContactCustomerHeadOfficeTaggedWith'
                                       )
                                     "
-                                    ref="customerAllowWOWikiInTags"
                                     data-cy="customerAllowWOWikiInTags"
                                     :error-messages="
                                       form().serverErrors(
@@ -875,10 +875,10 @@
                             <v-row>
                               <v-col cols="12" sm="6" lg="2">
                                 <v-checkbox
+                                  ref="customerAllowWOAttachments"
                                   v-model="obj.customerAllowWOAttachments"
                                   :readonly="formState.readOnly"
                                   :label="$ay.t('Active')"
-                                  ref="customerAllowWOAttachments"
                                   data-cy="customerAllowWOAttachments"
                                   :error-messages="
                                     form().serverErrors(
@@ -896,6 +896,7 @@
                               <template v-if="obj.customerAllowWOAttachments">
                                 <v-col cols="12" sm="6" lg="10">
                                   <gz-tag-picker
+                                    ref="customerAllowWOAttachmentsInTags"
                                     v-model="
                                       obj.customerAllowWOAttachmentsInTags
                                     "
@@ -905,7 +906,6 @@
                                         'WorkOrderContactCustomerHeadOfficeTaggedWith'
                                       )
                                     "
-                                    ref="customerAllowWOAttachmentsInTags"
                                     data-cy="customerAllowWOAttachmentsInTags"
                                     :error-messages="
                                       form().serverErrors(
@@ -939,10 +939,10 @@
                   <v-row>
                     <v-col cols="12" sm="6" lg="2">
                       <v-checkbox
+                        ref="customerAllowUserSettings"
                         v-model="obj.customerAllowUserSettings"
                         :readonly="formState.readOnly"
                         :label="$ay.t('Active')"
-                        ref="customerAllowUserSettings"
                         data-cy="customerAllowUserSettings"
                         :error-messages="
                           form().serverErrors(this, 'customerAllowUserSettings')
@@ -953,10 +953,10 @@
                     <template v-if="obj.customerAllowUserSettings">
                       <v-col cols="12" sm="6" lg="10">
                         <gz-tag-picker
+                          ref="customerAllowUserSettingsInTags"
                           v-model="obj.customerAllowUserSettingsInTags"
                           :readonly="formState.readOnly"
                           :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                          ref="customerAllowUserSettingsInTags"
                           data-cy="customerAllowUserSettingsInTags"
                           :error-messages="
                             form().serverErrors(
@@ -983,10 +983,10 @@
                   <v-row>
                     <v-col cols="12" sm="6" lg="3">
                       <v-checkbox
+                        ref="customerAllowNotifyServiceImminent"
                         v-model="obj.customerAllowNotifyServiceImminent"
                         :readonly="formState.readOnly"
                         :label="$ay.t('NotifyEventCustomerServiceImminent')"
-                        ref="customerAllowNotifyServiceImminent"
                         data-cy="customerAllowNotifyServiceImminent"
                         :error-messages="
                           form().serverErrors(
@@ -1003,16 +1003,16 @@
                     </v-col>
 
                     <v-col
+                      v-if="obj.customerAllowNotifyServiceImminent"
                       cols="12"
                       sm="6"
                       lg="9"
-                      v-if="obj.customerAllowNotifyServiceImminent"
                     >
                       <gz-tag-picker
+                        ref="customerAllowNotifyServiceImminentInTags"
                         v-model="obj.customerAllowNotifyServiceImminentInTags"
                         :readonly="formState.readOnly"
                         :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                        ref="customerAllowNotifyServiceImminentInTags"
                         data-cy="customerAllowNotifyServiceImminentInTags"
                         :error-messages="
                           form().serverErrors(
@@ -1032,10 +1032,10 @@
 
                     <v-col cols="12" sm="6" lg="3">
                       <v-checkbox
+                        ref="customerAllowNotifyCSRAccepted"
                         v-model="obj.customerAllowNotifyCSRAccepted"
                         :readonly="formState.readOnly"
                         :label="$ay.t('NotifyEventCSRAccepted')"
-                        ref="customerAllowNotifyCSRAccepted"
                         data-cy="customerAllowNotifyCSRAccepted"
                         :error-messages="
                           form().serverErrors(
@@ -1049,16 +1049,16 @@
                       ></v-checkbox>
                     </v-col>
                     <v-col
+                      v-if="obj.customerAllowNotifyCSRAccepted"
                       cols="12"
                       sm="6"
                       lg="9"
-                      v-if="obj.customerAllowNotifyCSRAccepted"
                     >
                       <gz-tag-picker
+                        ref="customerAllowNotifyCSRAcceptedInTags"
                         v-model="obj.customerAllowNotifyCSRAcceptedInTags"
                         :readonly="formState.readOnly"
                         :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                        ref="customerAllowNotifyCSRAcceptedInTags"
                         data-cy="customerAllowNotifyCSRAcceptedInTags"
                         :error-messages="
                           form().serverErrors(
@@ -1078,10 +1078,10 @@
 
                     <v-col cols="12" sm="6" lg="3">
                       <v-checkbox
+                        ref="customerAllowNotifyCSRRejected"
                         v-model="obj.customerAllowNotifyCSRRejected"
                         :readonly="formState.readOnly"
                         :label="$ay.t('NotifyEventCSRRejected')"
-                        ref="customerAllowNotifyCSRRejected"
                         data-cy="customerAllowNotifyCSRRejected"
                         :error-messages="
                           form().serverErrors(
@@ -1095,16 +1095,16 @@
                       ></v-checkbox>
                     </v-col>
                     <v-col
+                      v-if="obj.customerAllowNotifyCSRRejected"
                       cols="12"
                       sm="6"
                       lg="9"
-                      v-if="obj.customerAllowNotifyCSRRejected"
                     >
                       <gz-tag-picker
+                        ref="customerAllowNotifyCSRRejectedInTags"
                         v-model="obj.customerAllowNotifyCSRRejectedInTags"
                         :readonly="formState.readOnly"
                         :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                        ref="customerAllowNotifyCSRRejectedInTags"
                         data-cy="customerAllowNotifyCSRRejectedInTags"
                         :error-messages="
                           form().serverErrors(
@@ -1124,10 +1124,10 @@
 
                     <v-col cols="12" sm="6" lg="3">
                       <v-checkbox
+                        ref="customerAllowNotifyWOCreated"
                         v-model="obj.customerAllowNotifyWOCreated"
                         :readonly="formState.readOnly"
                         :label="$ay.t('NotifyEventWorkorderCreatedForCustomer')"
-                        ref="customerAllowNotifyWOCreated"
                         data-cy="customerAllowNotifyWOCreated"
                         :error-messages="
                           form().serverErrors(
@@ -1141,16 +1141,16 @@
                       ></v-checkbox>
                     </v-col>
                     <v-col
+                      v-if="obj.customerAllowNotifyWOCreated"
                       cols="12"
                       sm="6"
                       lg="9"
-                      v-if="obj.customerAllowNotifyWOCreated"
                     >
                       <gz-tag-picker
+                        ref="customerAllowNotifyWOCreatedInTags"
                         v-model="obj.customerAllowNotifyWOCreatedInTags"
                         :readonly="formState.readOnly"
                         :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                        ref="customerAllowNotifyWOCreatedInTags"
                         data-cy="customerAllowNotifyWOCreatedInTags"
                         :error-messages="
                           form().serverErrors(
@@ -1170,10 +1170,10 @@
 
                     <v-col cols="12" sm="6" lg="3">
                       <v-checkbox
+                        ref="customerAllowNotifyWOCompleted"
                         v-model="obj.customerAllowNotifyWOCompleted"
                         :readonly="formState.readOnly"
                         :label="$ay.t('NotifyEventWorkorderCompleted')"
-                        ref="customerAllowNotifyWOCompleted"
                         data-cy="customerAllowNotifyWOCompleted"
                         :error-messages="
                           form().serverErrors(
@@ -1187,16 +1187,16 @@
                       ></v-checkbox>
                     </v-col>
                     <v-col
+                      v-if="obj.customerAllowNotifyWOCompleted"
                       cols="12"
                       sm="6"
                       lg="9"
-                      v-if="obj.customerAllowNotifyWOCompleted"
                     >
                       <gz-tag-picker
+                        ref="customerAllowNotifyWOCompletedInTags"
                         v-model="obj.customerAllowNotifyWOCompletedInTags"
                         :readonly="formState.readOnly"
                         :label="$ay.t('ContactCustomerHeadOfficeTaggedWith')"
-                        ref="customerAllowNotifyWOCompletedInTags"
                         data-cy="customerAllowNotifyWOCompletedInTags"
                         :error-messages="
                           form().serverErrors(
@@ -1229,51 +1229,6 @@
 const FORM_KEY = "global-settings-edit";
 const API_BASE_URL = "global-biz-setting/";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Global);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //NOTE: slightly different in this form as there is only ever a single global object so no need for a bunch of code
-      //is there already an obj from a prior operation?
-      if (this.$route.params.obj) {
-        //yes, no need to fetch it
-        this.obj = this.$route.params.obj;
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      } else {
-        await vm.getDataFromApi();
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       obj: {
@@ -1357,6 +1312,51 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm();
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Global);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //NOTE: slightly different in this form as there is only ever a single global object so no need for a bunch of code
+      //is there already an obj from a prior operation?
+      if (this.$route.params.obj) {
+        //yes, no need to fetch it
+        this.obj = this.$route.params.obj;
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      } else {
+        await vm.getDataFromApi();
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -1507,15 +1507,15 @@ function generateMenu(vm) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "DefaultReport",
     "ContactCustomerHeadOfficeTaggedWith",
diff --git a/ayanova/src/views/adm-history.vue b/ayanova/src/views/adm-history.vue
index 13b045b6..13a19eb9 100644
--- a/ayanova/src/views/adm-history.vue
+++ b/ayanova/src/views/adm-history.vue
@@ -6,7 +6,6 @@
       :show-select="false"
       :single-select="false"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="historyTable"
     >
     </gz-data-table>
@@ -16,14 +15,6 @@
 <script>
 const FORM_KEY = "adm-history";
 export default {
-  async created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Global);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       uploadFiles: [],
@@ -32,8 +23,13 @@ export default {
       uploading: false
     };
   },
-  methods: {
-    handleSelected(selectedItems) {}
+  async created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Global);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
   }
 };
 /////////////////////////////
@@ -57,7 +53,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiHistory",
diff --git a/ayanova/src/views/adm-import.vue b/ayanova/src/views/adm-import.vue
index aa1483ef..06ce1568 100644
--- a/ayanova/src/views/adm-import.vue
+++ b/ayanova/src/views/adm-import.vue
@@ -3,12 +3,12 @@
     <v-row>
       <v-col cols="12" sm="6" lg="4" xl="3">
         <v-select
+          ref="ayaType"
           v-model="ayaType"
           :items="selectLists.coreAyaTypes"
           item-text="name"
           item-value="id"
           :label="$ay.t('AyaType')"
-          ref="ayaType"
           data-cy="ayaType"
         ></v-select>
       </v-col>
@@ -46,17 +46,6 @@
 <script>
 const FORM_KEY = "adm-import";
 export default {
-  async created() {
-    //NOTE:Global is what is checked for initialize to show this form and at server to allow import
-    this.rights = window.$gz.role.getRights(window.$gz.type.Global);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    await fetchTranslatedText(this);
-    await populateSelectionLists(this);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       selectLists: {
@@ -69,6 +58,17 @@ export default {
       uploading: false
     };
   },
+  async created() {
+    //NOTE:Global is what is checked for initialize to show this form and at server to allow import
+    this.rights = window.$gz.role.getRights(window.$gz.type.Global);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    await fetchTranslatedText(this);
+    await populateSelectionLists(this);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     async upload() {
       //similar code in wiki-control
@@ -131,7 +131,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiFileImport",
@@ -147,7 +147,7 @@ function generateMenu(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations(["AyaType"]);
 }
 
diff --git a/ayanova/src/views/adm-license.vue b/ayanova/src/views/adm-license.vue
index 2a5ddca8..f7830f4d 100644
--- a/ayanova/src/views/adm-license.vue
+++ b/ayanova/src/views/adm-license.vue
@@ -92,7 +92,7 @@
               <v-btn :href="purchaseLink()" target="_blank" class="mt-4 mr-4">{{
                 $ay.t("PurchaseLicense")
               }}</v-btn>
-              <v-btn @click="fetchKey()" class="mt-4">{{
+              <v-btn class="mt-4" @click="fetchKey()">{{
                 $ay.t("CheckForLicense")
               }}</v-btn>
             </v-col>
@@ -120,30 +120,31 @@
                       </v-col>
                       <v-col cols="12" sm="6" lg="4" xl="3">
                         <v-text-field
+                          ref="requestcompany"
                           v-model="request.Company"
                           :label="$ay.t('LicenseCompanyName')"
                           :rules="[form().required(this, 'requestcompany')]"
                           :error-messages="
                             form().serverErrors(this, 'requestcompany')
                           "
-                          ref="requestcompany"
                           @input="fieldValueChanged('requestcompany')"
                         ></v-text-field>
                       </v-col>
                       <v-col cols="12" sm="6" lg="4" xl="3">
                         <v-text-field
+                          ref="requestcontact"
                           v-model="request.Contact"
                           :label="$ay.t('LicenseContactName')"
                           :rules="[form().required(this, 'requestcontact')]"
                           :error-messages="
                             form().serverErrors(this, 'requestcontact')
                           "
-                          ref="requestcontact"
                           @input="fieldValueChanged('requestcontact')"
                         ></v-text-field>
                       </v-col>
                       <v-col cols="12" sm="6" lg="4" xl="3">
                         <v-text-field
+                          ref="requestemail"
                           v-model="request.Email"
                           :label="$ay.t('LicenseEmail')"
                           type="email"
@@ -154,21 +155,20 @@
                           :error-messages="
                             form().serverErrors(this, 'requestemail')
                           "
-                          ref="requestemail"
-                          @input="fieldValueChanged('requestemail')"
                           :hint="$ay.t('LicenseEmailVerficationHint')"
                           :persistent-hint="true"
+                          @input="fieldValueChanged('requestemail')"
                         ></v-text-field>
                       </v-col>
                       <v-col cols="12">
                         <v-btn
                           :disabled="sendRequestDisabled()"
-                          @click="sendEvaluationRequest()"
                           class="mt-4 mr-4"
+                          @click="sendEvaluationRequest()"
                           >{{ $ay.t("SendEvaluationRequest") }}</v-btn
                         >
 
-                        <v-btn @click="fetchKey()" class="mt-4">{{
+                        <v-btn class="mt-4" @click="fetchKey()">{{
                           $ay.t("CheckForLicense")
                         }}</v-btn>
                       </v-col>
@@ -187,7 +187,7 @@
                         class="mt-4 mr-4"
                         >{{ $ay.t("PurchaseLicense") }}</v-btn
                       >
-                      <v-btn @click="fetchKey()" class="mt-4">{{
+                      <v-btn class="mt-4" @click="fetchKey()">{{
                         $ay.t("CheckForLicense")
                       }}</v-btn>
                     </v-col>
@@ -199,13 +199,13 @@
                   }}</v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <v-col cols="12">
-                      <v-btn @click="helpRestore()" class="mt-4 mr-4">{{
+                      <v-btn class="mt-4 mr-4" @click="helpRestore()">{{
                         $ay.t("HelpRestore")
                       }}</v-btn>
-                      <v-btn @click="helpReleaseKey()" class="mt-4 mr-4">{{
+                      <v-btn class="mt-4 mr-4" @click="helpReleaseKey()">{{
                         $ay.t("HelpReleaseKey")
                       }}</v-btn>
-                      <v-btn @click="fetchKey()" class="mt-4">{{
+                      <v-btn class="mt-4" @click="fetchKey()">{{
                         $ay.t("CheckForLicense")
                       }}</v-btn>
                     </v-col>
@@ -223,34 +223,6 @@
 const FORM_KEY = "adm-license";
 const FORM_CUSTOM_TEMPLATE_KEY = null;
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.License);
-      generateMenu(vm);
-      vm.formState.loading = false;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-
-      if (this.$store.state.l) {
-        //license lockout, show popup and persistent error
-        await window.$gz.dialog.displayLTModalNotificationMessage(
-          "UserCountExceeded",
-          null,
-          "error",
-          this.$store.state.helpUrl + "adm-license#user-count-exceeded"
-        );
-        //
-      }
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -279,6 +251,11 @@ export default {
       rights: window.$gz.role.getRights(window.$gz.type.License)
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -295,11 +272,34 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.License);
+      generateMenu(vm);
+      vm.formState.loading = false;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      if (this.$store.state.l) {
+        //license lockout, show popup and persistent error
+        await window.$gz.dialog.displayLTModalNotificationMessage(
+          "UserCountExceeded",
+          null,
+          "error",
+          this.$store.state.helpUrl + "adm-license#user-count-exceeded"
+        );
+        //
+      }
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     purchaseLink() {
       return (
@@ -586,13 +586,13 @@ function generateMenu(vm) {
 async function initForm(vm) {
   await fetchTranslatedText(vm);
   let res = await window.$gz.api.get("license");
-  if (!res.hasOwnProperty("data")) {
+  if (!Object.prototype.hasOwnProperty.call(res, "data")) {
     return Promise.reject(res);
   }
   vm.currentLicenseInfo = res.data.license;
 
   res = await window.$gz.api.get("license/database-empty");
-  if (!res.hasOwnProperty("data")) {
+  if (!Object.prototype.hasOwnProperty.call(res, "data")) {
     return Promise.reject(res);
   }
   vm.dbIsEmpty = res.data;
@@ -602,7 +602,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "RegisteredUser",
     "DatabaseID",
diff --git a/ayanova/src/views/adm-report-templates.vue b/ayanova/src/views/adm-report-templates.vue
index 46081352..b6a7a739 100644
--- a/ayanova/src/views/adm-report-templates.vue
+++ b/ayanova/src/views/adm-report-templates.vue
@@ -6,7 +6,6 @@
       :show-select="false"
       :single-select="false"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="reportTemplatesTable"
     >
     </gz-data-table>
@@ -32,14 +31,6 @@
 <script>
 const FORM_KEY = "adm-report-templates";
 export default {
-  async created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Report);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       uploadFiles: [],
@@ -48,6 +39,14 @@ export default {
       uploading: false
     };
   },
+  async created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Report);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     async upload() {
       //similar code in wiki-control
@@ -76,8 +75,7 @@ export default {
       } finally {
         vm.uploading = false;
       }
-    },
-    handleSelected(selectedItems) {}
+    }
   }
 };
 
@@ -103,7 +101,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiDraftingCompass",
diff --git a/ayanova/src/views/adm-translation.vue b/ayanova/src/views/adm-translation.vue
index 25a5a3b2..1eaa0020 100644
--- a/ayanova/src/views/adm-translation.vue
+++ b/ayanova/src/views/adm-translation.vue
@@ -37,34 +37,34 @@
         <v-form ref="form">
           <v-row>
             <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-            <v-col cols="12" v-if="obj.stock && rights.change">
+            <v-col v-if="obj.stock && rights.change" cols="12">
               <span class="text-h4 warning--text mr-6">{{
                 $ay.t("ReadOnly")
               }}</span>
-              <v-btn @click="duplicate()" :loading="duplicating">
+              <v-btn :loading="duplicating" @click="duplicate()">
                 <v-icon left>$ayiClone</v-icon> {{ $ay.t("Duplicate") }}
               </v-btn>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="name"
                 v-model="obj.name"
                 :readonly="formState.readOnly"
                 :label="$ay.t('Name')"
                 :rules="[form().required(this, 'name')]"
                 :error-messages="form().serverErrors(this, 'name')"
-                ref="name"
                 data-cy="name"
                 @input="fieldValueChanged('name')"
               ></v-text-field>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="cjkIndex"
                 v-model="obj.cjkIndex"
                 :readonly="formState.readOnly"
                 :label="$ay.t('GlobalCJKIndex')"
                 :hint="$ay.t('GlobalCJKIndexDescription')"
                 :persistent-hint="true"
-                ref="cjkIndex"
                 :error-messages="form().serverErrors(this, 'cjkIndex')"
                 @change="fieldValueChanged('cjkIndex')"
               ></v-checkbox>
@@ -102,8 +102,8 @@
                   must-sort
                 >
                   <template
-                    v-slot:[`item.display`]="props"
                     v-if="!formState.readOnly"
+                    v-slot:[`item.display`]="props"
                   >
                     <v-edit-dialog
                       large
@@ -141,6 +141,66 @@ const API_BASE_URL = "translation/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Translation";
 
 export default {
+  components: {},
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      search: "",
+      find: "",
+      replace: "",
+      replaceDialog: false,
+      editingActiveTranslation: false,
+      duplicating: false,
+      obj: {},
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Translation
+    };
+  },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -191,66 +251,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  components: {},
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      search: "",
-      find: "",
-      replace: "",
-      replaceDialog: false,
-      editingActiveTranslation: false,
-      duplicating: false,
-      obj: {},
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Translation
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
-    }
-  },
   methods: {
     doReplace() {
       let changesMade = false;
@@ -285,7 +285,9 @@ export default {
       });
     },
     canDuplicate: function() {
-      return this.formState.valid && !this.formState.dirty && vm.rights.change;
+      return (
+        this.formState.valid && !this.formState.dirty && this.rights.change
+      );
     },
     ayaTypes: function() {
       return window.$gz.type;
@@ -476,17 +478,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Translation,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Translation,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -597,7 +601,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await setEditingActiveTranslation(vm);
 }
 
@@ -605,7 +609,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Translation",
     "Name",
diff --git a/ayanova/src/views/adm-translations.vue b/ayanova/src/views/adm-translations.vue
index d9e8a8da..ff508417 100644
--- a/ayanova/src/views/adm-translations.vue
+++ b/ayanova/src/views/adm-translations.vue
@@ -30,6 +30,14 @@
 <script>
 const FORM_KEY = "adm-translations";
 export default {
+  data() {
+    return {
+      uploadFiles: [],
+      rights: window.$gz.role.defaultRightsObject(),
+      reload: false,
+      uploading: false
+    };
+  },
   async created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Translation);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -39,14 +47,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      uploadFiles: [],
-      rights: window.$gz.role.defaultRightsObject(),
-      reload: false,
-      uploading: false
-    };
-  },
   methods: {
     async upload() {
       const vm = this;
@@ -102,7 +102,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiLanguage",
diff --git a/ayanova/src/views/adm-user.vue b/ayanova/src/views/adm-user.vue
index 529c5f4f..afaecfbd 100644
--- a/ayanova/src/views/adm-user.vue
+++ b/ayanova/src/views/adm-user.vue
@@ -4,7 +4,7 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab">
+        <v-tabs v-model="tab" mobile-breakpoint="100">
           <v-tab>{{ $ay.t("User") }}</v-tab>
           <v-tab>{{ $ay.t("UserSettings") }}</v-tab>
           <v-tabs-items v-model="tab">
@@ -12,25 +12,25 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="name"
                     v-model="obj.name"
                     :readonly="formState.readOnly"
                     :disabled="obj.id === 1"
                     :label="$ay.t('Name')"
                     :rules="[form().required(this, 'name')]"
                     :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
                     data-cy="name"
                     @input="fieldValueChanged('name')"
                   ></v-text-field>
                 </v-col>
                 <v-col v-if="obj.userType == 5" cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="vendorId"
+                    v-model="obj.vendorId"
                     :aya-type="ayaTypes().Vendor"
                     show-edit-icon
-                    v-model="obj.vendorId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Vendor')"
-                    ref="vendorId"
                     data-cy="vendorId"
                     :error-messages="form().serverErrors(this, 'vendorId')"
                     @input="fieldValueChanged('vendorId')"
@@ -44,13 +44,13 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="employeeNumber"
                     v-model="obj.employeeNumber"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserEmployeeNumber')"
                     :error-messages="
                       form().serverErrors(this, 'employeeNumber')
                     "
-                    ref="employeeNumber"
                     data-cy="employeeNumber"
                     @input="fieldValueChanged('employeeNumber')"
                   ></v-text-field>
@@ -58,20 +58,21 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-role-picker
-                    :label="$ay.t('AuthorizationRoles')"
+                    ref="roles"
                     v-model="obj.roles"
+                    :label="$ay.t('AuthorizationRoles')"
                     :readonly="formState.readOnly"
                     :disabled="obj.id === 1"
-                    ref="roles"
                     data-cy="roles"
                     :error-messages="form().serverErrors(this, 'roles')"
-                    @input="fieldValueChanged('roles')"
                     limit-selection-to="inside"
+                    @input="fieldValueChanged('roles')"
                   ></gz-role-picker>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="usertype"
                     v-model="obj.userType"
                     :items="selectLists.usertypes"
                     item-text="name"
@@ -79,7 +80,6 @@
                     :readonly="formState.readOnly"
                     :disabled="obj.id === 1"
                     :label="$ay.t('UserType')"
-                    ref="usertype"
                     data-cy="usertype"
                     :rules="[form().integerValid(this, 'usertype')]"
                     :error-messages="form().serverErrors(this, 'usertype')"
@@ -89,9 +89,10 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
-                    name="username"
                     id="username"
+                    ref="login"
                     v-model="login"
+                    name="username"
                     :readonly="formState.readOnly"
                     prepend-icon="$ayiUser"
                     autocomplete="off"
@@ -100,23 +101,22 @@
                     spellcheck="false"
                     :label="$ay.t('NewLogin')"
                     :error-messages="form().serverErrors(this, 'login')"
-                    ref="login"
                     @input="fieldValueChanged('login')"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
-                    name="password"
                     id="password"
+                    ref="password"
                     v-model="password"
+                    name="password"
                     :readonly="formState.readOnly"
                     :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
                     prepend-icon="$ayiKey"
                     :label="$ay.t('NewPassword')"
                     :type="reveal ? 'text' : 'password'"
                     :error-messages="form().serverErrors(this, 'password')"
-                    ref="password"
                     @input="fieldValueChanged('password')"
                     @click:append-outer="reveal = !reveal"
                   ></v-text-field>
@@ -129,20 +129,20 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('LastLogin')"
-                    v-model="obj.lastLogin"
-                    readonly
                     ref="lastLogin"
+                    v-model="obj.lastLogin"
+                    :label="$ay.t('LastLogin')"
+                    readonly
                     data-cy="lastLogin"
                   ></gz-date-time-picker>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :disabled="obj.id === 1"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -150,22 +150,22 @@
                 </v-col>
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -174,11 +174,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -187,10 +187,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -212,13 +212,13 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="translationId"
                     v-model="optionsObj.translationId"
                     :items="selectLists.translations"
                     item-text="name"
                     item-value="id"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Translation')"
-                    ref="translationId"
                     :error-messages="form().serverErrors(this, 'translationId')"
                     @input="fieldValueChanged('translationId')"
                   ></v-select>
@@ -226,13 +226,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-email
+                    ref="emailAddress"
                     v-model="optionsObj.emailAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserEmailAddress')"
                     :error-messages="form().serverErrors(this, 'emailAddress')"
-                    ref="emailAddress"
-                    @input="fieldValueChanged('emailAddress')"
                     data-cy="emailAddress"
+                    @input="fieldValueChanged('emailAddress')"
                   ></gz-email>
                 </v-col>
                 <v-col
@@ -243,10 +243,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone1"
                     v-model="optionsObj.phone1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPhone1')"
-                    ref="phone1"
                     data-cy="phone1"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
@@ -261,10 +261,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone2"
                     v-model="optionsObj.phone2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPhone2')"
-                    ref="phone2"
                     data-cy="phone2"
                     :error-messages="form().serverErrors(this, 'phone2')"
                     @input="fieldValueChanged('phone2')"
@@ -279,10 +279,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone3"
                     v-model="optionsObj.phone3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPageAddress')"
-                    ref="phone3"
                     data-cy="phone3"
                     :error-messages="form().serverErrors(this, 'phone3')"
                     @input="fieldValueChanged('phone3')"
@@ -291,17 +291,17 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="mapUrlTemplate"
                     v-model="optionsObj.mapUrlTemplate"
                     :readonly="formState.readOnly"
                     :label="$ay.t('MapUrlTemplate')"
                     :error-messages="
                       form().serverErrors(this, 'mapUrlTemplate')
                     "
-                    ref="mapUrlTemplate"
-                    @input="fieldValueChanged('mapUrlTemplate')"
                     data-cy="mapUrlTemplate"
                     :hint="obj.mapUrlTemplate == null ? 'Google maps' : ''"
                     persistent-hint
+                    @input="fieldValueChanged('mapUrlTemplate')"
                   ></v-text-field>
                   <v-select
                     :items="selectLists.mapUrls"
@@ -313,10 +313,10 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="hour12"
                     v-model="optionsObj.hour12"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Hour12')"
-                    ref="hour12"
                     :error-messages="form().serverErrors(this, 'hour12')"
                     @change="fieldValueChanged('hour12')"
                   ></v-checkbox>
@@ -324,6 +324,7 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="currencyName"
                     v-model="optionsObj.currencyName"
                     :hint="
                       optionsObj.currencyName == null ||
@@ -335,15 +336,15 @@
                     :readonly="formState.readOnly"
                     :label="$ay.t('CurrencyCode')"
                     :error-messages="form().serverErrors(this, 'currencyName')"
-                    ref="currencyName"
-                    @input="fieldValueChanged('currencyName')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('currencyName')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="languageOverride"
                     v-model="optionsObj.languageOverride"
                     :hint="locale().getResolvedLanguage()"
                     persistent-hint
@@ -352,15 +353,15 @@
                     :error-messages="
                       form().serverErrors(this, 'languageOverride')
                     "
-                    ref="languageOverride"
-                    @input="fieldValueChanged('languageOverride')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('languageOverride')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="timeZoneOverride"
                     v-model="optionsObj.timeZoneOverride"
                     :hint="locale().getResolvedTimeZoneName()"
                     persistent-hint
@@ -369,9 +370,8 @@
                     :error-messages="
                       form().serverErrors(this, 'timeZoneOverride')
                     "
-                    ref="timeZoneOverride"
-                    @input="fieldValueChanged('timeZoneOverride')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('timeZoneOverride')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
@@ -407,69 +407,6 @@ const API_BASE_URL = "user/";
 const FORM_CUSTOM_TEMPLATE_KEY = "User";
 
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.User);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          this.optionsObj = this.$route.params.optionsObj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.optionsObj = this.$route.params.optionsObj;
-          this.obj.concurrency = undefined;
-          this.optionsObj.concurrency = undefined;
-          this.obj.id = 0;
-          this.optionsObj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          this.password = window.$gz.util.getRandomPassword();
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -558,6 +495,69 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.User);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          this.optionsObj = this.$route.params.optionsObj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.optionsObj = this.$route.params.optionsObj;
+          this.obj.concurrency = undefined;
+          this.optionsObj.concurrency = undefined;
+          this.obj.id = 0;
+          this.optionsObj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          this.password = window.$gz.util.getRandomPassword();
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     goHelp() {
       window.open(
@@ -848,17 +848,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.User,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.User,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "directnotify":
         if (m.vm.obj.id == 0) {
diff --git a/ayanova/src/views/adm-users.vue b/ayanova/src/views/adm-users.vue
index 1fbd3dc9..f5dd3b8d 100644
--- a/ayanova/src/views/adm-users.vue
+++ b/ayanova/src/views/adm-users.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="InsideUserDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="usersTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -23,14 +23,6 @@
 <script>
 const FORM_KEY = "adm-users";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.User);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -39,6 +31,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.User);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -63,11 +63,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.User)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.User)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
@@ -84,18 +86,20 @@ async function clickHandler(menuItem) {
         break;
       case "directnotify":
         //nav to direct notify with list of users appended to route
-        const selected = m.vm.$refs.gzdatatable.getDataListSelection(
-          window.$gz.type.User
-        ).selectedRowIds;
-        if (selected.length == 0) {
-          m.vm.$router.push({
-            name: "home-notify-direct"
-          });
-        } else {
-          m.vm.$router.push({
-            name: "home-notify-direct",
-            params: { userIdList: selected.toString() }
-          });
+        {
+          const selected = m.vm.$refs.gzdatatable.getDataListSelection(
+            window.$gz.type.User
+          ).selectedRowIds;
+          if (selected.length == 0) {
+            m.vm.$router.push({
+              name: "home-notify-direct"
+            });
+          } else {
+            m.vm.$router.push({
+              name: "home-notify-direct",
+              params: { userIdList: selected.toString() }
+            });
+          }
         }
         break;
       default:
diff --git a/ayanova/src/views/ay-about.vue b/ayanova/src/views/ay-about.vue
index afbce902..1ed9a53c 100644
--- a/ayanova/src/views/ay-about.vue
+++ b/ayanova/src/views/ay-about.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="formState.ready">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col>
       <v-card id="ayaNovaVersioncard" data-cy="versionCard">
@@ -10,7 +10,7 @@
         </div>
         <div>
           <span class="ml-6 text-body-1">{{ $ay.t("User") }}: </span>
-          <span class="text-body-2">{{ this.$store.state.userName }}</span>
+          <span class="text-body-2">{{ $store.state.userName }}</span>
         </div>
 
         <div>
@@ -48,7 +48,7 @@
         <v-subheader>{{ $ay.t("Server") }}</v-subheader>
         <div>
           <span class="ml-6 text-body-1">{{ $ay.t("ServerAddress") }}: </span>
-          <span class="text-body-2">{{ this.$store.state.apiUrl }}</span>
+          <span class="text-body-2">{{ $store.state.apiUrl }}</span>
         </div>
         <div>
           <span class="ml-6 text-body-1">{{ $ay.t("Version") }}: </span>
@@ -130,6 +130,20 @@
 <script>
 import ayaNovaVersion from "../api/ayanova-version";
 export default {
+  data() {
+    return {
+      serverInfo: { license: { license: {} } },
+      clientInfo: {},
+      browser: {},
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
   async created() {
     const vm = this;
     try {
@@ -150,20 +164,6 @@ export default {
     this.clientInfo = {};
     this.clientInfo = ayaNovaVersion;
   },
-  data() {
-    return {
-      serverInfo: { license: { license: {} } },
-      clientInfo: {},
-      browser: {},
-      formState: {
-        ready: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      }
-    };
-  },
   methods: {
     translation() {
       return window.$gz.translation;
@@ -231,13 +231,15 @@ function clickHandler(menuItem) {
         break;
       case "copysupportinfo":
         //put the support info on the clipboard:
-        const element = document.getElementById("ayaNovaVersioncard");
-        const text = element.innerText || element.textContent;
-        let logText = "";
-        m.vm.$store.state.logArray.forEach(function appendLogItem(value) {
-          logText += value + "\n";
-        });
-        window.$gz.util.copyToClipboard(text + "\nCLIENT LOG\n" + logText);
+        {
+          const element = document.getElementById("ayaNovaVersioncard");
+          const text = element.innerText || element.textContent;
+          let logText = "";
+          m.vm.$store.state.logArray.forEach(function appendLogItem(value) {
+            logText += value + "\n";
+          });
+          window.$gz.util.copyToClipboard(text + "\nCLIENT LOG\n" + logText);
+        }
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -252,7 +254,7 @@ function clickHandler(menuItem) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await getServerInfo(vm);
   getBrowserInfo(vm);
 }
@@ -261,7 +263,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "HelpAboutAyaNova",
     "HelpTechSupport",
@@ -291,7 +293,7 @@ async function fetchTranslatedText(vm) {
 //
 async function getServerInfo(vm) {
   const res = await window.$gz.api.get("server-info");
-  if (!res.hasOwnProperty("data")) {
+  if (!Object.prototype.hasOwnProperty.call(res, "data")) {
     return Promise.reject(res);
   } else {
     vm.serverInfo = res.data;
diff --git a/ayanova/src/views/ay-customize.vue b/ayanova/src/views/ay-customize.vue
index e07a03ff..3b01d020 100644
--- a/ayanova/src/views/ay-customize.vue
+++ b/ayanova/src/views/ay-customize.vue
@@ -17,13 +17,13 @@
                 <v-card-text>
                   <v-checkbox
                     v-if="item.hideable"
+                    :ref="item.key"
                     v-model="item.visible"
                     :readonly="formState.readOnly"
                     :label="$ay.t('FormFieldVisible')"
-                    :ref="item.key"
                     :disabled="formState.readOnly"
-                    @change="visibleChanged(item)"
                     :data-cy="item.key + 'Visible'"
+                    @change="visibleChanged(item)"
                   ></v-checkbox>
                   <v-checkbox
                     v-if="!requiredDisabled(item)"
@@ -41,8 +41,8 @@
                     item-text="name"
                     item-value="id"
                     :label="$ay.t('UiFieldDataType')"
-                    @input="dataTypeChanged(item)"
                     :data-cy="item.key + 'SelectType'"
+                    @input="dataTypeChanged(item)"
                   ></v-select>
                   <!-- <v-divider></v-divider>
                   <div>{{ item }}</div> -->
@@ -73,27 +73,6 @@ export default {
       next(false);
     }
   },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
-      generateMenu(vm);
-      //init disable save button so it can be enabled only on edit to show dirty form
-      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-    } catch (err) {
-      window.$gz.errorHandler.handleFormError(err, vm);
-    } finally {
-      vm.formState.ready = true;
-      vm.formState.loading = false;
-    }
-  },
   data() {
     return {
       obj: [],
@@ -130,6 +109,27 @@ export default {
       deep: true
     }
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+      generateMenu(vm);
+      //init disable save button so it can be enabled only on edit to show dirty form
+      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+    } catch (err) {
+      window.$gz.errorHandler.handleFormError(err, vm);
+    } finally {
+      vm.formState.ready = true;
+      vm.formState.loading = false;
+    }
+  },
   methods: {
     visibleChanged: function(item) {
       //Note: stock items can't be changed so no need to take that into account
@@ -155,7 +155,7 @@ export default {
       }
       return false;
     },
-    dataTypeChanged: function(item) {
+    dataTypeChanged: function() {
       //nothing to scan here just set form dirty
       this.formState.dirty = true;
     },
@@ -320,7 +320,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   populateSelectionLists(vm);
   await ensureTemplateIsInStore(vm);
   await initDataObject(vm);
@@ -330,7 +330,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   //NOTE: This form expects to arrive here from the form being customized
   //so it does *not* attempt to fetch the translations for the field names of the form in question
   //since they should already be set by that form.
diff --git a/ayanova/src/views/ay-data-list-column-view.vue b/ayanova/src/views/ay-data-list-column-view.vue
index cad1f92b..380d5051 100644
--- a/ayanova/src/views/ay-data-list-column-view.vue
+++ b/ayanova/src/views/ay-data-list-column-view.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row v-if="formState.ready">
     <v-col>
-      <v-form data-cy="dlcForm" ref="form">
+      <v-form ref="form" data-cy="dlcForm">
         <v-row>
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <template v-for="(item, index) in editView">
@@ -29,9 +29,9 @@
                   <!-- {{ item }} -->
                   <v-switch
                     v-if="!item.rid"
+                    :ref="item.key"
                     v-model="item.include"
                     :label="$ay.t('Include')"
-                    :ref="item.key"
                     @change="includeChanged(item)"
                   ></v-switch>
                   <div v-if="item.rid" class="v-label mb-8 mt-6">
@@ -39,7 +39,7 @@
                   </div>
 
                   <!-- RE-ORDER CONTROL -->
-                  <div class="d-flex justify-space-between" v-if="item.include">
+                  <div v-if="item.include" class="d-flex justify-space-between">
                     <v-btn large icon @click="move('start', index)"
                       ><v-icon large data-cy="movestart"
                         >$ayiStepBackward</v-icon
@@ -82,28 +82,6 @@ export default {
       next(false);
     }
   },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      vm.dataListKey = this.$route.params.dataListKey;
-      if (this.$route.params.hiddenAffectiveColumns) {
-        vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
-      }
-      await initForm(vm);
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm);
-      //init disable save button so it can be enabled only on edit to show dirty form
-      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: {
@@ -131,6 +109,14 @@ export default {
       rights: window.$gz.role.fullRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -147,12 +133,26 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
-    },
-    canDuplicate: function() {
-      return this.formState.valid && !this.formState.dirty;
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      vm.dataListKey = this.$route.params.dataListKey;
+      if (this.$route.params.hiddenAffectiveColumns) {
+        vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
+      }
+      await initForm(vm);
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm);
+      //init disable save button so it can be enabled only on edit to show dirty form
+      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
   methods: {
@@ -336,7 +336,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateFieldDefinitions(vm);
   await fetchTranslatedFieldNames(vm);
   await fetchColumnView(vm);
@@ -347,7 +347,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "ResetToDefault",
     "Columns",
diff --git a/ayanova/src/views/ay-evaluate.vue b/ayanova/src/views/ay-evaluate.vue
index 6fb56700..5a0345e3 100644
--- a/ayanova/src/views/ay-evaluate.vue
+++ b/ayanova/src/views/ay-evaluate.vue
@@ -11,17 +11,18 @@
               {{ $ay.t("ErrorSecurityAdministratorOnlyMessage") }}
             </div>
             <v-select
+              ref="seedLevel"
               v-model="obj.seedLevel"
               :items="selectLists.seedLevels"
               :rules="[form().required(this, 'seedLevel')]"
-              @input="fieldValueChanged('seedLevel')"
-              ref="seedLevel"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
               :label="$ay.t('SeedLevel')"
+              @input="fieldValueChanged('seedLevel')"
             ></v-select>
             <v-text-field
+              ref="timeZoneOffset"
               v-model="obj.timeZoneOffset"
               :readonly="formState.readOnly"
               :rules="[
@@ -30,7 +31,6 @@
               ]"
               :label="$ay.t('UserTimeZoneOffset')"
               type="number"
-              ref="timeZoneOffset"
               @input="fieldValueChanged('timeZoneOffset')"
             ></v-text-field>
           </v-card-text>
@@ -47,8 +47,8 @@
               :loading="seedingJobActive"
               color="blue darken-1"
               text
-              @click="generate()"
               data-cy="btnStart"
+              @click="generate()"
               >{{ $ay.t("StartJob") }}</v-btn
             >
           </v-card-actions>
@@ -74,8 +74,8 @@
                   large
                   color="primary"
                   text
-                  @click="helpEvaluate()"
                   class="my-8 mr-16"
+                  @click="helpEvaluate()"
                   >{{ $ay.t("EvaluationGuide") }}</v-btn
                 >
                 <v-btn
@@ -91,9 +91,9 @@
                   large
                   color="primary"
                   text
-                  @click="seedDialog = !seedDialog"
                   class="my-8 mr-12"
                   data-cy="btnSeed"
+                  @click="seedDialog = !seedDialog"
                   >{{ $ay.t("GenerateSampleData") }}</v-btn
                 >
               </v-col>
@@ -107,26 +107,6 @@
 <script>
 const FORM_KEY = "ay-evaluate";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.obj.timeZoneOffset =
-        Math.floor(new Date().getTimezoneOffset() / 60) * -1;
-      vm.rights = window.$gz.role.getRights(window.$gz.type.TrialSeeder);
-      vm.formState.readOnly = !vm.rights.change;
-      generateMenu(vm);
-      vm.formState.ready = true;
-      vm.formState.loading = false;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -153,6 +133,26 @@ export default {
       rights: window.$gz.role.fullRightsObject()
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.obj.timeZoneOffset =
+        Math.floor(new Date().getTimezoneOffset() / 60) * -1;
+      vm.rights = window.$gz.role.getRights(window.$gz.type.TrialSeeder);
+      vm.formState.readOnly = !vm.rights.change;
+      generateMenu(vm);
+      vm.formState.ready = true;
+      vm.formState.loading = false;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     form() {
       return window.$gz.form;
@@ -257,7 +257,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiRocket",
@@ -273,7 +273,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   populateSelectionLists(vm);
 }
 
@@ -281,7 +281,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Welcome",
     "GenerateSampleData",
diff --git a/ayanova/src/views/ay-history.vue b/ayanova/src/views/ay-history.vue
index afa3d8b7..b17c2dbe 100644
--- a/ayanova/src/views/ay-history.vue
+++ b/ayanova/src/views/ay-history.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card v-if="this.formState.ready">
+  <v-card v-if="formState.ready">
     <v-card-title
       ><v-icon class="mr-3">{{ getIconForPage() }}</v-icon
       >{{ name }}</v-card-title
@@ -27,7 +27,7 @@
                     getIconForAType(i.aType)
                   }}</v-icon
                   >{{ getNameForType(i.aType) }}
-                  <div class="mt-4" v-if="i.textra">{{ i.textra }}</div>
+                  <div v-if="i.textra" class="mt-4">{{ i.textra }}</div>
                 </v-card-text>
                 <v-card-actions>
                   <v-btn text @click="openHistoryOfItem(i)">{{
@@ -61,7 +61,7 @@
                     getIconForAType(i.aType)
                   }}</v-icon
                   >{{ getNameForType(i.aType) }}
-                  <div class="mt-4" v-if="i.textra">{{ i.textra }}</div>
+                  <div v-if="i.textra" class="mt-4">{{ i.textra }}</div>
                 </v-card-text>
 
                 <v-card-actions>
@@ -85,10 +85,10 @@
       </v-col>
       <v-col cols="12">
         <v-btn
+          v-if="moreAvailable"
           block
           color="primary"
           large
-          v-if="moreAvailable"
           text
           @click="getDataFromApi()"
           >{{ $ay.t("More") }}</v-btn
@@ -102,23 +102,6 @@ const FORM_KEY = "ay-history";
 const API_BASE_URL = "event-log/";
 const DEFAULT_EVENTS_PAGE_SIZE = 200;
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.readOnly = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm, false);
-      await vm.getDataFromApi();
-    } catch (err) {
-      window.$gz.errorHandler.handleFormError(err, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       obj: [],
@@ -137,6 +120,23 @@ export default {
       }
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.readOnly = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm, false);
+      await vm.getDataFromApi();
+    } catch (err) {
+      window.$gz.errorHandler.handleFormError(err, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     openItem(item) {
       if (item.userId) {
@@ -338,7 +338,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: false,
     icon: "$ayiHistory",
@@ -352,7 +352,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateAyaTypeList(vm);
   populateEventTypeList(vm);
 }
@@ -425,7 +425,7 @@ function populateEventTypeList(vm) {
     11: { name: vm.$ay.t("EventAttachmentModified"), icon: "$ayiSave" },
     12: { name: "ERASE ALL DATA", icon: "$ayiSeedling" },
     13: { name: vm.$ay.t("EventResetSerial"), icon: "$ayiEgg" },
-    13: {
+    14: {
       name: vm.$ay.t("EventUtilityFileDownload"),
       icon: "$ayiFileDownload"
     }
@@ -436,7 +436,7 @@ function populateEventTypeList(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "EventDeleted",
     "EventCreated",
diff --git a/ayanova/src/views/ay-log.vue b/ayanova/src/views/ay-log.vue
index 207b124e..bf4ca98f 100644
--- a/ayanova/src/views/ay-log.vue
+++ b/ayanova/src/views/ay-log.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="formState.ready">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col>
       <v-textarea
@@ -14,6 +14,18 @@
 </template>
 <script>
 export default {
+  data() {
+    return {
+      logText: "",
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
   async created() {
     const vm = this;
     window.$gz.eventBus.$emit("menu-change", {
@@ -36,18 +48,6 @@ export default {
       vm.formState.ready = true;
       window.$gz.errorHandler.handleFormError(err, vm);
     }
-  },
-  data() {
-    return {
-      logText: "",
-      formState: {
-        ready: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      }
-    };
   }
 };
 </script>
diff --git a/ayanova/src/views/ay-report-edit.vue b/ayanova/src/views/ay-report-edit.vue
index f6ab324f..96547096 100644
--- a/ayanova/src/views/ay-report-edit.vue
+++ b/ayanova/src/views/ay-report-edit.vue
@@ -17,9 +17,9 @@
           tile
           color="primary"
           group
-          @change="onViewChange"
           mandatory
           data-cy="viewChange"
+          @change="onViewChange"
         >
           <v-btn value="properties">
             {{ $ay.t("ReportEditorProperties") }}
@@ -45,26 +45,26 @@
             Helpers
           </v-btn>
 
-          <v-btn value="rawData" v-if="reportData != null">
+          <v-btn v-if="reportData != null" value="rawData">
             {{ $ay.t("ReportEditorData") }}
           </v-btn>
         </v-btn-toggle>
       </v-col>
-      <v-col cols="12" v-show="view == 'edit'">
+      <v-col v-show="view == 'edit'" cols="12">
         <div id="editContainer"></div>
       </v-col>
 
-      <v-col cols="12" v-show="view == 'properties'">
+      <v-col v-show="view == 'properties'" cols="12">
         <v-form ref="form">
           <v-row>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="name"
                 v-model="obj.name"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportName')"
                 :rules="[form().required(this, 'name')]"
                 :error-messages="form().serverErrors(this, 'name')"
-                ref="name"
                 data-cy="name"
                 @input="fieldValueChanged('name')"
               ></v-text-field>
@@ -72,23 +72,23 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <gz-role-picker
-                :label="$ay.t('SelectRoles')"
-                v-model="obj.roles"
-                :readonly="formState.readOnly"
                 ref="roles"
+                v-model="obj.roles"
+                :label="$ay.t('SelectRoles')"
+                :readonly="formState.readOnly"
                 data-cy="roles"
                 :error-messages="form().serverErrors(this, 'roles')"
-                @input="fieldValueChanged('roles')"
                 limit-selection-to="inside"
+                @input="fieldValueChanged('roles')"
               ></gz-role-picker>
             </v-col>
 
             <v-col v-if="showIncludeDescendants" cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="includeWoItemDescendants"
                 v-model="obj.includeWoItemDescendants"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportIncludeAllWorkOrderItemDescendants')"
-                ref="includeWoItemDescendants"
                 data-cy="includeWoItemDescendants"
                 :error-messages="
                   form().serverErrors(this, 'includeWoItemDescendants')
@@ -98,13 +98,13 @@
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="ayaType"
                 v-model="obj.aType"
                 :items="selectLists.coreAyaTypes"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('AyaType')"
-                ref="ayaType"
                 data-cy="ayaType"
                 :rules="[form().integerValid(this, 'aType')]"
                 :error-messages="form().serverErrors(this, 'aType')"
@@ -114,10 +114,10 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="active"
                 v-model="obj.active"
                 :readonly="formState.readOnly"
                 :label="$ay.t('Active')"
-                ref="active"
                 data-cy="active"
                 :error-messages="form().serverErrors(this, 'active')"
                 @change="fieldValueChanged('active')"
@@ -126,29 +126,29 @@
 
             <v-col cols="12">
               <v-textarea
+                ref="notes"
                 v-model="obj.notes"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportNotes')"
                 :error-messages="form().serverErrors(this, 'notes')"
-                ref="notes"
                 data-cy="notes"
-                @input="fieldValueChanged('notes')"
                 auto-grow
+                @input="fieldValueChanged('notes')"
               ></v-textarea>
             </v-col>
           </v-row>
         </v-form>
       </v-col>
 
-      <v-col cols="12" v-show="view == 'pdfoptions'">
+      <v-col v-show="view == 'pdfoptions'" cols="12">
         <v-form ref="formPDF">
           <v-row>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="displayHeaderFooter"
                 v-model="obj.displayHeaderFooter"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportDisplayHeaderFooter')"
-                ref="displayHeaderFooter"
                 data-cy="displayHeaderFooter"
                 :error-messages="
                   form().serverErrors(this, 'displayHeaderFooter')
@@ -159,39 +159,39 @@
 
             <v-col cols="12">
               <v-textarea
+                ref="headerTemplate"
                 v-model="obj.headerTemplate"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportHeaderTemplate')"
                 :error-messages="form().serverErrors(this, 'headerTemplate')"
-                ref="headerTemplate"
                 data-cy="headerTemplate"
-                @input="fieldValueChanged('headerTemplate', 'formPDF')"
                 auto-grow
+                @input="fieldValueChanged('headerTemplate', 'formPDF')"
               ></v-textarea>
             </v-col>
 
             <v-col cols="12">
               <v-textarea
+                ref="footerTemplate"
                 v-model="obj.footerTemplate"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportFooterTemplate')"
                 :error-messages="form().serverErrors(this, 'footerTemplate')"
-                ref="footerTemplate"
                 data-cy="footerTemplate"
-                @input="fieldValueChanged('footerTemplate', 'formPDF')"
                 auto-grow
+                @input="fieldValueChanged('footerTemplate', 'formPDF')"
               ></v-textarea>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="paperFormat"
                 v-model="obj.paperFormat"
                 :items="selectLists.PaperFormats"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportPaperFormat')"
-                ref="paperFormat"
                 data-cy="paperFormat"
                 :error-messages="form().serverErrors(this, 'paperFormat')"
                 @input="fieldValueChanged('paperFormat', 'formPDF')"
@@ -200,10 +200,10 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="landscape"
                 v-model="obj.landscape"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportLandscape')"
-                ref="landscape"
                 data-cy="landscape"
                 :error-messages="form().serverErrors(this, 'landscape')"
                 @change="fieldValueChanged('landscape', 'formPDF')"
@@ -212,13 +212,13 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="marginOptionsBottom"
                 v-model="obj.marginOptionsBottom"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportMarginOptionsBottom')"
                 :error-messages="
                   form().serverErrors(this, 'marginOptionsBottom')
                 "
-                ref="marginOptionsBottom"
                 data-cy="marginOptionsBottom"
                 @input="fieldValueChanged('marginOptionsBottom', 'formPDF')"
               ></v-text-field>
@@ -226,11 +226,11 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="marginOptionsLeft"
                 v-model="obj.marginOptionsLeft"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportMarginOptionsLeft')"
                 :error-messages="form().serverErrors(this, 'marginOptionsLeft')"
-                ref="marginOptionsLeft"
                 data-cy="marginOptionsLeft"
                 @input="fieldValueChanged('marginOptionsLeft', 'formPDF')"
               ></v-text-field>
@@ -238,13 +238,13 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="marginOptionsRight"
                 v-model="obj.marginOptionsRight"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportMarginOptionsRight')"
                 :error-messages="
                   form().serverErrors(this, 'marginOptionsRight')
                 "
-                ref="marginOptionsRight"
                 data-cy="marginOptionsRight"
                 @input="fieldValueChanged('marginOptionsRight', 'formPDF')"
               ></v-text-field>
@@ -252,11 +252,11 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="marginOptionsTop"
                 v-model="obj.marginOptionsTop"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportMarginOptionsTop')"
                 :error-messages="form().serverErrors(this, 'marginOptionsTop')"
-                ref="marginOptionsTop"
                 data-cy="marginOptionsTop"
                 @input="fieldValueChanged('marginOptionsTop', 'formPDF')"
               ></v-text-field>
@@ -264,10 +264,10 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="preferCSSPageSize"
                 v-model="obj.preferCSSPageSize"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportPreferCSSPageSize')"
-                ref="preferCSSPageSize"
                 data-cy="preferCSSPageSize"
                 :error-messages="form().serverErrors(this, 'preferCSSPageSize')"
                 @change="fieldValueChanged('preferCSSPageSize', 'formPDF')"
@@ -276,10 +276,10 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="printBackground"
                 v-model="obj.printBackground"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportPrintBackground')"
-                ref="printBackground"
                 data-cy="printBackground"
                 :error-messages="form().serverErrors(this, 'printBackground')"
                 @change="fieldValueChanged('printBackground', 'formPDF')"
@@ -288,6 +288,7 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <gz-decimal
+                ref="scale"
                 v-model="obj.scale"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ReportScale')"
@@ -298,7 +299,6 @@
                   form().maxValueValid(this, 'scale', 2)
                 ]"
                 :error-messages="form().serverErrors(this, 'scale')"
-                ref="scale"
                 data-cy="scale"
                 @input="fieldValueChanged('scale', 'formPDF')"
               ></gz-decimal>
@@ -318,6 +318,190 @@ const FORM_KEY = "ay-report-edit";
 let JUST_DELETED = false;
 let editor = null;
 export default {
+  data() {
+    return {
+      reportData: null,
+      editAreaHeight: 300,
+      activeTab: "properties",
+      lastTab: "properties",
+      view: "edit",
+      editData: {
+        template: {
+          model: null,
+          state: null
+        },
+        style: {
+          model: null,
+          state: null
+        },
+        jsPrerender: {
+          model: null,
+          state: null
+        },
+        jsHelpers: {
+          model: null,
+          state: null
+        },
+        rawData: {
+          model: null,
+          state: null
+        }
+      },
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: "report",
+        includeWoItemDescendants: false,
+        active: true,
+        notes: "",
+        roles: 124927, //all except customers
+        aType: 0,
+        template: `<html>
+
+<body>
+ {{#each ayReportData}}
+
+ <!-- Your template here see Help for details -->
+ <h2>{{ Name }}</h2>
+ 
+ {{/each}}
+</body>
+
+</html>`,
+        style: "",
+        jsPrerender: `async function ayPrepareData(ayData){         
+    return ayData;
+}`,
+        jsHelpers: "",
+        renderType: 0,
+        headerTemplate: null,
+        footerTemplate: null,
+        displayHeaderFooter: false,
+        paperFormat: 10,
+        landscape: false,
+        marginOptionsBottom: null,
+        marginOptionsLeft: null,
+        marginOptionsRight: null,
+        marginOptionsTop: null,
+        pageRanges: null,
+        preferCSSPageSize: false,
+        printBackground: false,
+        scale: 1 //Defaults to 1. Scale amount must be between 0.1 and 2.
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Report,
+      rendering: false,
+      selectLists: {
+        PaperFormats: [
+          { name: "-", id: 0 },
+          { name: "A0", id: 1 },
+          { name: "A1", id: 2 },
+          { name: "A2", id: 3 },
+          { name: "A3", id: 4 },
+          { name: "A4", id: 5 },
+          { name: "A5", id: 6 },
+          { name: "A6", id: 7 },
+          { name: "Ledger", id: 8 },
+          { name: "Legal", id: 9 },
+          { name: "Letter", id: 10 },
+          { name: "Tabloid", id: 11 }
+        ],
+        coreAyaTypes: []
+      }
+    };
+  },
+  computed: {
+    showIncludeDescendants: function() {
+      switch (this.obj.aType) {
+        case window.$gz.type.WorkOrderItem:
+        case window.$gz.type.WorkOrderItemExpense:
+        case window.$gz.type.WorkOrderItemLabor:
+        case window.$gz.type.WorkOrderItemLoan:
+        case window.$gz.type.WorkOrderItemPart:
+        case window.$gz.type.WorkOrderItemPartRequest:
+        case window.$gz.type.WorkOrderItemScheduledUser:
+        case window.$gz.type.WorkOrderItemTask:
+        case window.$gz.type.WorkOrderItemTravel:
+        case window.$gz.type.WorkOrderItemUnit:
+        case window.$gz.type.WorkOrderItemOutsideService:
+        case window.$gz.type.QuoteItem:
+        case window.$gz.type.QuoteItemExpense:
+        case window.$gz.type.QuoteItemLabor:
+        case window.$gz.type.QuoteItemLoan:
+        case window.$gz.type.QuoteItemPart:
+        case window.$gz.type.QuoteItemScheduledUser:
+        case window.$gz.type.QuoteItemTask:
+        case window.$gz.type.QuoteItemTravel:
+        case window.$gz.type.QuoteItemUnit:
+        case window.$gz.type.QuoteItemOutsideService:
+        case window.$gz.type.PMItem:
+        case window.$gz.type.PMItemExpense:
+        case window.$gz.type.PMItemLabor:
+        case window.$gz.type.PMItemLoan:
+        case window.$gz.type.PMItemPart:
+        case window.$gz.type.PMItemScheduledUser:
+        case window.$gz.type.PMItemTask:
+        case window.$gz.type.PMItemTravel:
+        case window.$gz.type.PMItemUnit:
+        case window.$gz.type.PMItemOutsideService:
+          return true;
+        default:
+          return false;
+      }
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        //enable / disable RENDER button if it can be rendered (has data)
+        if (this.reportData != null) {
+          if (!val.dirty) {
+            //not disabling if invalid because that sometimes just means it needs to be re-run due to server error
+            //maybe more of an issue during development but for now it's annoying
+            window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":render");
+          } else {
+            window.$gz.eventBus.$emit(
+              "menu-disable-item",
+              FORM_KEY + ":render"
+            );
+          }
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -455,191 +639,6 @@ export default {
     //dispose all models and editor
     editor && editor.dispose();
   },
-
-  data() {
-    return {
-      reportData: null,
-      editAreaHeight: 300,
-      activeTab: "properties",
-      lastTab: "properties",
-      view: "edit",
-      editData: {
-        template: {
-          model: null,
-          state: null
-        },
-        style: {
-          model: null,
-          state: null
-        },
-        jsPrerender: {
-          model: null,
-          state: null
-        },
-        jsHelpers: {
-          model: null,
-          state: null
-        },
-        rawData: {
-          model: null,
-          state: null
-        }
-      },
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: "report",
-        includeWoItemDescendants: false,
-        active: true,
-        notes: "",
-        roles: 124927, //all except customers
-        aType: 0,
-        template: `<html>
-
-<body>
- {{#each ayReportData}}
-
- <!-- Your template here see Help for details -->
- <h2>{{ Name }}</h2>
- 
- {{/each}}
-</body>
-
-</html>`,
-        style: "",
-        jsPrerender: `async function ayPrepareData(ayData){         
-    return ayData;
-}`,
-        jsHelpers: "",
-        renderType: 0,
-        headerTemplate: null,
-        footerTemplate: null,
-        displayHeaderFooter: false,
-        paperFormat: 10,
-        landscape: false,
-        marginOptionsBottom: null,
-        marginOptionsLeft: null,
-        marginOptionsRight: null,
-        marginOptionsTop: null,
-        pageRanges: null,
-        preferCSSPageSize: false,
-        printBackground: false,
-        scale: 1 //Defaults to 1. Scale amount must be between 0.1 and 2.
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Report,
-      rendering: false,
-      selectLists: {
-        PaperFormats: [
-          { name: "-", id: 0 },
-          { name: "A0", id: 1 },
-          { name: "A1", id: 2 },
-          { name: "A2", id: 3 },
-          { name: "A3", id: 4 },
-          { name: "A4", id: 5 },
-          { name: "A5", id: 6 },
-          { name: "A6", id: 7 },
-          { name: "Ledger", id: 8 },
-          { name: "Legal", id: 9 },
-          { name: "Letter", id: 10 },
-          { name: "Tabloid", id: 11 }
-        ],
-        coreAyaTypes: []
-      }
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        //enable / disable RENDER button if it can be rendered (has data)
-        if (this.reportData != null) {
-          if (!val.dirty) {
-            //not disabling if invalid because that sometimes just means it needs to be re-run due to server error
-            //maybe more of an issue during development but for now it's annoying
-            window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":render");
-          } else {
-            window.$gz.eventBus.$emit(
-              "menu-disable-item",
-              FORM_KEY + ":render"
-            );
-          }
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    showIncludeDescendants: function() {
-      switch (this.obj.aType) {
-        case window.$gz.type.WorkOrderItem:
-        case window.$gz.type.WorkOrderItemExpense:
-        case window.$gz.type.WorkOrderItemLabor:
-        case window.$gz.type.WorkOrderItemLoan:
-        case window.$gz.type.WorkOrderItemPart:
-        case window.$gz.type.WorkOrderItemPartRequest:
-        case window.$gz.type.WorkOrderItemScheduledUser:
-        case window.$gz.type.WorkOrderItemTask:
-        case window.$gz.type.WorkOrderItemTravel:
-        case window.$gz.type.WorkOrderItemUnit:
-        case window.$gz.type.WorkOrderItemOutsideService:
-        case window.$gz.type.QuoteItem:
-        case window.$gz.type.QuoteItemExpense:
-        case window.$gz.type.QuoteItemLabor:
-        case window.$gz.type.QuoteItemLoan:
-        case window.$gz.type.QuoteItemPart:
-        case window.$gz.type.QuoteItemScheduledUser:
-        case window.$gz.type.QuoteItemTask:
-        case window.$gz.type.QuoteItemTravel:
-        case window.$gz.type.QuoteItemUnit:
-        case window.$gz.type.QuoteItemOutsideService:
-        case window.$gz.type.PMItem:
-        case window.$gz.type.PMItemExpense:
-        case window.$gz.type.PMItemLabor:
-        case window.$gz.type.PMItemLoan:
-        case window.$gz.type.PMItemPart:
-        case window.$gz.type.PMItemScheduledUser:
-        case window.$gz.type.PMItemTask:
-        case window.$gz.type.PMItemTravel:
-        case window.$gz.type.PMItemUnit:
-        case window.$gz.type.PMItemOutsideService:
-          return true;
-        default:
-          return false;
-      }
-    }
-  },
   methods: {
     onViewChange() {
       const vm = this;
@@ -1028,7 +1027,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -1036,7 +1035,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "ReportDesignReport",
     "ReportName",
@@ -1081,7 +1080,7 @@ async function fetchReportData(vm) {
   reportDataOptions["includeWoItemDescendants"] =
     vm.obj.includeWoItemDescendants;
   const res = await window.$gz.api.upsert("report/data", reportDataOptions);
-  if (!res.hasOwnProperty("data")) {
+  if (!Object.prototype.hasOwnProperty.call(res, "data")) {
     return Promise.reject(res);
   } else {
     vm.reportData = res.data;
diff --git a/ayanova/src/views/cust-customer-note.vue b/ayanova/src/views/cust-customer-note.vue
index 81902fb9..e0e65102 100644
--- a/ayanova/src/views/cust-customer-note.vue
+++ b/ayanova/src/views/cust-customer-note.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
-    <v-form ref="form" v-if="formState.ready">
+    <v-form v-if="formState.ready" ref="form">
       <v-row>
         <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
 
         <v-col cols="12">
           <gz-pick-list
-            readonly
             v-model="obj.customerId"
+            readonly
             :aya-type="ayaTypes().Customer"
             show-edit-icon
             :label="$ay.t('Customer')"
@@ -17,23 +17,23 @@
 
         <v-col cols="12">
           <v-textarea
+            ref="notes"
             v-model="obj.notes"
             :readonly="formState.readOnly"
             :label="$ay.t('CustomerNoteNotes')"
             :error-messages="form().serverErrors(this, 'notes')"
-            ref="notes"
             data-cy="notes"
-            @input="fieldValueChanged('notes')"
             auto-grow
             :clearable="!formState.readOnly"
+            @input="fieldValueChanged('notes')"
           ></v-textarea>
         </v-col>
 
         <v-col cols="12">
           <gz-tag-picker
+            ref="tags"
             v-model="obj.tags"
             :readonly="formState.readOnly"
-            ref="tags"
             data-cy="tags"
             :error-messages="form().serverErrors(this, 'tags')"
             @input="fieldValueChanged('tags')"
@@ -42,10 +42,10 @@
 
         <v-col cols="12">
           <gz-date-time-picker
-            :label="$ay.t('CustomerNoteNoteDate')"
-            v-model="obj.noteDate"
-            :readonly="formState.readOnly"
             ref="noteDate"
+            v-model="obj.noteDate"
+            :label="$ay.t('CustomerNoteNoteDate')"
+            :readonly="formState.readOnly"
             data-cy="noteDate"
             :error-messages="form().serverErrors(this, 'noteDate')"
             @input="fieldValueChanged('noteDate')"
@@ -62,6 +62,55 @@
 const FORM_KEY = "customer-note-edit";
 const API_BASE_URL = "customer-note/";
 export default {
+  data() {
+    return {
+      selectLists: {
+        usertypes: []
+      },
+      customername: undefined,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        noteDate: window.$gz.locale.nowUTC8601String(),
+        tags: [],
+        customerId: undefined,
+        userId: undefined
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.CustomerNote
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -121,55 +170,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      selectLists: {
-        usertypes: []
-      },
-      customername: undefined,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        notes: null,
-        noteDate: window.$gz.locale.nowUTC8601String(),
-        tags: [],
-        customerId: undefined,
-        userId: undefined
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.CustomerNote
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -336,17 +336,19 @@ async function clickHandler(menuItem) {
         });
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.CustomerNote,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.CustomerNote,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -428,15 +430,15 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "CustomerNoteNotes",
     "CustomerNoteNoteDate"
@@ -453,7 +455,7 @@ async function fetchCustomerName(vm) {
   const res = await window.$gz.api.get(
     `name/${window.$gz.type.Customer}/${vm.obj.customerId}`
   );
-  if (!res.hasOwnProperty("data")) {
+  if (!Object.prototype.hasOwnProperty.call(res, "data")) {
     return Promise.reject(res);
   } else {
     vm.customername = res.data;
diff --git a/ayanova/src/views/cust-customer-notes.vue b/ayanova/src/views/cust-customer-notes.vue
index 0838f042..cccdc255 100644
--- a/ayanova/src/views/cust-customer-notes.vue
+++ b/ayanova/src/views/cust-customer-notes.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -14,9 +14,9 @@
       :show-select="rights.read"
       :reload="reload"
       :client-criteria="clientCriteria"
-      @selection-change="handleSelected"
       data-cy="customerNotesTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -24,6 +24,17 @@
 <script>
 const FORM_KEY = "cust-customer-notes";
 export default {
+  data() {
+    return {
+      customerId: undefined,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.CustomerNote,
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.customerId = parseInt(this.$route.params.customerid);
     //REQUIRED NON-OPTIONAL FILTER
@@ -42,17 +53,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      customerId: undefined,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.CustomerNote,
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -82,13 +82,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.CustomerNote
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.CustomerNote
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/cust-customer.vue b/ayanova/src/views/cust-customer.vue
index 29b39120..aa93e6ea 100644
--- a/ayanova/src/views/cust-customer.vue
+++ b/ayanova/src/views/cust-customer.vue
@@ -4,7 +4,7 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab" @change="tabChanged">
+        <v-tabs v-model="tab" mobile-breakpoint="100" @change="tabChanged">
           <v-tab>{{ $ay.t("Customer") }}</v-tab>
           <v-tab>{{ $ay.t("Address") }}</v-tab>
           <v-tab>{{ $ay.t("Contacts") }}</v-tab>
@@ -13,12 +13,12 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="name"
                     v-model="obj.name"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerName')"
                     :rules="[form().required(this, 'name')]"
                     :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
                     data-cy="name"
                     @input="fieldValueChanged('name')"
                   ></v-text-field>
@@ -31,10 +31,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="accountNumber"
                     v-model="obj.accountNumber"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerAccountNumber')"
-                    ref="accountNumber"
                     data-cy="accountNumber"
                     :error-messages="form().serverErrors(this, 'accountNumber')"
                     @input="fieldValueChanged('accountNumber')"
@@ -49,10 +49,10 @@
                   xl="3"
                 >
                   <gz-url
+                    ref="webAddress"
                     v-model="obj.webAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('WebAddress')"
-                    ref="webAddress"
                     data-cy="webAddress"
                     :error-messages="form().serverErrors(this, 'webAddress')"
                     @input="fieldValueChanged('webAddress')"
@@ -67,10 +67,10 @@
                   xl="3"
                 >
                   <gz-email
+                    ref="emailAddress"
                     v-model="obj.emailAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerEmail')"
-                    ref="emailAddress"
                     data-cy="emailAddress"
                     :error-messages="form().serverErrors(this, 'emailAddress')"
                     @input="fieldValueChanged('emailAddress')"
@@ -85,10 +85,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone1"
                     v-model="obj.phone1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerPhone1')"
-                    ref="phone1"
                     data-cy="phone1"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
@@ -103,10 +103,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone2"
                     v-model="obj.phone2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerPhone2')"
-                    ref="phone2"
                     data-cy="phone2"
                     :error-messages="form().serverErrors(this, 'phone2')"
                     @input="fieldValueChanged('phone2')"
@@ -121,10 +121,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone3"
                     v-model="obj.phone3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerPhone3')"
-                    ref="phone3"
                     data-cy="phone3"
                     :error-messages="form().serverErrors(this, 'phone3')"
                     @input="fieldValueChanged('phone3')"
@@ -139,10 +139,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone4"
                     v-model="obj.phone4"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerPhone4')"
-                    ref="phone4"
                     data-cy="phone4"
                     :error-messages="form().serverErrors(this, 'phone4')"
                     @input="fieldValueChanged('phone4')"
@@ -157,10 +157,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone5"
                     v-model="obj.phone5"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerPhone5')"
-                    ref="phone5"
                     data-cy="phone5"
                     :error-messages="form().serverErrors(this, 'phone5')"
                     @input="fieldValueChanged('phone5')"
@@ -175,10 +175,10 @@
                   xl="3"
                 >
                   <v-checkbox
+                    ref="billHeadOffice"
                     v-model="obj.billHeadOffice"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerBillHeadOffice')"
-                    ref="billHeadOffice"
                     data-cy="billHeadOffice"
                     :error-messages="
                       form().serverErrors(this, 'billHeadOffice')
@@ -195,12 +195,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="headOfficeId"
+                    v-model="obj.headOfficeId"
                     :aya-type="ayaTypes().HeadOffice"
                     show-edit-icon
-                    v-model="obj.headOfficeId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOffice')"
-                    ref="headOfficeId"
                     data-cy="headOfficeId"
                     :error-messages="form().serverErrors(this, 'headOfficeId')"
                     @input="fieldValueChanged('headOfficeId')"
@@ -215,12 +215,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="contractId"
+                    v-model="obj.contractId"
                     :aya-type="ayaTypes().Contract"
                     show-edit-icon
-                    v-model="obj.contractId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Contract')"
-                    ref="contractId"
                     data-cy="contractId"
                     :error-messages="form().serverErrors(this, 'contractId')"
                     @input="fieldValueChanged('contractId')"
@@ -237,10 +237,10 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('ContractExpires')"
-                    v-model="obj.contractExpires"
-                    :readonly="formState.readOnly"
                     ref="contractExpires"
+                    v-model="obj.contractExpires"
+                    :label="$ay.t('ContractExpires')"
+                    :readonly="formState.readOnly"
                     data-cy="contractExpires"
                     :error-messages="
                       form().serverErrors(this, 'contractExpires')
@@ -280,10 +280,10 @@
                 </v-col> -->
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -292,28 +292,28 @@
                 <!-------------------------------- -->
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'TechNotes')" cols="12">
                   <v-textarea
+                    ref="techNotes"
                     v-model="obj.techNotes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerTechNotes')"
                     :error-messages="form().serverErrors(this, 'techNotes')"
-                    ref="techNotes"
                     data-cy="techNotes"
-                    @input="fieldValueChanged('techNotes')"
                     auto-grow
                     prepend-icon="$ayiTools"
+                    @input="fieldValueChanged('techNotes')"
                   ></v-textarea>
                 </v-col>
 
@@ -322,24 +322,24 @@
                   cols="12"
                 >
                   <v-textarea
+                    ref="alertNotes"
                     v-model="obj.alertNotes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('CustomerAlertNotes')"
                     :error-messages="form().serverErrors(this, 'alertNotes')"
-                    ref="alertNotes"
                     data-cy="alertNotes"
-                    @input="fieldValueChanged('alertNotes')"
                     auto-grow
                     prepend-icon="$ayiInfoCircle"
                     color="primary"
+                    @input="fieldValueChanged('alertNotes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -348,11 +348,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -361,10 +361,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -385,7 +385,7 @@
             <v-tab-item class="mt-4 ml-2">
               <v-row>
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePhysical") }}</span
@@ -420,7 +420,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePhysical") }}</span
                   >
                 </v-col>
@@ -432,10 +432,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="address"
                     v-model="obj.address"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressDeliveryAddress')"
-                    ref="address"
                     data-cy="address"
                     :error-messages="form().serverErrors(this, 'address')"
                     @input="fieldValueChanged('address')"
@@ -450,10 +450,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="city"
                     v-model="obj.city"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCity')"
-                    ref="city"
                     data-cy="city"
                     :error-messages="form().serverErrors(this, 'city')"
                     @input="fieldValueChanged('city')"
@@ -468,10 +468,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="region"
                     v-model="obj.region"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressStateProv')"
-                    ref="region"
                     data-cy="region"
                     :error-messages="form().serverErrors(this, 'region')"
                     @input="fieldValueChanged('region')"
@@ -486,10 +486,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="country"
                     v-model="obj.country"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCountry')"
-                    ref="country"
                     data-cy="country"
                     :error-messages="form().serverErrors(this, 'country')"
                     @input="fieldValueChanged('country')"
@@ -504,15 +504,15 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="latitude"
                     v-model="obj.latitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLatitude')"
-                    ref="latitude"
                     data-cy="latitude"
                     :rules="[form().decimalValid(this, 'latitude')]"
                     :error-messages="form().serverErrors(this, 'latitude')"
-                    @input="fieldValueChanged('latitude')"
                     :precision="6"
+                    @input="fieldValueChanged('latitude')"
                   ></gz-decimal>
                 </v-col>
 
@@ -524,20 +524,20 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="longitude"
                     v-model="obj.longitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLongitude')"
-                    ref="longitude"
                     data-cy="longitude"
                     :rules="[form().decimalValid(this, 'longitude')]"
                     :error-messages="form().serverErrors(this, 'longitude')"
-                    @input="fieldValueChanged('longitude')"
                     :precision="6"
+                    @input="fieldValueChanged('longitude')"
                   ></gz-decimal>
                 </v-col>
 
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePostal") }}</span
@@ -564,7 +564,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePostal") }}</span
                   >
                 </v-col>
@@ -577,10 +577,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postAddress"
                     v-model="obj.postAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalDeliveryAddress')"
-                    ref="postAddress"
                     data-cy="postAddress"
                     :error-messages="form().serverErrors(this, 'postAddress')"
                     @input="fieldValueChanged('postAddress')"
@@ -595,10 +595,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCity"
                     v-model="obj.postCity"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCity')"
-                    ref="postCity"
                     data-cy="postCity"
                     :error-messages="form().serverErrors(this, 'postCity')"
                     @input="fieldValueChanged('postCity')"
@@ -613,10 +613,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postRegion"
                     v-model="obj.postRegion"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalStateProv')"
-                    ref="postRegion"
                     data-cy="postRegion"
                     :error-messages="form().serverErrors(this, 'postRegion')"
                     @input="fieldValueChanged('postRegion')"
@@ -631,10 +631,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCountry"
                     v-model="obj.postCountry"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCountry')"
-                    ref="postCountry"
                     data-cy="postCountry"
                     :error-messages="form().serverErrors(this, 'postCountry')"
                     @input="fieldValueChanged('postCountry')"
@@ -649,10 +649,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCode"
                     v-model="obj.postCode"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalPostal')"
-                    ref="postCode"
                     data-cy="postCode"
                     :error-messages="form().serverErrors(this, 'postCode')"
                     @input="fieldValueChanged('postCode')"
@@ -671,12 +671,12 @@
                     :disable-pagination="true"
                     :disable-filtering="true"
                     hide-default-footer
-                    @click:row="contactsRowClick"
                     :sort-by="['name']"
                     :show-select="false"
                     :header-props="{ sortByText: $ay.t('Sort') }"
                     data-cy="custUsersTable"
                     :no-data-text="$ay.t('NoData')"
+                    @click:row="contactsRowClick"
                   >
                     <template v-slot:[`item.active`]="{ item }">
                       <v-simple-checkbox
@@ -688,15 +688,15 @@
                     <template v-slot:top>
                       <div class="text-right mb-6">
                         <v-btn
-                          @click="contactsGetDataFromApi"
                           :disabled="obj.id == 0"
+                          @click="contactsGetDataFromApi"
                         >
                           <v-icon data-cy="refresh">$ayiSync</v-icon>
                         </v-btn>
                         <v-btn
                           class="ml-12"
-                          @click="addContact"
                           :disabled="obj.id == 0 || formState.readOnly"
+                          @click="addContact"
                         >
                           <v-icon data-cy="add">$ayiPlus</v-icon>
                         </v-btn>
@@ -720,73 +720,6 @@ const FORM_KEY = "customer-edit";
 const API_BASE_URL = "customer/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Customer";
 export default {
-  async created() {
-    const vm = this;
-    let completelyNew = false;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        } else {
-          completelyNew = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-      if (completelyNew) {
-        //completely new record pre-break name rule so it shows as required
-        //trigger rule breaking / validation
-        this.$nextTick(() => {
-          this.obj.name = null;
-          this.fieldValueChanged(`name`);
-        });
-      }
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -883,6 +816,73 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    let completelyNew = false;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        } else {
+          completelyNew = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+      if (completelyNew) {
+        //completely new record pre-break name rule so it shows as required
+        //trigger rule breaking / validation
+        this.$nextTick(() => {
+          this.obj.name = null;
+          this.fieldValueChanged(`name`);
+        });
+      }
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     // canOpenServiceBank: function() {
     //   return this.obj.usesBanking == true && this.$route.params.recordid != 0;
@@ -1078,7 +1078,7 @@ export default {
       if (roles != null && roles != 0) {
         for (let i = 0; i < this.availableRoles.length; i++) {
           const role = this.availableRoles[i];
-          if (!!(roles & role.id)) {
+          if (roles & role.id) {
             roleNames.push(role.name);
           }
         }
@@ -1265,17 +1265,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Customer,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Customer,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "geoview":
         window.$gz.util.viewGeoLocation({
@@ -1484,7 +1486,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await createTableHeaders(vm);
 }
@@ -1493,7 +1495,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Customer",
     "CustomerName",
diff --git a/ayanova/src/views/cust-customers.vue b/ayanova/src/views/cust-customers.vue
index d2b1fd3f..ee656d1f 100644
--- a/ayanova/src/views/cust-customers.vue
+++ b/ayanova/src/views/cust-customers.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="CustomerDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="customersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -26,6 +26,16 @@
 <script>
 const FORM_KEY = "customer-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.Customer,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Customer);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -55,16 +65,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.Customer,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -94,11 +94,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Customer)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.Customer
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/cust-head-office.vue b/ayanova/src/views/cust-head-office.vue
index 69c5c1b9..a2037eb2 100644
--- a/ayanova/src/views/cust-head-office.vue
+++ b/ayanova/src/views/cust-head-office.vue
@@ -4,7 +4,7 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab" @change="tabChanged">
+        <v-tabs v-model="tab" mobile-breakpoint="100" @change="tabChanged">
           <v-tab>{{ $ay.t("HeadOffice") }}</v-tab>
           <v-tab>{{ $ay.t("Address") }}</v-tab>
           <v-tab>{{ $ay.t("Contacts") }}</v-tab>
@@ -14,12 +14,12 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="name"
                     v-model="obj.name"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficeName')"
                     :rules="[form().required(this, 'name')]"
                     :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
                     data-cy="name"
                     @input="fieldValueChanged('name')"
                   ></v-text-field>
@@ -33,10 +33,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="accountNumber"
                     v-model="obj.accountNumber"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficeAccountNumber')"
-                    ref="accountNumber"
                     data-cy="accountNumber"
                     :error-messages="form().serverErrors(this, 'accountNumber')"
                     @input="fieldValueChanged('accountNumber')"
@@ -51,10 +51,10 @@
                   xl="3"
                 >
                   <gz-url
+                    ref="webAddress"
                     v-model="obj.webAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('WebAddress')"
-                    ref="webAddress"
                     data-cy="webAddress"
                     :error-messages="form().serverErrors(this, 'webAddress')"
                     @input="fieldValueChanged('webAddress')"
@@ -69,10 +69,10 @@
                   xl="3"
                 >
                   <gz-email
+                    ref="emailAddress"
                     v-model="obj.emailAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficeEmail')"
-                    ref="emailAddress"
                     data-cy="emailAddress"
                     :error-messages="form().serverErrors(this, 'emailAddress')"
                     @input="fieldValueChanged('emailAddress')"
@@ -87,10 +87,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone1"
                     v-model="obj.phone1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficePhone1')"
-                    ref="phone1"
                     data-cy="phone1"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
@@ -105,10 +105,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone2"
                     v-model="obj.phone2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficePhone2')"
-                    ref="phone2"
                     data-cy="phone2"
                     :error-messages="form().serverErrors(this, 'phone2')"
                     @input="fieldValueChanged('phone2')"
@@ -123,10 +123,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone3"
                     v-model="obj.phone3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficePhone3')"
-                    ref="phone3"
                     data-cy="phone3"
                     :error-messages="form().serverErrors(this, 'phone3')"
                     @input="fieldValueChanged('phone3')"
@@ -141,10 +141,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone4"
                     v-model="obj.phone4"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficePhone4')"
-                    ref="phone4"
                     data-cy="phone4"
                     :error-messages="form().serverErrors(this, 'phone4')"
                     @input="fieldValueChanged('phone4')"
@@ -159,10 +159,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone5"
                     v-model="obj.phone5"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficePhone5')"
-                    ref="phone5"
                     data-cy="phone5"
                     :error-messages="form().serverErrors(this, 'phone5')"
                     @input="fieldValueChanged('phone5')"
@@ -177,12 +177,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="contractId"
+                    v-model="obj.contractId"
                     :aya-type="ayaTypes().Contract"
                     show-edit-icon
-                    v-model="obj.contractId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Contract')"
-                    ref="contractId"
                     data-cy="contractId"
                     :error-messages="form().serverErrors(this, 'contractId')"
                     @input="fieldValueChanged('contractId')"
@@ -199,10 +199,10 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('ContractExpires')"
-                    v-model="obj.contractExpires"
-                    :readonly="formState.readOnly"
                     ref="contractExpires"
+                    v-model="obj.contractExpires"
+                    :label="$ay.t('ContractExpires')"
+                    :readonly="formState.readOnly"
                     data-cy="contractExpires"
                     :error-messages="
                       form().serverErrors(this, 'contractExpires')
@@ -242,10 +242,10 @@
                 </v-col> -->
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -254,22 +254,22 @@
                 <!-- --------------------------------- -->
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('HeadOfficeNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -278,11 +278,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -291,10 +291,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -315,7 +315,7 @@
             <v-tab-item class="mt-4 ml-2">
               <v-row>
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePhysical") }}</span
@@ -350,7 +350,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePhysical") }}</span
                   >
                 </v-col>
@@ -362,10 +362,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="address"
                     v-model="obj.address"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressDeliveryAddress')"
-                    ref="address"
                     data-cy="address"
                     :error-messages="form().serverErrors(this, 'address')"
                     @input="fieldValueChanged('address')"
@@ -380,10 +380,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="city"
                     v-model="obj.city"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCity')"
-                    ref="city"
                     data-cy="city"
                     :error-messages="form().serverErrors(this, 'city')"
                     @input="fieldValueChanged('city')"
@@ -398,10 +398,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="region"
                     v-model="obj.region"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressStateProv')"
-                    ref="region"
                     data-cy="region"
                     :error-messages="form().serverErrors(this, 'region')"
                     @input="fieldValueChanged('region')"
@@ -416,10 +416,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="country"
                     v-model="obj.country"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCountry')"
-                    ref="country"
                     data-cy="country"
                     :error-messages="form().serverErrors(this, 'country')"
                     @input="fieldValueChanged('country')"
@@ -434,15 +434,15 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="latitude"
                     v-model="obj.latitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLatitude')"
-                    ref="latitude"
                     data-cy="latitude"
                     :rules="[form().decimalValid(this, 'latitude')]"
                     :error-messages="form().serverErrors(this, 'latitude')"
-                    @input="fieldValueChanged('latitude')"
                     :precision="6"
+                    @input="fieldValueChanged('latitude')"
                   ></gz-decimal>
                 </v-col>
 
@@ -454,20 +454,20 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="longitude"
                     v-model="obj.longitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLongitude')"
-                    ref="longitude"
                     data-cy="longitude"
                     :rules="[form().decimalValid(this, 'longitude')]"
                     :error-messages="form().serverErrors(this, 'longitude')"
-                    @input="fieldValueChanged('longitude')"
                     :precision="6"
+                    @input="fieldValueChanged('longitude')"
                   ></gz-decimal>
                 </v-col>
 
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePostal") }}</span
@@ -494,7 +494,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePostal") }}</span
                   >
                 </v-col>
@@ -507,10 +507,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postAddress"
                     v-model="obj.postAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalDeliveryAddress')"
-                    ref="postAddress"
                     data-cy="postAddress"
                     :error-messages="form().serverErrors(this, 'postAddress')"
                     @input="fieldValueChanged('postAddress')"
@@ -525,10 +525,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCity"
                     v-model="obj.postCity"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCity')"
-                    ref="postCity"
                     data-cy="postCity"
                     :error-messages="form().serverErrors(this, 'postCity')"
                     @input="fieldValueChanged('postCity')"
@@ -543,10 +543,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postRegion"
                     v-model="obj.postRegion"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalStateProv')"
-                    ref="postRegion"
                     data-cy="postRegion"
                     :error-messages="form().serverErrors(this, 'postRegion')"
                     @input="fieldValueChanged('postRegion')"
@@ -561,10 +561,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCountry"
                     v-model="obj.postCountry"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCountry')"
-                    ref="postCountry"
                     data-cy="postCountry"
                     :error-messages="form().serverErrors(this, 'postCountry')"
                     @input="fieldValueChanged('postCountry')"
@@ -579,10 +579,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCode"
                     v-model="obj.postCode"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalPostal')"
-                    ref="postCode"
                     data-cy="postCode"
                     :error-messages="form().serverErrors(this, 'postCode')"
                     @input="fieldValueChanged('postCode')"
@@ -601,12 +601,12 @@
                     :disable-pagination="true"
                     :disable-filtering="true"
                     hide-default-footer
-                    @click:row="contactsRowClick"
                     :sort-by="['name']"
                     :show-select="false"
                     :header-props="{ sortByText: $ay.t('Sort') }"
                     data-cy="custUsersTable"
                     :no-data-text="$ay.t('NoData')"
+                    @click:row="contactsRowClick"
                   >
                     <template v-slot:[`item.active`]="{ item }">
                       <v-simple-checkbox
@@ -618,15 +618,15 @@
                     <template v-slot:top>
                       <div class="text-right mb-6">
                         <v-btn
-                          @click="contactsGetDataFromApi"
                           :disabled="obj.id == 0"
+                          @click="contactsGetDataFromApi"
                         >
                           <v-icon data-cy="refresh">$ayiSync</v-icon>
                         </v-btn>
                         <v-btn
                           class="ml-12"
-                          @click="addContact"
                           :disabled="obj.id == 0 || formState.readOnly"
+                          @click="addContact"
                         >
                           <v-icon data-cy="add">$ayiPlus</v-icon>
                         </v-btn>
@@ -650,62 +650,6 @@ const FORM_KEY = "head-office-edit";
 const API_BASE_URL = "head-office/";
 const FORM_CUSTOM_TEMPLATE_KEY = "HeadOffice";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.HeadOffice);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -795,6 +739,62 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.HeadOffice);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     // canOpenServiceBank: function() {
     //   return this.obj.usesBanking == true && this.$route.params.recordid != 0;
@@ -990,7 +990,7 @@ export default {
       if (roles != null && roles != 0) {
         for (let i = 0; i < this.availableRoles.length; i++) {
           const role = this.availableRoles[i];
-          if (!!(roles & role.id)) {
+          if (roles & role.id) {
             roleNames.push(role.name);
           }
         }
@@ -1177,17 +1177,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.HeadOffice,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.HeadOffice,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "geoview":
         window.$gz.util.viewGeoLocation({
@@ -1318,7 +1320,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await createTableHeaders(vm);
 }
@@ -1327,7 +1329,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "HeadOffice",
     "HeadOfficeName",
diff --git a/ayanova/src/views/cust-head-offices.vue b/ayanova/src/views/cust-head-offices.vue
index cfcd9c8f..693ca3e1 100644
--- a/ayanova/src/views/cust-head-offices.vue
+++ b/ayanova/src/views/cust-head-offices.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="HeadOfficeDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="headofficesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -23,14 +23,6 @@
 <script>
 const FORM_KEY = "head-office-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.HeadOffice);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -39,6 +31,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.HeadOffice);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -63,13 +63,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.HeadOffice
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.HeadOffice
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/cust-user.vue b/ayanova/src/views/cust-user.vue
index ddaa9c4f..eb60b73a 100644
--- a/ayanova/src/views/cust-user.vue
+++ b/ayanova/src/views/cust-user.vue
@@ -4,7 +4,7 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab">
+        <v-tabs v-model="tab" mobile-breakpoint="100">
           <v-tab>{{ $ay.t("Contact") }}</v-tab>
           <v-tab>{{ $ay.t("UserSettings") }}</v-tab>
           <v-tabs-items v-model="tab">
@@ -18,14 +18,14 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="customerId"
+                    v-model="obj.customerId"
                     :aya-type="ayaTypes().Customer"
                     show-edit-icon
                     :include-inactive="true"
-                    v-model="obj.customerId"
                     :readonly="true"
                     :disabled="true"
                     :label="$ay.t('Customer')"
-                    ref="customerId"
                     data-cy="customerId"
                     :error-messages="form().serverErrors(this, 'customerId')"
                     @input="fieldValueChanged('customerId')"
@@ -42,14 +42,14 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="headOfficeId"
+                    v-model="obj.headOfficeId"
                     :aya-type="ayaTypes().HeadOffice"
                     show-edit-icon
                     :include-inactive="true"
-                    v-model="obj.headOfficeId"
                     :readonly="true"
                     :disabled="true"
                     :label="$ay.t('HeadOffice')"
-                    ref="headOfficeId"
                     data-cy="headOfficeId"
                     :error-messages="form().serverErrors(this, 'headOfficeId')"
                     @input="fieldValueChanged('headOfficeId')"
@@ -58,12 +58,12 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="name"
                     v-model="obj.name"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Name')"
                     :rules="[form().required(this, 'name')]"
                     :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
                     data-cy="name"
                     @input="fieldValueChanged('name')"
                   ></v-text-field>
@@ -71,22 +71,23 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-role-picker
-                    :label="$ay.t('AuthorizationRoles')"
-                    v-model="obj.roles"
-                    :readonly="formState.readOnly"
                     ref="roles"
+                    v-model="obj.roles"
+                    :label="$ay.t('AuthorizationRoles')"
+                    :readonly="formState.readOnly"
                     data-cy="roles"
                     :error-messages="form().serverErrors(this, 'roles')"
-                    @input="fieldValueChanged('roles')"
                     limit-selection-to="outside"
+                    @input="fieldValueChanged('roles')"
                   ></gz-role-picker>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
-                    name="username"
                     id="username"
+                    ref="login"
                     v-model="login"
+                    name="username"
                     :readonly="formState.readOnly"
                     prepend-icon="$ayiUser"
                     autocomplete="off"
@@ -95,42 +96,41 @@
                     spellcheck="false"
                     :label="$ay.t('NewLogin')"
                     :error-messages="form().serverErrors(this, 'login')"
-                    ref="login"
                     @input="fieldValueChanged('login')"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
-                    name="password"
                     id="password"
+                    ref="password"
                     v-model="password"
+                    name="password"
                     :readonly="formState.readOnly"
                     :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
                     prepend-icon="$ayiKey"
                     :label="$ay.t('NewPassword')"
                     :type="reveal ? 'text' : 'password'"
                     :error-messages="form().serverErrors(this, 'password')"
-                    ref="password"
                     @input="fieldValueChanged('password')"
                     @click:append-outer="reveal = !reveal"
                   ></v-text-field>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-date-time-picker
-                    :label="$ay.t('LastLogin')"
-                    v-model="obj.lastLogin"
-                    readonly
                     ref="lastLogin"
+                    v-model="obj.lastLogin"
+                    :label="$ay.t('LastLogin')"
+                    readonly
                     data-cy="lastLogin"
                   ></gz-date-time-picker>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -138,22 +138,22 @@
                 </v-col>
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -162,11 +162,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -175,10 +175,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -200,13 +200,13 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="translationId"
                     v-model="optionsObj.translationId"
                     :items="selectLists.translations"
                     item-text="name"
                     item-value="id"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Translation')"
-                    ref="translationId"
                     :error-messages="form().serverErrors(this, 'translationId')"
                     @input="fieldValueChanged('translationId')"
                   ></v-select>
@@ -214,13 +214,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-email
+                    ref="emailAddress"
                     v-model="optionsObj.emailAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserEmailAddress')"
                     :error-messages="form().serverErrors(this, 'emailAddress')"
-                    ref="emailAddress"
-                    @input="fieldValueChanged('emailAddress')"
                     data-cy="emailAddress"
+                    @input="fieldValueChanged('emailAddress')"
                   ></gz-email>
                 </v-col>
                 <v-col
@@ -231,10 +231,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone1"
                     v-model="optionsObj.phone1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPhone1')"
-                    ref="phone1"
                     data-cy="phone1"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
@@ -249,10 +249,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone2"
                     v-model="optionsObj.phone2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPhone2')"
-                    ref="phone2"
                     data-cy="phone2"
                     :error-messages="form().serverErrors(this, 'phone2')"
                     @input="fieldValueChanged('phone2')"
@@ -267,10 +267,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone3"
                     v-model="optionsObj.phone3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UserPageAddress')"
-                    ref="phone3"
                     data-cy="phone3"
                     :error-messages="form().serverErrors(this, 'phone3')"
                     @input="fieldValueChanged('phone3')"
@@ -279,17 +279,17 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="mapUrlTemplate"
                     v-model="optionsObj.mapUrlTemplate"
                     :readonly="formState.readOnly"
                     :label="$ay.t('MapUrlTemplate')"
                     :error-messages="
                       form().serverErrors(this, 'mapUrlTemplate')
                     "
-                    ref="mapUrlTemplate"
-                    @input="fieldValueChanged('mapUrlTemplate')"
                     data-cy="mapUrlTemplate"
                     :hint="obj.mapUrlTemplate == null ? 'Google maps' : ''"
                     persistent-hint
+                    @input="fieldValueChanged('mapUrlTemplate')"
                   ></v-text-field>
                   <v-select
                     :items="selectLists.mapUrls"
@@ -301,10 +301,10 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="hour12"
                     v-model="optionsObj.hour12"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Hour12')"
-                    ref="hour12"
                     :error-messages="form().serverErrors(this, 'hour12')"
                     @change="fieldValueChanged('hour12')"
                   ></v-checkbox>
@@ -312,6 +312,7 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="currencyName"
                     v-model="optionsObj.currencyName"
                     :hint="
                       optionsObj.currencyName == null ||
@@ -323,15 +324,15 @@
                     :readonly="formState.readOnly"
                     :label="$ay.t('CurrencyCode')"
                     :error-messages="form().serverErrors(this, 'currencyName')"
-                    ref="currencyName"
-                    @input="fieldValueChanged('currencyName')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('currencyName')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="languageOverride"
                     v-model="optionsObj.languageOverride"
                     :hint="locale().getResolvedLanguage()"
                     persistent-hint
@@ -340,15 +341,15 @@
                     :error-messages="
                       form().serverErrors(this, 'languageOverride')
                     "
-                    ref="languageOverride"
-                    @input="fieldValueChanged('languageOverride')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('languageOverride')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="timeZoneOverride"
                     v-model="optionsObj.timeZoneOverride"
                     :hint="locale().getResolvedTimeZoneName()"
                     persistent-hint
@@ -357,9 +358,8 @@
                     :error-messages="
                       form().serverErrors(this, 'timeZoneOverride')
                     "
-                    ref="timeZoneOverride"
-                    @input="fieldValueChanged('timeZoneOverride')"
                     append-outer-icon="$ayiQuestionCircle"
+                    @input="fieldValueChanged('timeZoneOverride')"
                     @click:append-outer="goHelp()"
                   ></v-text-field>
                 </v-col>
@@ -396,83 +396,6 @@ const API_BASE_URL = "user/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Contact"; //<--- deliberately not 'User' as is customary as this is it's own form but also edit's User type objects so needs it's own customization key
 
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      //## NOTE: This is a Contact form so follows Customer rights even  though User object
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          this.optionsObj = this.$route.params.optionsObj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.optionsObj = this.$route.params.optionsObj;
-          this.obj.concurrency = undefined;
-          this.optionsObj.concurrency = undefined;
-          this.obj.id = 0;
-          this.optionsObj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          this.password = window.$gz.util.getRandomPassword();
-          setDirty = true;
-        } else {
-          vm.password = window.$gz.util.getRandomPassword();
-          if (vm.$route.params.customerid && vm.$route.params.customerid != 0) {
-            vm.obj.customerId = vm.$route.params.customerid;
-            vm.obj.userType = 3;
-          } else if (
-            vm.$route.params.headofficeid &&
-            vm.$route.params.headofficeid != 0
-          ) {
-            vm.obj.headOfficeId = vm.$route.params.headofficeid;
-            vm.obj.userType = 4;
-          } else {
-            //no customer or headoffice id, can't proceed
-            vm.$router.go(-1);
-          }
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -559,6 +482,83 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      //## NOTE: This is a Contact form so follows Customer rights even  though User object
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          this.optionsObj = this.$route.params.optionsObj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.optionsObj = this.$route.params.optionsObj;
+          this.obj.concurrency = undefined;
+          this.optionsObj.concurrency = undefined;
+          this.obj.id = 0;
+          this.optionsObj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          this.password = window.$gz.util.getRandomPassword();
+          setDirty = true;
+        } else {
+          vm.password = window.$gz.util.getRandomPassword();
+          if (vm.$route.params.customerid && vm.$route.params.customerid != 0) {
+            vm.obj.customerId = vm.$route.params.customerid;
+            vm.obj.userType = 3;
+          } else if (
+            vm.$route.params.headofficeid &&
+            vm.$route.params.headofficeid != 0
+          ) {
+            vm.obj.headOfficeId = vm.$route.params.headofficeid;
+            vm.obj.userType = 4;
+          } else {
+            //no customer or headoffice id, can't proceed
+            vm.$router.go(-1);
+          }
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     goHelp() {
       window.open(
@@ -840,17 +840,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.User,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.User,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "directnotify":
         //nav to direct notify with list of users appended to route
@@ -981,7 +983,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -990,7 +992,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "UserSettings",
     "Contact",
diff --git a/ayanova/src/views/cust-users.vue b/ayanova/src/views/cust-users.vue
index b19949e3..56744fed 100644
--- a/ayanova/src/views/cust-users.vue
+++ b/ayanova/src/views/cust-users.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="OutsideUserDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="custUsersTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -23,14 +23,6 @@
 <script>
 const FORM_KEY = "contact-users";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.User);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -39,6 +31,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.User);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -57,11 +57,13 @@ async function clickHandler(menuItem) {
   if (m.owner == FORM_KEY && !m.disabled) {
     switch (m.key) {
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.User)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.User)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
@@ -78,18 +80,20 @@ async function clickHandler(menuItem) {
         break;
       case "directnotify":
         //nav to direct notify with list of users appended to route
-        const selected = m.vm.$refs.gzdatatable.getDataListSelection(
-          window.$gz.type.User
-        ).selectedRowIds;
-        if (selected.length == 0) {
-          m.vm.$router.push({
-            name: "home-notify-direct"
-          });
-        } else {
-          m.vm.$router.push({
-            name: "home-notify-direct",
-            params: { userIdList: selected.toString() }
-          });
+        {
+          const selected = m.vm.$refs.gzdatatable.getDataListSelection(
+            window.$gz.type.User
+          ).selectedRowIds;
+          if (selected.length == 0) {
+            m.vm.$router.push({
+              name: "home-notify-direct"
+            });
+          } else {
+            m.vm.$router.push({
+              name: "home-notify-direct",
+              params: { userIdList: selected.toString() }
+            });
+          }
         }
         break;
       default:
diff --git a/ayanova/src/views/customer-csr-edit.vue b/ayanova/src/views/customer-csr-edit.vue
index e7cb1c06..a45e1369 100644
--- a/ayanova/src/views/customer-csr-edit.vue
+++ b/ayanova/src/views/customer-csr-edit.vue
@@ -16,12 +16,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="customerId"
+              v-model="obj.customerId"
               :aya-type="ayaTypes().Customer"
               show-edit-icon
               :include-inactive="true"
-              v-model="obj.customerId"
               :label="$ay.t('Customer')"
-              ref="customerId"
               data-cy="customerId"
               variant="ho"
               template="[{'fld':'customername'}]"
@@ -30,14 +30,14 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-select
+              ref="priority"
+              v-model="obj.priority"
               :color="priorityColor()"
               :item-color="priorityColor()"
-              v-model="obj.priority"
               :items="selectLists.priorities"
               item-text="name"
               item-value="id"
               :label="$ay.t('CustomerServiceRequestPriority')"
-              ref="priority"
               data-cy="priority"
               append-icon=""
               @input="fieldValueChanged('priority')"
@@ -61,10 +61,10 @@
             xl="3"
           >
             <v-text-field
+              ref="customerReferenceNumber"
               v-model="obj.customerReferenceNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('CustomerServiceRequestCustomerReferenceNumber')"
-              ref="customerReferenceNumber"
               data-cy="customerReferenceNumber"
               :error-messages="
                 form().serverErrors(this, 'customerReferenceNumber')
@@ -81,6 +81,8 @@
             xl="3"
           >
             <gz-pick-list
+              ref="unitId"
+              v-model="obj.unitId"
               :aya-type="ayaTypes().Unit"
               :variant="unitListVariant()"
               template="[
@@ -88,10 +90,8 @@
                 { fld: 'UnitModelName' },
                 { fld: 'UnitModelVendorID' }
               ]"
-              v-model="obj.unitId"
               :readonly="formState.readOnly"
               :label="$ay.t('CustomerServiceRequestItemUnitID')"
-              ref="unitId"
               data-cy="unitId"
               :error-messages="form().serverErrors(this, 'unitId')"
               @input="fieldValueChanged('unitId')"
@@ -111,12 +111,12 @@
 
           <v-col cols="12">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('CustomerServiceRequestTitle')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -127,35 +127,35 @@
             cols="12"
           >
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('CustomerServiceRequestDetails')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-picker
-              :label="$ay.t('Created')"
-              v-model="obj.dateRequested"
-              readonly
               ref="dateRequested"
+              v-model="obj.dateRequested"
+              :label="$ay.t('Created')"
+              readonly
               data-cy="dateRequested"
             ></gz-date-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-select
+              ref="status"
               v-model="obj.status"
               :items="selectLists.status"
               item-text="name"
               item-value="id"
               readonly
               :label="$ay.t('CustomerServiceRequestStatus')"
-              ref="status"
               data-cy="status"
               append-icon=""
             ></v-select>
@@ -167,7 +167,7 @@
       <!-- ################################################################################-->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="1600px" v-model="addUnitDialog">
+          <v-dialog v-model="addUnitDialog" max-width="1600px">
             <v-card>
               <v-card-title> </v-card-title>
               <v-card-text>
@@ -193,22 +193,22 @@
                   </v-col> -->
                   <v-col cols="12" sm="6" lg="4" xl="3">
                     <v-text-field
+                      ref="serial"
                       v-model="unitObj.serial"
                       :readonly="formState.readOnly"
                       :label="$ay.t('UnitSerial')"
                       :rules="[form().required(this, 'serial')]"
                       :error-messages="form().serverErrors(this, 'serial')"
-                      ref="serial"
                       data-cy="serial"
                       @input="fieldValueChanged('serial')"
                     ></v-text-field>
                   </v-col>
                   <v-col cols="12" sm="6" lg="4" xl="3">
                     <v-text-field
+                      ref="description"
                       v-model="unitObj.description"
                       :readonly="formState.readOnly"
                       :label="$ay.t('UnitDescription')"
-                      ref="description"
                       data-cy="description"
                       :error-messages="form().serverErrors(this, 'description')"
                     ></v-text-field>
@@ -216,13 +216,13 @@
 
                   <v-col cols="12" sm="6" lg="4" xl="3">
                     <gz-pick-list
+                      ref="unitModelId"
+                      v-model="unitObj.unitModelId"
                       :aya-type="ayaTypes().UnitModel"
                       template="[{ fld: 'UnitModelName' },{ fld: 'UnitModelVendorID' }]"
                       show-edit-icon
-                      v-model="unitObj.unitModelId"
                       :readonly="formState.readOnly"
                       :label="$ay.t('UnitModel')"
-                      ref="unitModelId"
                       data-cy="unitModelId"
                       :error-messages="form().serverErrors(this, 'unitModelId')"
                     ></gz-pick-list>
@@ -230,7 +230,7 @@
                 </v-row>
               </v-card-text>
               <v-card-actions>
-                <v-btn text @click="addUnitDialog = false" color="primary">{{
+                <v-btn text color="primary" @click="addUnitDialog = false">{{
                   $ay.t("Cancel")
                 }}</v-btn>
                 <v-spacer></v-spacer>
@@ -238,9 +238,9 @@
                   :disabled="unitObj.serial == null"
                   color="primary"
                   text
-                  @click="addUnit()"
                   class="ml-4"
                   data-cy="csrUnitAdd"
+                  @click="addUnit()"
                   >{{ $ay.t("Add") }}</v-btn
                 >
               </v-card-actions>
@@ -259,70 +259,6 @@ const FORM_KEY = "customer-csr-edit";
 const API_BASE_URL = "csr/";
 const FORM_CUSTOM_TEMPLATE_KEY = "CustomerServiceRequest";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.CustomerServiceRequest
-      );
-      vm.formState.readOnly = !vm.rights.change || vm.obj.status != 0;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //NEW
-        //
-        if (this.$store.state.userType == 3) {
-          //Customer specific user
-          this.obj.customerId = this.$store.state.customerRights.entityId;
-          this.unitObj.customerId = this.$store.state.customerRights.entityId;
-        }
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -399,6 +335,70 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.CustomerServiceRequest
+      );
+      vm.formState.readOnly = !vm.rights.change || vm.obj.status != 0;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //NEW
+        //
+        if (this.$store.state.userType == 3) {
+          //Customer specific user
+          this.obj.customerId = this.$store.state.customerRights.entityId;
+          this.unitObj.customerId = this.$store.state.customerRights.entityId;
+        }
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     showAddUnitDialog: function() {
       this.unitObj.customerId = this.obj.customerId;
diff --git a/ayanova/src/views/customer-csr.vue b/ayanova/src/views/customer-csr.vue
index 19e5cab3..f5f5f39c 100644
--- a/ayanova/src/views/customer-csr.vue
+++ b/ayanova/src/views/customer-csr.vue
@@ -5,8 +5,8 @@
       form-key="csr-list"
       data-list-key="CustomerServiceRequestDataList"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="csrTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -15,6 +15,14 @@
 <script>
 const FORM_KEY = "customer-csr-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.CustomerServiceRequest,
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(
       window.$gz.type.CustomerServiceRequest
@@ -25,14 +33,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.CustomerServiceRequest,
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
diff --git a/ayanova/src/views/customer-workorder.vue b/ayanova/src/views/customer-workorder.vue
index f20fa297..9dc65c33 100644
--- a/ayanova/src/views/customer-workorder.vue
+++ b/ayanova/src/views/customer-workorder.vue
@@ -48,18 +48,18 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-time-picker
-              :label="$ay.t('WorkOrderServiceDate')"
               v-model="obj.serviceDate"
+              :label="$ay.t('WorkOrderServiceDate')"
               readonly
               data-cy="serviceDate"
             ></gz-date-time-picker>
           </v-col>
           <v-col v-if="obj.canWiki" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               readonly
               data-cy="wiki"
             ></gz-wiki
@@ -86,32 +86,6 @@
 const FORM_KEY = "customer-workorder";
 const API_BASE_URL = "workorder/customer/";
 export default {
-  async created() {
-    const vm = this;
-
-    try {
-      await initForm();
-      vm.formState.readOnly = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: false,
-        valid: true
-      });
-
-      // generateMenu(vm);
-      await vm.getDataFromApi(vm.$route.params.recordid);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       obj: {
@@ -141,6 +115,32 @@ export default {
       ayaType: window.$gz.type.WorkOrder
     };
   },
+  async created() {
+    const vm = this;
+
+    try {
+      await initForm();
+      vm.formState.readOnly = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: false,
+        valid: true
+      });
+
+      // generateMenu(vm);
+      await vm.getDataFromApi(vm.$route.params.recordid);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
 
   methods: {
     ayaTypes: function() {
diff --git a/ayanova/src/views/customer-workorders.vue b/ayanova/src/views/customer-workorders.vue
index 21345019..27791d91 100644
--- a/ayanova/src/views/customer-workorders.vue
+++ b/ayanova/src/views/customer-workorders.vue
@@ -6,10 +6,10 @@
       data-list-key="CustomerWorkOrderDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="workordersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -18,6 +18,21 @@
 <script>
 const FORM_KEY = "customer-workorder-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrder,
+      selectedItems: [],
+      reload: false,
+      openDialog: false,
+      openWoNumber: null,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   async created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -49,21 +64,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrder,
-      selectedItems: [],
-      reload: false,
-      openDialog: false,
-      openWoNumber: null,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -86,21 +86,6 @@ async function clickHandler(menuItem) {
   const m = window.$gz.menu.parseMenuItem(menuItem);
   if (m.owner == FORM_KEY && !m.disabled) {
     switch (m.key) {
-      // case "report":
-      //   {
-      //     const res = await m.vm.$refs.reportSelector.open(
-      //       m.vm.$refs.gzdatatable.getDataListSelection(
-      //         window.$gz.type.WorkOrder
-      //       ),
-      //       m.id
-      //     );
-      //     if (res == null) {
-      //       return;
-      //     }
-      //window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
-      //   }
-      //   break;
-
       default:
         window.$gz.eventBus.$emit(
           "notify-warning",
@@ -113,7 +98,7 @@ async function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiTools",
diff --git a/ayanova/src/views/home-dashboard.vue b/ayanova/src/views/home-dashboard.vue
index 4faac889..fd920a4d 100644
--- a/ayanova/src/views/home-dashboard.vue
+++ b/ayanova/src/views/home-dashboard.vue
@@ -1,13 +1,13 @@
 <template>
   <v-row v-if="formState.ready">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-    <v-col cols="12" v-if="showSelector">
+    <v-col v-if="showSelector" cols="12">
       <v-dialog
+        v-model="showSelector"
         scrollable
         max-width="600px"
-        v-model="showSelector"
-        @keydown.esc="cancel"
         data-cy="dashSelector"
+        @keydown.esc="cancel"
       >
         <v-card elevation="24">
           <v-card-title class="text-h5 lighten-2" primary-title>
@@ -31,15 +31,15 @@
             <v-btn
               color="primary"
               text
-              @click.native="showSelector = false"
               data-cy="dashSelector:cancel"
+              @click.native="showSelector = false"
               >{{ $ay.t("Cancel") }}</v-btn
             >
           </v-card-actions>
         </v-card>
       </v-dialog>
     </v-col>
-    <v-col cols="12" v-if="!hasItems()">
+    <v-col v-if="!hasItems()" cols="12">
       <v-btn outlined @click.native="showSelector = true">{{
         $ay.t("Add")
       }}</v-btn>
@@ -83,6 +83,22 @@ export default {
     GzDashTestLineWidgetMonthlyTotalPrice,
     GzDashTestDayCalendarWidget
   },
+  data() {
+    return {
+      effectiveView: [],
+      showSelector: false,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
       isMain: true,
@@ -283,22 +299,6 @@ export default {
         });
       }
     }
-  },
-  data() {
-    return {
-      effectiveView: [],
-      showSelector: false,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      }
-    };
   }
 };
 
diff --git a/ayanova/src/views/home-memo.vue b/ayanova/src/views/home-memo.vue
index 677d5670..288ade08 100644
--- a/ayanova/src/views/home-memo.vue
+++ b/ayanova/src/views/home-memo.vue
@@ -41,9 +41,9 @@
 
             <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
               <gz-wiki
+                v-model="obj.wiki"
                 :aya-type="ayaType"
                 :aya-id="obj.id"
-                v-model="obj.wiki"
                 readonly
               ></gz-wiki
             ></v-col>
@@ -51,25 +51,25 @@
         </template>
         <template v-else>
           <v-row>
-            <v-col cols="12" v-if="!replyMode">
+            <v-col v-if="!replyMode" cols="12">
               <gz-pick-list
+                ref="userPickList"
+                v-model="pickListSelectedUserId"
                 :allow-no-selection="false"
                 :can-clear="false"
                 :aya-type="ayaTypes().User"
                 :variant="'inside'"
                 :show-edit-icon="false"
-                v-model="pickListSelectedUserId"
                 :label="$ay.t('MemoToID')"
-                ref="userPickList"
-                @input="addSelected()"
                 data-cy="pickListSelectedUserId"
+                @input="addSelected()"
               ></gz-pick-list>
 
               <template v-for="item in toUsers">
                 <v-chip
+                  :key="item.id"
                   color="primary"
                   outlined
-                  :key="item.id"
                   class="ma-1"
                   close
                   @click:close="closeChip(item)"
@@ -78,7 +78,7 @@
                 </v-chip>
               </template>
             </v-col>
-            <v-col cols="12" v-if="replyMode">
+            <v-col v-if="replyMode" cols="12">
               <p>
                 <span class="text-caption">{{ $ay.t("MemoToID") }}<br /></span
                 >{{ obj.fromName }}
@@ -86,12 +86,12 @@
             </v-col>
             <v-col cols="12">
               <v-text-field
+                ref="name"
                 v-model="obj.name"
                 :readonly="formState.readOnly"
                 :label="$ay.t('MemoSubject')"
                 :rules="[form().required(this, 'name')]"
                 :error-messages="form().serverErrors(this, 'name')"
-                ref="name"
                 data-cy="name"
                 @input="fieldValueChanged('name')"
               ></v-text-field>
@@ -99,16 +99,16 @@
 
             <v-col cols="12">
               <v-textarea
+                id="notes"
+                ref="notes"
                 v-model="obj.notes"
                 :readonly="formState.readOnly"
                 :label="$ay.t('MemoMessage')"
                 :rules="[form().required(this, 'notes')]"
                 :error-messages="form().serverErrors(this, 'notes')"
-                ref="notes"
                 data-cy="notes"
-                id="notes"
-                @input="fieldValueChanged('notes')"
                 auto-grow
+                @input="fieldValueChanged('notes')"
               ></v-textarea>
             </v-col>
 
@@ -116,9 +116,9 @@
 
             <v-col v-if="form().showMe(this, 'Tags')" cols="12">
               <gz-tag-picker
+                ref="tags"
                 v-model="obj.tags"
                 :readonly="formState.readOnly"
-                ref="tags"
                 data-cy="tags"
                 :error-messages="form().serverErrors(this, 'tags')"
                 @input="fieldValueChanged('tags')"
@@ -127,11 +127,11 @@
 
             <v-col cols="12">
               <gz-custom-fields
+                ref="customFields"
                 v-model="obj.customFields"
                 :form-key="formCustomTemplateKey"
                 :readonly="formState.readOnly"
                 :parent-v-m="this"
-                ref="customFields"
                 data-cy="customFields"
                 :error-messages="form().serverErrors(this, 'customFields')"
                 @input="fieldValueChanged('customFields')"
@@ -140,10 +140,10 @@
 
             <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
               <gz-wiki
-                :aya-type="ayaType"
-                :aya-id="obj.id"
                 ref="wiki"
                 v-model="obj.wiki"
+                :aya-type="ayaType"
+                :aya-id="obj.id"
                 :readonly="formState.readOnly"
                 @input="fieldValueChanged('wiki')"
               ></gz-wiki
@@ -162,63 +162,6 @@ const FORM_KEY = "memo-edit";
 const API_BASE_URL = "memo/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Memo";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Memo);
-      vm.formState.readOnly = false; //can always do things with your own memos
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        vm.composing = false;
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //NEW MEMO, set defaults
-        vm.composing = true;
-        vm.obj.fromId = window.$gz.store.state.userId;
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || LEAVE_OK) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -278,6 +221,63 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Memo);
+      vm.formState.readOnly = false; //can always do things with your own memos
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        vm.composing = false;
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //NEW MEMO, set defaults
+        vm.composing = true;
+        vm.obj.fromId = window.$gz.store.state.userId;
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || LEAVE_OK) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     userSelected(e) {
       const vm = this;
@@ -503,18 +503,21 @@ async function clickHandler(menuItem) {
           name: "memo-edit",
           params: { recordid: 0 }
         });
+        break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Memo,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Memo,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "reply":
         m.vm.replyForward(false);
@@ -632,7 +635,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Memo",
     "MemoSubject",
diff --git a/ayanova/src/views/home-memos.vue b/ayanova/src/views/home-memos.vue
index fb97ce27..f67c6c7c 100644
--- a/ayanova/src/views/home-memos.vue
+++ b/ayanova/src/views/home-memos.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="MemoDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="memosTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -23,14 +23,6 @@
 <script>
 const FORM_KEY = "memo-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Memo);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -39,6 +31,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Memo);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -63,11 +63,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Memo)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Memo)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/home-notifications.vue b/ayanova/src/views/home-notifications.vue
index 5b71f2c6..edad8240 100644
--- a/ayanova/src/views/home-notifications.vue
+++ b/ayanova/src/views/home-notifications.vue
@@ -4,15 +4,15 @@
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-col rows="12">
         <div
-          class="text-center text-h4"
           v-if="obj.length == 0"
+          class="text-center text-h4"
           data-cy="notifications"
         >
           <span>{{ $ay.t("NoData") }}</span>
         </div>
         <v-timeline
-          :dense="$vuetify.breakpoint.smAndDown"
           v-if="obj.length > 0"
+          :dense="$vuetify.breakpoint.smAndDown"
           data-cy="notifications"
         >
           <v-timeline-item
@@ -40,7 +40,7 @@
                     >{{ i.uiayatype }}</v-btn
                   >
                 </template>
-                <div class="mt-4" v-if="i.message">
+                <div v-if="i.message" class="mt-4">
                   <pre>{{ i.message }}</pre>
                 </div>
               </v-card-text>
@@ -48,9 +48,9 @@
               <v-card-actions>
                 <v-btn text @click="deleteItem(i)">{{ $ay.t("Delete") }}</v-btn>
                 <v-btn
+                  v-if="i.eventType != 27"
                   text
                   @click="openSubscription(i)"
-                  v-if="i.eventType != 27"
                   >{{ $ay.t("Open") }}</v-btn
                 >
               </v-card-actions>
@@ -65,23 +65,6 @@
 <script>
 const FORM_KEY = "notifications";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm, false);
-      await vm.getDataFromApi();
-    } catch (err) {
-      window.$gz.errorHandler.handleFormError(err, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       selectLists: {
@@ -102,6 +85,23 @@ export default {
       rights: window.$gz.role.defaultRightsObject()
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm, false);
+      await vm.getDataFromApi();
+    } catch (err) {
+      window.$gz.errorHandler.handleFormError(err, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     openItem(item) {
       window.$gz.eventBus.$emit("openobject", {
@@ -286,7 +286,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -294,7 +294,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "NotifySubscription",
     "Server",
diff --git a/ayanova/src/views/home-notify-direct.vue b/ayanova/src/views/home-notify-direct.vue
index d88f0fb9..12736937 100644
--- a/ayanova/src/views/home-notify-direct.vue
+++ b/ayanova/src/views/home-notify-direct.vue
@@ -6,21 +6,21 @@
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <v-col cols="12">
             <gz-pick-list
+              ref="userPickList"
+              v-model="pickListSelectedUserId"
               :allow-no-selection="false"
               :can-clear="false"
               :aya-type="ayaTypes().User"
               :show-edit-icon="false"
-              v-model="pickListSelectedUserId"
               :label="$ay.t('UserList')"
-              ref="userPickList"
-              @input="addSelected()"
               data-cy="pickListSelectedUserId"
+              @input="addSelected()"
             ></gz-pick-list>
             <template v-for="item in toUsers">
               <v-chip
+                :key="item.id"
                 color="primary"
                 outlined
-                :key="item.id"
                 class="ma-2"
                 close
                 @click:close="closeChip(item)"
@@ -32,9 +32,9 @@
 
           <v-col cols="12">
             <v-textarea
+              ref="message"
               v-model="message"
               :label="$ay.t('MemoMessage')"
-              ref="message"
               :rules="[form().required(this, 'message')]"
               auto-grow
               @input="fieldValueChanged('message')"
@@ -48,6 +48,47 @@
 <script>
 const FORM_KEY = "notify-direct";
 export default {
+  components: {},
+  data() {
+    return {
+      pickListSelectedUserId: null,
+      items: [],
+      toUsers: [],
+      message: null,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.fullRightsObject()
+    };
+  },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        const hasSelection = this.toUsers.length > 0;
+        if (val.dirty && val.valid && !val.readOnly && hasSelection) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -82,47 +123,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  components: {},
-  data() {
-    return {
-      pickListSelectedUserId: null,
-      items: [],
-      toUsers: [],
-      message: null,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.fullRightsObject()
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        const hasSelection = this.toUsers.length > 0;
-        if (val.dirty && val.valid && !val.readOnly && hasSelection) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
-    }
-  },
   methods: {
     updateSave: function() {
       const hasSelection = this.toUsers.length > 0;
@@ -261,7 +261,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   if (vm.$route.params.userIdList != undefined) {
     await preFillSelection(vm);
   }
@@ -271,7 +271,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "DirectNotification",
     "UserList",
diff --git a/ayanova/src/views/home-notify-subscription.vue b/ayanova/src/views/home-notify-subscription.vue
index e6518152..f762d75c 100644
--- a/ayanova/src/views/home-notify-subscription.vue
+++ b/ayanova/src/views/home-notify-subscription.vue
@@ -7,13 +7,13 @@
             <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="eventType"
                 v-model="obj.eventType"
                 :items="selectLists.eventTypes"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('NotifyEventType')"
-                ref="eventType"
                 data-cy="eventType"
                 :rules="[form().integerValid(this, 'eventType')]"
                 :error-messages="form().serverErrors(this, 'eventType')"
@@ -36,17 +36,17 @@
                     <v-list-item-title
                       ><span class="text-subtitle-2">{{ data.item.name }}</span
                       ><v-icon
+                        v-if="data.item.locked"
                         small
                         color="disabled"
                         class="ml-2"
-                        v-if="data.item.locked"
                         >$ayiLock</v-icon
                       >
                       <v-icon
+                        v-if="data.item.completed"
                         color="disabled"
                         class="ml-1"
                         small
-                        v-if="data.item.completed"
                         >$ayiCheckCircle</v-icon
                       ></v-list-item-title
                     >
@@ -64,10 +64,10 @@
 
             <v-col v-if="showDecValue" cols="12" sm="6" lg="4" xl="3">
               <gz-decimal
+                ref="decValue"
                 v-model="obj.decValue"
                 :readonly="formState.readOnly"
                 :label="$ay.t('Total')"
-                ref="decValue"
                 data-cy="decValue"
                 :rules="[
                   form().decimalValid(this, 'decValue'),
@@ -80,27 +80,27 @@
 
             <v-col v-if="showIntegerDecValue" cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="decValue"
                 v-model="obj.decValue"
                 :readonly="formState.readOnly"
                 :clearable="!formState.readOnly"
-                @click:clear="fieldValueChanged('decValue')"
                 :label="$ay.t('UiFieldDataTypesInteger')"
-                ref="decValue"
                 data-cy="decValue"
                 :rules="[form().integerValid(this, 'decValue')]"
                 :error-messages="form().serverErrors(this, 'decValue')"
-                @input="fieldValueChanged('decValue')"
                 type="number"
+                @click:clear="fieldValueChanged('decValue')"
+                @input="fieldValueChanged('decValue')"
               ></v-text-field>
             </v-col>
 
             <v-col v-if="showAgeValue" cols="12" sm="6" lg="4" xl="3">
               <gz-duration-picker
+                ref="ageValue"
                 v-model="obj.ageValue"
                 :readonly="formState.readOnly"
                 :label="$ay.t('Duration')"
                 :show-seconds="false"
-                ref="ageValue"
                 data-cy="ageValue"
                 :error-messages="form().serverErrors(this, 'ageValue')"
                 @input="fieldValueChanged('ageValue')"
@@ -109,13 +109,13 @@
 
             <v-col v-if="showAyaType" cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="ayaType"
                 v-model="obj.ayaType"
                 :items="selectLists.coreAyaTypes"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('AyaType')"
-                ref="ayaType"
                 data-cy="ayaType"
                 :rules="[form().integerValid(this, 'ayaType')]"
                 :error-messages="form().serverErrors(this, 'ayaType')"
@@ -125,11 +125,11 @@
             <!-- :menu-props="{ contentClass: 'cyAyaType' }" -->
             <v-col v-if="showAdvanceNotice" cols="12" sm="6" lg="4" xl="3">
               <gz-duration-picker
+                ref="advanceNotice"
                 v-model="obj.advanceNotice"
                 :readonly="formState.readOnly"
                 :label="$ay.t('NotifySubscriptionPendingSpan')"
                 :show-seconds="false"
-                ref="advanceNotice"
                 data-cy="advanceNotice"
                 :error-messages="form().serverErrors(this, 'advanceNotice')"
                 @input="fieldValueChanged('advanceNotice')"
@@ -138,13 +138,13 @@
 
             <v-col v-if="showDeliveryMethod" cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="deliveryMethod"
                 v-model="obj.deliveryMethod"
                 :items="selectLists.deliveryMethods"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('NotifyDeliveryMethod')"
-                ref="deliveryMethod"
                 data-cy="deliveryMethod"
                 :rules="[form().integerValid(this, 'deliveryMethod')]"
                 :error-messages="form().serverErrors(this, 'deliveryMethod')"
@@ -154,15 +154,15 @@
 
             <v-col v-if="showDeliveryAddress" cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="deliveryAddress"
                 v-model="obj.deliveryAddress"
                 :readonly="formState.readOnly"
                 :clearable="!formState.readOnly"
-                @click:clear="fieldValueChanged('deliveryAddress')"
                 :label="$ay.t('NotifyDeliveryAddress')"
                 :rules="[form().required(this, 'deliveryAddress')]"
                 :error-messages="form().serverErrors(this, 'deliveryAddress')"
-                ref="deliveryAddress"
                 data-cy="deliveryAddress"
+                @click:clear="fieldValueChanged('deliveryAddress')"
                 @input="fieldValueChanged('deliveryAddress')"
               ></v-text-field>
             </v-col>
@@ -174,10 +174,10 @@
 
             <v-col v-if="showTags" cols="12">
               <gz-tag-picker
+                ref="tags"
                 v-model="obj.tags"
                 :label="$ay.t('TaggedWith')"
                 :readonly="formState.readOnly"
-                ref="tags"
                 data-cy="tags"
                 :error-messages="form().serverErrors(this, 'tags')"
                 @input="fieldValueChanged('tags')"
@@ -196,62 +196,6 @@
 const FORM_KEY = "notify-subscription";
 const API_BASE_URL = "notify-subscription/";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.NotifySubscription);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          setDirty = true;
-        } else {
-          //default to their configured email address on new record
-          this.obj.deliveryAddress = this.$store.state.userOptions.emailAddress;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       selectLists: {
@@ -288,34 +232,6 @@ export default {
       ayaType: window.$gz.type.NotifySubscription
     };
   },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   computed: {
     showDeliveryAddress() {
       return this.obj.deliveryMethod == 2;
@@ -407,6 +323,90 @@ export default {
       }
     }
   },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.NotifySubscription);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          setDirty = true;
+        } else {
+          //default to their configured email address on new record
+          this.obj.deliveryAddress = this.$store.state.userOptions.emailAddress;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -648,7 +648,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -656,7 +656,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "NotifySubscriptionPendingSpan",
     "NotifySubscription",
diff --git a/ayanova/src/views/home-notify-subscriptions.vue b/ayanova/src/views/home-notify-subscriptions.vue
index 03069578..e9cca252 100644
--- a/ayanova/src/views/home-notify-subscriptions.vue
+++ b/ayanova/src/views/home-notify-subscriptions.vue
@@ -8,10 +8,10 @@
       :disable-pagination="true"
       :disable-filtering="true"
       hide-default-footer
-      @click:row="rowClick"
       :header-props="{ sortByText: $ay.t('Sort') }"
       data-cy="subsTable"
       :no-data-text="$ay.t('NoData')"
+      @click:row="rowClick"
     >
     </v-data-table>
   </div>
@@ -19,6 +19,20 @@
 <script>
 const FORM_KEY = "notify-subscriptions";
 export default {
+  data() {
+    return {
+      obj: [],
+      headers: [],
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.fullRightsObject() //users always have full rights to their own notification subscriptions
+    };
+  },
   async created() {
     const vm = this;
     try {
@@ -36,20 +50,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      obj: [],
-      headers: [],
-      formState: {
-        ready: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.fullRightsObject() //users always have full rights to their own notification subscriptions
-    };
-  },
   methods: {
     rowClick(item) {
       //nav to item.id
@@ -199,7 +199,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await cacheEnums();
   await createTableHeaders(vm);
 }
@@ -208,7 +208,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "NotifyEventType",
     "ID",
diff --git a/ayanova/src/views/home-password.vue b/ayanova/src/views/home-password.vue
index 7d9a8a5c..ec9e185a 100644
--- a/ayanova/src/views/home-password.vue
+++ b/ayanova/src/views/home-password.vue
@@ -6,30 +6,31 @@
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <v-col cols="12">
             <v-text-field
-              name="username"
               id="username"
+              ref="loginName"
               v-model="obj.loginName"
+              v-focus
+              name="username"
               :readonly="formState.readOnly"
               prepend-icon="$ayiUser"
               autocomplete="off"
               autocorrect="off"
               autocapitalize="off"
               spellcheck="false"
-              v-focus
               :label="$ay.t('UserLogin')"
               :rules="[form().required(this, 'loginName')]"
               :error-messages="form().serverErrors(this, 'loginName')"
-              ref="loginName"
-              @input="fieldValueChanged('loginName')"
               data-cy="loginName"
+              @input="fieldValueChanged('loginName')"
             ></v-text-field>
           </v-col>
 
           <v-col cols="12">
             <v-text-field
-              name="password"
               id="password"
+              ref="oldPassword"
               v-model="obj.oldPassword"
+              name="password"
               :readonly="formState.readOnly"
               :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
               prepend-icon="$ayiKey"
@@ -37,7 +38,6 @@
               :type="reveal ? 'text' : 'password'"
               :rules="[form().required(this, 'oldPassword')]"
               :error-messages="form().serverErrors(this, 'oldPassword')"
-              ref="oldPassword"
               @input="fieldValueChanged('oldPassword')"
               @click:append-outer="reveal = !reveal"
             ></v-text-field>
@@ -45,6 +45,7 @@
 
           <v-col cols="12">
             <v-text-field
+              ref="newPassword"
               v-model="obj.newPassword"
               :readonly="formState.readOnly"
               :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
@@ -53,7 +54,6 @@
               :type="reveal ? 'text' : 'password'"
               :rules="[form().required(this, 'newPassword')]"
               :error-messages="form().serverErrors(this, 'newPassword')"
-              ref="newPassword"
               @input="fieldValueChanged('newPassword')"
               @click:append-outer="reveal = !reveal"
             ></v-text-field>
@@ -61,6 +61,7 @@
 
           <v-col cols="12">
             <v-text-field
+              ref="confirmPassword"
               v-model="obj.confirmPassword"
               :readonly="formState.readOnly"
               :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
@@ -72,7 +73,6 @@
                 form().confirmMatch(this, 'newPassword', 'confirmPassword')
               ]"
               :error-messages="form().serverErrors(this, 'confirmPassword')"
-              ref="confirmPassword"
               @input="fieldValueChanged('confirmPassword')"
               @click:append-outer="reveal = !reveal"
             ></v-text-field>
@@ -86,6 +86,50 @@
 const FORM_KEY = "home-password";
 const API_BASE_URL = "auth/change-password";
 export default {
+  components: {},
+  data() {
+    return {
+      obj: {
+        loginName: null,
+        oldPassword: null,
+        newPassword: null,
+        confirmPassword: null
+      },
+      reveal: true,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.fullRightsObject()
+    };
+  },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        const canSave = val.dirty && val.valid && !val.readOnly;
+        if (canSave) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -135,50 +179,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  components: {},
-  data() {
-    return {
-      obj: {
-        loginName: null,
-        oldPassword: null,
-        newPassword: null,
-        confirmPassword: null
-      },
-      reveal: true,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.fullRightsObject()
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        const canSave = val.dirty && val.valid && !val.readOnly;
-        if (canSave) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
-    }
-  },
   methods: {
     translation() {
       return window.$gz.translation;
@@ -270,15 +270,15 @@ function generateMenu(vm) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "UserLogin",
     "OldPassword",
diff --git a/ayanova/src/views/home-reminder.vue b/ayanova/src/views/home-reminder.vue
index 0d372823..c69a0a29 100644
--- a/ayanova/src/views/home-reminder.vue
+++ b/ayanova/src/views/home-reminder.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('ReminderName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,10 +20,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-time-picker
-              :label="$ay.t('ReminderStartDate')"
-              v-model="obj.startDate"
-              :readonly="formState.readOnly"
               ref="startDate"
+              v-model="obj.startDate"
+              :label="$ay.t('ReminderStartDate')"
+              :readonly="formState.readOnly"
               data-cy="startDate"
               test-id="startDate"
               :error-messages="form().serverErrors(this, 'startDate')"
@@ -33,12 +33,12 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-time-picker
+              ref="stopDate"
+              v-model="obj.stopDate"
               :label="$ay.t('ReminderStopDate')"
               :rules="[form().datePrecedence(this, 'startDate', 'stopDate')]"
               :error-messages="form().serverErrors(this, 'stopDate')"
-              v-model="obj.stopDate"
               :readonly="formState.readOnly"
-              ref="stopDate"
               data-cy="stopDate"
               test-id="stopDate"
               @input="fieldValueChanged('stopDate')"
@@ -47,14 +47,14 @@
 
           <v-col cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('ReminderNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
@@ -70,12 +70,12 @@
               {{ $ay.t("ReminderColor") }}
             </span>
             <v-color-picker
+              ref="color"
               v-model="obj.color"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'color')"
-              ref="color"
               @input="fieldValueChanged('color')"
             ></v-color-picker>
           </v-col>
@@ -83,9 +83,9 @@
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -94,11 +94,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -107,10 +107,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -136,6 +136,65 @@ const FORM_KEY = "reminder-edit";
 const API_BASE_URL = "reminder/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Reminder";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        active: true,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        startDate: null,
+        stopDate: null,
+        userId: window.$gz.store.state.userId,
+        color: "#EBEBEBFF" //very light gray or it will be invisible in white schedule control
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Reminder
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -210,65 +269,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        active: true,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        startDate: null,
-        stopDate: null,
-        userId: window.$gz.store.state.userId,
-        color: "#EBEBEBFF" //very light gray or it will be invisible in white schedule control
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Reminder
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -444,17 +444,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Reminder,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Reminder,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
diff --git a/ayanova/src/views/home-reminders.vue b/ayanova/src/views/home-reminders.vue
index 3d08e96d..7f40f3b4 100644
--- a/ayanova/src/views/home-reminders.vue
+++ b/ayanova/src/views/home-reminders.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="ReminderDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="remindersTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "reminder-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Reminder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Reminder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Reminder)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.Reminder
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/home-reset.vue b/ayanova/src/views/home-reset.vue
index 2df55490..b4067ba1 100644
--- a/ayanova/src/views/home-reset.vue
+++ b/ayanova/src/views/home-reset.vue
@@ -4,9 +4,9 @@
     <v-row v-if="formState.ready">
       <v-col cols="12">
         <v-text-field
-          name="username"
           id="username"
           v-model="obj.loginName"
+          name="username"
           :readonly="true"
           prepend-icon="$ayiUser"
           :label="$ay.t('UserLogin')"
@@ -15,6 +15,7 @@
       </v-col>
       <v-col cols="12">
         <v-text-field
+          ref="newPassword"
           v-model="obj.newPassword"
           :readonly="formState.readOnly"
           :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
@@ -23,7 +24,6 @@
           :type="reveal ? 'text' : 'password'"
           :rules="[form().required(this, 'newPassword')]"
           :error-messages="form().serverErrors(this, 'newPassword')"
-          ref="newPassword"
           @input="fieldValueChanged('newPassword')"
           @click:append-outer="reveal = !reveal"
         ></v-text-field>
@@ -31,6 +31,7 @@
 
       <v-col cols="12">
         <v-text-field
+          ref="confirmPassword"
           v-model="obj.confirmPassword"
           :readonly="formState.readOnly"
           :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
@@ -42,7 +43,6 @@
             form().confirmMatch(this, 'newPassword', 'confirmPassword')
           ]"
           :error-messages="form().serverErrors(this, 'confirmPassword')"
-          ref="confirmPassword"
           @input="fieldValueChanged('confirmPassword')"
           @click:append-outer="reveal = !reveal"
         ></v-text-field>
@@ -52,8 +52,8 @@
           :disabled="!canSave"
           color="primary"
           value="SUBMIT"
-          @click="submit()"
           data-cy="submit"
+          @click="submit()"
           >{{ $ay.t("Save") }}</v-btn
         >
       </v-col>
@@ -63,15 +63,6 @@
 
 <script>
 export default {
-  async created() {
-    const searchParams = new URLSearchParams(window.location.search);
-    //home-reset?rc={ResetCode}&tr={EffectiveTranslationId}&lg={loginName}
-    this.obj.passwordResetCode = searchParams.get("rc");
-    this.obj.loginName = searchParams.get("lg");
-    this.obj.translationId = parseInt(searchParams.get("tr"));
-    await initForm(this);
-    this.formState.ready = true;
-  },
   data() {
     return {
       obj: {
@@ -100,6 +91,15 @@ export default {
       return this.formState.valid && this.formState.dirty;
     }
   },
+  async created() {
+    const searchParams = new URLSearchParams(window.location.search);
+    //home-reset?rc={ResetCode}&tr={EffectiveTranslationId}&lg={loginName}
+    this.obj.passwordResetCode = searchParams.get("rc");
+    this.obj.loginName = searchParams.get("lg");
+    this.obj.translationId = parseInt(searchParams.get("tr"));
+    await initForm(this);
+    this.formState.ready = true;
+  },
   methods: {
     translation() {
       return window.$gz.translation;
diff --git a/ayanova/src/views/home-review.vue b/ayanova/src/views/home-review.vue
index 930e0eec..e24754c4 100644
--- a/ayanova/src/views/home-review.vue
+++ b/ayanova/src/views/home-review.vue
@@ -4,23 +4,23 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <div class="mb-6" v-if="obj.aType">
+        <div v-if="obj.aType" class="mb-6">
           <v-icon large @click="navToTarget()">{{ iconForType }}</v-icon
           ><span class="text-h5" @click="navToTarget()"> {{ name }}</span>
         </div>
         <v-row>
           <v-col v-if="currentUserIsASupervisor" cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="userId"
+              v-model="obj.userId"
               :aya-type="ayaTypes().User"
               :variant="'inside'"
               show-edit-icon
               :allow-no-selection="false"
               :can-clear="false"
-              v-model="obj.userId"
               :readonly="formState.readOnly"
               :label="$ay.t('ReviewUserId')"
               :rules="[form().required(this, 'userId')]"
-              ref="userId"
               data-cy="userId"
               :error-messages="form().serverErrors(this, 'userId')"
               @input="fieldValueChanged('userId')"
@@ -29,14 +29,14 @@
 
           <v-col v-if="currentUserIsASupervisor" cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="assignedByUserId"
+              v-model="obj.assignedByUserId"
               :aya-type="ayaTypes().User"
               :variant="'inside'"
               show-edit-icon
-              v-model="obj.assignedByUserId"
               readonly
               :label="$ay.t('ReviewAssignedByUserId')"
               :rules="[form().required(this, 'assignedByUserId')]"
-              ref="assignedByUserId"
               data-cy="assignedByUserId"
               :error-messages="form().serverErrors(this, 'assignedByUserId')"
               @input="fieldValueChanged('assignedByUserId')"
@@ -44,6 +44,7 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="
                 formState.readOnly ||
@@ -52,7 +53,6 @@
               :label="$ay.t('ReviewName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -60,14 +60,14 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-time-picker
+              ref="reviewDate"
+              v-model="obj.reviewDate"
               :label="$ay.t('ReviewDate')"
               :rules="[form().required(this, 'reviewDate')]"
-              v-model="obj.reviewDate"
               :readonly="
                 formState.readOnly ||
                   (!selfAssigned && !currentUserIsASupervisor)
               "
-              ref="reviewDate"
               data-cy="reviewDate"
               :error-messages="form().serverErrors(this, 'reviewDate')"
               @input="fieldValueChanged('reviewDate')"
@@ -75,6 +75,7 @@
           </v-col>
           <v-col cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="
                 formState.readOnly ||
@@ -82,19 +83,18 @@
               "
               :label="$ay.t('ReviewNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-time-picker
+              ref="completedDate"
+              v-model="obj.completedDate"
               :label="$ay.t('ReviewCompletedDate')"
               :error-messages="form().serverErrors(this, 'completedDate')"
-              v-model="obj.completedDate"
               :readonly="formState.readOnly"
-              ref="completedDate"
               data-cy="completedDate"
               @input="fieldValueChanged('completedDate')"
             ></gz-date-time-picker>
@@ -102,14 +102,14 @@
 
           <v-col cols="12">
             <v-textarea
+              ref="completionNotes"
               v-model="obj.completionNotes"
               :readonly="formState.readOnly"
               :label="$ay.t('ReviewCompletionNotes')"
               :error-messages="form().serverErrors(this, 'completionNotes')"
-              ref="completionNotes"
               data-cy="completionNotes"
-              @input="fieldValueChanged('completionNotes')"
               auto-grow
+              @input="fieldValueChanged('completionNotes')"
             ></v-textarea>
           </v-col>
 
@@ -117,9 +117,9 @@
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -128,11 +128,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -141,10 +141,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -171,6 +171,94 @@ const API_BASE_URL = "review/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Review";
 
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        reviewDate: null,
+        completedDate: null,
+        completionNotes: null,
+        userId: window.$gz.store.state.userId,
+        assignedByUserId: window.$gz.store.state.userId,
+        objectId: null,
+        aType: null,
+        overDue: false
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Review,
+      currentUserIsASupervisor: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdmin,
+        window.$gz.role.AUTHORIZATION_ROLES.Service,
+        window.$gz.role.AUTHORIZATION_ROLES.Inventory,
+        window.$gz.role.AUTHORIZATION_ROLES.Sales,
+        window.$gz.role.AUTHORIZATION_ROLES.Accounting
+      ]),
+      name: null
+    };
+  },
+  computed: {
+    selfAssigned: function() {
+      return this.obj.userId == this.obj.assignedByUserId;
+    },
+
+    iconForType() {
+      return window.$gz.util.iconForType(this.obj.aType);
+    },
+    hasSupervisorRole: function() {
+      return window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdmin,
+        window.$gz.role.AUTHORIZATION_ROLES.Service,
+        window.$gz.role.AUTHORIZATION_ROLES.Inventory,
+        window.$gz.role.AUTHORIZATION_ROLES.Sales,
+        window.$gz.role.AUTHORIZATION_ROLES.Accounting
+      ]);
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -241,94 +329,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        reviewDate: null,
-        completedDate: null,
-        completionNotes: null,
-        userId: window.$gz.store.state.userId,
-        assignedByUserId: window.$gz.store.state.userId,
-        objectId: null,
-        aType: null,
-        overDue: false
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Review,
-      currentUserIsASupervisor: window.$gz.role.hasRole([
-        window.$gz.role.AUTHORIZATION_ROLES.BizAdmin,
-        window.$gz.role.AUTHORIZATION_ROLES.Service,
-        window.$gz.role.AUTHORIZATION_ROLES.Inventory,
-        window.$gz.role.AUTHORIZATION_ROLES.Sales,
-        window.$gz.role.AUTHORIZATION_ROLES.Accounting
-      ]),
-      name: null
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    selfAssigned: function() {
-      return this.obj.userId == this.obj.assignedByUserId;
-    },
-
-    iconForType() {
-      return window.$gz.util.iconForType(this.obj.aType);
-    },
-    hasSupervisorRole: function() {
-      return window.$gz.role.hasRole([
-        window.$gz.role.AUTHORIZATION_ROLES.BizAdmin,
-        window.$gz.role.AUTHORIZATION_ROLES.Service,
-        window.$gz.role.AUTHORIZATION_ROLES.Inventory,
-        window.$gz.role.AUTHORIZATION_ROLES.Sales,
-        window.$gz.role.AUTHORIZATION_ROLES.Accounting
-      ]);
-    }
-  },
   methods: {
     navToTarget: function() {
       window.$gz.eventBus.$emit("openobject", {
@@ -518,17 +518,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Review,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Review,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
@@ -628,7 +630,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -636,7 +638,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Review",
     "ReviewName",
diff --git a/ayanova/src/views/home-reviews.vue b/ayanova/src/views/home-reviews.vue
index 8ec4ebf9..738d0bc0 100644
--- a/ayanova/src/views/home-reviews.vue
+++ b/ayanova/src/views/home-reviews.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="$ay.ayt().Review"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -14,9 +14,9 @@
       :client-criteria="clientCriteria"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="reviewsTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,18 @@
 <script>
 const FORM_KEY = "review-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aType: null,
+      name: null
+    };
+  },
   async created() {
     const vm = this;
     vm.rights = window.$gz.role.getRights(window.$gz.type.Review);
@@ -48,18 +60,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -94,11 +94,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Review)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Review)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue
index 41bf1ff4..711f3a20 100644
--- a/ayanova/src/views/home-schedule.vue
+++ b/ayanova/src/views/home-schedule.vue
@@ -7,8 +7,8 @@
           text
           :small="isXS"
           :large="issmAndUp"
-          @click="setToday"
           data-cy="btnTodayHomeSchedule"
+          @click="setToday"
         >
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
@@ -76,8 +76,8 @@
     <v-sheet :height="calendarHeight">
       <v-calendar
         ref="calendar"
-        data-cy="calendar"
         v-model="focus"
+        data-cy="calendar"
         color="primary"
         :events="events"
         :event-color="getEventColor"
@@ -86,6 +86,7 @@
         :event-more-text="$ay.t('More')"
         :first-time="formUserOptions.firstTime"
         :weekdays="weekdays"
+        event-overlap-mode="column"
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
@@ -96,7 +97,6 @@
         @mouseup:day="endDragExtend"
         @mouseup:time="endDragExtend"
         @mouseleave.native="cancelDrag"
-        event-overlap-mode="column"
       >
         <template v-slot:event="{ event, timed, eventSummary }">
           <div class="v-event-draggable">
@@ -126,7 +126,7 @@
       <!-- NEW ITEM DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="360px" persistent v-model="newItemDialog">
+          <v-dialog v-model="newItemDialog" max-width="360px" persistent>
             <v-card>
               <v-card-title>{{ $ay.t("New") }}</v-card-title>
               <v-card-text>
@@ -146,7 +146,7 @@
                 </v-col>
               </v-card-text>
               <v-card-actions>
-                <v-btn text @click="cancelAddNew" color="primary">{{
+                <v-btn text color="primary" @click="cancelAddNew">{{
                   $ay.t("Cancel")
                 }}</v-btn>
               </v-card-actions>
@@ -157,7 +157,7 @@
       <!-- MORE INFO DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="600px" v-model="moreInfoDialog">
+          <v-dialog v-model="moreInfoDialog" max-width="600px">
             <v-card>
               <v-toolbar>
                 <v-btn icon @click="openScheduledItem()">
@@ -193,7 +193,7 @@
                 </template>
                 <!--review -->
                 <template v-if="selectedEvent.type == $ay.ayt().Review">
-                  <div class="mb-1" v-if="evInfo.aType">
+                  <div v-if="evInfo.aType" class="mb-1">
                     <v-icon
                       large
                       color="primary"
@@ -292,14 +292,14 @@
                       >$ayiFlag</v-icon
                     >
                     <v-icon
-                      color="primary"
                       v-if="evInfo.wostatuslocked"
+                      color="primary"
                       class="ml-4"
                       >$ayiLock</v-icon
                     >
                     <v-icon
-                      color="primary"
                       v-if="evInfo.wostatuscompleted"
+                      color="primary"
                       class="ml-4"
                       >$ayiCheckCircle</v-icon
                     >
@@ -355,23 +355,23 @@
     <template>
       <!-- ############## SETTINGS DIALOG #################-->
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="settingsDialog">
+        <v-dialog v-model="settingsDialog" max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("ScheduleOptions") }} </v-card-title>
             <v-card-text>
               <v-row no-gutters>
                 <v-col cols="12" class="mt-2">
                   <gz-time-picker
-                    :label="$ay.t('ScheduleFirstHour')"
                     v-model="tempFirstTime"
+                    :label="$ay.t('ScheduleFirstHour')"
                   ></gz-time-picker>
                 </v-col>
 
                 <v-col cols="12">
                   <GZDaysOfWeek
-                    :label="$ay.t('ExcludeDaysOfWeek')"
-                    v-model="formUserOptions.excludeDaysOfWeek"
                     ref="daysofweek"
+                    v-model="formUserOptions.excludeDaysOfWeek"
+                    :label="$ay.t('ExcludeDaysOfWeek')"
                   ></GZDaysOfWeek>
                 </v-col>
 
@@ -421,15 +421,15 @@
               </v-row>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="settingsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="settingsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer v-if="issmAndUp"></v-spacer>
               <v-btn
                 color="primary"
                 text
-                @click="saveUserOptions()"
                 class="ml-4"
+                @click="saveUserOptions()"
                 >{{ $ay.t("Save") }}</v-btn
               >
             </v-card-actions>
@@ -446,23 +446,6 @@ export default {
   components: {
     GZDaysOfWeek
   },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //----------------------------
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    saveFormSettings(this);
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       focus: "",
@@ -501,6 +484,37 @@ export default {
       lastEnd: null
     };
   },
+  computed: {
+    weekdays() {
+      return window.$gz.util.DaysOfWeekToWeekdays(
+        this.formUserOptions.excludeDaysOfWeek
+      );
+    },
+    isXS() {
+      //console.log(this.$vuetify.breakpoint);
+      return this.$vuetify.breakpoint.xs;
+    },
+    issmAndUp() {
+      return this.$vuetify.breakpoint.smAndUp;
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //----------------------------
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    saveFormSettings(this);
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     async refresh() {
       await this.fetchEvents({ start: null, end: null });
@@ -627,7 +641,6 @@ export default {
             if (res.error) {
               this.formState.serverError = res.error;
               window.$gz.form.setErrorBoxErrors(this);
-            } else {
             }
           } catch (error) {
             window.$gz.errorHandler.handleFormError(error, this);
@@ -916,20 +929,6 @@ export default {
       await this.refresh();
     }
     //eom
-  },
-  computed: {
-    weekdays() {
-      return window.$gz.util.DaysOfWeekToWeekdays(
-        this.formUserOptions.excludeDaysOfWeek
-      );
-    },
-    isXS() {
-      //console.log(this.$vuetify.breakpoint);
-      return this.$vuetify.breakpoint.xs;
-    },
-    issmAndUp() {
-      return this.$vuetify.breakpoint.smAndUp;
-    }
   }
 };
 
@@ -1155,7 +1154,7 @@ async function saveFormUserOptions(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "DateRangeToday",
     "ExcludeDaysOfWeek",
diff --git a/ayanova/src/views/home-search.vue b/ayanova/src/views/home-search.vue
index 52a102b7..40c27a3b 100644
--- a/ayanova/src/views/home-search.vue
+++ b/ayanova/src/views/home-search.vue
@@ -6,13 +6,13 @@
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <v-col cols="12" sm="4" lg="4" xl="3">
             <v-text-field
+              ref="searchPhrase"
               v-model="searchPhrase"
               clearable
               :label="$ay.t('Search')"
-              ref="searchPhrase"
-              @change="getDataFromApi()"
               hint="text, *xt, te*"
               data-cy="phrase"
+              @change="getDataFromApi()"
             ></v-text-field>
           </v-col>
           <v-col cols="12" sm="4" lg="4" xl="3">
@@ -25,7 +25,7 @@
             ></v-select>
           </v-col>
           <v-col cols="12" sm="4" lg="4" xl="3">
-            <v-btn color="primary" @click="getDataFromApi()" value="SEARCH">
+            <v-btn color="primary" value="SEARCH" @click="getDataFromApi()">
               <v-icon data-cy="btnsearch">$ayiSearch</v-icon>
             </v-btn>
           </v-col>
@@ -39,15 +39,15 @@
 
                 <template v-for="item in items">
                   <!-- KEY MUST BE UNIQUE INSIDE v-for OR LIST ITEM GOES SNAKEY -->
-                  <v-subheader :key="'s' + item.index" v-if="item.subheader"
+                  <v-subheader v-if="item.subheader" :key="'s' + item.index"
                     ><v-icon large class="mr-2">{{ item.icon }}</v-icon>
                     <span class="text-h6">{{ item.subheader }}</span>
                   </v-subheader>
 
-                  <v-list-item link :key="item.index">
+                  <v-list-item :key="item.index" link>
                     <v-list-item-content
-                      @click="openItem(item)"
                       :data-cy="'btnopenitem' + item.index"
+                      @click="openItem(item)"
                     >
                       <v-list-item-title v-text="item.name"></v-list-item-title>
                       <v-list-item-subtitle
@@ -94,6 +94,30 @@ export default {
     });
     next();
   },
+  components: {},
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      selectLists: {
+        objectTypes: []
+      },
+      searchPhrase: null,
+      searchAType: 0,
+      items: [],
+      maxResultsReturned: false,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: false,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject()
+    };
+  },
   async created() {
     const vm = this;
     try {
@@ -128,30 +152,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  components: {},
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      selectLists: {
-        objectTypes: []
-      },
-      searchPhrase: null,
-      searchAType: 0,
-      items: [],
-      maxResultsReturned: false,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: false,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject()
-    };
-  },
 
   methods: {
     openItem(item) {
@@ -230,7 +230,7 @@ export default {
         const res = await window.$gz.api.upsert(API_BASE_URL, {
           phrase: vm.searchPhrase,
           nameOnly: false,
-          typeOnly: !!vm.searchAType ? vm.searchAType : 0,
+          typeOnly: vm.searchAType ? vm.searchAType : 0,
           maxResults: MAX_RESULTS
         });
         if (res.error) {
@@ -300,7 +300,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiSearch",
@@ -320,7 +320,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -328,7 +328,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TooManyResults",
     "NoResults",
diff --git a/ayanova/src/views/home-security.vue b/ayanova/src/views/home-security.vue
index 60fd8251..52ab8be2 100644
--- a/ayanova/src/views/home-security.vue
+++ b/ayanova/src/views/home-security.vue
@@ -40,14 +40,14 @@
                   {{ $ay.t("AuthConnectAppManualEntry") }}
                   <span class="text-subtitle-2 ml-2">{{ obj.s }}</span>
                   <v-text-field
-                    class="mt-10"
+                    ref="pin"
                     v-model="pin"
+                    class="mt-10"
                     :label="$ay.t('AuthEnterPin')"
                     :error-messages="form().serverErrors(this, 'pin')"
-                    ref="pin"
-                    @input="fieldValueChanged('pin')"
                     data-cy="tfa"
                     autofocus
+                    @input="fieldValueChanged('pin')"
                     @keyup.enter="authenticate"
                   ></v-text-field>
                 </v-card-text>
@@ -69,6 +69,33 @@
 const FORM_KEY = "security";
 
 export default {
+  components: {},
+  data() {
+    return {
+      obj: {
+        s: null, // = u.TotpSecret,
+        qr: null // = qrCodeImageAsBase64
+      },
+      pin: null,
+      tfaEnabled: window.$gz.store.state.tfaEnabled,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.fullRightsObject()
+    };
+  },
+  computed: {
+    qCode: function() {
+      return `data:image/png;base64,${this.obj.qr}`;
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -102,33 +129,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  components: {},
-  data() {
-    return {
-      obj: {
-        s: null, // = u.TotpSecret,
-        qr: null // = qrCodeImageAsBase64
-      },
-      pin: null,
-      tfaEnabled: window.$gz.store.state.tfaEnabled,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.fullRightsObject()
-    };
-  },
-  computed: {
-    qCode: function() {
-      return `data:image/png;base64,${this.obj.qr}`;
-    }
-  },
   methods: {
     form() {
       return window.$gz.form;
@@ -226,7 +226,7 @@ function clickHandler(menuItem) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiLock",
@@ -243,15 +243,15 @@ function generateMenu(vm) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "AuthConnectAppTitle",
     "AuthConnectAppSubTitle",
diff --git a/ayanova/src/views/home-user-settings.vue b/ayanova/src/views/home-user-settings.vue
index 40c95cf1..763bd9be 100644
--- a/ayanova/src/views/home-user-settings.vue
+++ b/ayanova/src/views/home-user-settings.vue
@@ -6,13 +6,13 @@
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-select
+              ref="translationId"
               v-model="obj.translationId"
               :items="selectLists.translations"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
               :label="$ay.t('Translation')"
-              ref="translationId"
               :error-messages="form().serverErrors(this, 'translationId')"
               @input="fieldValueChanged('translationId')"
             ></v-select>
@@ -20,13 +20,13 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-email
+              ref="emailAddress"
               v-model="obj.emailAddress"
               :readonly="formState.readOnly"
               :label="$ay.t('UserEmailAddress')"
               :error-messages="form().serverErrors(this, 'emailAddress')"
-              ref="emailAddress"
-              @input="fieldValueChanged('emailAddress')"
               data-cy="emailAddress"
+              @input="fieldValueChanged('emailAddress')"
             ></gz-email>
           </v-col>
           <v-col
@@ -37,10 +37,10 @@
             xl="3"
           >
             <gz-phone
+              ref="phone1"
               v-model="obj.phone1"
               :readonly="formState.readOnly"
               :label="$ay.t('UserPhone1')"
-              ref="phone1"
               data-cy="phone1"
               :error-messages="form().serverErrors(this, 'phone1')"
               @input="fieldValueChanged('phone1')"
@@ -55,10 +55,10 @@
             xl="3"
           >
             <gz-phone
+              ref="phone2"
               v-model="obj.phone2"
               :readonly="formState.readOnly"
               :label="$ay.t('UserPhone2')"
-              ref="phone2"
               data-cy="phone2"
               :error-messages="form().serverErrors(this, 'phone2')"
               @input="fieldValueChanged('phone2')"
@@ -73,10 +73,10 @@
             xl="3"
           >
             <gz-phone
+              ref="phone3"
               v-model="obj.phone3"
               :readonly="formState.readOnly"
               :label="$ay.t('UserPageAddress')"
-              ref="phone3"
               data-cy="phone3"
               :error-messages="form().serverErrors(this, 'phone3')"
               @input="fieldValueChanged('phone3')"
@@ -85,15 +85,15 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="mapUrlTemplate"
               v-model="obj.mapUrlTemplate"
               :readonly="formState.readOnly"
               :label="$ay.t('MapUrlTemplate')"
               :error-messages="form().serverErrors(this, 'mapUrlTemplate')"
-              ref="mapUrlTemplate"
-              @input="fieldValueChanged('mapUrlTemplate')"
               data-cy="mapUrlTemplate"
               :hint="obj.mapUrlTemplate == null ? 'Google maps' : ''"
               persistent-hint
+              @input="fieldValueChanged('mapUrlTemplate')"
             ></v-text-field>
             <v-select
               :items="selectLists.mapUrls"
@@ -104,10 +104,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="hour12"
               v-model="obj.hour12"
               :readonly="formState.readOnly"
               :label="$ay.t('Hour12')"
-              ref="hour12"
               :error-messages="form().serverErrors(this, 'hour12')"
               @change="fieldValueChanged('hour12')"
             ></v-checkbox>
@@ -115,17 +115,18 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="nativeDateTimeInput"
               v-model="nativeDateTimeInput"
               :readonly="formState.readOnly"
               :label="$ay.t('NativeDateTimeInput')"
-              ref="nativeDateTimeInput"
-              @change="nativeDateTimeInputChanged()"
               data-cy="nativeDateTimeInput"
+              @change="nativeDateTimeInputChanged()"
             ></v-checkbox>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="currencyName"
               v-model="obj.currencyName"
               :hint="
                 obj.currencyName == null || obj.currencyName == ''
@@ -136,39 +137,38 @@
               :readonly="formState.readOnly"
               :label="$ay.t('CurrencyCode')"
               :error-messages="form().serverErrors(this, 'currencyName')"
-              ref="currencyName"
-              @input="fieldValueChanged('currencyName')"
               append-outer-icon="$ayiQuestionCircle"
+              @input="fieldValueChanged('currencyName')"
               @click:append-outer="goHelp()"
             ></v-text-field>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="languageOverride"
               v-model="obj.languageOverride"
               :readonly="formState.readOnly"
               :label="$ay.t('LanguageCode')"
               :error-messages="form().serverErrors(this, 'languageOverride')"
-              ref="languageOverride"
-              @input="fieldValueChanged('languageOverride')"
               :hint="locale().getResolvedLanguage()"
               persistent-hint
               append-outer-icon="$ayiQuestionCircle"
+              @input="fieldValueChanged('languageOverride')"
               @click:append-outer="goHelp()"
             ></v-text-field>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="timeZoneOverride"
               v-model="obj.timeZoneOverride"
               :readonly="formState.readOnly"
               :label="$ay.t('TimeZone')"
               :error-messages="form().serverErrors(this, 'timeZoneOverride')"
-              ref="timeZoneOverride"
-              @input="fieldValueChanged('timeZoneOverride')"
               :hint="locale().getResolvedTimeZoneName()"
               persistent-hint
               append-outer-icon="$ayiQuestionCircle"
+              @input="fieldValueChanged('timeZoneOverride')"
               @click:append-outer="goHelp()"
             ></v-text-field>
           </v-col>
@@ -198,40 +198,6 @@ const FORM_KEY = "user-settings";
 const API_BASE_URL = "user-option/";
 const FORM_CUSTOM_TEMPLATE_KEY = "UserOptions";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-
-      vm.rights = window.$gz.role.fullRightsObject();
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //UserOptions never creates a new one so this code is a little different than other forms
-      //NOTE: FOR NOW GOING TO ASSUME THIS FORM WILL ONLY EVER BE USED TO EDIT *CURRENT* USER'S USEROPTIONS
-      //SO NOT FOR EDITING OTHER USERS, WILL ASSUME THE USER EDITOR FORM FOR MANAGEMENT WILL HAVE A COMPACT VERSION
-      //OF THESE SAME FIELDS FOR THAT PURPOSE
-      //SO ALWAYS USER CURRENT LOGGED IN USER ID FOR THIS
-      //id 0 means create or duplicate to new but thats not applicable here
-      await vm.getDataFromApi();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -269,6 +235,11 @@ export default {
       rights: window.$gz.role.defaultRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -285,11 +256,40 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.fullRightsObject();
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //UserOptions never creates a new one so this code is a little different than other forms
+      //NOTE: FOR NOW GOING TO ASSUME THIS FORM WILL ONLY EVER BE USED TO EDIT *CURRENT* USER'S USEROPTIONS
+      //SO NOT FOR EDITING OTHER USERS, WILL ASSUME THE USER EDITOR FORM FOR MANAGEMENT WILL HAVE A COMPACT VERSION
+      //OF THESE SAME FIELDS FOR THAT PURPOSE
+      //SO ALWAYS USER CURRENT LOGGED IN USER ID FOR THIS
+      //id 0 means create or duplicate to new but thats not applicable here
+      await vm.getDataFromApi();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     goHelp() {
       window.open(
@@ -493,7 +493,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -501,7 +501,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "CurrencyCode",
     "LanguageCode",
diff --git a/ayanova/src/views/inv-part-adjustment.vue b/ayanova/src/views/inv-part-adjustment.vue
index 8710099e..2b8232e3 100644
--- a/ayanova/src/views/inv-part-adjustment.vue
+++ b/ayanova/src/views/inv-part-adjustment.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="description"
               v-model="obj.description"
               :readonly="formState.readOnly"
               :label="$ay.t('PartInventoryTransactionDescription')"
               :rules="[form().required(this, 'description')]"
               :error-messages="form().serverErrors(this, 'description')"
-              ref="description"
               data-cy="description"
               @input="fieldValueChanged('description')"
             ></v-text-field>
@@ -20,13 +20,13 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="partId"
+              v-model="obj.partId"
               :aya-type="ayaTypes().Part"
               show-edit-icon
               :allow-no-selection="false"
-              v-model="obj.partId"
               :readonly="formState.readOnly"
               :label="$ay.t('Part')"
-              ref="partId"
               data-cy="partId"
               :error-messages="form().serverErrors(this, 'partId')"
               @input="fieldValueChanged('partId')"
@@ -34,13 +34,13 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="partWarehouseId"
+              v-model="obj.partWarehouseId"
               :aya-type="ayaTypes().PartWarehouse"
               show-edit-icon
               :allow-no-selection="false"
-              v-model="obj.partWarehouseId"
               :readonly="formState.readOnly"
               :label="$ay.t('PartWarehouse')"
-              ref="partWarehouseId"
               data-cy="partWarehouseId"
               :error-messages="form().serverErrors(this, 'partWarehouseId')"
               @input="fieldValueChanged('partWarehouseId')"
@@ -48,10 +48,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-decimal
+              ref="quantity"
               v-model="obj.quantity"
               :readonly="formState.readOnly"
               :label="$ay.t('PartInventoryTransactionQuantity')"
-              ref="quantity"
               data-cy="quantity"
               :rules="[
                 form().decimalValid(this, 'quantity'),
@@ -76,47 +76,6 @@
 const FORM_KEY = "inv-part-adjustment";
 const API_BASE_URL = "part-inventory/";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.obj.partId = window.$gz.util.stringToIntOrNull(
-        vm.$route.params.partId
-      );
-      vm.obj.partWarehouseId = window.$gz.util.stringToIntOrNull(
-        vm.$route.params.partWarehouseId
-      );
-      vm.rights = window.$gz.role.getRights(window.$gz.type.PartInventory);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: false,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       obj: {
@@ -171,6 +130,47 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.obj.partId = window.$gz.util.stringToIntOrNull(
+        vm.$route.params.partId
+      );
+      vm.obj.partWarehouseId = window.$gz.util.stringToIntOrNull(
+        vm.$route.params.partWarehouseId
+      );
+      vm.rights = window.$gz.role.getRights(window.$gz.type.PartInventory);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: false,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -287,15 +287,15 @@ function generateMenu(vm) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PartInventoryAdjustment",
     "PartInventoryTransactionDescription",
diff --git a/ayanova/src/views/inv-part-assemblies.vue b/ayanova/src/views/inv-part-assemblies.vue
index b72fcbe4..78dd740a 100644
--- a/ayanova/src/views/inv-part-assemblies.vue
+++ b/ayanova/src/views/inv-part-assemblies.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PartAssemblyDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="partassemblysTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "partassembly-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PartAssembly);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PartAssembly);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PartAssembly
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PartAssembly
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/inv-part-assembly.vue b/ayanova/src/views/inv-part-assembly.vue
index f708d772..249f44ab 100644
--- a/ayanova/src/views/inv-part-assembly.vue
+++ b/ayanova/src/views/inv-part-assembly.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('PartAssemblyName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -56,8 +56,8 @@
                         v-if="!formState.readOnly"
                         large
                         icon
-                        @click="editItem(index)"
                         class="ml-4"
+                        @click="editItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -72,10 +72,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -84,22 +84,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('PartAssemblyNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -108,11 +108,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -121,10 +121,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -155,14 +155,14 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="userid"
+                    v-model="obj.items[editItemIndex].partId"
                     :allow-no-selection="false"
                     :can-clear="false"
                     :aya-type="ayaTypes().Part"
                     show-edit-icon
-                    v-model="obj.items[editItemIndex].partId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Part')"
-                    ref="userid"
                     data-cy="userid"
                     :rules="[
                       form().integerValid(this, 'Items.PartId'),
@@ -174,17 +174,17 @@
                         `Items[${editItemIndex}].PartId`
                       )
                     "
-                    @input="fieldValueChanged(`Items[${editItemIndex}].PartId`)"
                     :name.sync="obj.items[editItemIndex].partNameViz"
+                    @input="fieldValueChanged(`Items[${editItemIndex}].PartId`)"
                   ></gz-pick-list>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-decimal
+                    ref="Items.Quantity"
                     v-model="obj.items[editItemIndex].quantity"
                     :readonly="formState.readOnly"
                     :label="$ay.t('WorkOrderItemPartQuantity')"
-                    ref="Items.Quantity"
                     data-cy="Items.Quantity"
                     :rules="[
                       form().decimalValid(this, 'Items.Quantity'),
@@ -213,16 +213,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addItem()"
                   class="ml-4"
+                  @click="addItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editItemDialog = false"
                   class="ml-4"
+                  @click="editItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -268,65 +268,6 @@ const FORM_KEY = "part-assembly-edit";
 const API_BASE_URL = "part-assembly/";
 const FORM_CUSTOM_TEMPLATE_KEY = "PartAssembly";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.PartAssembly);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          this.obj.items.forEach(z => (z.id = 0));
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -386,6 +327,65 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.PartAssembly);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          this.obj.items.forEach(z => (z.id = 0));
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     addItem: function() {
       this.editItemIndex =
@@ -602,17 +602,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.PartAssembly,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.PartAssembly,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
 
       default:
@@ -709,7 +711,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -717,7 +719,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PartAssembly",
     "PartAssemblyName",
diff --git a/ayanova/src/views/inv-part-inventory-transactions.vue b/ayanova/src/views/inv-part-inventory-transactions.vue
index efac6ebc..7edc43f8 100644
--- a/ayanova/src/views/inv-part-inventory-transactions.vue
+++ b/ayanova/src/views/inv-part-inventory-transactions.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="$ay.ayt().PartInventory"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -14,9 +14,9 @@
       :show-select="rights.read"
       :reload="reload"
       :client-criteria="clientCriteria"
-      @selection-change="handleSelected"
       data-cy="partInventoryTransactionsTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,17 @@
 <script>
 const FORM_KEY = "part-inventory-transaction-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      objectId: null,
+      aType: window.$gz.type.PartInventory,
+      selectedItems: [],
+      clientCriteria: undefined,
+      preFilterMode: null,
+      reload: false
+    };
+  },
   created() {
     const vm = this;
     vm.rights = window.$gz.role.getRights(window.$gz.type.PartInventory);
@@ -57,17 +68,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      objectId: null,
-      aType: window.$gz.type.PartInventory,
-      selectedItems: [],
-      clientCriteria: undefined,
-      preFilterMode: null,
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -91,28 +91,32 @@ async function clickHandler(menuItem) {
   if (m.owner == FORM_KEY && !m.disabled) {
     switch (m.key) {
       case "new":
-        let partId = null;
-        let partWarehouseId = null;
-        if (m.vm.preFilterMode) {
-          if (m.vm.preFilterMode.ayatype == window.$gz.type.Part) {
-            partId = m.vm.preFilterMode.id;
-          } else {
-            partWarehouseId = m.vm.preFilterMode.id;
+        {
+          let partId = null;
+          let partWarehouseId = null;
+          if (m.vm.preFilterMode) {
+            if (m.vm.preFilterMode.ayatype == window.$gz.type.Part) {
+              partId = m.vm.preFilterMode.id;
+            } else {
+              partWarehouseId = m.vm.preFilterMode.id;
+            }
           }
+          m.vm.$router.push({
+            name: "inv-part-adjustment",
+            params: { partId: partId, partWarehouseId: partWarehouseId }
+          });
         }
-        m.vm.$router.push({
-          name: "inv-part-adjustment",
-          params: { partId: partId, partWarehouseId: partWarehouseId }
-        });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PartInventory
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PartInventory
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/inv-part-inventory.vue b/ayanova/src/views/inv-part-inventory.vue
index 2865f31b..4c014867 100644
--- a/ayanova/src/views/inv-part-inventory.vue
+++ b/ayanova/src/views/inv-part-inventory.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -14,9 +14,9 @@
       :show-select="rights.read"
       :reload="reload"
       :client-criteria="clientCriteria"
-      @selection-change="handleSelected"
       data-cy="partInventoryTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,16 @@
 <script>
 const FORM_KEY = "part-inventory-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PartInventoryDataList,
+      selectedItems: [],
+      clientCriteria: undefined,
+      preFilterMode: null,
+      reload: false
+    };
+  },
   created() {
     const vm = this;
     vm.rights = window.$gz.role.getRights(window.$gz.type.PartInventory);
@@ -57,16 +67,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PartInventoryDataList,
-      selectedItems: [],
-      clientCriteria: undefined,
-      preFilterMode: null,
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PartInventoryDataList
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PartInventoryDataList
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/inv-part-requests.vue b/ayanova/src/views/inv-part-requests.vue
index f1d55b28..5c7d2f19 100644
--- a/ayanova/src/views/inv-part-requests.vue
+++ b/ayanova/src/views/inv-part-requests.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -14,9 +14,9 @@
       :show-select="rights.read"
       :reload="reload"
       :client-criteria="clientCriteria"
-      @selection-change="handleSelected"
       data-cy="partInventoryRequestTable"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,16 @@
 <script>
 const FORM_KEY = "part-inventory-request-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PartInventoryRequestDataList,
+      selectedItems: [],
+      clientCriteria: undefined,
+      preFilterMode: null,
+      reload: false
+    };
+  },
   created() {
     const vm = this;
     vm.rights = window.$gz.role.getRights(
@@ -59,16 +69,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PartInventoryRequestDataList,
-      selectedItems: [],
-      clientCriteria: undefined,
-      preFilterMode: null,
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -92,13 +92,15 @@ async function clickHandler(menuItem) {
   if (m.owner == FORM_KEY && !m.disabled) {
     switch (m.key) {
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PartInventoryRequestDataList
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PartInventoryRequestDataList
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/inv-part-serials.vue b/ayanova/src/views/inv-part-serials.vue
index fe81b3c9..f1e876d8 100644
--- a/ayanova/src/views/inv-part-serials.vue
+++ b/ayanova/src/views/inv-part-serials.vue
@@ -7,23 +7,23 @@
         <v-row>
           <v-col cols="12">
             <gz-pick-list
-              readonly
+              ref="selectedPartId"
               v-model="selectedPartId"
+              readonly
               :aya-type="ayaTypes().Part"
               show-edit-icon
               :label="$ay.t('Part')"
-              ref="selectedPartId"
               data-cy="selectedPartId"
             ></gz-pick-list>
           </v-col>
-          <v-col cols="12" sm="6" v-if="!formState.readOnly">
+          <v-col v-if="!formState.readOnly" cols="12" sm="6">
             <v-textarea
-              outlined
+              ref="newSerial"
               v-model="newSerial"
+              outlined
               :label="$ay.t('Add')"
               clearable
               :rows="$vuetify.breakpoint.xs ? 3 : 10"
-              ref="newSerial"
               data-cy="newSerial"
               append-outer-icon="$ayiPlus"
               @click:append-outer="addItem()"
@@ -66,6 +66,44 @@
 const FORM_KEY = "inv-part-serials";
 const FORM_CUSTOM_TEMPLATE_KEY = "inv-part-serials";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        name: null
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Part,
+      selectedPartId: Number(this.$route.params.recordid),
+      newSerial: null
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -105,44 +143,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        name: null
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Part,
-      selectedPartId: Number(this.$route.params.recordid),
-      newSerial: null
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     sortedList: function() {
       if (this.obj == null || this.obj.length == 0) {
@@ -305,15 +305,15 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PartSerialNumbersAvailable"
   ]);
diff --git a/ayanova/src/views/inv-part-stock-levels.vue b/ayanova/src/views/inv-part-stock-levels.vue
index f55bd625..bc8be602 100644
--- a/ayanova/src/views/inv-part-stock-levels.vue
+++ b/ayanova/src/views/inv-part-stock-levels.vue
@@ -7,22 +7,22 @@
         <v-row>
           <v-col cols="12">
             <gz-pick-list
-              readonly
+              ref="selectedPartId"
               v-model="selectedPartId"
+              readonly
               :aya-type="ayaTypes().Part"
               show-edit-icon
               :label="$ay.t('Part')"
-              ref="selectedPartId"
               data-cy="selectedPartId"
             ></gz-pick-list>
           </v-col>
           <v-col cols="12">
             <gz-pick-list
+              ref="partWarehouseId"
               v-model="selectedPartWarehouseId"
               :aya-type="ayaTypes().PartWarehouse"
               show-edit-icon
               :label="$ay.t('PartSerialWarehouseID')"
-              ref="partWarehouseId"
               data-cy="partWarehouseId"
               @input="addItem()"
             ></gz-pick-list>
@@ -84,6 +84,41 @@
 <script>
 const FORM_KEY = "inv-part-stock-levels";
 export default {
+  data() {
+    return {
+      obj: [],
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Part,
+      selectedPartId: Number(this.$route.params.recordid),
+      selectedPartWarehouseId: null,
+      minimumQuantity: 1
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -123,41 +158,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      obj: [],
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Part,
-      selectedPartId: Number(this.$route.params.recordid),
-      selectedPartWarehouseId: null,
-      minimumQuantity: 1
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     sortedList: function() {
       function compare(a, b) {
@@ -359,15 +359,15 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PartStockingLevels",
     "PartByWarehouseInventoryMinStockLevel",
diff --git a/ayanova/src/views/inv-part-warehouse.vue b/ayanova/src/views/inv-part-warehouse.vue
index e8e65ad0..681adc5d 100644
--- a/ayanova/src/views/inv-part-warehouse.vue
+++ b/ayanova/src/views/inv-part-warehouse.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('PartWarehouseName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,11 +20,11 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly || obj.id == 1"
               :disabled="obj.id == 1"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -33,22 +33,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('PartWarehouseNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -57,11 +57,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -70,10 +70,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -99,6 +99,61 @@ const FORM_KEY = "inv-part-warehouse-edit";
 const API_BASE_URL = "part-warehouse/";
 const FORM_CUSTOM_TEMPLATE_KEY = "PartWarehouse";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        active: true,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: []
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.PartWarehouse
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -157,61 +212,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        active: true,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: []
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.PartWarehouse
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -391,17 +391,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.PartWarehouse,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.PartWarehouse,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "PartByWarehouseInventoryList":
         m.vm.$router.push({
@@ -548,7 +550,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -556,7 +558,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PartWarehouse",
     "PartByWarehouseInventoryList",
diff --git a/ayanova/src/views/inv-part-warehouses.vue b/ayanova/src/views/inv-part-warehouses.vue
index d99e7d99..1313d6eb 100644
--- a/ayanova/src/views/inv-part-warehouses.vue
+++ b/ayanova/src/views/inv-part-warehouses.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PartWarehouseDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="partwarehousesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "inv-part-warehouse-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PartWarehouse);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PartWarehouse);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PartWarehouse
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PartWarehouse
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
@@ -131,7 +133,6 @@ function generateMenu(vm) {
     menuOptions.menuItems.push({
       title: lastReport.name,
       notrans: true,
-      notrans: true,
       icon: "$ayiFileAlt",
       key: FORM_KEY + ":report:" + lastReport.id,
       vm: vm
diff --git a/ayanova/src/views/inv-part.vue b/ayanova/src/views/inv-part.vue
index ad728b85..186a1de1 100644
--- a/ayanova/src/views/inv-part.vue
+++ b/ayanova/src/views/inv-part.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('PartName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <v-text-field
+              ref="description"
               v-model="obj.description"
               :readonly="formState.readOnly"
               :label="$ay.t('PartDescription')"
-              ref="description"
               data-cy="description"
               :error-messages="form().serverErrors(this, 'description')"
               @input="fieldValueChanged('description')"
@@ -38,10 +38,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="rateYear"
               v-model="obj.cost"
               :readonly="formState.readOnly"
               :label="$ay.t('PartCost')"
-              ref="rateYear"
               data-cy="rateYear"
               :rules="[
                 form().decimalValid(this, 'cost'),
@@ -54,10 +54,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-currency
+              ref="rateYear"
               v-model="obj.retail"
               :readonly="formState.readOnly"
               :label="$ay.t('PartRetail')"
-              ref="rateYear"
               data-cy="rateYear"
               :rules="[
                 form().decimalValid(this, 'retail'),
@@ -76,14 +76,14 @@
             xl="3"
           >
             <v-combobox
+              ref="unitOfMeasure"
               v-model="obj.unitOfMeasure"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitOfMeasure')"
-              ref="unitOfMeasure"
               data-cy="unitOfMeasure"
               :error-messages="form().serverErrors(this, 'unitOfMeasure')"
-              @input="fieldValueChanged('unitOfMeasure')"
               :items="selectLists.priorUnits"
+              @input="fieldValueChanged('unitOfMeasure')"
             ></v-combobox>
           </v-col>
 
@@ -95,10 +95,10 @@
             xl="3"
           >
             <v-text-field
+              ref="upc"
               v-model="obj.upc"
               :readonly="formState.readOnly"
               :label="$ay.t('PartUPC')"
-              ref="upc"
               data-cy="upc"
               :error-messages="form().serverErrors(this, 'upc')"
               @input="fieldValueChanged('upc')"
@@ -113,12 +113,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="manufacturerId"
+              v-model="obj.manufacturerId"
               :aya-type="ayaTypes().Vendor"
               show-edit-icon
-              v-model="obj.manufacturerId"
               :readonly="formState.readOnly"
               :label="$ay.t('PartManufacturerID')"
-              ref="manufacturerId"
               data-cy="manufacturerId"
               :error-messages="form().serverErrors(this, 'manufacturerId')"
               @input="fieldValueChanged('manufacturerId')"
@@ -133,10 +133,10 @@
             xl="3"
           >
             <v-text-field
+              ref="manufacturerNumber"
               v-model="obj.manufacturerNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('PartManufacturerNumber')"
-              ref="manufacturerNumber"
               data-cy="manufacturerNumber"
               :error-messages="form().serverErrors(this, 'manufacturerNumber')"
               @input="fieldValueChanged('manufacturerNumber')"
@@ -151,12 +151,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="wholeSalerId"
+              v-model="obj.wholeSalerId"
               :aya-type="ayaTypes().Vendor"
               show-edit-icon
-              v-model="obj.wholeSalerId"
               :readonly="formState.readOnly"
               :label="$ay.t('PartWholesalerID')"
-              ref="wholeSalerId"
               data-cy="wholeSalerId"
               :error-messages="form().serverErrors(this, 'wholeSalerId')"
               @input="fieldValueChanged('wholeSalerId')"
@@ -171,10 +171,10 @@
             xl="3"
           >
             <v-text-field
+              ref="wholeSalerNumber"
               v-model="obj.wholeSalerNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('PartWholesalerNumber')"
-              ref="wholeSalerNumber"
               data-cy="wholeSalerNumber"
               :error-messages="form().serverErrors(this, 'wholeSalerNumber')"
               @input="fieldValueChanged('wholeSalerNumber')"
@@ -189,12 +189,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="alternativeWholeSalerId"
+              v-model="obj.alternativeWholeSalerId"
               :aya-type="ayaTypes().Vendor"
               show-edit-icon
-              v-model="obj.alternativeWholeSalerId"
               :readonly="formState.readOnly"
               :label="$ay.t('PartAlternativeWholesalerID')"
-              ref="alternativeWholeSalerId"
               data-cy="alternativeWholeSalerId"
               :error-messages="
                 form().serverErrors(this, 'alternativeWholeSalerId')
@@ -211,10 +211,10 @@
             xl="3"
           >
             <v-text-field
+              ref="alternativeWholeSalerNumber"
               v-model="obj.alternativeWholeSalerNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('PartAlternativeWholesalerNumber')"
-              ref="alternativeWholeSalerNumber"
               data-cy="alternativeWholeSalerNumber"
               :error-messages="
                 form().serverErrors(this, 'alternativeWholeSalerNumber')
@@ -226,10 +226,10 @@
           <!-- --------------------------------- -->
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -238,22 +238,22 @@
 
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('PartNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -262,11 +262,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -275,10 +275,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -304,63 +304,6 @@ const FORM_KEY = "inv-part-edit";
 const API_BASE_URL = "part/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Part";
 export default {
-  async created() {
-    const vm = this;
-
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Part);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -373,7 +316,6 @@ export default {
         wiki: null,
         customFields: "{}",
         tags: [],
-        name: null,
         description: null,
         manufacturerId: null,
         manufacturerNumber: null,
@@ -431,6 +373,63 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Part);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -609,17 +608,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Part,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Part,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "PartSerialNumbersAvailable":
         m.vm.$router.push({
@@ -847,7 +848,7 @@ let JUST_DELETED = false;
 //
 async function initForm(vm) {
   await populateSelectionLists(vm);
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -868,7 +869,7 @@ async function populateSelectionLists(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Part",
     "PartByWarehouseInventoryList",
diff --git a/ayanova/src/views/inv-parts.vue b/ayanova/src/views/inv-parts.vue
index b858cbc1..f5107990 100644
--- a/ayanova/src/views/inv-parts.vue
+++ b/ayanova/src/views/inv-parts.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PartDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="partsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "inv-part-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Part);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Part);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Part)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Part)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/inv-purchase-order.vue b/ayanova/src/views/inv-purchase-order.vue
index 82acb7e8..d1d351e9 100644
--- a/ayanova/src/views/inv-purchase-order.vue
+++ b/ayanova/src/views/inv-purchase-order.vue
@@ -7,17 +7,17 @@
       <v-form ref="form">
         <v-row>
           <v-col
+            v-if="obj.serial != 0 && canEditSerial"
             cols="12"
             sm="6"
             lg="4"
             xl="3"
-            v-if="obj.serial != 0 && canEditSerial"
           >
             <v-text-field
+              ref="serial"
               v-model="obj.serial"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderPONumber')"
-              ref="serial"
               data-cy="serial"
               :rules="[
                 form().integerValid(this, 'serial'),
@@ -29,17 +29,17 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="vendorId"
+              v-model="obj.vendorId"
               :aya-type="ayaTypes().Vendor"
               show-edit-icon
               :allow-no-selection="false"
-              v-model="obj.vendorId"
               :readonly="formState.readOnly"
               :label="$ay.t('Vendor')"
-              ref="vendorId"
               data-cy="vendorId"
               :error-messages="form().serverErrors(this, 'vendorId')"
-              @input="fieldValueChanged('vendorId')"
               :rules="[form().required(this, 'vendorId')]"
+              @input="fieldValueChanged('vendorId')"
             ></gz-pick-list>
           </v-col>
           <v-col
@@ -50,13 +50,13 @@
             xl="3"
           >
             <v-select
+              ref="status"
               v-model="obj.status"
               :items="selectLists.status"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderStatus')"
-              ref="status"
               data-cy="status"
               :rules="[form().integerValid(this, 'status')]"
               :error-messages="form().serverErrors(this, 'status')"
@@ -72,10 +72,10 @@
             xl="3"
           >
             <gz-date-time-picker
-              :label="$ay.t('PurchaseOrderOrderedDate')"
-              v-model="obj.orderedDate"
-              :readonly="formState.readOnly"
               ref="orderedDate"
+              v-model="obj.orderedDate"
+              :label="$ay.t('PurchaseOrderOrderedDate')"
+              :readonly="formState.readOnly"
               data-cy="orderedDate"
               :error-messages="form().serverErrors(this, 'orderedDate')"
               @input="fieldValueChanged('orderedDate')"
@@ -90,10 +90,10 @@
             xl="3"
           >
             <gz-date-time-picker
-              :label="$ay.t('PurchaseOrderExpectedReceiveDate')"
-              v-model="obj.expectedReceiveDate"
-              :readonly="formState.readOnly"
               ref="expectedReceiveDate"
+              v-model="obj.expectedReceiveDate"
+              :label="$ay.t('PurchaseOrderExpectedReceiveDate')"
+              :readonly="formState.readOnly"
               data-cy="expectedReceiveDate"
               :error-messages="form().serverErrors(this, 'expectedReceiveDate')"
               @input="fieldValueChanged('expectedReceiveDate')"
@@ -108,10 +108,10 @@
             xl="3"
           >
             <v-text-field
+              ref="referenceNumber"
               v-model="obj.referenceNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderReferenceNumber')"
-              ref="referenceNumber"
               data-cy="referenceNumber"
               :error-messages="form().serverErrors(this, 'referenceNumber')"
               @input="fieldValueChanged('referenceNumber')"
@@ -125,12 +125,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="projectId"
+              v-model="obj.projectId"
               :aya-type="ayaTypes().Project"
               show-edit-icon
-              v-model="obj.projectId"
               :readonly="formState.readOnly"
               :label="$ay.t('Project')"
-              ref="projectId"
               data-cy="projectId"
               :error-messages="form().serverErrors(this, 'projectId')"
               @input="fieldValueChanged('projectId')"
@@ -144,14 +144,14 @@
             xl="3"
           >
             <v-textarea
+              ref="vendorMemo"
               v-model="obj.vendorMemo"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderVendorMemo')"
               :error-messages="form().serverErrors(this, 'vendorMemo')"
-              ref="vendorMemo"
               data-cy="vendorMemo"
-              @input="fieldValueChanged('vendorMemo')"
               auto-grow
+              @input="fieldValueChanged('vendorMemo')"
             ></v-textarea>
           </v-col>
 
@@ -163,10 +163,10 @@
             xl="3"
           >
             <v-text-field
+              ref="text1"
               v-model="obj.text1"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderReceiptText1')"
-              ref="text1"
               data-cy="text1"
               :error-messages="form().serverErrors(this, 'text1')"
               @input="fieldValueChanged('text1')"
@@ -181,10 +181,10 @@
             xl="3"
           >
             <v-text-field
+              ref="text2"
               v-model="obj.text2"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderReceiptText2')"
-              ref="text2"
               data-cy="text2"
               :error-messages="form().serverErrors(this, 'text2')"
               @input="fieldValueChanged('text2')"
@@ -199,12 +199,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="dropShipToCustomerId"
+              v-model="obj.dropShipToCustomerId"
               :aya-type="ayaTypes().Customer"
               show-edit-icon
-              v-model="obj.dropShipToCustomerId"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderDropShipToCustomerID')"
-              ref="dropShipToCustomerId"
               data-cy="dropShipToCustomerId"
               :error-messages="
                 form().serverErrors(this, 'dropShipToCustomerId')
@@ -215,14 +215,14 @@
 
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('PurchaseOrderNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
@@ -252,7 +252,7 @@
               </template>
               <template v-slot:top>
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-subtitle-2">
                         {{ $ay.t("PurchaseOrderItemList") }}</span
@@ -290,8 +290,8 @@
 
                       <v-divider></v-divider>
                       <v-list-item
-                        @click="receiveAll"
                         :disabled="!obj.hasUnreceived"
+                        @click="receiveAll"
                       >
                         <v-list-item-icon>
                           <v-icon>$ayiBoxOpen</v-icon>
@@ -302,7 +302,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("PurchaseOrderItemList") }}</span
                   >
                 </v-col>
@@ -322,9 +322,9 @@
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -333,11 +333,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -346,10 +346,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -399,13 +399,13 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="Items.PartId"
+                    v-model="obj.items[editPoItemIndex].partId"
                     :aya-type="ayaTypes().Part"
                     :allow-no-selection="false"
                     show-edit-icon
-                    v-model="obj.items[editPoItemIndex].partId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Part')"
-                    ref="Items.PartId"
                     data-cy="Items.PartId"
                     :rules="[form().required(this, 'Items.PartId')]"
                     :error-messages="
@@ -422,13 +422,13 @@
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
                     v-if="obj.hasSelectableWarehouses"
+                    ref="Items.PartWarehouseId"
+                    v-model="obj.items[editPoItemIndex].partWarehouseId"
                     :aya-type="ayaTypes().PartWarehouse"
                     :allow-no-selection="false"
                     show-edit-icon
-                    v-model="obj.items[editPoItemIndex].partWarehouseId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('PartWarehouse')"
-                    ref="Items.PartWarehouseId"
                     data-cy="Items.PartWarehouseId"
                     :rules="[form().required(this, 'Items.PartWarehouseId')]"
                     :error-messages="
@@ -446,6 +446,7 @@
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-decimal
+                    ref="Items.QuantityOrdered"
                     v-model="obj.items[editPoItemIndex].quantityOrdered"
                     :readonly="
                       formState.readOnly ||
@@ -453,7 +454,6 @@
                           null
                     "
                     :label="$ay.t('PurchaseOrderItemQuantityOrdered')"
-                    ref="Items.QuantityOrdered"
                     data-cy="Items.QuantityOrdered"
                     :error-messages="
                       form().serverErrors(
@@ -475,10 +475,10 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-decimal
+                    ref="Items.QuantityReceived"
                     v-model="obj.items[editPoItemIndex].quantityReceived"
                     :readonly="formState.readOnly"
                     :label="$ay.t('PurchaseOrderItemQuantityReceived')"
-                    ref="Items.QuantityReceived"
                     data-cy="Items.QuantityReceived"
                     :error-messages="
                       form().serverErrors(
@@ -506,10 +506,10 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('PurchaseOrderReceiptReceivedDate')"
-                    v-model="obj.items[editPoItemIndex].receivedDate"
-                    :readonly="formState.readOnly"
                     ref="Items.ReceivedDate"
+                    v-model="obj.items[editPoItemIndex].receivedDate"
+                    :label="$ay.t('PurchaseOrderReceiptReceivedDate')"
+                    :readonly="formState.readOnly"
                     :error-messages="
                       form().serverErrors(
                         this,
@@ -526,10 +526,10 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-currency
+                    ref="Items.PurchaseOrderCost"
                     v-model="obj.items[editPoItemIndex].purchaseOrderCost"
                     :readonly="formState.readOnly"
                     :label="$ay.t('PurchaseOrderItemPurchaseOrderCost')"
-                    ref="Items.PurchaseOrderCost"
                     data-cy="Items.PurchaseOrderCost"
                     :rules="[
                       form().decimalValid(this, 'Items.PurchaseOrderCost'),
@@ -551,16 +551,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-currency
+                    ref="Items.ReceivedCost"
                     v-model="obj.items[editPoItemIndex].receivedCost"
                     :readonly="formState.readOnly"
                     :label="$ay.t('PurchaseOrderReceiptItemReceiptCost')"
                     :append-outer-icon="
                       updatePartCostIcon(obj.items[editPoItemIndex])
                     "
-                    @gz-append-outer="
-                      updatePartCost(obj.items[editPoItemIndex])
-                    "
-                    ref="Items.ReceivedCost"
                     data-cy="Items.ReceivedCost"
                     :rules="[
                       form().decimalValid(this, 'Items.ReceivedCost'),
@@ -572,6 +569,9 @@
                         `Items[${editPoItemIndex}].ReceivedCost`
                       )
                     "
+                    @gz-append-outer="
+                      updatePartCost(obj.items[editPoItemIndex])
+                    "
                     @input="
                       fieldValueChanged(
                         `Items[${editPoItemIndex}].ReceivedCost`
@@ -583,12 +583,12 @@
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
                     v-if="form().showMe(this, 'Items.PurchaseTaxCodeId')"
+                    ref="Items.PurchaseTaxCodeId"
+                    v-model="obj.items[editPoItemIndex].purchaseTaxCodeId"
                     :aya-type="ayaTypes().TaxCode"
                     show-edit-icon
-                    v-model="obj.items[editPoItemIndex].purchaseTaxCodeId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('TaxCode')"
-                    ref="Items.PurchaseTaxCodeId"
                     data-cy="Items.PurchaseTaxCodeId"
                     :error-messages="
                       form().serverErrors(
@@ -612,12 +612,11 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="Items.VendorPartNumber"
                     v-model="obj.items[editPoItemIndex].vendorPartNumber"
                     :readonly="formState.readOnly"
                     :clearable="!formState.readOnly"
-                    @click:clear="fieldValueChanged('Items.VendorPartNumber')"
                     :label="$ay.t('PurchaseOrderItemVendorPartNumber')"
-                    ref="Items.VendorPartNumber"
                     data-cy="Items.VendorPartNumber"
                     :error-messages="
                       form().serverErrors(
@@ -625,6 +624,7 @@
                         `Items[${editPoItemIndex}].VendorPartNumber`
                       )
                     "
+                    @click:clear="fieldValueChanged('Items.VendorPartNumber')"
                     @input="
                       fieldValueChanged(
                         `Items[${editPoItemIndex}].VendorPartNumber`
@@ -635,12 +635,12 @@
 
                 <v-col v-if="form().showMe(this, 'Items.Serials')" cols="12">
                   <v-textarea
-                    outlined
+                    ref="Items.Serials"
                     v-model="obj.items[editPoItemIndex].serials"
+                    outlined
                     :readonly="formState.readOnly"
                     :label="$ay.t('PurchaseOrderItemSerialNumbers')"
                     :rows="$vuetify.breakpoint.xs ? 3 : 5"
-                    ref="Items.Serials"
                     data-cy="Items.Serials"
                     :error-messages="
                       form().serverErrors(
@@ -674,8 +674,8 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="newPOItem()"
                   class="ml-4"
+                  @click="newPOItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
                 <v-btn
@@ -685,16 +685,16 @@
                   "
                   color="blue darken-1"
                   text
-                  @click="receive(obj.items[editPoItemIndex])"
                   class="ml-4"
+                  @click="receive(obj.items[editPoItemIndex])"
                   ><v-icon left> $ayiBoxOpen </v-icon
                   >{{ $ay.t("ReceiveAll") }}</v-btn
                 >
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="submit()"
                   class="ml-4"
+                  @click="submit()"
                   >{{ $ay.t("Save") }}</v-btn
                 >
               </template>
@@ -726,11 +726,11 @@
                     >{{ $ay.t("Close") }}</v-btn
                   >
                   <v-btn
-                    class="mt-4"
                     v-if="
                       obj.items[editPoItemIndex].quantityReceived <
                         obj.items[editPoItemIndex].quantityOrdered
                     "
+                    class="mt-4"
                     color="blue darken-1"
                     block
                     text
@@ -765,10 +765,10 @@
             <v-card-text>
               <v-col cols="12">
                 <v-data-table
+                  v-model="selectedRestocks"
                   :headers="restockHeaderList"
                   :items="restockItemList"
                   item-key="index"
-                  v-model="selectedRestocks"
                   class="elevation-1"
                   disable-pagination
                   disable-filtering
@@ -815,10 +815,10 @@
             <v-card-text>
               <v-col cols="12">
                 <v-data-table
+                  v-model="selectedRequests"
                   :headers="requestHeaderList"
                   :items="requestItemList"
                   item-key="index"
-                  v-model="selectedRequests"
                   class="elevation-1"
                   disable-pagination
                   disable-filtering
@@ -860,73 +860,6 @@ const FORM_KEY = "inv-purchase-order-edit";
 const API_BASE_URL = "purchase-order/";
 const FORM_CUSTOM_TEMPLATE_KEY = "PurchaseOrder";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.PurchaseOrder);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //---------------------------------
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.serial = 0;
-          vm.obj.status = 1; // OpenNotYetOrdered = 1,
-          vm.obj.items.forEach(z => {
-            z.id = 0;
-            z.concurrency = undefined;
-            z.quantityReceived = 0;
-            z.receivedCost = 0;
-            z.receivedDate = null;
-            z.purchaseOrderId = 0;
-            z.workOrderItemPartRequestId = null;
-            z.partRequestedById = null;
-          });
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      //----------------------------
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -983,34 +916,6 @@ export default {
       hour12: window.$gz.locale.getHour12()
     };
   },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   computed: {
     headerList: function() {
       const headers = [];
@@ -1362,6 +1267,101 @@ export default {
       });
     }
   },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.PurchaseOrder);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //---------------------------------
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.serial = 0;
+          vm.obj.status = 1; // OpenNotYetOrdered = 1,
+          vm.obj.items.forEach(z => {
+            z.id = 0;
+            z.concurrency = undefined;
+            z.quantityReceived = 0;
+            z.receivedCost = 0;
+            z.receivedDate = null;
+            z.purchaseOrderId = 0;
+            z.workOrderItemPartRequestId = null;
+            z.partRequestedById = null;
+          });
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      //----------------------------
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     openWOItemPartRequest(item) {
       let requestId = 0;
@@ -1535,7 +1535,7 @@ export default {
       this.editPoItemDialog = true;
       this.formState.dirty = true;
     },
-    deletePoItem: function(item) {
+    deletePoItem: function() {
       this.editPoItemDialog = false;
       this.obj.items.splice(this.editPoItemIndex, 1);
       this.editPoItemIndex = 0;
@@ -1757,17 +1757,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.PurchaseOrder,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.PurchaseOrder,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -1864,7 +1866,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -1883,7 +1885,7 @@ async function populateSelectionLists(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PurchaseOrder",
     "PurchaseOrderPONumber",
diff --git a/ayanova/src/views/inv-purchase-orders.vue b/ayanova/src/views/inv-purchase-orders.vue
index 4aae2995..31a7e032 100644
--- a/ayanova/src/views/inv-purchase-orders.vue
+++ b/ayanova/src/views/inv-purchase-orders.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PurchaseOrderDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="purchaseordersTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "inv-purchaseorder-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PurchaseOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PurchaseOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PurchaseOrder
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PurchaseOrder
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/login.vue b/ayanova/src/views/login.vue
index 1c7e46d4..63bfbfd9 100644
--- a/ayanova/src/views/login.vue
+++ b/ayanova/src/views/login.vue
@@ -12,8 +12,8 @@
               :label="authEnterPin"
               required
               :error-messages="pinError"
-              @keyup.enter="tfaVerify"
               autofocus
+              @keyup.enter="tfaVerify"
             ></v-text-field>
           </v-card-text>
           <v-card-actions>
@@ -56,7 +56,7 @@
             </v-col>
 
             <!-- Small AyaNova logo -->
-            <v-col cols="12" v-if="showSmallBrandLogo()">
+            <v-col v-if="showSmallBrandLogo()" cols="12">
               <v-img
                 :src="require('../assets/logo.svg')"
                 contain
@@ -64,20 +64,20 @@
               ></v-img>
             </v-col>
             <!-- Large AyaNova logo. -->
-            <v-col cols="7" class="ml-16" v-if="showLargeBrandLogo()">
+            <v-col v-if="showLargeBrandLogo()" cols="7" class="ml-16">
               <v-img
                 :src="require('../assets/logo.svg')"
                 contain
                 height="128"
               ></v-img>
             </v-col>
-            <v-col cols="12" md="7" v-if="formState.errorBoxMessage">
+            <v-col v-if="formState.errorBoxMessage" cols="12" md="7">
               <gz-error
                 :error-box-message="formState.errorBoxMessage"
               ></gz-error>
             </v-col>
 
-            <v-col cols="12" md="7" v-if="showEvalUsers == true">
+            <v-col v-if="showEvalUsers == true" cols="12" md="7">
               <v-select
                 v-model="selectedTrialUserId"
                 :items="selectLists.trialUsers"
@@ -85,18 +85,19 @@
                 item-value="l"
                 label="Trial mode example users"
                 prepend-icon="$ayiQuestionCircle"
-                @click:prepend="trialHelpClick"
-                @input="trialUserSelected"
                 return-object
                 data-cy="selecttrialuser"
+                @click:prepend="trialHelpClick"
+                @input="trialUserSelected"
               >
               </v-select>
             </v-col>
             <v-col cols="12" md="7">
               <v-text-field
-                name="username"
                 id="username"
                 v-model="input.username"
+                v-focus
+                name="username"
                 prepend-icon="$ayiUser"
                 autofocus
                 autocomplete="off"
@@ -104,15 +105,14 @@
                 autocapitalize="off"
                 spellcheck="false"
                 :error="errorBadCreds"
-                v-focus
                 @keyup.enter="onEnterUserName"
               ></v-text-field>
             </v-col>
             <v-col cols="12" md="7">
               <v-text-field
-                name="password"
                 id="password"
                 v-model="input.password"
+                name="password"
                 :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
                 prepend-icon="$ayiKey"
                 :type="reveal ? 'text' : 'password'"
@@ -124,9 +124,9 @@
             <v-col cols="12" md="7" mt-1 mb-5>
               <v-btn
                 color="primary"
-                @click="login()"
                 value="LOGIN"
                 :data-cy="`loginbutton${errorBadCreds ? '_failedcreds' : ''}`"
+                @click="login()"
               >
                 <v-icon>$ayiSignIn</v-icon>
               </v-btn>
@@ -153,7 +153,7 @@
           style="text-decoration:none"
           class="primary white--text text-caption"
         >
-          <div style="width: 100%;" class="mx-auto" v-if="showFooterLogo()">
+          <div v-if="showFooterLogo()" style="width: 100%;" class="mx-auto">
             <v-img
               style="margin: 0 auto;"
               :src="require('../assets/logo.svg')"
@@ -337,6 +337,14 @@ export default {
       }
     };
   },
+  computed: {
+    copyright() {
+      return ayaNovaVersion.copyright;
+    },
+    version() {
+      return ayaNovaVersion.version;
+    }
+  },
   async created() {
     const vm = this;
     window.$gz.eventBus.$emit("menu-change", {
@@ -365,14 +373,6 @@ export default {
       //squash it, this isn't critical
     }
   },
-  computed: {
-    copyright() {
-      return ayaNovaVersion.copyright;
-    },
-    version() {
-      return ayaNovaVersion.version;
-    }
-  },
   methods: {
     async tfaVerify() {
       //
diff --git a/ayanova/src/views/nofeaturesavailable.vue b/ayanova/src/views/nofeaturesavailable.vue
index 477d5c0f..e73e882d 100644
--- a/ayanova/src/views/nofeaturesavailable.vue
+++ b/ayanova/src/views/nofeaturesavailable.vue
@@ -3,7 +3,7 @@
     <v-col cols="12">
       <div class="text-center">
         <v-icon color="primary" size="100">$ayiEgg</v-icon>
-        <div data-cy="NFA" class="text-h5 mt-8" v-if="ready">
+        <div v-if="ready" data-cy="NFA" class="text-h5 mt-8">
           {{ $ay.t("NoFeaturesAvailable") }}
         </div>
       </div>
diff --git a/ayanova/src/views/ops-backup.vue b/ayanova/src/views/ops-backup.vue
index f0bd82c0..cb327960 100644
--- a/ayanova/src/views/ops-backup.vue
+++ b/ayanova/src/views/ops-backup.vue
@@ -10,22 +10,22 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-time-picker
+              ref="backupTime"
+              v-model="obj.backupTime"
               :label="$ay.t('BackupTime')"
               :rules="[form().required(this, 'backupTime')]"
               :error-messages="form().serverErrors(this, 'backupTime')"
-              v-model="obj.backupTime"
               :readonly="formState.readOnly"
-              ref="backupTime"
               @input="fieldValueChanged('backupTime')"
             ></gz-time-picker>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="backupAttachments"
               v-model="obj.backupAttachments"
               :readonly="formState.readOnly"
               :label="$ay.t('BackupAttachments')"
-              ref="backupAttachments"
               :error-messages="form().serverErrors(this, 'backupAttachments')"
               @change="fieldValueChanged('backupAttachments')"
             ></v-checkbox>
@@ -33,22 +33,22 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="backupSetsToKeep"
               v-model="obj.backupSetsToKeep"
               :readonly="formState.readOnly"
               :label="$ay.t('BackupSetsToKeep')"
-              ref="backupSetsToKeep"
               :rules="[form().integerValid(this, 'backupSetsToKeep')]"
               :error-messages="form().serverErrors(this, 'backupSetsToKeep')"
-              @input="fieldValueChanged('backupSetsToKeep')"
               type="number"
+              @input="fieldValueChanged('backupSetsToKeep')"
             ></v-text-field>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
             ></v-checkbox>
@@ -58,7 +58,7 @@
           <v-col cols="12" class="mt-6">
             <v-col cols="12">
               <span class="text-h6">{{ $ay.t("BackupFiles") }}</span>
-              <v-btn @click="getBackupStatus" class="mb-6">
+              <v-btn class="mb-6" @click="getBackupStatus">
                 <v-icon>$ayiSync</v-icon>
               </v-btn>
 
@@ -80,7 +80,7 @@
                     $ayiTrashAlt
                   </v-icon>
 
-                  <v-btn icon :href="item.url" v-if="item.url">
+                  <v-btn v-if="item.url" icon :href="item.url">
                     <v-icon small>
                       $ayiFileDownload
                     </v-icon>
@@ -100,35 +100,6 @@
 <script>
 const FORM_KEY = "ops-backup";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Backup);
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-      vm.getBackupStatus();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -160,6 +131,11 @@ export default {
       hour12: window.$gz.locale.getHour12()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -176,11 +152,35 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Backup);
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.getBackupStatus();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     translation() {
       return window.$gz.translation;
@@ -386,7 +386,6 @@ function generateMenu(vm) {
     formData: {
       ayaType: window.$gz.type.Backup
     },
-    formData: {},
     menuItems: []
   };
 
@@ -415,14 +414,14 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await createTableHeaders(vm);
 }
 
 //////////////////////////////////////////////////////////
 //
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "BackupSettings",
     "BackupTime",
diff --git a/ayanova/src/views/ops-jobs.vue b/ayanova/src/views/ops-jobs.vue
index 2bae5fa2..f5650e4b 100644
--- a/ayanova/src/views/ops-jobs.vue
+++ b/ayanova/src/views/ops-jobs.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="formState.ready">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12">
-      <v-btn @click="getDataFromApi" class="mb-6">
+      <v-btn class="mb-6" @click="getDataFromApi">
         <v-icon>$ayiSync</v-icon>
       </v-btn>
       <v-data-table
@@ -30,21 +30,6 @@
 <script>
 const FORM_KEY = "ops-jobs";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.ServerJob);
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: [],
@@ -62,6 +47,21 @@ export default {
       hour12: window.$gz.locale.getHour12()
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.ServerJob);
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
@@ -226,7 +226,7 @@ function clickHandler(menuItem) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await createTableHeaders(vm);
 }
 
@@ -234,7 +234,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "OpsTestJob",
     "TimeStamp",
diff --git a/ayanova/src/views/ops-log.vue b/ayanova/src/views/ops-log.vue
index fe41c1a4..8124f1d5 100644
--- a/ayanova/src/views/ops-log.vue
+++ b/ayanova/src/views/ops-log.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready" v-resize="onResize">
+  <v-row v-if="formState.ready" v-resize="onResize">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12" sm="6" lg="4" xl="3">
       <v-select
@@ -8,10 +8,10 @@
         item-text="logname"
         item-value="logname"
         :label="$ay.t('Log')"
-        @input="logSelected"
         append-outer-icon="$ayiSync"
-        @click:append-outer="getDataFromApi"
         data-cy="selectedLog"
+        @input="logSelected"
+        @click:append-outer="getDataFromApi"
       >
       </v-select>
     </v-col>
@@ -31,20 +31,6 @@
 <script>
 const FORM_KEY = "ops-logs";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm);
-      await vm.getDataFromApi();
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       log: null,
@@ -62,6 +48,20 @@ export default {
       }
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
@@ -199,7 +199,7 @@ function clickHandler(menuItem) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
@@ -207,7 +207,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "OpsTestJob",
     "Log",
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 12ad604d..ecc0cf3a 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/ayanova/src/views/ops-metrics.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready" v-resize="onResize">
+  <v-row v-if="formState.ready" v-resize="onResize">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12" sm="6" lg="4" xl="3">
       <v-select
@@ -8,9 +8,9 @@
         item-text="name"
         item-value="id"
         append-outer-icon="$ayiSync"
+        data-cy="selectedTimePeriod"
         @click:append-outer="getDataFromApi"
         @input="timePeriodChanged"
-        data-cy="selectedTimePeriod"
       ></v-select>
     </v-col>
 
@@ -86,21 +86,6 @@ import relativeDatefilterCalculator from "../api/relative-date-filter-calculator
 import Palette from "../api/palette";
 const FORM_KEY = "ops-metrics";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm);
-      await vm.getDataFromApi();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       storage: { isnew: true },
@@ -145,112 +130,6 @@ export default {
       }
     };
   },
-
-  methods: {
-    onResize() {
-      let breakPoint = "xl";
-      if (window.innerWidth < 1904) {
-        breakPoint = "lg";
-      }
-      if (window.innerWidth < 1264) {
-        breakPoint = "md";
-      }
-      if (window.innerWidth < 960) {
-        breakPoint = "sm";
-      }
-      if (window.innerWidth < 600) {
-        breakPoint = "xs";
-      }
-      if (breakPoint != this.lastFetchBreakPoint) {
-        this.getDataFromApi(breakPoint);
-      }
-    },
-    timePeriodChanged: function() {
-      this.getDataFromApi();
-    },
-    tabChanged: function(tab) {
-      const vm = this;
-      if (vm[tabIndexToRoute(vm.tab)].isnew) {
-        vm.getDataFromApi();
-      }
-    },
-    async getDataFromApi(breakPoint) {
-      const vm = this;
-      if (vm.formState.loading) {
-        return;
-      }
-      const filterDates = relativeDatefilterCalculator.tokenToDates(
-        vm.selectedTimePeriod
-      );
-      vm.formState.loading = true;
-      if (breakPoint == null) {
-        breakPoint = vm.$vuetify.breakpoint.name;
-      }
-      //##########################################################################################################################################
-      //Visually, 200 points max looks best on full screen widths and 40 on galaxy s9 minimum standard
-      //there is no relevant loss of fidelity with this downsampling
-      let max = 200;
-      //https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object
-      //Note: used geometric progression of 1.5 for this
-      //40*1.5=60, 60*1.5=90 etc etc etc
-      //wanted it to fit between 40 at lowest end and 200 at highest end
-      switch (breakPoint) {
-        case "xs":
-          max = 40;
-          break;
-        case "sm":
-          max = 60;
-          break;
-        case "md":
-          max = 90;
-          break;
-        case "lg":
-          max = 135;
-          break;
-        case "xl":
-          max = 200;
-          break;
-        default:
-          max = 200;
-      }
-      const url =
-        "server-metric/" +
-        tabIndexToRoute(vm.tab) +
-        "?maxRecords=" +
-        max +
-        "&tsStart=" +
-        filterDates.after +
-        "&tsEnd=" +
-        filterDates.before;
-      window.$gz.form.deleteAllErrorBoxErrors(vm);
-      try {
-        const res = await window.$gz.api.get(url);
-        if (res.error) {
-          if (res.error.code == "2010") {
-            window.$gz.form.handleObjectNotFound(vm);
-          }
-          vm.formState.serverError = res.error;
-          window.$gz.form.setErrorBoxErrors(vm);
-        } else {
-          vm[tabIndexToRoute(vm.tab)] = res.data;
-          vm.lastFetchBreakPoint = breakPoint;
-          window.$gz.form.setFormState({
-            vm: vm,
-            dirty: false,
-            valid: true,
-            loading: false
-          });
-          vm.formState.ready = true;
-        }
-      } catch (error) {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-        window.$gz.errorHandler.handleFormError(error, vm);
-      }
-    }
-  },
   computed: {
     cpuChartData() {
       return {
@@ -382,6 +261,127 @@ export default {
         ]
       };
     }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm);
+      await vm.getDataFromApi();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+
+  methods: {
+    onResize() {
+      let breakPoint = "xl";
+      if (window.innerWidth < 1904) {
+        breakPoint = "lg";
+      }
+      if (window.innerWidth < 1264) {
+        breakPoint = "md";
+      }
+      if (window.innerWidth < 960) {
+        breakPoint = "sm";
+      }
+      if (window.innerWidth < 600) {
+        breakPoint = "xs";
+      }
+      if (breakPoint != this.lastFetchBreakPoint) {
+        this.getDataFromApi(breakPoint);
+      }
+    },
+    timePeriodChanged: function() {
+      this.getDataFromApi();
+    },
+    tabChanged: function() {
+      const vm = this;
+      if (vm[tabIndexToRoute(vm.tab)].isnew) {
+        vm.getDataFromApi();
+      }
+    },
+    async getDataFromApi(breakPoint) {
+      const vm = this;
+      if (vm.formState.loading) {
+        return;
+      }
+      const filterDates = relativeDatefilterCalculator.tokenToDates(
+        vm.selectedTimePeriod
+      );
+      vm.formState.loading = true;
+      if (breakPoint == null) {
+        breakPoint = vm.$vuetify.breakpoint.name;
+      }
+      //##########################################################################################################################################
+      //Visually, 200 points max looks best on full screen widths and 40 on galaxy s9 minimum standard
+      //there is no relevant loss of fidelity with this downsampling
+      let max = 200;
+      //https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object
+      //Note: used geometric progression of 1.5 for this
+      //40*1.5=60, 60*1.5=90 etc etc etc
+      //wanted it to fit between 40 at lowest end and 200 at highest end
+      switch (breakPoint) {
+        case "xs":
+          max = 40;
+          break;
+        case "sm":
+          max = 60;
+          break;
+        case "md":
+          max = 90;
+          break;
+        case "lg":
+          max = 135;
+          break;
+        case "xl":
+          max = 200;
+          break;
+        default:
+          max = 200;
+      }
+      const url =
+        "server-metric/" +
+        tabIndexToRoute(vm.tab) +
+        "?maxRecords=" +
+        max +
+        "&tsStart=" +
+        filterDates.after +
+        "&tsEnd=" +
+        filterDates.before;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.get(url);
+        if (res.error) {
+          if (res.error.code == "2010") {
+            window.$gz.form.handleObjectNotFound(vm);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          vm[tabIndexToRoute(vm.tab)] = res.data;
+          vm.lastFetchBreakPoint = breakPoint;
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+          vm.formState.ready = true;
+        }
+      } catch (error) {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    }
   }
 };
 
@@ -403,7 +403,7 @@ function tabIndexToRoute(tabIndex) {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiFileMedicalAlt",
@@ -440,7 +440,7 @@ function clickHandler(menuItem) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   populateSelectionLists(vm);
 }
 
@@ -467,7 +467,7 @@ function populateSelectionLists(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "DateRangePast6Hours",
     "DateRangePast24Hours",
diff --git a/ayanova/src/views/ops-notification-settings.vue b/ayanova/src/views/ops-notification-settings.vue
index 2800586d..d61c9eda 100644
--- a/ayanova/src/views/ops-notification-settings.vue
+++ b/ayanova/src/views/ops-notification-settings.vue
@@ -22,8 +22,8 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="testConfiguration()"
               :disabled="!testAddress"
+              @click="testConfiguration()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -38,38 +38,38 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="smtpDeliveryActive"
                 v-model="obj.smtpDeliveryActive"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpDeliveryActive')"
                 :persistent-hint="true"
-                ref="smtpDeliveryActive"
                 :error-messages="
                   form().serverErrors(this, 'smtpDeliveryActive')
                 "
-                @change="fieldValueChanged('smtpDeliveryActive')"
                 data-cy="smtpDeliveryActive"
+                @change="fieldValueChanged('smtpDeliveryActive')"
               ></v-checkbox>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpServerAddress"
                 v-model="obj.smtpServerAddress"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpServerAddress')"
                 :rules="[form().required(this, 'smtpServerAddress')]"
                 :error-messages="form().serverErrors(this, 'smtpServerAddress')"
-                ref="smtpServerAddress"
                 data-cy="smtpServerAddress"
                 @input="fieldValueChanged('smtpServerAddress')"
               ></v-text-field>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpAccount"
                 v-model="obj.smtpAccount"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpAccount')"
                 :rules="[form().required(this, 'smtpAccount')]"
                 :error-messages="form().serverErrors(this, 'smtpAccount')"
-                ref="smtpAccount"
                 data-cy="smtpAccount"
                 @input="fieldValueChanged('smtpAccount')"
               ></v-text-field>
@@ -77,25 +77,25 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpPassword"
                 v-model="obj.smtpPassword"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpPassword')"
                 :rules="[form().required(this, 'smtpPassword')]"
                 :error-messages="form().serverErrors(this, 'smtpPassword')"
-                ref="smtpPassword"
                 data-cy="smtpPassword"
                 @input="fieldValueChanged('smtpPassword')"
               ></v-text-field>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="connectionSecurity"
                 v-model="obj.connectionSecurity"
                 :items="selectLists.NotifyMailSecurity"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ConnectionSecurity')"
-                ref="connectionSecurity"
                 data-cy="connectionSecurity"
                 :rules="[
                   form().integerValid(this, 'connectionSecurity'),
@@ -109,6 +109,7 @@
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpServerPort"
                 v-model="obj.smtpServerPort"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpServerPort')"
@@ -117,21 +118,20 @@
                   form().required(this, 'smtpServerPort')
                 ]"
                 :error-messages="form().serverErrors(this, 'smtpServerPort')"
-                ref="smtpServerPort"
                 data-cy="smtpServerPort"
-                @input="fieldValueChanged('smtpServerPort')"
                 type="number"
+                @input="fieldValueChanged('smtpServerPort')"
               ></v-text-field>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="notifyFromAddress"
                 v-model="obj.notifyFromAddress"
                 :readonly="formState.readOnly"
                 :label="$ay.t('NotifyFromAddress')"
                 :rules="[form().required(this, 'notifyFromAddress')]"
                 :error-messages="form().serverErrors(this, 'notifyFromAddress')"
-                ref="notifyFromAddress"
                 data-cy="notifyFromAddress"
                 @input="fieldValueChanged('notifyFromAddress')"
               ></v-text-field>
@@ -139,12 +139,12 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="ayaNovaServerURL"
                 v-model="obj.ayaNovaServerURL"
                 :readonly="formState.readOnly"
                 :label="$ay.t('AyaNovaServerURL')"
                 :rules="[form().required(this, 'ayaNovaServerURL')]"
                 :error-messages="form().serverErrors(this, 'ayaNovaServerURL')"
-                ref="ayaNovaServerURL"
                 data-cy="ayaNovaServerURL"
                 @input="fieldValueChanged('ayaNovaServerURL')"
               ></v-text-field>
@@ -158,36 +158,6 @@
 <script>
 const FORM_KEY = "ops-notification-settings";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.OpsNotificationSettings
-      );
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -221,6 +191,11 @@ export default {
       rights: window.$gz.role.defaultRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -237,11 +212,36 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.OpsNotificationSettings
+      );
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     translation() {
       return window.$gz.translation;
@@ -377,7 +377,6 @@ function generateMenu(vm) {
     formData: {
       ayaType: window.$gz.type.OpsNotificationSettings
     },
-    formData: {},
     menuItems: []
   };
 
@@ -413,14 +412,14 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
 //////////////////////////////////////////////////////////
 //
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TestSMTPSettings",
     "TestToAddress",
diff --git a/ayanova/src/views/ops-notify-queue.vue b/ayanova/src/views/ops-notify-queue.vue
index 119445c3..63f86c84 100644
--- a/ayanova/src/views/ops-notify-queue.vue
+++ b/ayanova/src/views/ops-notify-queue.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="formState.ready">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12">
-      <v-btn @click="getDataFromApi" class="mb-6">
+      <v-btn class="mb-6" @click="getDataFromApi">
         <v-icon>$ayiSync</v-icon>
       </v-btn>
       <v-data-table
@@ -28,23 +28,6 @@
 <script>
 const FORM_KEY = "ops-notify-queue";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.OpsNotificationSettings
-      );
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: [],
@@ -63,6 +46,23 @@ export default {
       hour12: window.$gz.locale.getHour12()
     };
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.OpsNotificationSettings
+      );
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
@@ -202,7 +202,7 @@ function clickHandler(menuItem) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await cacheEnums(vm);
   await createTableHeaders(vm);
 }
@@ -211,7 +211,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "NotifyEventType",
     "EventCreated",
diff --git a/ayanova/src/views/ops-profile.vue b/ayanova/src/views/ops-profile.vue
index 3d371d97..42d6f447 100644
--- a/ayanova/src/views/ops-profile.vue
+++ b/ayanova/src/views/ops-profile.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready" v-resize="onResize">
+  <v-row v-if="formState.ready" v-resize="onResize">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12">
       <v-btn @click="refreshProfile">
@@ -22,6 +22,18 @@
 <script>
 const FORM_KEY = "ops-profile";
 export default {
+  data() {
+    return {
+      cardHeight: 300,
+      formState: {
+        ready: false,
+        loading: false,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
   async created() {
     const vm = this;
     try {
@@ -37,18 +49,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      cardHeight: 300,
-      formState: {
-        ready: false,
-        loading: false,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      }
-    };
-  },
 
   methods: {
     onResize() {
@@ -64,6 +64,8 @@ export default {
 
     refreshProfile() {
       const ifr = document.getElementById("profileFrame");
+      //trigger refresh?  wtf?
+      // eslint-disable-next-line no-self-assign
       ifr.src = ifr.src;
     }
   }
@@ -72,7 +74,7 @@ export default {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiBinoculars",
@@ -109,15 +111,15 @@ function clickHandler(menuItem) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
-  await fetchTranslatedText(vm);
+async function initForm() {
+  await fetchTranslatedText();
 }
 
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations(["ServerProfiler"]);
 }
 </script>
diff --git a/ayanova/src/views/ops-server-state.vue b/ayanova/src/views/ops-server-state.vue
index 1700e171..5a34ba1d 100644
--- a/ayanova/src/views/ops-server-state.vue
+++ b/ayanova/src/views/ops-server-state.vue
@@ -28,14 +28,14 @@
           </v-col>
           <v-col cols="12">
             <v-textarea
+              ref="reason"
               v-model="obj.reason"
               :readonly="formState.readOnly"
               :label="$ay.t('ServerStateReason')"
               :error-messages="form().serverErrors(this, 'reason')"
-              ref="reason"
               data-cy="reason"
-              @input="fieldValueChanged('reason')"
               auto-grow
+              @input="fieldValueChanged('reason')"
             ></v-textarea>
           </v-col>
         </v-row>
@@ -48,22 +48,6 @@ const FORM_KEY = "ops-server-state";
 const API_BASE_URL = "server-state/";
 const FORM_CUSTOM_TEMPLATE_KEY = "ServerState";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.ServerState);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -85,6 +69,11 @@ export default {
       rights: window.$gz.role.defaultRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -101,11 +90,22 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.ServerState);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     form() {
       return window.$gz.form;
@@ -260,7 +260,7 @@ function generateMenu(vm) {
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
+async function initForm() {
   await fetchTranslatedText();
 }
 
diff --git a/ayanova/src/views/ops-view-configuration.vue b/ayanova/src/views/ops-view-configuration.vue
index ca442f09..5975d170 100644
--- a/ayanova/src/views/ops-view-configuration.vue
+++ b/ayanova/src/views/ops-view-configuration.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready" align="start" justify="center">
+  <v-row v-if="formState.ready" align="start" justify="center">
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-col cols="12" md="7">
       <v-card data-cy="configCard">
@@ -137,6 +137,18 @@
 <script>
 const FORM_KEY = "ops-view-configuration";
 export default {
+  data() {
+    return {
+      config: {},
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
   async created() {
     const vm = this;
     try {
@@ -150,18 +162,6 @@ export default {
       window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
-  data() {
-    return {
-      config: {},
-      formState: {
-        ready: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      }
-    };
-  },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
@@ -201,7 +201,7 @@ export default {
 //////////////////////
 //
 //
-function generateMenu(vm) {
+function generateMenu() {
   const menuOptions = {
     isMain: true,
     icon: "$ayiInfoCircle",
diff --git a/ayanova/src/views/svc-contract.vue b/ayanova/src/views/svc-contract.vue
index 8a112858..c27ad5a8 100644
--- a/ayanova/src/views/svc-contract.vue
+++ b/ayanova/src/views/svc-contract.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('ContractName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,11 +20,11 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-duration-picker
+              ref="responseTime"
               v-model="obj.responseTime"
               :readonly="formState.readOnly"
               :label="$ay.t('ContractDefaultResponseTime')"
               :show-seconds="false"
-              ref="responseTime"
               data-cy="responseTime"
               :error-messages="form().serverErrors(this, 'responseTime')"
               @input="fieldValueChanged('responseTime')"
@@ -40,10 +40,10 @@
             <v-row>
               <v-col>
                 <gz-percent
+                  ref="partsOverridePct"
                   v-model="obj.partsOverridePct"
                   :readonly="formState.readOnly"
                   :label="$ay.t('PartList')"
-                  ref="partsOverridePct"
                   data-cy="partsOverridePct"
                   :rules="[
                     form().decimalValid(this, 'partsOverridePct'),
@@ -58,13 +58,13 @@
 
               <v-col>
                 <v-select
+                  ref="partsOverrideType"
                   v-model="obj.partsOverrideType"
                   :items="selectLists.overrideTypes"
                   item-text="name"
                   item-value="id"
                   :readonly="formState.readOnly"
                   :label="$ay.t('ContractOverrideType')"
-                  ref="partsOverrideType"
                   data-cy="partsOverrideType"
                   :rules="[form().integerValid(this, 'partsOverrideType')]"
                   :error-messages="
@@ -77,10 +77,10 @@
             <v-row>
               <v-col>
                 <gz-percent
+                  ref="serviceRatesOverridePct"
                   v-model="obj.serviceRatesOverridePct"
                   :readonly="formState.readOnly"
                   :label="$ay.t('ServiceRateList')"
-                  ref="serviceRatesOverridePct"
                   data-cy="serviceRatesOverridePct"
                   :rules="[
                     form().decimalValid(this, 'serviceRatesOverridePct'),
@@ -95,13 +95,13 @@
 
               <v-col>
                 <v-select
+                  ref="serviceRatesOverrideType"
                   v-model="obj.serviceRatesOverrideType"
                   :items="selectLists.overrideTypes"
                   item-text="name"
                   item-value="id"
                   :readonly="formState.readOnly"
                   :label="$ay.t('ContractOverrideType')"
-                  ref="serviceRatesOverrideType"
                   data-cy="serviceRatesOverrideType"
                   :rules="[
                     form().integerValid(this, 'serviceRatesOverrideType')
@@ -117,10 +117,10 @@
             <v-row>
               <v-col>
                 <gz-percent
+                  ref="travelRatesOverridePct"
                   v-model="obj.travelRatesOverridePct"
                   :readonly="formState.readOnly"
                   :label="$ay.t('TravelRateList')"
-                  ref="travelRatesOverridePct"
                   data-cy="travelRatesOverridePct"
                   :rules="[
                     form().decimalValid(this, 'travelRatesOverridePct'),
@@ -135,13 +135,13 @@
 
               <v-col>
                 <v-select
+                  ref="travelRatesOverrideType"
                   v-model="obj.travelRatesOverrideType"
                   :items="selectLists.overrideTypes"
                   item-text="name"
                   item-value="id"
                   :readonly="formState.readOnly"
                   :label="$ay.t('ContractOverrideType')"
-                  ref="travelRatesOverrideType"
                   data-cy="travelRatesOverrideType"
                   :rules="[
                     form().integerValid(this, 'travelRatesOverrideType')
@@ -212,8 +212,8 @@
                       <v-btn
                         large
                         icon
-                        @click="editContractPartOverrideItem(index)"
                         class="ml-4"
+                        @click="editContractPartOverrideItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -279,8 +279,8 @@
                       <v-btn
                         large
                         icon
-                        @click="editContractServiceRateOverrideItem(index)"
                         class="ml-4"
+                        @click="editContractServiceRateOverrideItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -345,8 +345,8 @@
                       <v-btn
                         large
                         icon
-                        @click="editContractTravelRateOverrideItem(index)"
                         class="ml-4"
+                        @click="editContractTravelRateOverrideItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -366,10 +366,10 @@
           <!-- ################################ SERVICE RATES ############################### -->
           <v-col cols="12" sm="6" lg="4" xl="3" class="mb-10">
             <v-checkbox
+              ref="contractServiceRatesOnly"
               v-model="obj.contractServiceRatesOnly"
               :readonly="formState.readOnly"
               :label="$ay.t('ContractServiceRatesOnly')"
-              ref="contractServiceRatesOnly"
               data-cy="contractServiceRatesOnly"
               :error-messages="
                 form().serverErrors(this, 'contractServiceRatesOnly')
@@ -403,8 +403,8 @@
                       <v-btn
                         large
                         icon
-                        @click="editServiceRateItem(index)"
                         class="ml-4"
+                        @click="editServiceRateItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -420,10 +420,10 @@
           <!-- ################################ TRAVEL RATES ############################### -->
           <v-col cols="12" sm="6" lg="4" xl="3" class="mb-10">
             <v-checkbox
+              ref="contractTravelRatesOnly"
               v-model="obj.contractTravelRatesOnly"
               :readonly="formState.readOnly"
               :label="$ay.t('ContractTravelRatesOnly')"
-              ref="contractTravelRatesOnly"
               data-cy="contractTravelRatesOnly"
               :error-messages="
                 form().serverErrors(this, 'contractTravelRatesOnly')
@@ -457,8 +457,8 @@
                       <v-btn
                         large
                         icon
-                        @click="editTravelRateItem(index)"
                         class="ml-4"
+                        @click="editTravelRateItem(index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -472,10 +472,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -483,35 +483,35 @@
           </v-col>
           <v-col v-if="form().showMe(this, 'AlertNotes')" cols="12">
             <v-textarea
+              ref="alertNotes"
               v-model="obj.alertNotes"
               :readonly="formState.readOnly"
               :label="$ay.t('AlertNotes')"
               :error-messages="form().serverErrors(this, 'alertNotes')"
-              ref="alertNotes"
               data-cy="alertNotes"
-              @input="fieldValueChanged('alertNotes')"
               auto-grow
+              @input="fieldValueChanged('alertNotes')"
             ></v-textarea>
           </v-col>
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('ContractNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -520,11 +520,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -533,10 +533,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -572,6 +572,7 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-percent
+                    ref="ContractPartOverrideItems.OverridePct"
                     v-model="
                       obj.contractPartOverrideItems[
                         editContractPartOverrideItemIndex
@@ -579,7 +580,6 @@
                     "
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractAdjustment')"
-                    ref="ContractPartOverrideItems.OverridePct"
                     data-cy="ContractPartOverrideItems.OverridePct"
                     :rules="[
                       form().decimalValid(
@@ -606,6 +606,7 @@
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="ContractPartOverrideItems.OverrideType"
                     v-model="
                       obj.contractPartOverrideItems[
                         editContractPartOverrideItemIndex
@@ -616,7 +617,6 @@
                     item-value="id"
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractOverrideType')"
-                    ref="ContractPartOverrideItems.OverrideType"
                     data-cy="ContractPartOverrideItems.OverrideType"
                     :rules="[
                       form().integerValid(
@@ -640,13 +640,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-tag-picker
+                    ref="ContractPartOverrideItems.Tags"
                     v-model="
                       obj.contractPartOverrideItems[
                         editContractPartOverrideItemIndex
                       ].tags
                     "
                     :readonly="formState.readOnly"
-                    ref="ContractPartOverrideItems.Tags"
                     data-cy="ContractPartOverrideItems.Tags"
                     :rules="[
                       form().required(this, 'ContractPartOverrideItems.Tags')
@@ -679,16 +679,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addContractPartOverrideItem()"
                   class="ml-4"
+                  @click="addContractPartOverrideItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editContractPartOverrideItemDialog = false"
                   class="ml-4"
+                  @click="editContractPartOverrideItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -745,6 +745,7 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-percent
+                    ref="ContractServiceRateOverrideItems.OverridePct"
                     v-model="
                       obj.contractServiceRateOverrideItems[
                         editContractServiceRateOverrideItemIndex
@@ -752,7 +753,6 @@
                     "
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractAdjustment')"
-                    ref="ContractServiceRateOverrideItems.OverridePct"
                     data-cy="ContractServiceRateOverrideItems.OverridePct"
                     :rules="[
                       form().decimalValid(
@@ -779,6 +779,7 @@
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="ContractServiceRateOverrideItems.OverrideType"
                     v-model="
                       obj.contractServiceRateOverrideItems[
                         editContractServiceRateOverrideItemIndex
@@ -789,7 +790,6 @@
                     item-value="id"
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractOverrideType')"
-                    ref="ContractServiceRateOverrideItems.OverrideType"
                     data-cy="ContractServiceRateOverrideItems.OverrideType"
                     :rules="[
                       form().integerValid(
@@ -813,13 +813,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-tag-picker
+                    ref="ContractServiceRateOverrideItems.Tags"
                     v-model="
                       obj.contractServiceRateOverrideItems[
                         editContractServiceRateOverrideItemIndex
                       ].tags
                     "
                     :readonly="formState.readOnly"
-                    ref="ContractServiceRateOverrideItems.Tags"
                     data-cy="ContractServiceRateOverrideItems.Tags"
                     :rules="[
                       form().required(
@@ -855,16 +855,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addContractServiceRateOverrideItem()"
                   class="ml-4"
+                  @click="addContractServiceRateOverrideItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editContractServiceRateOverrideItemDialog = false"
                   class="ml-4"
+                  @click="editContractServiceRateOverrideItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -921,6 +921,7 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-percent
+                    ref="ContractTravelRateOverrideItems.OverridePct"
                     v-model="
                       obj.contractTravelRateOverrideItems[
                         editContractTravelRateOverrideItemIndex
@@ -928,7 +929,6 @@
                     "
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractAdjustment')"
-                    ref="ContractTravelRateOverrideItems.OverridePct"
                     data-cy="ContractTravelRateOverrideItems.OverridePct"
                     :rules="[
                       form().decimalValid(
@@ -955,6 +955,7 @@
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select
+                    ref="ContractTravelRateOverrideItems.OverrideType"
                     v-model="
                       obj.contractTravelRateOverrideItems[
                         editContractTravelRateOverrideItemIndex
@@ -965,7 +966,6 @@
                     item-value="id"
                     :readonly="formState.readOnly"
                     :label="$ay.t('ContractOverrideType')"
-                    ref="ContractTravelRateOverrideItems.OverrideType"
                     data-cy="ContractTravelRateOverrideItems.OverrideType"
                     :rules="[
                       form().integerValid(
@@ -989,13 +989,13 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-tag-picker
+                    ref="ContractTravelRateOverrideItems.Tags"
                     v-model="
                       obj.contractTravelRateOverrideItems[
                         editContractTravelRateOverrideItemIndex
                       ].tags
                     "
                     :readonly="formState.readOnly"
-                    ref="ContractTravelRateOverrideItems.Tags"
                     data-cy="ContractTravelRateOverrideItems.Tags"
                     :rules="[
                       form().required(
@@ -1031,16 +1031,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addContractTravelRateOverrideItem()"
                   class="ml-4"
+                  @click="addContractTravelRateOverrideItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editContractTravelRateOverrideItemDialog = false"
                   class="ml-4"
+                  @click="editContractTravelRateOverrideItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -1094,18 +1094,18 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="userid"
+                    v-model="
+                      obj.serviceRateItems[editServiceRateItemIndex]
+                        .serviceRateId
+                    "
                     :allow-no-selection="false"
                     :can-clear="false"
                     :aya-type="ayaTypes().ServiceRate"
                     :variant="'contractrates'"
                     show-edit-icon
-                    v-model="
-                      obj.serviceRateItems[editServiceRateItemIndex]
-                        .serviceRateId
-                    "
                     :readonly="formState.readOnly"
                     :label="$ay.t('ServiceRate')"
-                    ref="userid"
                     data-cy="userid"
                     :rules="[
                       form().integerValid(
@@ -1120,15 +1120,15 @@
                         `ServiceRateItems[${editServiceRateItemIndex}].ServiceRateId`
                       )
                     "
+                    :name.sync="
+                      obj.serviceRateItems[editServiceRateItemIndex]
+                        .serviceRateViz
+                    "
                     @input="
                       fieldValueChanged(
                         `ServiceRateItems[${editServiceRateItemIndex}].ServiceRateId`
                       )
                     "
-                    :name.sync="
-                      obj.serviceRateItems[editServiceRateItemIndex]
-                        .serviceRateViz
-                    "
                   ></gz-pick-list>
                 </v-col>
               </v-row>
@@ -1146,16 +1146,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addServiceRateItem()"
                   class="ml-4"
+                  @click="addServiceRateItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editServiceRateItemDialog = false"
                   class="ml-4"
+                  @click="editServiceRateItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -1209,17 +1209,17 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="userid"
+                    v-model="
+                      obj.travelRateItems[editTravelRateItemIndex].travelRateId
+                    "
                     :allow-no-selection="false"
                     :can-clear="false"
                     :aya-type="ayaTypes().TravelRate"
                     :variant="'contractrates'"
                     show-edit-icon
-                    v-model="
-                      obj.travelRateItems[editTravelRateItemIndex].travelRateId
-                    "
                     :readonly="formState.readOnly"
                     :label="$ay.t('TravelRate')"
-                    ref="userid"
                     data-cy="userid"
                     :rules="[
                       form().integerValid(this, 'TravelRateItems.TravelRateId'),
@@ -1231,14 +1231,14 @@
                         `TravelRateItems[${editTravelRateItemIndex}].TravelRateId`
                       )
                     "
+                    :name.sync="
+                      obj.travelRateItems[editTravelRateItemIndex].travelRateViz
+                    "
                     @input="
                       fieldValueChanged(
                         `TravelRateItems[${editTravelRateItemIndex}].TravelRateId`
                       )
                     "
-                    :name.sync="
-                      obj.travelRateItems[editTravelRateItemIndex].travelRateViz
-                    "
                   ></gz-pick-list>
                 </v-col>
               </v-row>
@@ -1256,16 +1256,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addTravelRateItem()"
                   class="ml-4"
+                  @click="addTravelRateItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editTravelRateItemDialog = false"
                   class="ml-4"
+                  @click="editTravelRateItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -1311,67 +1311,6 @@ const FORM_KEY = "contract-edit";
 const API_BASE_URL = "contract/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Contract";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Contract);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          this.obj.serviceRateItems.forEach(z => (z.id = 0));
-          this.obj.travelRateItems.forEach(z => (z.id = 0));
-          this.obj.contractPartOverrideItems.forEach(z => (z.id = 0));
-          this.obj.contractServiceRateOverrideItems.forEach(z => (z.id = 0));
-          this.obj.contractTravelRateOverrideItems.forEach(z => (z.id = 0));
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -1455,6 +1394,67 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Contract);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          this.obj.serviceRateItems.forEach(z => (z.id = 0));
+          this.obj.travelRateItems.forEach(z => (z.id = 0));
+          this.obj.contractPartOverrideItems.forEach(z => (z.id = 0));
+          this.obj.contractServiceRateOverrideItems.forEach(z => (z.id = 0));
+          this.obj.contractTravelRateOverrideItems.forEach(z => (z.id = 0));
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     editContractPartOverrideItem: function(index) {
       this.editContractPartOverrideItemIndex = index;
@@ -1773,17 +1773,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Contract,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Contract,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -1879,7 +1881,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -1888,7 +1890,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Contract",
     "ContractName",
diff --git a/ayanova/src/views/svc-contracts.vue b/ayanova/src/views/svc-contracts.vue
index b80e5bf6..2cadbe2b 100644
--- a/ayanova/src/views/svc-contracts.vue
+++ b/ayanova/src/views/svc-contracts.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="ContractDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="contractsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "contract-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Contract);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Contract);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Contract)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.Contract
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-csr.vue b/ayanova/src/views/svc-csr.vue
index 09df2a9d..1ed21efd 100644
--- a/ayanova/src/views/svc-csr.vue
+++ b/ayanova/src/views/svc-csr.vue
@@ -7,13 +7,13 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-pick-list
+              ref="customerId"
+              v-model="obj.customerId"
               :aya-type="ayaTypes().Customer"
               show-edit-icon
               :include-inactive="true"
-              v-model="obj.customerId"
               readonly
               :label="$ay.t('Customer')"
-              ref="customerId"
               data-cy="customerId"
             ></gz-pick-list>
           </v-col>
@@ -25,15 +25,15 @@
             xl="3"
           >
             <v-select
+              ref="priority"
+              v-model="obj.priority"
               :color="priorityColor()"
               :item-color="priorityColor()"
-              v-model="obj.priority"
               readonly
               :items="selectLists.priorities"
               item-text="name"
               item-value="id"
               :label="$ay.t('CustomerServiceRequestPriority')"
-              ref="priority"
               data-cy="priority"
               append-icon=""
             >
@@ -46,10 +46,10 @@
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-date-picker
-              :label="$ay.t('Created')"
-              v-model="obj.dateRequested"
-              readonly
               ref="dateRequested"
+              v-model="obj.dateRequested"
+              :label="$ay.t('Created')"
+              readonly
               data-cy="dateRequested"
             ></gz-date-picker>
           </v-col>
@@ -61,13 +61,13 @@
             xl="3"
           >
             <v-select
+              ref="status"
               v-model="obj.status"
               :items="selectLists.status"
               item-text="name"
               item-value="id"
               readonly
               :label="$ay.t('CustomerServiceRequestStatus')"
-              ref="status"
               data-cy="status"
               append-icon=""
             ></v-select>
@@ -90,12 +90,12 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               readonly
               :label="$ay.t('CustomerServiceRequestTitle')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -109,10 +109,10 @@
             xl="3"
           >
             <v-text-field
+              ref="customerReferenceNumber"
               v-model="obj.customerReferenceNumber"
               readonly
               :label="$ay.t('CustomerServiceRequestCustomerReferenceNumber')"
-              ref="customerReferenceNumber"
               data-cy="customerReferenceNumber"
               :error-messages="
                 form().serverErrors(this, 'customerReferenceNumber')
@@ -129,13 +129,13 @@
             xl="3"
           >
             <gz-pick-list
+              ref="requestedByUserId"
+              v-model="obj.requestedByUserId"
               :aya-type="ayaTypes().User"
               :variant="'outside'"
               show-edit-icon
-              v-model="obj.requestedByUserId"
               readonly
               :label="$ay.t('CustomerServiceRequestRequestedBy')"
-              ref="requestedByUserId"
               data-cy="requestedByUserId"
               :error-messages="form().serverErrors(this, 'requestedByUserId')"
               @input="fieldValueChanged('requestedByUserId')"
@@ -150,13 +150,13 @@
             xl="3"
           >
             <gz-pick-list
+              ref="unitId"
+              v-model="obj.unitId"
               :aya-type="ayaTypes().Unit"
               :variant="'customerid:' + obj.customerId"
               show-edit-icon
-              v-model="obj.unitId"
               readonly
               :label="$ay.t('CustomerServiceRequestItemUnitID')"
-              ref="unitId"
               data-cy="unitId"
               :error-messages="form().serverErrors(this, 'unitId')"
               @input="fieldValueChanged('unitId')"
@@ -166,22 +166,22 @@
           <!--   --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               readonly
               :label="$ay.t('CustomerServiceRequestDetails')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -190,11 +190,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -203,10 +203,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -232,61 +232,6 @@ const FORM_KEY = "csr-edit";
 const API_BASE_URL = "csr/";
 const FORM_CUSTOM_TEMPLATE_KEY = "CustomerServiceRequest";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.CustomerServiceRequest
-      );
-      vm.formState.readOnly = !vm.rights.change || vm.obj.status != 0;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -369,6 +314,61 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.CustomerServiceRequest
+      );
+      vm.formState.readOnly = !vm.rights.change || vm.obj.status != 0;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     openWO: function() {
       window.$gz.eventBus.$emit("openobject", {
@@ -677,17 +677,19 @@ async function clickHandler(menuItem) {
         m.vm.accept();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.CustomerServiceRequest,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.CustomerServiceRequest,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
diff --git a/ayanova/src/views/svc-csrs.vue b/ayanova/src/views/svc-csrs.vue
index 3fd45bc6..a76a7b5a 100644
--- a/ayanova/src/views/svc-csrs.vue
+++ b/ayanova/src/views/svc-csrs.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="ServiceRequestDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="csrTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,6 +22,14 @@
 <script>
 const FORM_KEY = "csr-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.CustomerServiceRequest,
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(
       window.$gz.type.CustomerServiceRequest
@@ -32,14 +40,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.CustomerServiceRequest,
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -64,13 +64,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.CustomerServiceRequest
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.CustomerServiceRequest
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-loaner.vue b/ayanova/src/views/svc-loaner.vue
index 0b9f40d8..af002998 100644
--- a/ayanova/src/views/svc-loaner.vue
+++ b/ayanova/src/views/svc-loaner.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <v-text-field
+              ref="serial"
               v-model="obj.serial"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitSerial')"
-              ref="serial"
               data-cy="serial"
               :error-messages="form().serverErrors(this, 'serial')"
               @input="fieldValueChanged('serial')"
@@ -44,10 +44,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateHourCost"
               v-model="obj.rateHourCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateHourCost')"
-              ref="rateHourCost"
               data-cy="rateHourCost"
               :rules="[
                 form().decimalValid(this, 'rateHourCost'),
@@ -66,10 +66,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateHour"
               v-model="obj.rateHour"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateHour')"
-              ref="rateHour"
               data-cy="rateHour"
               :rules="[
                 form().decimalValid(this, 'rateHour'),
@@ -88,10 +88,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateHalfDayCost"
               v-model="obj.rateHalfDayCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateHalfDayCost')"
-              ref="rateHalfDayCost"
               data-cy="rateHalfDayCost"
               :rules="[
                 form().decimalValid(this, 'rateHalfDayCost'),
@@ -110,10 +110,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateHalfDay"
               v-model="obj.rateHalfDay"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateHalfDay')"
-              ref="rateHalfDay"
               data-cy="rateHalfDay"
               :rules="[
                 form().decimalValid(this, 'rateHalfDay'),
@@ -132,10 +132,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateDayCost"
               v-model="obj.rateDayCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateDayCost')"
-              ref="rateDayCost"
               data-cy="rateDayCost"
               :rules="[
                 form().decimalValid(this, 'rateDayCost'),
@@ -154,10 +154,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateDay"
               v-model="obj.rateDay"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateDay')"
-              ref="rateDay"
               data-cy="rateDay"
               :rules="[
                 form().decimalValid(this, 'rateDay'),
@@ -176,10 +176,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateWeekCost"
               v-model="obj.rateWeekCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateWeekCost')"
-              ref="rateWeekCost"
               data-cy="rateWeekCost"
               :rules="[
                 form().decimalValid(this, 'rateWeekCost'),
@@ -198,10 +198,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateWeek"
               v-model="obj.rateWeek"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateWeek')"
-              ref="rateWeek"
               data-cy="rateWeek"
               :rules="[
                 form().decimalValid(this, 'rateWeek'),
@@ -220,10 +220,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateMonthCost"
               v-model="obj.rateMonthCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateMonthCost')"
-              ref="rateMonthCost"
               data-cy="rateMonthCost"
               :rules="[
                 form().decimalValid(this, 'rateMonthCost'),
@@ -242,10 +242,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateMonth"
               v-model="obj.rateMonth"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateMonth')"
-              ref="rateMonth"
               data-cy="rateMonth"
               :rules="[
                 form().decimalValid(this, 'rateMonth'),
@@ -264,10 +264,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateYearCost"
               v-model="obj.rateYearCost"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateYearCost')"
-              ref="rateYearCost"
               data-cy="rateYearCost"
               :rules="[
                 form().decimalValid(this, 'rateYearCost'),
@@ -286,10 +286,10 @@
             xl="3"
           >
             <gz-currency
+              ref="rateYear"
               v-model="obj.rateYear"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitRateYear')"
-              ref="rateYear"
               data-cy="rateYear"
               :rules="[
                 form().decimalValid(this, 'rateYear'),
@@ -308,13 +308,13 @@
             xl="3"
           >
             <v-select
+              ref="defaultRate"
               v-model="obj.defaultRate"
               :items="selectLists.loanunitrateunit"
               item-text="name"
               item-value="id"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitDefaultRate')"
-              ref="defaultRate"
               data-cy="defaultRate"
               :rules="[form().integerValid(this, 'defaultRate')]"
               :error-messages="form().serverErrors(this, 'defaultRate')"
@@ -330,12 +330,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="unitId"
+              v-model="obj.unitId"
               :aya-type="ayaTypes().Unit"
               show-edit-icon
-              v-model="obj.unitId"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitShadowUnit')"
-              ref="unitId"
               data-cy="unitId"
               :error-messages="form().serverErrors(this, 'unitId')"
               @input="fieldValueChanged('unitId')"
@@ -344,10 +344,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -356,22 +356,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('LoanUnitNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -380,11 +380,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -393,10 +393,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -422,64 +422,6 @@ const FORM_KEY = "loan-unit-edit";
 const API_BASE_URL = "loan-unit/";
 const FORM_CUSTOM_TEMPLATE_KEY = "LoanUnit";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.LoanUnit);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -554,6 +496,64 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.LoanUnit);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -731,17 +731,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.LoanUnit,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.LoanUnit,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "WorkOrderList":
         m.vm.$router.push({
@@ -891,7 +893,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -900,7 +902,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "LoanUnit",
     "LoanUnitName",
diff --git a/ayanova/src/views/svc-loaners.vue b/ayanova/src/views/svc-loaners.vue
index 6557d63b..0985c0a1 100644
--- a/ayanova/src/views/svc-loaners.vue
+++ b/ayanova/src/views/svc-loaners.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="LoanUnitDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="loanUnitsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "loanunit-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.LoanUnit);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.LoanUnit);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.LoanUnit)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.LoanUnit
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-meter-reading.vue b/ayanova/src/views/svc-meter-reading.vue
index d8812c8d..f213321c 100644
--- a/ayanova/src/views/svc-meter-reading.vue
+++ b/ayanova/src/views/svc-meter-reading.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
-    <v-form ref="form" v-if="formState.ready">
+    <v-form v-if="formState.ready" ref="form">
       <v-row>
         <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
         <v-col cols="12">
           <gz-pick-list
-            readonly
             v-model="obj.unitId"
+            readonly
             :aya-type="ayaTypes().Unit"
             show-edit-icon
             :label="$ay.t('Unit')"
@@ -15,39 +15,39 @@
         </v-col>
         <v-col cols="12" sm="6" lg="4" xl="3">
           <v-text-field
+            ref="meter"
             v-model="obj.meter"
             :readonly="formState.readOnly"
             :clearable="!formState.readOnly"
-            @click:clear="fieldValueChanged('meter')"
             :label="$ay.t('UnitMeterReadingMeter')"
-            ref="meter"
             data-cy="meter"
             :rules="[form().integerValid(this, 'meter')]"
             :error-messages="form().serverErrors(this, 'meter')"
-            @input="fieldValueChanged('meter')"
             type="number"
+            @click:clear="fieldValueChanged('meter')"
+            @input="fieldValueChanged('meter')"
           ></v-text-field>
         </v-col>
 
         <v-col cols="12" sm="6" lg="4" xl="3">
           <v-textarea
+            ref="notes"
             v-model="obj.notes"
             :readonly="formState.readOnly"
             :label="$ay.t('UnitMeterReadingDescription')"
             :error-messages="form().serverErrors(this, 'notes')"
-            ref="notes"
             data-cy="notes"
-            @input="fieldValueChanged('notes')"
             auto-grow
             :clearable="!formState.readOnly"
+            @input="fieldValueChanged('notes')"
           ></v-textarea>
         </v-col>
         <v-col cols="12" sm="6" lg="4" xl="3">
           <gz-date-time-picker
-            :label="$ay.t('UnitMeterReadingMeterDate')"
-            v-model="obj.meterDate"
-            :readonly="formState.readOnly"
             ref="meterDate"
+            v-model="obj.meterDate"
+            :label="$ay.t('UnitMeterReadingMeterDate')"
+            :readonly="formState.readOnly"
             data-cy="meterDate"
             :error-messages="form().serverErrors(this, 'meterDate')"
             @input="fieldValueChanged('meterDate')"
@@ -64,6 +64,51 @@
 const FORM_KEY = "meter-reading";
 const API_BASE_URL = "unit/meter-reading/";
 export default {
+  data() {
+    return {
+      obj: {
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        meter: 0,
+        meterDate: window.$gz.locale.nowUTC8601String(),
+        unitId: undefined,
+        workOrderItemUnitId: undefined
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.UnitMeterReading
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -120,51 +165,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      obj: {
-        id: 0,
-        concurrency: 0,
-        notes: null,
-        meter: 0,
-        meterDate: window.$gz.locale.nowUTC8601String(),
-        unitId: undefined,
-        workOrderItemUnitId: undefined
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.UnitMeterReading
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -294,17 +294,19 @@ async function clickHandler(menuItem) {
         });
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.UnitMeterReading,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.UnitMeterReading,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -379,7 +381,7 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
+async function initForm() {
   await fetchTranslatedText();
 }
 
diff --git a/ayanova/src/views/svc-meter-readings.vue b/ayanova/src/views/svc-meter-readings.vue
index 9adf2430..b4769196 100644
--- a/ayanova/src/views/svc-meter-readings.vue
+++ b/ayanova/src/views/svc-meter-readings.vue
@@ -18,6 +18,17 @@
 <script>
 const FORM_KEY = "meter-reading-list";
 export default {
+  data() {
+    return {
+      unitId: undefined,
+      workOrderItemUnitId: undefined,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.UnitMeterReading,
+      reload: false
+    };
+  },
   created() {
     this.unitId = parseInt(this.$route.params.unitid);
     this.workOrderItemUnitId = parseInt(this.$route.params.workorderitemunitid);
@@ -37,17 +48,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      unitId: undefined,
-      workOrderItemUnitId: undefined,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.UnitMeterReading,
-      reload: false
-    };
-  },
   methods: {
     ayaTypes: function() {
       return window.$gz.type;
diff --git a/ayanova/src/views/svc-pm-item-expenses.vue b/ayanova/src/views/svc-pm-item-expenses.vue
index 9ac9c1dd..ae28d301 100644
--- a/ayanova/src/views/svc-pm-item-expenses.vue
+++ b/ayanova/src/views/svc-pm-item-expenses.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PMItemExpenseDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemExpensesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "pm-item-expense-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemExpense
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemExpense
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-labors.vue b/ayanova/src/views/svc-pm-item-labors.vue
index 4a626dab..aed52ebb 100644
--- a/ayanova/src/views/svc-pm-item-labors.vue
+++ b/ayanova/src/views/svc-pm-item-labors.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="PMItemLaborDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemLaborsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -26,6 +26,19 @@
 <script>
 const FORM_KEY = "pm-item-labor-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PMItemLabor,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -54,19 +67,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PMItemLabor,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -96,13 +96,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemLabor
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemLabor
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-loans.vue b/ayanova/src/views/svc-pm-item-loans.vue
index 245d5246..0a2126cf 100644
--- a/ayanova/src/views/svc-pm-item-loans.vue
+++ b/ayanova/src/views/svc-pm-item-loans.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="PMItemLoanDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemLoansTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "pm-item-loan-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PMItemLoan,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -51,19 +64,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PMItemLoan,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -93,13 +93,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemLoan
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemLoan
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-outside-services.vue b/ayanova/src/views/svc-pm-item-outside-services.vue
index 52ab6c28..77c15ad3 100644
--- a/ayanova/src/views/svc-pm-item-outside-services.vue
+++ b/ayanova/src/views/svc-pm-item-outside-services.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PMItemOutsideServiceDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemOutsideServicesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "pm-item-outside-service-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -61,13 +61,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemOutsideService
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemOutsideService
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-parts.vue b/ayanova/src/views/svc-pm-item-parts.vue
index bf1d881a..7f135bb9 100644
--- a/ayanova/src/views/svc-pm-item-parts.vue
+++ b/ayanova/src/views/svc-pm-item-parts.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="PMItemPartDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemPartsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "pm-item-part-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PMItemPart,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -52,19 +65,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PMItemPart,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -94,13 +94,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemPart
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemPart
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-scheduled-users.vue b/ayanova/src/views/svc-pm-item-scheduled-users.vue
index 235d145d..abb2032e 100644
--- a/ayanova/src/views/svc-pm-item-scheduled-users.vue
+++ b/ayanova/src/views/svc-pm-item-scheduled-users.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="PMItemScheduledUserDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemScheduledUsersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "pm-item-scheduled-user-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PMItemScheduledUser,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -51,19 +64,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PMItemScheduledUser,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -93,13 +93,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemScheduledUser
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemScheduledUser
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-tasks.vue b/ayanova/src/views/svc-pm-item-tasks.vue
index 965bf864..e800b0c7 100644
--- a/ayanova/src/views/svc-pm-item-tasks.vue
+++ b/ayanova/src/views/svc-pm-item-tasks.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PMItemTaskDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemTasksTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "pm-item-task-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemTask
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemTask
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-travels.vue b/ayanova/src/views/svc-pm-item-travels.vue
index 6cf99f1b..25dee05d 100644
--- a/ayanova/src/views/svc-pm-item-travels.vue
+++ b/ayanova/src/views/svc-pm-item-travels.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PMItemTravelDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemTravelsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "pm-item-travel-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemTravel
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemTravel
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-item-units.vue b/ayanova/src/views/svc-pm-item-units.vue
index 8eabbb79..9c6a0db7 100644
--- a/ayanova/src/views/svc-pm-item-units.vue
+++ b/ayanova/src/views/svc-pm-item-units.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="PMItemUnitDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="PMItemUnitsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "pm-item-unit-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PMItemUnit,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PMItemUnit,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.PMItemUnit
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.PMItemUnit
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm-items.vue b/ayanova/src/views/svc-pm-items.vue
index c78aa8b1..61b4b255 100644
--- a/ayanova/src/views/svc-pm-items.vue
+++ b/ayanova/src/views/svc-pm-items.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="PMItemDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="pmItemsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "pm-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.PMItem)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.PMItem)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-pm.vue b/ayanova/src/views/svc-pm.vue
index 4501c441..53cd4863 100644
--- a/ayanova/src/views/svc-pm.vue
+++ b/ayanova/src/views/svc-pm.vue
@@ -22,8 +22,8 @@
           :pvm="this"
           :goto="this.goto"
           data-cy="woItems"
-          @change="setDirty()"
           class="mt-16"
+          @change="setDirty()"
         />
       </v-form>
     </div>
@@ -35,7 +35,7 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="duplicateDlg">
+        <v-dialog v-model="duplicateDlg" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ duplicateDlgTitle }}</v-card-title>
             <v-card-text>
@@ -50,7 +50,7 @@
               ></v-checkbox>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="duplicateDlg = false" color="primary">{{
+              <v-btn text color="primary" @click="duplicateDlg = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -77,6 +77,128 @@ export default {
     GzPMHeader,
     GzPMItems
   },
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        serial: 0,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        stopGeneratingDate: null,
+        excludeDaysOfWeek: 96,
+        active: true,
+        nextServiceDate: null,
+        repeatUnit: 7,
+        generateBeforeUnit: 4,
+        repeatInterval: 1,
+        generateBeforeInterval: 14,
+        generateDate: null,
+        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
+        projectId: null,
+        contractId: null,
+        internalReferenceNumber: null,
+        customerReferenceNumber: null,
+        customerContactName: null,
+        onsite: true,
+        postAddress: null,
+        postCity: null,
+        postRegion: null,
+        postCountry: null,
+        postCode: null,
+        address: null,
+        city: null,
+        region: null,
+        country: null,
+        latitude: null,
+        longitude: null,
+        items: [],
+        isDirty: true,
+        isLockedAtServer: false,
+        alertViz: null
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.PM,
+      currencyName: window.$gz.locale.getCurrencyName(),
+      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      hour12: window.$gz.locale.getHour12(),
+      // resetSelections: false,
+      selectLists: {
+        woItemPriorities: [],
+        woItemStatus: [],
+        woItemTaskCompletionTypes: [],
+        loanUnitRateUnits: [],
+        pmTimeUnits: []
+      },
+      maxTableNotesLength: 50, //value to cut off notes in tables
+      saveResult: {
+        fatal: false, //fatal error, further save is pointless, bail early and report
+        errors: null //contains error objects from save
+      },
+      lastGetContractId: -1, //note: -1 so that a new record updates
+      lastGetCustomerId: -1,
+      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
+      duplicateDlg: false,
+      duplicateDlgTitle: null,
+      duplicateTo: null, //"pm","wo" or "quote"
+      genCopyWiki: false,
+      genCopyAttachments: false
+    };
+  },
+  computed: {
+    useInventory() {
+      return window.$gz.store.state.globalSettings.useInventory;
+    },
+    alertTechNotes() {
+      return this.obj.customerTechNotesViz
+        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
+        : null;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
 
@@ -179,128 +301,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        serial: 0,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        stopGeneratingDate: null,
-        excludeDaysOfWeek: 96,
-        active: true,
-        nextServiceDate: null,
-        repeatUnit: 7,
-        generateBeforeUnit: 4,
-        repeatInterval: 1,
-        generateBeforeInterval: 14,
-        generateDate: null,
-        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
-        projectId: null,
-        contractId: null,
-        internalReferenceNumber: null,
-        customerReferenceNumber: null,
-        customerContactName: null,
-        onsite: true,
-        postAddress: null,
-        postCity: null,
-        postRegion: null,
-        postCountry: null,
-        postCode: null,
-        address: null,
-        city: null,
-        region: null,
-        country: null,
-        latitude: null,
-        longitude: null,
-        items: [],
-        isDirty: true,
-        isLockedAtServer: false,
-        alertViz: null
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.PM,
-      currencyName: window.$gz.locale.getCurrencyName(),
-      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-      languageName: window.$gz.locale.getResolvedLanguage(),
-      hour12: window.$gz.locale.getHour12(),
-      // resetSelections: false,
-      selectLists: {
-        woItemPriorities: [],
-        woItemStatus: [],
-        woItemTaskCompletionTypes: [],
-        loanUnitRateUnits: [],
-        pmTimeUnits: []
-      },
-      maxTableNotesLength: 50, //value to cut off notes in tables
-      saveResult: {
-        fatal: false, //fatal error, further save is pointless, bail early and report
-        errors: null //contains error objects from save
-      },
-      lastGetContractId: -1, //note: -1 so that a new record updates
-      lastGetCustomerId: -1,
-      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
-      duplicateDlg: false,
-      duplicateDlgTitle: null,
-      duplicateTo: null, //"pm","wo" or "quote"
-      genCopyWiki: false,
-      genCopyAttachments: false
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    useInventory() {
-      return window.$gz.store.state.globalSettings.useInventory;
-    },
-    alertTechNotes() {
-      return this.obj.customerTechNotesViz
-        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
-        : null;
-    }
-  },
   methods: {
     setDirty: function() {
       //console.log("WO HEADER SET DIRTY!! TRIGGERED");
@@ -766,6 +766,7 @@ async function saveHeader(vm) {
   //the purpose of this is to remove the child collections so only the header itself is submitted
   //this was the cleanest way I could find to accomplish this
   //https://stackoverflow.com/a/58206483/8939
+  // eslint-disable-next-line no-unused-vars
   const { items: removedKey1, ...headerOnly } = vm.obj;
 
   //remove *Viz keys so they don't generate traffic
@@ -832,8 +833,10 @@ async function saveItems(vm) {
   for (let i = 0; i < vm.obj.items.length; i++) {
     if (vm.obj.items[i].isDirty) {
       //get copy of item without child collections for independant submit
+      /* eslint-disable no-unused-vars*/
       const {
         expenses: removedKey1,
+
         labors: removedKey2,
         loans: removedKey3,
         parts: removedKey4,
@@ -844,7 +847,7 @@ async function saveItems(vm) {
         outsideServices: removedKey10,
         ...o
       } = vm.obj.items[i];
-
+      /* eslint-enable no-unused-vars*/
       const isPost = o.id == 0;
       let res = await window.$gz.api.upsert(`${API_BASE_URL}items`, o);
       if (res.error) {
@@ -1684,17 +1687,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicateDlg = true;
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.PM,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.PM,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "statuslist":
         m.vm.$router.push({
@@ -1716,18 +1721,6 @@ async function clickHandler(menuItem) {
           name: "svc-task-groups"
         });
         break;
-      case "pm":
-        window.$gz.eventBus.$emit("openobject", {
-          type: window.$gz.type.PM,
-          id: m.vm.obj.fromPMId
-        });
-        break;
-      case "pm":
-        window.$gz.eventBus.$emit("openobject", {
-          type: window.$gz.type.PM,
-          id: m.vm.obj.fromPMId
-        });
-        break;
 
       default:
         window.$gz.eventBus.$emit(
@@ -1885,7 +1878,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -1894,7 +1887,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "PM",
     "PMStopGeneratingDate",
diff --git a/ayanova/src/views/svc-pms.vue b/ayanova/src/views/svc-pms.vue
index f55f5fe3..3f616b18 100644
--- a/ayanova/src/views/svc-pms.vue
+++ b/ayanova/src/views/svc-pms.vue
@@ -2,11 +2,11 @@
   <div>
     <v-row justify="center">
       <v-dialog
-        @keydown.esc="openDialog = false"
-        @keydown.enter="openPM()"
         v-model="openDialog"
         persistent
         max-width="600px"
+        @keydown.esc="openDialog = false"
+        @keydown.enter="openPM()"
       >
         <v-card>
           <v-card-title>
@@ -29,8 +29,8 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="openPM()"
               :disabled="!openPMNumber"
+              @click="openPM()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -39,9 +39,9 @@
     </v-row>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
 
@@ -51,10 +51,10 @@
       data-list-key="PMDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="pmsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -63,6 +63,21 @@
 <script>
 const FORM_KEY = "pm-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.PM,
+      selectedItems: [],
+      reload: false,
+      openDialog: false,
+      openPMNumber: null,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   async created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.PM);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -93,21 +108,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.PM,
-      selectedItems: [],
-      reload: false,
-      openDialog: false,
-      openPMNumber: null,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -158,11 +158,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.PM)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.PM)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-project.vue b/ayanova/src/views/svc-project.vue
index b0476909..aaf7826e 100644
--- a/ayanova/src/views/svc-project.vue
+++ b/ayanova/src/views/svc-project.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('ProjectName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,10 +26,10 @@
             xl="3"
           >
             <v-text-field
+              ref="accountNumber"
               v-model="obj.accountNumber"
               :readonly="formState.readOnly"
               :label="$ay.t('ProjectAccountNumber')"
-              ref="accountNumber"
               data-cy="accountNumber"
               :error-messages="form().serverErrors(this, 'accountNumber')"
               @input="fieldValueChanged('accountNumber')"
@@ -44,13 +44,13 @@
             xl="3"
           >
             <gz-pick-list
+              ref="projectOverseerId"
+              v-model="obj.projectOverseerId"
               :aya-type="ayaTypes().User"
               :variant="'inside'"
               show-edit-icon
-              v-model="obj.projectOverseerId"
               :readonly="formState.readOnly"
               :label="$ay.t('ProjectProjectOverseerID')"
-              ref="projectOverseerId"
               data-cy="projectOverseerId"
               :error-messages="form().serverErrors(this, 'projectOverseerId')"
               @input="fieldValueChanged('projectOverseerId')"
@@ -65,10 +65,10 @@
             xl="3"
           >
             <gz-date-time-picker
-              :label="$ay.t('ProjectDateStarted')"
-              v-model="obj.dateStarted"
-              :readonly="formState.readOnly"
               ref="dateStarted"
+              v-model="obj.dateStarted"
+              :label="$ay.t('ProjectDateStarted')"
+              :readonly="formState.readOnly"
               data-cy="dateStarted"
               :error-messages="form().serverErrors(this, 'dateStarted')"
               @input="fieldValueChanged('dateStarted')"
@@ -83,24 +83,24 @@
             xl="3"
           >
             <gz-date-time-picker
+              ref="dateCompleted"
+              v-model="obj.dateCompleted"
               :label="$ay.t('ProjectDateCompleted')"
               :rules="[
                 form().datePrecedence(this, 'dateStarted', 'dateCompleted')
               ]"
               :error-messages="form().serverErrors(this, 'dateCompleted')"
-              v-model="obj.dateCompleted"
               :readonly="formState.readOnly"
-              ref="dateCompleted"
               data-cy="dateCompleted"
               @input="fieldValueChanged('dateCompleted')"
             ></gz-date-time-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -109,22 +109,22 @@
           <!-- --------------------------------- -->
           <v-col v-if="form().showMe(this, 'Notes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('ProjectNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -133,11 +133,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -146,10 +146,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -175,64 +175,6 @@ const FORM_KEY = "project-edit";
 const API_BASE_URL = "project/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Project";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Project);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //---------------------------------
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-      //----------------------------
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -294,6 +236,64 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Project);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //---------------------------------
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      //----------------------------
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -473,17 +473,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Project,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Project,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "WorkOrderList":
         m.vm.$router.push({
@@ -630,7 +632,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -638,7 +640,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Project",
     "ProjectName",
diff --git a/ayanova/src/views/svc-projects.vue b/ayanova/src/views/svc-projects.vue
index 8336c32a..655ada10 100644
--- a/ayanova/src/views/svc-projects.vue
+++ b/ayanova/src/views/svc-projects.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="ProjectDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="projectsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "project-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Project);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Project);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Project)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Project)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-expenses.vue b/ayanova/src/views/svc-quote-item-expenses.vue
index b1287e16..87ac2a14 100644
--- a/ayanova/src/views/svc-quote-item-expenses.vue
+++ b/ayanova/src/views/svc-quote-item-expenses.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteItemExpenseDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemExpensesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "quote-item-expense-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemExpense
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemExpense
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-labors.vue b/ayanova/src/views/svc-quote-item-labors.vue
index 492c60d8..1662f846 100644
--- a/ayanova/src/views/svc-quote-item-labors.vue
+++ b/ayanova/src/views/svc-quote-item-labors.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="QuoteItemLaborDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemLaborsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "quote-item-labor-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.QuoteItemLabor,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -51,19 +64,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.QuoteItemLabor,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -93,13 +93,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemLabor
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemLabor
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-loans.vue b/ayanova/src/views/svc-quote-item-loans.vue
index 62701474..b6c39f33 100644
--- a/ayanova/src/views/svc-quote-item-loans.vue
+++ b/ayanova/src/views/svc-quote-item-loans.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="QuoteItemLoanDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemLoansTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "quote-item-loan-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.QuoteItemLoan,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.QuoteItemLoan,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemLoan
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemLoan
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-outside-services.vue b/ayanova/src/views/svc-quote-item-outside-services.vue
index 6233558a..b14d6252 100644
--- a/ayanova/src/views/svc-quote-item-outside-services.vue
+++ b/ayanova/src/views/svc-quote-item-outside-services.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteItemOutsideServiceDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemOutsideServicesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "quote-item-outside-service-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemOutsideService
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemOutsideService
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-parts.vue b/ayanova/src/views/svc-quote-item-parts.vue
index 5d4daddc..21264503 100644
--- a/ayanova/src/views/svc-quote-item-parts.vue
+++ b/ayanova/src/views/svc-quote-item-parts.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="QuoteItemPartDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemPartsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "quote-item-part-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.QuoteItemPart,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.QuoteItemPart,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemPart
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemPart
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-scheduled-users.vue b/ayanova/src/views/svc-quote-item-scheduled-users.vue
index 58d1811f..0f3ffc5a 100644
--- a/ayanova/src/views/svc-quote-item-scheduled-users.vue
+++ b/ayanova/src/views/svc-quote-item-scheduled-users.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="QuoteItemScheduledUserDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemScheduledUsersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "quote-item-scheduled-user-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.QuoteItemScheduledUser,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.QuoteItemScheduledUser,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemScheduledUser
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemScheduledUser
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-tasks.vue b/ayanova/src/views/svc-quote-item-tasks.vue
index d0e5bc62..561a2c05 100644
--- a/ayanova/src/views/svc-quote-item-tasks.vue
+++ b/ayanova/src/views/svc-quote-item-tasks.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteItemTaskDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemTasksTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "quote-item-task-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemTask
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemTask
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-travels.vue b/ayanova/src/views/svc-quote-item-travels.vue
index 36ee897a..8c8b8997 100644
--- a/ayanova/src/views/svc-quote-item-travels.vue
+++ b/ayanova/src/views/svc-quote-item-travels.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteItemTravelDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemTravelsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "quote-item-travel-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemTravel
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemTravel
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-item-units.vue b/ayanova/src/views/svc-quote-item-units.vue
index b50c6eaf..89923171 100644
--- a/ayanova/src/views/svc-quote-item-units.vue
+++ b/ayanova/src/views/svc-quote-item-units.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="QuoteItemUnitDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="QuoteItemUnitsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "quote-item-unit-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.QuoteItemUnit,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -51,19 +64,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.QuoteItemUnit,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -93,13 +93,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteItemUnit
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItemUnit
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-items.vue b/ayanova/src/views/svc-quote-items.vue
index 9bfc839a..3b51d2ea 100644
--- a/ayanova/src/views/svc-quote-items.vue
+++ b/ayanova/src/views/svc-quote-items.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteItemDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="quoteItemsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "quote-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.QuoteItem)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteItem
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-quote-status-edit.vue b/ayanova/src/views/svc-quote-status-edit.vue
index 52730d39..04ccd2b8 100644
--- a/ayanova/src/views/svc-quote-status-edit.vue
+++ b/ayanova/src/views/svc-quote-status-edit.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,10 +20,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="completed"
               v-model="obj.completed"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusCompleted')"
-              ref="completed"
               data-cy="completed"
               :error-messages="form().serverErrors(this, 'completed')"
               @change="fieldValueChanged('completed')"
@@ -32,10 +32,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="locked"
               v-model="obj.locked"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusLocked')"
-              ref="locked"
               data-cy="locked"
               :error-messages="form().serverErrors(this, 'locked')"
               @change="fieldValueChanged('locked')"
@@ -44,27 +44,27 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-role-picker
-              :label="$ay.t('SelectRoles')"
-              v-model="obj.selectRoles"
-              :readonly="formState.readOnly"
               ref="selectRoles"
+              v-model="obj.selectRoles"
+              :label="$ay.t('SelectRoles')"
+              :readonly="formState.readOnly"
               data-cy="selectRoles"
               :error-messages="form().serverErrors(this, 'selectRoles')"
-              @input="fieldValueChanged('selectRoles')"
               limit-selection-to="inside"
+              @input="fieldValueChanged('selectRoles')"
             ></gz-role-picker>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-role-picker
-              :label="$ay.t('RemoveRoles')"
-              v-model="obj.removeRoles"
-              :readonly="formState.readOnly"
               ref="removeRoles"
+              v-model="obj.removeRoles"
+              :label="$ay.t('RemoveRoles')"
+              :readonly="formState.readOnly"
               data-cy="removeRoles"
               :error-messages="form().serverErrors(this, 'removeRoles')"
-              @input="fieldValueChanged('removeRoles')"
               limit-selection-to="inside"
+              @input="fieldValueChanged('removeRoles')"
             ></gz-role-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
@@ -72,21 +72,21 @@
               {{ $ay.t("StatusColor") }}
             </span>
             <v-color-picker
+              ref="color"
               v-model="obj.color"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'color')"
-              ref="color"
               @input="fieldValueChanged('color')"
             ></v-color-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -96,14 +96,14 @@
           <!------------------------------------->
           <v-col v-if="form().showMe(this, 'StatusNotes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
         </v-row>
@@ -119,58 +119,6 @@ const FORM_KEY = "svc-quote-status-edit";
 const API_BASE_URL = "quote-status/";
 const FORM_CUSTOM_TEMPLATE_KEY = "QuoteStatus";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.QuoteStatus);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -228,6 +176,58 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.QuoteStatus);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
diff --git a/ayanova/src/views/svc-quote-status.vue b/ayanova/src/views/svc-quote-status.vue
index f0fd4c5b..bef05a43 100644
--- a/ayanova/src/views/svc-quote-status.vue
+++ b/ayanova/src/views/svc-quote-status.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="$ay.ayt().QuoteStatus"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="QuoteStatusDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="woStatusTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,6 +22,13 @@
 <script>
 const FORM_KEY = "svc-quote-status";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.QuoteStatus);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -30,13 +37,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -61,13 +61,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.QuoteStatus
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.QuoteStatus
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
 
diff --git a/ayanova/src/views/svc-quote.vue b/ayanova/src/views/svc-quote.vue
index 59ea9c49..001e1801 100644
--- a/ayanova/src/views/svc-quote.vue
+++ b/ayanova/src/views/svc-quote.vue
@@ -22,8 +22,8 @@
           :pvm="this"
           :goto="this.goto"
           data-cy="woItems"
-          @change="setDirty()"
           class="mt-16"
+          @change="setDirty()"
         />
       </v-form>
     </div>
@@ -35,7 +35,7 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="duplicateDlg">
+        <v-dialog v-model="duplicateDlg" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ duplicateDlgTitle }}</v-card-title>
             <v-card-text>
@@ -50,7 +50,7 @@
               ></v-checkbox>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="duplicateDlg = false" color="primary">{{
+              <v-btn text color="primary" @click="duplicateDlg = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -78,6 +78,151 @@ export default {
     GzQuoteHeader,
     GzQuoteItems
   },
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        serial: 0,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
+        projectId: null,
+        contractId: null,
+        internalReferenceNumber: null,
+        customerReferenceNumber: null,
+        customerContactName: null,
+        preparedById: window.$gz.store.state.userId,
+        introduction: null,
+        requested: window.$gz.locale.nowUTC8601String(),
+        validUntil: null,
+        submitted: null,
+        approved: null,
+        onsite: true,
+        postAddress: null,
+        postCity: null,
+        postRegion: null,
+        postCountry: null,
+        postCode: null,
+        address: null,
+        city: null,
+        region: null,
+        country: null,
+        latitude: null,
+        longitude: null,
+        items: [],
+        states: [],
+        isDirty: true,
+        isLockedAtServer: false,
+        alertViz: null
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Quote,
+      currencyName: window.$gz.locale.getCurrencyName(),
+      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      hour12: window.$gz.locale.getHour12(),
+      selectLists: {
+        quotestatus: [],
+        allowedquotestatus: [],
+        woItemPriorities: [],
+        woItemStatus: [],
+        woItemTaskCompletionTypes: [],
+        loanUnitRateUnits: []
+      },
+      maxTableNotesLength: 50, //value to cut off notes in tables
+      saveResult: {
+        fatal: false, //fatal error, further save is pointless, bail early and report
+        errors: null //contains error objects from save
+      },
+      lastGetContractId: -1, //note: -1 so that a new record updates
+      lastGetCustomerId: -1,
+      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
+      duplicateDlg: false,
+      duplicateDlgTitle: null,
+      duplicateTo: null, //"pm","wo" or "quote"
+      genCopyWiki: false,
+      genCopyAttachments: false
+    };
+  },
+  computed: {
+    currentState() {
+      //return actual status object from top level shell based on current state
+      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
+
+      if (this.obj.states != null && this.obj.states.length > 0) {
+        //find it in the status collection
+        //and return here
+        const laststate = this.obj.states[this.obj.states.length - 1];
+        const found = this.selectLists.quotestatus.find(
+          z => z.id == laststate.quoteStatusId
+        );
+        if (found) {
+          return found;
+        }
+      }
+      //default
+      return {
+        id: 0,
+        name: "-",
+        active: true,
+        color: "#ffffff", //invisible
+        completed: false,
+        locked: false
+      };
+    },
+    useInventory() {
+      return window.$gz.store.state.globalSettings.useInventory;
+    },
+    alertTechNotes() {
+      return this.obj.customerTechNotesViz
+        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
+        : null;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
 
@@ -177,151 +322,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        serial: 0,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
-        projectId: null,
-        contractId: null,
-        internalReferenceNumber: null,
-        customerReferenceNumber: null,
-        customerContactName: null,
-        preparedById: window.$gz.store.state.userId,
-        introduction: null,
-        requested: window.$gz.locale.nowUTC8601String(),
-        validUntil: null,
-        submitted: null,
-        approved: null,
-        onsite: true,
-        postAddress: null,
-        postCity: null,
-        postRegion: null,
-        postCountry: null,
-        postCode: null,
-        address: null,
-        city: null,
-        region: null,
-        country: null,
-        latitude: null,
-        longitude: null,
-        items: [],
-        states: [],
-        isDirty: true,
-        isLockedAtServer: false,
-        alertViz: null
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Quote,
-      currencyName: window.$gz.locale.getCurrencyName(),
-      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-      languageName: window.$gz.locale.getResolvedLanguage(),
-      hour12: window.$gz.locale.getHour12(),
-      selectLists: {
-        quotestatus: [],
-        allowedquotestatus: [],
-        woItemPriorities: [],
-        woItemStatus: [],
-        woItemTaskCompletionTypes: [],
-        loanUnitRateUnits: []
-      },
-      maxTableNotesLength: 50, //value to cut off notes in tables
-      saveResult: {
-        fatal: false, //fatal error, further save is pointless, bail early and report
-        errors: null //contains error objects from save
-      },
-      lastGetContractId: -1, //note: -1 so that a new record updates
-      lastGetCustomerId: -1,
-      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
-      duplicateDlg: false,
-      duplicateDlgTitle: null,
-      duplicateTo: null, //"pm","wo" or "quote"
-      genCopyWiki: false,
-      genCopyAttachments: false
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    currentState() {
-      //return actual status object from top level shell based on current state
-      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
-
-      if (this.obj.states != null && this.obj.states.length > 0) {
-        //find it in the status collection
-        //and return here
-        const laststate = this.obj.states[this.obj.states.length - 1];
-        const found = this.selectLists.quotestatus.find(
-          z => z.id == laststate.quoteStatusId
-        );
-        if (found) {
-          return found;
-        }
-      }
-      //default
-      return {
-        id: 0,
-        name: "-",
-        active: true,
-        color: "#ffffff", //invisible
-        completed: false,
-        locked: false
-      };
-    },
-    useInventory() {
-      return window.$gz.store.state.globalSettings.useInventory;
-    },
-    alertTechNotes() {
-      return this.obj.customerTechNotesViz
-        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
-        : null;
-    }
-  },
   methods: {
     setDirty: function() {
       this.formState.dirty = true;
@@ -800,8 +800,9 @@ async function saveHeader(vm) {
   //the purpose of this is to remove the child collections so only the header itself is submitted
   //this was the cleanest way I could find to accomplish this
   //https://stackoverflow.com/a/58206483/8939
+  /* eslint-disable no-unused-vars*/
   const { items: removedKey1, states: removedKey2, ...headerOnly } = vm.obj;
-
+  /* eslint-enable no-unused-vars*/
   //remove *Viz keys so they don't generate traffic
   headerOnly.alertViz = undefined;
   headerOnly.projectViz = undefined;
@@ -892,6 +893,7 @@ async function saveItems(vm) {
   for (let i = 0; i < vm.obj.items.length; i++) {
     if (vm.obj.items[i].isDirty) {
       //get copy of item without child collections for independant submit
+      /* eslint-disable no-unused-vars*/
       const {
         expenses: removedKey1,
         labors: removedKey2,
@@ -904,7 +906,7 @@ async function saveItems(vm) {
         outsideServices: removedKey10,
         ...o
       } = vm.obj.items[i];
-
+      /* eslint-enable no-unused-vars*/
       const isPost = o.id == 0;
       const res = await window.$gz.api.upsert(`${API_BASE_URL}items`, o);
       if (res.error) {
@@ -1738,17 +1740,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicateDlg = true;
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Quote,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Quote,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "statuslist":
         m.vm.$router.push({
@@ -1948,7 +1952,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -1957,7 +1961,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Quote",
     "QuotePreparedByID",
diff --git a/ayanova/src/views/svc-quotes.vue b/ayanova/src/views/svc-quotes.vue
index 1783a101..0bef1539 100644
--- a/ayanova/src/views/svc-quotes.vue
+++ b/ayanova/src/views/svc-quotes.vue
@@ -2,11 +2,11 @@
   <div>
     <v-row justify="center">
       <v-dialog
-        @keydown.esc="openDialog = false"
-        @keydown.enter="openQuote()"
         v-model="openDialog"
         persistent
         max-width="600px"
+        @keydown.esc="openDialog = false"
+        @keydown.enter="openQuote()"
       >
         <v-card>
           <v-card-title>
@@ -29,8 +29,8 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="openQuote()"
               :disabled="!openQuoteNumber"
+              @click="openQuote()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -39,9 +39,9 @@
     </v-row>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
 
@@ -51,10 +51,10 @@
       data-list-key="QuoteDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="quotesTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -64,6 +64,21 @@
 <script>
 const FORM_KEY = "quote-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.Quote,
+      selectedItems: [],
+      reload: false,
+      openDialog: false,
+      openQuoteNumber: null,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   async created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Quote);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -94,21 +109,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.Quote,
-      selectedItems: [],
-      reload: false,
-      openDialog: false,
-      openQuoteNumber: null,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -160,11 +160,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Quote)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Quote)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-schedule-user.vue b/ayanova/src/views/svc-schedule-user.vue
index 91ca1732..a1a7f1ec 100644
--- a/ayanova/src/views/svc-schedule-user.vue
+++ b/ayanova/src/views/svc-schedule-user.vue
@@ -79,6 +79,7 @@
         :event-more-text="$ay.t('More')"
         :first-time="formUserOptions.firstTime"
         :weekdays="weekdays"
+        event-overlap-mode="column"
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
@@ -89,7 +90,6 @@
         @mouseup:day="endDragExtend"
         @mouseup:time="endDragExtend"
         @mouseleave.native="cancelDrag"
-        event-overlap-mode="column"
       >
         <template v-slot:event="{ event, timed, eventSummary }">
           <div class="v-event-draggable">
@@ -119,7 +119,7 @@
       <!-- NEW ITEM DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="360px" persistent v-model="newItemDialog">
+          <v-dialog v-model="newItemDialog" max-width="360px" persistent>
             <v-card>
               <v-card-title>{{ $ay.t("New") }}</v-card-title>
               <v-card-text>
@@ -140,7 +140,7 @@
                 </v-col> -->
               </v-card-text>
               <v-card-actions>
-                <v-btn text @click="cancelAddNew" color="primary">{{
+                <v-btn text color="primary" @click="cancelAddNew">{{
                   $ay.t("Cancel")
                 }}</v-btn>
               </v-card-actions>
@@ -151,7 +151,7 @@
       <!-- MORE INFO DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="600px" v-model="moreInfoDialog">
+          <v-dialog v-model="moreInfoDialog" max-width="600px">
             <v-card>
               <v-toolbar>
                 <v-btn icon @click="openScheduledItem()">
@@ -214,14 +214,14 @@
                       >$ayiFlag</v-icon
                     >
                     <v-icon
-                      color="primary"
                       v-if="evInfo.wostatuslocked"
+                      color="primary"
                       class="ml-4"
                       >$ayiLock</v-icon
                     >
                     <v-icon
-                      color="primary"
                       v-if="evInfo.wostatuscompleted"
+                      color="primary"
                       class="ml-4"
                       >$ayiCheckCircle</v-icon
                     >
@@ -277,23 +277,23 @@
     <template>
       <!-- ############## SETTINGS DIALOG #################-->
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="settingsDialog">
+        <v-dialog v-model="settingsDialog" max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("ScheduleOptions") }} </v-card-title>
             <v-card-text>
               <v-row no-gutters>
                 <v-col cols="12" class="mt-2">
                   <gz-time-picker
-                    :label="$ay.t('ScheduleFirstHour')"
                     v-model="tempFirstTime"
+                    :label="$ay.t('ScheduleFirstHour')"
                   ></gz-time-picker>
                 </v-col>
 
                 <v-col cols="12">
                   <GZDaysOfWeek
-                    :label="$ay.t('ExcludeDaysOfWeek')"
-                    v-model="formUserOptions.excludeDaysOfWeek"
                     ref="daysofweek"
+                    v-model="formUserOptions.excludeDaysOfWeek"
+                    :label="$ay.t('ExcludeDaysOfWeek')"
                   ></GZDaysOfWeek>
                 </v-col>
 
@@ -343,15 +343,15 @@
               </v-row>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="settingsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="settingsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer v-if="issmAndUp"></v-spacer>
               <v-btn
                 color="primary"
                 text
-                @click="saveUserOptions()"
                 class="ml-4"
+                @click="saveUserOptions()"
                 >{{ $ay.t("Save") }}</v-btn
               >
             </v-card-actions>
@@ -368,25 +368,6 @@ export default {
   components: {
     GZDaysOfWeek
   },
-  async created() {
-    const vm = this;
-    try {
-      this.userId = vm.$route.params.recordid;
-      this.userName = vm.$route.params.name;
-      await initForm(vm);
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //----------------------------
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    saveFormSettings(this);
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       focus: "",
@@ -427,6 +408,39 @@ export default {
       userName: null
     };
   },
+  computed: {
+    weekdays() {
+      return window.$gz.util.DaysOfWeekToWeekdays(
+        this.formUserOptions.excludeDaysOfWeek
+      );
+    },
+    isXS() {
+      //console.log(this.$vuetify.breakpoint);
+      return this.$vuetify.breakpoint.xs;
+    },
+    issmAndUp() {
+      return this.$vuetify.breakpoint.smAndUp;
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      this.userId = vm.$route.params.recordid;
+      this.userName = vm.$route.params.name;
+      await initForm(vm);
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //----------------------------
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    saveFormSettings(this);
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     async refresh() {
       await this.fetchEvents({ start: null, end: null });
@@ -539,7 +553,6 @@ export default {
             if (res.error) {
               this.formState.serverError = res.error;
               window.$gz.form.setErrorBoxErrors(this);
-            } else {
             }
           } catch (error) {
             window.$gz.errorHandler.handleFormError(error, this);
@@ -829,20 +842,6 @@ export default {
       await this.refresh();
     }
     //eom
-  },
-  computed: {
-    weekdays() {
-      return window.$gz.util.DaysOfWeekToWeekdays(
-        this.formUserOptions.excludeDaysOfWeek
-      );
-    },
-    isXS() {
-      //console.log(this.$vuetify.breakpoint);
-      return this.$vuetify.breakpoint.xs;
-    },
-    issmAndUp() {
-      return this.$vuetify.breakpoint.smAndUp;
-    }
   }
 };
 
@@ -989,7 +988,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   getFormSettings(vm);
   await getFormUserOptions(vm);
 }
@@ -1074,7 +1073,7 @@ async function saveFormUserOptions(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "DateRangeToday",
     "ExcludeDaysOfWeek",
diff --git a/ayanova/src/views/svc-schedule.vue b/ayanova/src/views/svc-schedule.vue
index 7870ebaf..045589ae 100644
--- a/ayanova/src/views/svc-schedule.vue
+++ b/ayanova/src/views/svc-schedule.vue
@@ -7,8 +7,8 @@
           text
           :small="isXS"
           :large="issmAndUp"
-          @click="setToday"
           data-cy="btnTodaySvcSchedule"
+          @click="setToday"
         >
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
@@ -32,13 +32,13 @@
         <v-spacer v-if="issmAndUp"></v-spacer>
         <template v-if="issmAndUp">
           <gz-tag-picker
+            v-model="tags"
             class="mr-3"
             :place-holder="$ay.t('FilterUsers')"
             prepend-inner-icon="$ayiFilter"
             clearable
             no-label
             select-only
-            v-model="tags"
             @input="refresh"
           ></gz-tag-picker>
         </template>
@@ -94,8 +94,8 @@
     <v-sheet :height="calendarHeight">
       <v-calendar
         ref="calendar"
-        data-cy="calendar"
         v-model="focus"
+        data-cy="calendar"
         color="primary"
         :events="events"
         :event-color="getEventColor"
@@ -104,6 +104,11 @@
         :event-more-text="$ay.t('More')"
         :first-time="formUserOptions.firstTime"
         :weekdays="weekdays"
+        event-overlap-mode="column"
+        category-show-all
+        :categories="categories"
+        category-text="name"
+        category-for-invalid="NOT VALID"
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
@@ -118,14 +123,9 @@
         @mouseup:time="endDragExtend"
         @mouseup:time-category="endDragExtend"
         @mouseleave.native="cancelDrag"
-        event-overlap-mode="column"
-        category-show-all
-        :categories="categories"
-        category-text="name"
-        category-for-invalid="NOT VALID"
       >
         <template v-slot:category="{ category }">
-          <div @click="openUserSchedule(category)" class="text-center">
+          <div class="text-center" @click="openUserSchedule(category)">
             <v-btn text class="text-none">{{ category.name }}</v-btn>
           </div>
         </template>
@@ -154,7 +154,7 @@
       <!-- NEW ITEM DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="360px" persistent v-model="newItemDialog">
+          <v-dialog v-model="newItemDialog" max-width="360px" persistent>
             <v-card>
               <v-card-title>{{ $ay.t("New") }}</v-card-title>
               <v-card-text>
@@ -169,7 +169,7 @@
                 </v-col>
               </v-card-text>
               <v-card-actions>
-                <v-btn text @click="cancelAddNew" color="primary">{{
+                <v-btn text color="primary" @click="cancelAddNew">{{
                   $ay.t("Cancel")
                 }}</v-btn>
               </v-card-actions>
@@ -180,7 +180,7 @@
       <!-- MORE INFO DIALOG -->
       <template>
         <v-row justify="center">
-          <v-dialog max-width="600px" v-model="moreInfoDialog">
+          <v-dialog v-model="moreInfoDialog" max-width="600px">
             <v-card>
               <v-toolbar>
                 <v-btn icon @click="openScheduledItem()">
@@ -241,14 +241,14 @@
                     >$ayiFlag</v-icon
                   >
                   <v-icon
-                    color="primary"
                     v-if="evInfo.wostatuslocked"
+                    color="primary"
                     class="ml-4"
                     >$ayiLock</v-icon
                   >
                   <v-icon
-                    color="primary"
                     v-if="evInfo.wostatuscompleted"
+                    color="primary"
                     class="ml-4"
                     >$ayiCheckCircle</v-icon
                   >
@@ -301,7 +301,7 @@
     <template>
       <!-- ############## SETTINGS DIALOG #################-->
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="settingsDialog">
+        <v-dialog v-model="settingsDialog" max-width="600px">
           <v-card>
             <v-card-title>{{ $ay.t("ScheduleOptions") }} </v-card-title>
             <v-card-text>
@@ -309,27 +309,27 @@
                 <template v-if="isXS">
                   <v-col cols="12">
                     <gz-tag-picker
+                      v-model="tags"
                       :label="$ay.t('FilterUsers')"
                       prepend-inner-icon="$ayiFilter"
                       clearable
                       select-only
-                      v-model="tags"
                       @input="refresh"
                     ></gz-tag-picker>
                   </v-col>
                 </template>
                 <v-col cols="12" class="mt-2">
                   <gz-time-picker
-                    :label="$ay.t('ScheduleFirstHour')"
                     v-model="tempFirstTime"
+                    :label="$ay.t('ScheduleFirstHour')"
                   ></gz-time-picker>
                 </v-col>
 
                 <v-col cols="12">
                   <GZDaysOfWeek
-                    :label="$ay.t('ExcludeDaysOfWeek')"
-                    v-model="formUserOptions.excludeDaysOfWeek"
                     ref="daysofweek"
+                    v-model="formUserOptions.excludeDaysOfWeek"
+                    :label="$ay.t('ExcludeDaysOfWeek')"
                   ></GZDaysOfWeek>
                 </v-col>
 
@@ -358,15 +358,15 @@
               </v-row>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="settingsDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="settingsDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer v-if="issmAndUp"></v-spacer>
               <v-btn
                 color="primary"
                 text
-                @click="saveUserOptions()"
                 class="ml-4"
+                @click="saveUserOptions()"
                 >{{ $ay.t("Save") }}</v-btn
               >
             </v-card-actions>
@@ -383,23 +383,6 @@ export default {
   components: {
     GZDaysOfWeek
   },
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //----------------------------
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  beforeDestroy() {
-    saveFormSettings(this);
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       focus: "",
@@ -440,6 +423,36 @@ export default {
       lastEnd: null
     };
   },
+  computed: {
+    weekdays() {
+      return window.$gz.util.DaysOfWeekToWeekdays(
+        this.formUserOptions.excludeDaysOfWeek
+      );
+    },
+    isXS() {
+      return this.$vuetify.breakpoint.xs;
+    },
+    issmAndUp() {
+      return this.$vuetify.breakpoint.smAndUp;
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //----------------------------
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  beforeDestroy() {
+    saveFormSettings(this);
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     async refresh() {
       await this.fetchEvents({ start: null, end: null });
@@ -588,7 +601,6 @@ export default {
             if (res.error) {
               this.formState.serverError = res.error;
               window.$gz.form.setErrorBoxErrors(this);
-            } else {
             }
           } catch (error) {
             window.$gz.errorHandler.handleFormError(error, this);
@@ -907,19 +919,6 @@ export default {
       await this.refresh();
     }
     //eom
-  },
-  computed: {
-    weekdays() {
-      return window.$gz.util.DaysOfWeekToWeekdays(
-        this.formUserOptions.excludeDaysOfWeek
-      );
-    },
-    isXS() {
-      return this.$vuetify.breakpoint.xs;
-    },
-    issmAndUp() {
-      return this.$vuetify.breakpoint.smAndUp;
-    }
   }
 };
 
diff --git a/ayanova/src/views/svc-task-group.vue b/ayanova/src/views/svc-task-group.vue
index b82ca57d..e548d8be 100644
--- a/ayanova/src/views/svc-task-group.vue
+++ b/ayanova/src/views/svc-task-group.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('TaskGroupName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,10 +20,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -68,8 +68,8 @@
                         v-if="!formState.readOnly"
                         large
                         icon
-                        @click="editItem(item.index)"
                         class="ml-4"
+                        @click="editItem(item.index)"
                       >
                         <v-icon small>
                           $ayiEdit
@@ -84,14 +84,14 @@
           <!------------------------------------->
           <v-col cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('TaskGroupNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
         </v-row>
@@ -112,25 +112,25 @@
               <v-row>
                 <v-col cols="12">
                   <v-textarea
+                    ref="task"
                     v-model="obj.items[editItemIndex].task"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Task')"
                     :error-messages="
                       form().serverErrors(this, `Items[${editItemIndex}].task`)
                     "
-                    @input="fieldValueChanged(`Items[${editItemIndex}].task`)"
-                    ref="task"
                     data-cy="task"
                     auto-grow
+                    @input="fieldValueChanged(`Items[${editItemIndex}].task`)"
                   ></v-textarea>
                 </v-col>
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="Items.sequence"
                     v-model="obj.items[editItemIndex].sequence"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Sequence')"
-                    ref="Items.sequence"
                     data-cy="Items.sequence"
                     :rules="[
                       form().integerValid(this, 'Items.sequence'),
@@ -142,10 +142,10 @@
                         `Items[${editItemIndex}].sequence`
                       )
                     "
+                    type="number"
                     @input="
                       fieldValueChanged(`Items[${editItemIndex}].sequence`)
                     "
-                    type="number"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -160,16 +160,16 @@
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="addItem()"
                   class="ml-4"
+                  @click="addItem()"
                   >{{ $ay.t("New") }}</v-btn
                 >
 
                 <v-btn
                   color="blue darken-1"
                   text
-                  @click="editItemDialog = false"
                   class="ml-4"
+                  @click="editItemDialog = false"
                   >{{ $ay.t("OK") }}</v-btn
                 >
               </template>
@@ -214,6 +214,77 @@
 const FORM_KEY = "svc-task-group-edit";
 const API_BASE_URL = "task-group/";
 export default {
+  data() {
+    return {
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        active: true,
+        notes: null,
+        items: []
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.TaskGroup,
+      selectedItem: null,
+      editItemDialog: false,
+      editItemIndex: 0
+    };
+  },
+  computed: {
+    itemList: function() {
+      return this.obj.items
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -269,63 +340,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        active: true,
-        notes: null,
-        items: []
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.TaskGroup,
-      selectedItem: null,
-      editItemDialog: false,
-      editItemIndex: 0
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     addItem: function() {
       const newIndex = this.obj.items.length;
@@ -498,20 +512,6 @@ export default {
         });
       }
     }
-  },
-  computed: {
-    itemList: function() {
-      return this.obj.items
-        .map((x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            sequence: x.sequence,
-            task: x.task
-          };
-        })
-        .sort((a, b) => a.sequence - b.sequence);
-    }
   }
 };
 
@@ -537,17 +537,19 @@ async function clickHandler(menuItem) {
         });
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.TaskGroup,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.TaskGroup,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -637,7 +639,7 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
+async function initForm() {
   await fetchTranslatedText();
 }
 
diff --git a/ayanova/src/views/svc-task-groups.vue b/ayanova/src/views/svc-task-groups.vue
index 4750e982..7fe9d4ac 100644
--- a/ayanova/src/views/svc-task-groups.vue
+++ b/ayanova/src/views/svc-task-groups.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="$ay.ayt().TaskGroup"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="TaskGroupDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="taskGroupTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,6 +22,13 @@
 <script>
 const FORM_KEY = "svc-task-group";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.TaskGroup);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -30,13 +37,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -61,11 +61,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.TaskGroup)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.TaskGroup
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-unit-model.vue b/ayanova/src/views/svc-unit-model.vue
index f8e2d747..ea402f02 100644
--- a/ayanova/src/views/svc-unit-model.vue
+++ b/ayanova/src/views/svc-unit-model.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -26,12 +26,12 @@
             xl="3"
           >
             <gz-pick-list
+              ref="vendorId"
+              v-model="obj.vendorId"
               :aya-type="ayaTypes().Vendor"
               show-edit-icon
-              v-model="obj.vendorId"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelVendorID')"
-              ref="vendorId"
               data-cy="vendorId"
               :error-messages="form().serverErrors(this, 'vendorId')"
               @input="fieldValueChanged('vendorId')"
@@ -46,11 +46,11 @@
             xl="3"
           >
             <v-text-field
+              ref="upc"
               v-model="obj.upc"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelUPC')"
               :error-messages="form().serverErrors(this, 'upc')"
-              ref="upc"
               data-cy="upc"
               @input="fieldValueChanged('upc')"
             ></v-text-field>
@@ -64,10 +64,10 @@
             xl="3"
           >
             <gz-date-picker
-              :label="$ay.t('UnitModelIntroducedDate')"
-              v-model="obj.introducedDate"
-              :readonly="formState.readOnly"
               ref="introducedDate"
+              v-model="obj.introducedDate"
+              :label="$ay.t('UnitModelIntroducedDate')"
+              :readonly="formState.readOnly"
               data-cy="introducedDate"
               :error-messages="form().serverErrors(this, 'introducedDate')"
               @input="fieldValueChanged('introducedDate')"
@@ -82,10 +82,10 @@
             xl="3"
           >
             <v-checkbox
+              ref="discontinued"
               v-model="obj.discontinued"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelDiscontinued')"
-              ref="discontinued"
               data-cy="discontinued"
               :error-messages="form().serverErrors(this, 'discontinued')"
               @change="fieldValueChanged('discontinued')"
@@ -100,10 +100,10 @@
             xl="3"
           >
             <gz-date-picker
-              :label="$ay.t('UnitModelDiscontinuedDate')"
-              v-model="obj.discontinuedDate"
-              :readonly="formState.readOnly"
               ref="discontinuedDate"
+              v-model="obj.discontinuedDate"
+              :label="$ay.t('UnitModelDiscontinuedDate')"
+              :readonly="formState.readOnly"
               data-cy="discontinuedDate"
               :error-messages="form().serverErrors(this, 'discontinuedDate')"
               @input="fieldValueChanged('discontinuedDate')"
@@ -118,10 +118,10 @@
             xl="3"
           >
             <v-checkbox
+              ref="lifeTimeWarranty"
               v-model="obj.lifeTimeWarranty"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelLifeTimeWarranty')"
-              ref="lifeTimeWarranty"
               data-cy="lifeTimeWarranty"
               :error-messages="form().serverErrors(this, 'lifeTimeWarranty')"
               @change="fieldValueChanged('lifeTimeWarranty')"
@@ -136,36 +136,36 @@
             xl="3"
           >
             <v-text-field
+              ref="warrantyLength"
               v-model="obj.warrantyLength"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelWarrantyLength')"
-              ref="warrantyLength"
               data-cy="warrantyLength"
               :rules="[form().integerValid(this, 'warrantyLength')]"
               :error-messages="form().serverErrors(this, 'warrantyLength')"
-              @input="fieldValueChanged('warrantyLength')"
               type="number"
+              @input="fieldValueChanged('warrantyLength')"
             ></v-text-field>
           </v-col>
 
           <v-col v-if="form().showMe(this, 'UnitModelWarrantyTerms')" cols="12">
             <v-textarea
+              ref="warrantyTerms"
               v-model="obj.warrantyTerms"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelWarrantyTerms')"
               :error-messages="form().serverErrors(this, 'warrantyTerms')"
-              ref="warrantyTerms"
               data-cy="warrantyTerms"
-              @input="fieldValueChanged('warrantyTerms')"
               auto-grow
+              @input="fieldValueChanged('warrantyTerms')"
             ></v-textarea>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -176,21 +176,21 @@
 
           <v-col v-if="form().showMe(this, 'UnitModelNotes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('UnitModelNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
             <gz-tag-picker
+              ref="tags"
               v-model="obj.tags"
               :readonly="formState.readOnly"
-              ref="tags"
               data-cy="tags"
               :error-messages="form().serverErrors(this, 'tags')"
               @input="fieldValueChanged('tags')"
@@ -199,11 +199,11 @@
 
           <v-col cols="12">
             <gz-custom-fields
+              ref="customFields"
               v-model="obj.customFields"
               :form-key="formCustomTemplateKey"
               :readonly="formState.readOnly"
               :parent-v-m="this"
-              ref="customFields"
               data-cy="customFields"
               :error-messages="form().serverErrors(this, 'customFields')"
               @input="fieldValueChanged('customFields')"
@@ -212,10 +212,10 @@
 
           <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
             <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
               ref="wiki"
               v-model="obj.wiki"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
               :readonly="formState.readOnly"
               @input="fieldValueChanged('wiki')"
             ></gz-wiki
@@ -241,64 +241,6 @@ const FORM_KEY = "unit-model-edit";
 const API_BASE_URL = "unit-model/";
 const FORM_CUSTOM_TEMPLATE_KEY = "UnitModel";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.UnitModel);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.number = `${this.obj.number} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -363,6 +305,64 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.UnitModel);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.number = `${this.obj.number} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -542,17 +542,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.UnitModel,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.UnitModel,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       default:
         window.$gz.eventBus.$emit(
@@ -672,7 +674,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -680,7 +682,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "UnitModel",
     "UnitModelNotes",
diff --git a/ayanova/src/views/svc-unit-models.vue b/ayanova/src/views/svc-unit-models.vue
index a03c8953..8881cf32 100644
--- a/ayanova/src/views/svc-unit-models.vue
+++ b/ayanova/src/views/svc-unit-models.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="UnitModelDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="unitmodelsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "unit-model-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.UnitModel);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.UnitModel);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.UnitModel)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.UnitModel
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-unit.vue b/ayanova/src/views/svc-unit.vue
index c13c51fc..e175396d 100644
--- a/ayanova/src/views/svc-unit.vue
+++ b/ayanova/src/views/svc-unit.vue
@@ -4,7 +4,7 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab">
+        <v-tabs v-model="tab" mobile-breakpoint="100">
           <v-tab>{{ $ay.t("Unit") }}</v-tab>
           <v-tab>{{ $ay.t("Address") }}</v-tab>
           <v-tab>{{ $ay.t("UnitOverrideWarranty") }}</v-tab>
@@ -13,12 +13,12 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="serial"
                     v-model="obj.serial"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitSerial')"
                     :rules="[form().required(this, 'serial')]"
                     :error-messages="form().serverErrors(this, 'serial')"
-                    ref="serial"
                     data-cy="serial"
                     @input="fieldValueChanged('serial')"
                   ></v-text-field>
@@ -26,12 +26,12 @@
 
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <gz-pick-list
+                    ref="customerId"
+                    v-model="obj.customerId"
                     :aya-type="ayaTypes().Customer"
                     show-edit-icon
-                    v-model="obj.customerId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Customer')"
-                    ref="customerId"
                     data-cy="customerId"
                     :error-messages="form().serverErrors(this, 'customerId')"
                     @input="fieldValueChanged('customerId')"
@@ -46,10 +46,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="description"
                     v-model="obj.description"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitDescription')"
-                    ref="description"
                     data-cy="description"
                     :error-messages="form().serverErrors(this, 'description')"
                     @input="fieldValueChanged('description')"
@@ -64,12 +64,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="unitModelId"
+                    v-model="obj.unitModelId"
                     :aya-type="ayaTypes().UnitModel"
                     show-edit-icon
-                    v-model="obj.unitModelId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitModel')"
-                    ref="unitModelId"
                     data-cy="unitModelId"
                     :error-messages="form().serverErrors(this, 'unitModelId')"
                     @input="fieldValueChanged('unitModelId')"
@@ -84,12 +84,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="replacedByUnitId"
+                    v-model="obj.replacedByUnitId"
                     :aya-type="ayaTypes().Unit"
                     show-edit-icon
-                    v-model="obj.replacedByUnitId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitReplacedByUnitID')"
-                    ref="replacedByUnitId"
                     data-cy="replacedByUnitId"
                     :error-messages="
                       form().serverErrors(this, 'replacedByUnitId')
@@ -106,12 +106,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="parentUnitId"
+                    v-model="obj.parentUnitId"
                     :aya-type="ayaTypes().Unit"
                     show-edit-icon
-                    v-model="obj.parentUnitId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitParentUnitID')"
-                    ref="parentUnitId"
                     data-cy="parentUnitId"
                     :error-messages="form().serverErrors(this, 'parentUnitId')"
                     @input="fieldValueChanged('parentUnitId')"
@@ -126,12 +126,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="contractId"
+                    v-model="obj.contractId"
                     :aya-type="ayaTypes().Contract"
                     show-edit-icon
-                    v-model="obj.contractId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Contract')"
-                    ref="contractId"
                     data-cy="contractId"
                     :error-messages="form().serverErrors(this, 'contractId')"
                     @input="fieldValueChanged('contractId')"
@@ -148,10 +148,10 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('ContractExpires')"
-                    v-model="obj.contractExpires"
-                    :readonly="formState.readOnly"
                     ref="contractExpires"
+                    v-model="obj.contractExpires"
+                    :label="$ay.t('ContractExpires')"
+                    :readonly="formState.readOnly"
                     data-cy="contractExpires"
                     :error-messages="
                       form().serverErrors(this, 'contractExpires')
@@ -198,15 +198,15 @@
                   xl="3"
                 >
                   <v-checkbox
+                    ref="metered"
                     v-model="obj.metered"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitMetered')"
-                    ref="metered"
                     data-cy="metered"
                     :error-messages="form().serverErrors(this, 'metered')"
                     @change="fieldValueChanged('metered')"
                   >
-                    <template v-slot:append v-if="canOpenMeter()">
+                    <template v-if="canOpenMeter()" v-slot:append>
                       <v-btn outlined small color="primary" @click="openMeter">
                         <v-icon>$ayiWeight</v-icon></v-btn
                       >
@@ -222,10 +222,10 @@
                   xl="3"
                 >
                   <v-checkbox
+                    ref="boughtHere"
                     v-model="obj.boughtHere"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitBoughtHere')"
-                    ref="boughtHere"
                     data-cy="boughtHere"
                     :error-messages="form().serverErrors(this, 'boughtHere')"
                     @change="fieldValueChanged('boughtHere')"
@@ -240,12 +240,12 @@
                   xl="3"
                 >
                   <gz-pick-list
+                    ref="purchasedFromVendorId"
+                    v-model="obj.purchasedFromVendorId"
                     :aya-type="ayaTypes().Vendor"
                     show-edit-icon
-                    v-model="obj.purchasedFromVendorId"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitPurchaseFromID')"
-                    ref="purchasedFromVendorId"
                     data-cy="purchasedFromVendorId"
                     :error-messages="
                       form().serverErrors(this, 'purchasedFromVendorId')
@@ -262,10 +262,10 @@
                   xl="3"
                 >
                   <gz-date-time-picker
-                    :label="$ay.t('UnitPurchasedDate')"
-                    v-model="obj.purchasedDate"
-                    :readonly="formState.readOnly"
                     ref="purchasedDate"
+                    v-model="obj.purchasedDate"
+                    :label="$ay.t('UnitPurchasedDate')"
+                    :readonly="formState.readOnly"
                     data-cy="purchasedDate"
                     :error-messages="form().serverErrors(this, 'purchasedDate')"
                     @input="fieldValueChanged('purchasedDate')"
@@ -280,10 +280,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="receipt"
                     v-model="obj.receipt"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitReceipt')"
-                    ref="receipt"
                     data-cy="receipt"
                     :error-messages="form().serverErrors(this, 'receipt')"
                     @input="fieldValueChanged('receipt')"
@@ -298,11 +298,11 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="text1"
                     v-model="obj.text1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitText1')"
                     :error-messages="form().serverErrors(this, 'text1')"
-                    ref="text1"
                     data-cy="text1"
                     @input="fieldValueChanged('text1')"
                   ></v-text-field>
@@ -316,11 +316,11 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="text2"
                     v-model="obj.text2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitText2')"
                     :error-messages="form().serverErrors(this, 'text2')"
-                    ref="text2"
                     data-cy="text2"
                     @input="fieldValueChanged('text2')"
                   ></v-text-field>
@@ -334,11 +334,11 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="text3"
                     v-model="obj.text3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitText3')"
                     :error-messages="form().serverErrors(this, 'text3')"
-                    ref="text3"
                     data-cy="text3"
                     @input="fieldValueChanged('text3')"
                   ></v-text-field>
@@ -352,21 +352,21 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="text4"
                     v-model="obj.text4"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitText4')"
                     :error-messages="form().serverErrors(this, 'text4')"
-                    ref="text4"
                     data-cy="text4"
                     @input="fieldValueChanged('text4')"
                   ></v-text-field>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -375,22 +375,22 @@
                 <!-- --------------------------------- -->
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -399,11 +399,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -412,10 +412,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -442,18 +442,18 @@
               <v-row>
                 <v-col cols="12">
                   <v-checkbox
+                    ref="unitHasOwnAddress"
                     v-model="obj.unitHasOwnAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitUnitHasOwnAddress')"
-                    ref="unitHasOwnAddress"
                     data-cy="unitHasOwnAddress"
                     :error-messages="
                       form().serverErrors(this, 'unitHasOwnAddress')
                     "
                     @change="fieldValueChanged('unitHasOwnAddress')"
                   ></v-checkbox>
-                  <v-col cols="12" v-if="obj.unitHasOwnAddress">
-                    <v-menu offset-y v-if="rights.change">
+                  <v-col v-if="obj.unitHasOwnAddress" cols="12">
+                    <v-menu v-if="rights.change" offset-y>
                       <template v-slot:activator="{ on, attrs }">
                         <span class="text-h6">
                           {{ $ay.t("AddressTypePhysical") }}</span
@@ -481,7 +481,7 @@
                         </v-list-item>
                       </v-list>
                     </v-menu>
-                    <span class="text-h6" v-else>
+                    <span v-else class="text-h6">
                       {{ $ay.t("AddressTypePhysical") }}</span
                     >
                   </v-col>
@@ -494,10 +494,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="address"
                     v-model="obj.address"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressDeliveryAddress')"
-                    ref="address"
                     data-cy="address"
                     :error-messages="form().serverErrors(this, 'address')"
                     @input="fieldValueChanged('address')"
@@ -512,10 +512,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="city"
                     v-model="obj.city"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCity')"
-                    ref="city"
                     data-cy="city"
                     :error-messages="form().serverErrors(this, 'city')"
                     @input="fieldValueChanged('city')"
@@ -530,10 +530,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="region"
                     v-model="obj.region"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressStateProv')"
-                    ref="region"
                     data-cy="region"
                     :error-messages="form().serverErrors(this, 'region')"
                     @input="fieldValueChanged('region')"
@@ -548,10 +548,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="country"
                     v-model="obj.country"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCountry')"
-                    ref="country"
                     data-cy="country"
                     :error-messages="form().serverErrors(this, 'country')"
                     @input="fieldValueChanged('country')"
@@ -566,15 +566,15 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="latitude"
                     v-model="obj.latitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLatitude')"
-                    ref="latitude"
                     data-cy="latitude"
                     :rules="[form().decimalValid(this, 'latitude')]"
                     :error-messages="form().serverErrors(this, 'latitude')"
-                    @input="fieldValueChanged('latitude')"
                     :precision="6"
+                    @input="fieldValueChanged('latitude')"
                   ></gz-decimal>
                 </v-col>
 
@@ -586,15 +586,15 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="longitude"
                     v-model="obj.longitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLongitude')"
-                    ref="longitude"
                     data-cy="longitude"
                     :rules="[form().decimalValid(this, 'longitude')]"
                     :error-messages="form().serverErrors(this, 'longitude')"
-                    @input="fieldValueChanged('longitude')"
                     :precision="6"
+                    @input="fieldValueChanged('longitude')"
                   ></gz-decimal>
                 </v-col>
               </v-row>
@@ -608,10 +608,10 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="overrideModelWarranty"
                     v-model="obj.overrideModelWarranty"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitOverrideWarranty')"
-                    ref="overrideModelWarranty"
                     data-cy="overrideModelWarranty"
                     :error-messages="
                       form().serverErrors(this, 'overrideModelWarranty')
@@ -631,10 +631,10 @@
                   xl="3"
                 >
                   <v-checkbox
+                    ref="lifeTimeWarranty"
                     v-model="obj.lifeTimeWarranty"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitOverrideLifeTime')"
-                    ref="lifeTimeWarranty"
                     data-cy="lifeTimeWarranty"
                     :error-messages="
                       form().serverErrors(this, 'lifeTimeWarranty')
@@ -655,17 +655,17 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="warrantyLength"
                     v-model="obj.warrantyLength"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitOverrideLength')"
-                    ref="warrantyLength"
                     data-cy="warrantyLength"
                     :rules="[form().integerValid(this, 'warrantyLength')]"
                     :error-messages="
                       form().serverErrors(this, 'warrantyLength')
                     "
-                    @input="fieldValueChanged('warrantyLength')"
                     type="number"
+                    @input="fieldValueChanged('warrantyLength')"
                   ></v-text-field>
                 </v-col>
 
@@ -677,14 +677,14 @@
                   cols="12"
                 >
                   <v-textarea
+                    ref="warrantyTerms"
                     v-model="obj.warrantyTerms"
                     :readonly="formState.readOnly"
                     :label="$ay.t('UnitOverrideWarrantyTerms')"
                     :error-messages="form().serverErrors(this, 'warrantyTerms')"
-                    ref="warrantyTerms"
                     data-cy="warrantyTerms"
-                    @input="fieldValueChanged('warrantyTerms')"
                     auto-grow
+                    @input="fieldValueChanged('warrantyTerms')"
                   ></v-textarea>
                 </v-col>
               </v-row>
@@ -703,6 +703,92 @@ const FORM_KEY = "unit-edit";
 const API_BASE_URL = "unit/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Unit";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        serial: null,
+        active: true,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        customerId: null,
+        parentUnitId: null,
+        unitModelId: null,
+        unitHasOwnAddress: false,
+        boughtHere: false,
+        purchasedFromVendorId: null,
+        receipt: null,
+        purchasedDate: null,
+        description: null,
+        replacedByUnitId: null,
+        overrideModelWarranty: false,
+        warrantyLength: null,
+        warrantyTerms: null,
+        //usesBanking: false,
+        contractId: null,
+        contractExpires: null,
+        metered: false,
+        lifeTimeWarranty: false,
+        text1: null,
+        text2: null,
+        text3: null,
+        text4: null,
+        address: null,
+        city: null,
+        region: null,
+        country: null,
+        latitude: null,
+        longitude: null
+      },
+      tab: 0,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Unit
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -803,92 +889,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        serial: null,
-        active: true,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        customerId: null,
-        parentUnitId: null,
-        unitModelId: null,
-        unitHasOwnAddress: false,
-        boughtHere: false,
-        purchasedFromVendorId: null,
-        receipt: null,
-        purchasedDate: null,
-        description: null,
-        replacedByUnitId: null,
-        overrideModelWarranty: false,
-        warrantyLength: null,
-        warrantyTerms: null,
-        //usesBanking: false,
-        contractId: null,
-        contractExpires: null,
-        metered: false,
-        lifeTimeWarranty: false,
-        text1: null,
-        text2: null,
-        text3: null,
-        text4: null,
-        address: null,
-        city: null,
-        region: null,
-        country: null,
-        latitude: null,
-        longitude: null
-      },
-      tab: 0,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Unit
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     // canOpenServiceBank: function() {
     //   return this.obj.usesBanking == true && this.$route.params.recordid != 0;
@@ -1132,17 +1132,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Unit,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Unit,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "geoview":
         window.$gz.util.viewGeoLocation({
@@ -1317,7 +1319,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -1325,7 +1327,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Unit",
     "UnitSerial",
diff --git a/ayanova/src/views/svc-units.vue b/ayanova/src/views/svc-units.vue
index 60c4afcc..988c01e9 100644
--- a/ayanova/src/views/svc-units.vue
+++ b/ayanova/src/views/svc-units.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="UnitDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="unitsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "unit-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.Unit,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.Unit);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.Unit,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,11 +95,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Unit)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Unit)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-work-order-item-priorities-edit.vue b/ayanova/src/views/svc-work-order-item-priorities-edit.vue
index b34e0e3a..be2fb665 100644
--- a/ayanova/src/views/svc-work-order-item-priorities-edit.vue
+++ b/ayanova/src/views/svc-work-order-item-priorities-edit.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('WorkOrderItemPriorityName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -23,21 +23,21 @@
               {{ $ay.t("WorkOrderItemPriorityColor") }}
             </span>
             <v-color-picker
+              ref="color"
               v-model="obj.color"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'color')"
-              ref="color"
               @input="fieldValueChanged('color')"
             ></v-color-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -55,61 +55,6 @@
 const FORM_KEY = "svc-work-order-item-priority-edit";
 const API_BASE_URL = "work-order-item-priority/";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.WorkOrderItemPriority
-      );
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       obj: {
@@ -168,6 +113,61 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.WorkOrderItemPriority
+      );
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -421,7 +421,7 @@ let JUST_DELETED = false;
 /////////////////////////////////
 //
 //
-async function initForm(vm) {
+async function initForm() {
   await fetchTranslatedText();
 }
 
diff --git a/ayanova/src/views/svc-work-order-item-priorities.vue b/ayanova/src/views/svc-work-order-item-priorities.vue
index 7a49b7ab..499fda62 100644
--- a/ayanova/src/views/svc-work-order-item-priorities.vue
+++ b/ayanova/src/views/svc-work-order-item-priorities.vue
@@ -8,8 +8,8 @@
       data-list-key="WorkOrderItemPriorityDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="woItemPriorityTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -17,6 +17,13 @@
 <script>
 const FORM_KEY = "svc-work-order-item-priority";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(
       window.$gz.type.WorkOrderItemPriority
@@ -27,13 +34,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
diff --git a/ayanova/src/views/svc-work-order-item-status-edit.vue b/ayanova/src/views/svc-work-order-item-status-edit.vue
index 47c3e264..a9181bec 100644
--- a/ayanova/src/views/svc-work-order-item-status-edit.vue
+++ b/ayanova/src/views/svc-work-order-item-status-edit.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('WorkOrderItemStatusName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -23,21 +23,21 @@
               {{ $ay.t("WorkOrderItemStatusColor") }}
             </span>
             <v-color-picker
+              ref="color"
               v-model="obj.color"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'color')"
-              ref="color"
               @input="fieldValueChanged('color')"
             ></v-color-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -50,14 +50,14 @@
             cols="12"
           >
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('WorkOrderItemStatusNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
         </v-row>
@@ -73,6 +73,61 @@ const FORM_KEY = "svc-work-order-item-status-edit";
 const API_BASE_URL = "work-order-item-status/";
 const FORM_CUSTOM_TEMPLATE_KEY = "WorkOrderItemStatus";
 export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        active: true,
+        notes: null,
+        color: "#ffffff" //if no previously set value then control will respond with a big object with all color system values in place, this prevents that
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.WorkOrderItemStatus
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
     try {
@@ -129,61 +184,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        name: null,
-        active: true,
-        notes: null,
-        color: "#ffffff" //if no previously set value then control will respond with a big object with all color system values in place, this prevents that
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.WorkOrderItemStatus
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-
-        if (val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
diff --git a/ayanova/src/views/svc-work-order-item-status.vue b/ayanova/src/views/svc-work-order-item-status.vue
index cf12b8be..d96f031d 100644
--- a/ayanova/src/views/svc-work-order-item-status.vue
+++ b/ayanova/src/views/svc-work-order-item-status.vue
@@ -7,8 +7,8 @@
       data-list-key="WorkOrderItemStatusDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="woItemStatusTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -16,6 +16,13 @@
 <script>
 const FORM_KEY = "svc-work-order-item-status";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(
       window.$gz.type.WorkOrderItemStatus
@@ -26,13 +33,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
diff --git a/ayanova/src/views/svc-work-order-status-edit.vue b/ayanova/src/views/svc-work-order-status-edit.vue
index 99dd4353..1fafb27c 100644
--- a/ayanova/src/views/svc-work-order-status-edit.vue
+++ b/ayanova/src/views/svc-work-order-status-edit.vue
@@ -7,12 +7,12 @@
         <v-row>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="name"
               v-model="obj.name"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusName')"
               :rules="[form().required(this, 'name')]"
               :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
               data-cy="name"
               @input="fieldValueChanged('name')"
             ></v-text-field>
@@ -20,10 +20,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="completed"
               v-model="obj.completed"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusCompleted')"
-              ref="completed"
               data-cy="completed"
               :error-messages="form().serverErrors(this, 'completed')"
               @change="fieldValueChanged('completed')"
@@ -32,10 +32,10 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="locked"
               v-model="obj.locked"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusLocked')"
-              ref="locked"
               data-cy="locked"
               :error-messages="form().serverErrors(this, 'locked')"
               @change="fieldValueChanged('locked')"
@@ -44,27 +44,27 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-role-picker
-              :label="$ay.t('SelectRoles')"
-              v-model="obj.selectRoles"
-              :readonly="formState.readOnly"
               ref="selectRoles"
+              v-model="obj.selectRoles"
+              :label="$ay.t('SelectRoles')"
+              :readonly="formState.readOnly"
               data-cy="selectRoles"
               :error-messages="form().serverErrors(this, 'selectRoles')"
-              @input="fieldValueChanged('selectRoles')"
               limit-selection-to="inside"
+              @input="fieldValueChanged('selectRoles')"
             ></gz-role-picker>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-role-picker
-              :label="$ay.t('RemoveRoles')"
-              v-model="obj.removeRoles"
-              :readonly="formState.readOnly"
               ref="removeRoles"
+              v-model="obj.removeRoles"
+              :label="$ay.t('RemoveRoles')"
+              :readonly="formState.readOnly"
               data-cy="removeRoles"
               :error-messages="form().serverErrors(this, 'removeRoles')"
-              @input="fieldValueChanged('removeRoles')"
               limit-selection-to="inside"
+              @input="fieldValueChanged('removeRoles')"
             ></gz-role-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
@@ -72,21 +72,21 @@
               {{ $ay.t("StatusColor") }}
             </span>
             <v-color-picker
+              ref="color"
               v-model="obj.color"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'color')"
-              ref="color"
               @input="fieldValueChanged('color')"
             ></v-color-picker>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               data-cy="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
@@ -96,14 +96,14 @@
           <!------------------------------------->
           <v-col v-if="form().showMe(this, 'StatusNotes')" cols="12">
             <v-textarea
+              ref="notes"
               v-model="obj.notes"
               :readonly="formState.readOnly"
               :label="$ay.t('StatusNotes')"
               :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
               data-cy="notes"
-              @input="fieldValueChanged('notes')"
               auto-grow
+              @input="fieldValueChanged('notes')"
             ></v-textarea>
           </v-col>
         </v-row>
@@ -119,58 +119,6 @@ const FORM_KEY = "svc-work-order-status-edit";
 const API_BASE_URL = "work-order-status/";
 const FORM_CUSTOM_TEMPLATE_KEY = "WorkOrderStatus";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.WorkOrderStatus);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -228,6 +176,58 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.WorkOrderStatus);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
diff --git a/ayanova/src/views/svc-work-order-status.vue b/ayanova/src/views/svc-work-order-status.vue
index 12fd8831..4e1f27df 100644
--- a/ayanova/src/views/svc-work-order-status.vue
+++ b/ayanova/src/views/svc-work-order-status.vue
@@ -8,8 +8,8 @@
       data-list-key="WorkOrderStatusDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="woStatusTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -17,6 +17,13 @@
 <script>
 const FORM_KEY = "svc-work-order-status";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      selectedItems: [],
+      reload: false
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrderStatus);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -25,13 +32,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      selectedItems: [],
-      reload: false
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
diff --git a/ayanova/src/views/svc-workorder-item-expenses.vue b/ayanova/src/views/svc-workorder-item-expenses.vue
index 8eab66e3..184b9e7a 100644
--- a/ayanova/src/views/svc-workorder-item-expenses.vue
+++ b/ayanova/src/views/svc-workorder-item-expenses.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemExpenseDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemExpensesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-item-expense-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemExpense
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemExpense
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-labors.vue b/ayanova/src/views/svc-workorder-item-labors.vue
index 9a76de58..f2fc5718 100644
--- a/ayanova/src/views/svc-workorder-item-labors.vue
+++ b/ayanova/src/views/svc-workorder-item-labors.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="WorkOrderItemLaborDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemLaborsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "workorder-item-labor-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrderItemLabor,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrderItemLabor,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemLabor
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemLabor
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-loans.vue b/ayanova/src/views/svc-workorder-item-loans.vue
index 6b64a0f0..b1191de6 100644
--- a/ayanova/src/views/svc-workorder-item-loans.vue
+++ b/ayanova/src/views/svc-workorder-item-loans.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="WorkOrderItemLoanDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemLoansTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "workorder-item-loan-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrderItemLoan,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrderItemLoan,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemLoan
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemLoan
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-outside-services.vue b/ayanova/src/views/svc-workorder-item-outside-services.vue
index aaed476a..310bca30 100644
--- a/ayanova/src/views/svc-workorder-item-outside-services.vue
+++ b/ayanova/src/views/svc-workorder-item-outside-services.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemOutsideServiceDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemOutsideServicesTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-item-outside-service-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemOutsideService
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemOutsideService
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-part-requests.vue b/ayanova/src/views/svc-workorder-item-part-requests.vue
index db1414f9..1bff99fa 100644
--- a/ayanova/src/views/svc-workorder-item-part-requests.vue
+++ b/ayanova/src/views/svc-workorder-item-part-requests.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemPartRequestDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemPartRequestsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-item-part-request-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemPartRequest
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemPartRequest
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-parts.vue b/ayanova/src/views/svc-workorder-item-parts.vue
index 6b6cc4a2..bd0e3496 100644
--- a/ayanova/src/views/svc-workorder-item-parts.vue
+++ b/ayanova/src/views/svc-workorder-item-parts.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="WorkOrderItemPartDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemPartsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "workorder-item-part-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrderItemPart,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrderItemPart,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemPart
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemPart
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-scheduled-users.vue b/ayanova/src/views/svc-workorder-item-scheduled-users.vue
index 696c6b9d..1f062fa2 100644
--- a/ayanova/src/views/svc-workorder-item-scheduled-users.vue
+++ b/ayanova/src/views/svc-workorder-item-scheduled-users.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="WorkOrderItemScheduledUserDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemScheduledUsersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "workorder-item-scheduled-user-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrderItemScheduledUser,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrderItemScheduledUser,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemScheduledUser
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemScheduledUser
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-tasks.vue b/ayanova/src/views/svc-workorder-item-tasks.vue
index 84f1660b..1c10a24e 100644
--- a/ayanova/src/views/svc-workorder-item-tasks.vue
+++ b/ayanova/src/views/svc-workorder-item-tasks.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemTaskDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemTasksTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-item-task-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemTask
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemTask
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-travels.vue b/ayanova/src/views/svc-workorder-item-travels.vue
index 03033251..fd143642 100644
--- a/ayanova/src/views/svc-workorder-item-travels.vue
+++ b/ayanova/src/views/svc-workorder-item-travels.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemTravelDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemTravelsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-item-travel-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemTravel
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemTravel
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-item-units.vue b/ayanova/src/views/svc-workorder-item-units.vue
index 58ce7288..1a20f0fb 100644
--- a/ayanova/src/views/svc-workorder-item-units.vue
+++ b/ayanova/src/views/svc-workorder-item-units.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,10 +13,10 @@
       data-list-key="WorkOrderItemUnitDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="WorkOrderItemUnitsTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -25,6 +25,19 @@
 <script>
 const FORM_KEY = "workorder-item-unit-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrderItemUnit,
+      selectedItems: [],
+      reload: false,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -53,19 +66,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrderItemUnit,
-      selectedItems: [],
-      reload: false,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -95,13 +95,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItemUnit
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItemUnit
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder-items.vue b/ayanova/src/views/svc-workorder-items.vue
index 81d7f240..b4d85fa2 100644
--- a/ayanova/src/views/svc-workorder-items.vue
+++ b/ayanova/src/views/svc-workorder-items.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="WorkOrderItemDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="workorderItemsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "workorder-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,13 +62,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(
-            window.$gz.type.WorkOrderItem
-          )
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrderItem
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index 344825e6..245be432 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -23,8 +23,8 @@
           :pvm="this"
           :goto="this.goto"
           data-cy="woItems"
-          @change="setDirty()"
           class="mt-16"
+          @change="setDirty()"
         />
       </v-form>
     </div>
@@ -39,7 +39,7 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog persistent max-width="600px" v-model="duplicateDlg">
+        <v-dialog v-model="duplicateDlg" persistent max-width="600px">
           <v-card>
             <v-card-title>{{ duplicateDlgTitle }}</v-card-title>
             <v-card-text>
@@ -54,7 +54,7 @@
               ></v-checkbox>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="duplicateDlg = false" color="primary">{{
+              <v-btn text color="primary" @click="duplicateDlg = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -82,6 +82,156 @@ export default {
     GzWoHeader,
     GzWoItems
   },
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        serial: 0,
+        notes: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
+        projectId: null,
+        contractId: null,
+        internalReferenceNumber: null,
+        customerReferenceNumber: null,
+        customerContactName: null,
+        fromQuoteId: null,
+        fromPMId: null,
+        serviceDate: null,
+        completeByDate: null,
+        durationToCompleted: "00:00:00",
+        invoiceNumber: null,
+        onsite: true,
+        customerSignature: null,
+        customerSignatureName: null,
+        customerSignatureCaptured: null,
+        techSignature: null,
+        techSignatureName: null,
+        techSignatureCaptured: null,
+        postAddress: null,
+        postCity: null,
+        postRegion: null,
+        postCountry: null,
+        postCode: null,
+        address: null,
+        city: null,
+        region: null,
+        country: null,
+        latitude: null,
+        longitude: null,
+        items: [],
+        states: [],
+        isDirty: true,
+        isLockedAtServer: false,
+        alertViz: null
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.WorkOrder,
+      currencyName: window.$gz.locale.getCurrencyName(),
+      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      hour12: window.$gz.locale.getHour12(),
+      selectLists: {
+        wostatus: [],
+        allowedwostatus: [],
+        woItemPriorities: [],
+        woItemStatus: [],
+        woItemTaskCompletionTypes: [],
+        loanUnitRateUnits: []
+      },
+      maxTableNotesLength: 50, //value to cut off notes in tables
+      saveResult: {
+        fatal: false, //fatal error, further save is pointless, bail early and report
+        errors: null //contains error objects from save
+      },
+      lastGetContractId: -1, //note: -1 so that a new record updates
+      lastGetCustomerId: -1,
+      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
+      duplicateDlg: false,
+      duplicateDlgTitle: null,
+      duplicateTo: null, //"pm","wo" or "quote"
+      genCopyWiki: false,
+      genCopyAttachments: false
+    };
+  },
+  computed: {
+    currentState() {
+      //return actual status object from top level shell based on current state
+      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
+
+      if (this.obj.states != null && this.obj.states.length > 0) {
+        //find it in the status collection
+        //and return here
+        const laststate = this.obj.states[this.obj.states.length - 1];
+        const found = this.selectLists.wostatus.find(
+          z => z.id == laststate.workOrderStatusId
+        );
+        if (found) {
+          return found;
+        }
+      }
+      //default
+      return {
+        id: 0,
+        name: "-",
+        active: true,
+        color: "#ffffff", //invisible
+        completed: false,
+        locked: false
+      };
+    },
+    useInventory() {
+      return window.$gz.store.state.globalSettings.useInventory;
+    },
+    alertTechNotes() {
+      return this.obj.customerTechNotesViz
+        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
+        : null;
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
   async created() {
     const vm = this;
 
@@ -250,156 +400,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      obj: {
-        id: 0,
-        concurrency: 0,
-        serial: 0,
-        notes: null,
-        wiki: null,
-        customFields: "{}",
-        tags: [],
-        customerId: 0, //part of rule breaking, flip to null on new triggers broken rule
-        projectId: null,
-        contractId: null,
-        internalReferenceNumber: null,
-        customerReferenceNumber: null,
-        customerContactName: null,
-        fromQuoteId: null,
-        fromPMId: null,
-        serviceDate: null,
-        completeByDate: null,
-        durationToCompleted: "00:00:00",
-        invoiceNumber: null,
-        onsite: true,
-        customerSignature: null,
-        customerSignatureName: null,
-        customerSignatureCaptured: null,
-        techSignature: null,
-        techSignatureName: null,
-        techSignatureCaptured: null,
-        postAddress: null,
-        postCity: null,
-        postRegion: null,
-        postCountry: null,
-        postCode: null,
-        address: null,
-        city: null,
-        region: null,
-        country: null,
-        latitude: null,
-        longitude: null,
-        items: [],
-        states: [],
-        isDirty: true,
-        isLockedAtServer: false,
-        alertViz: null
-      },
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
-      rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.WorkOrder,
-      currencyName: window.$gz.locale.getCurrencyName(),
-      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
-      languageName: window.$gz.locale.getResolvedLanguage(),
-      hour12: window.$gz.locale.getHour12(),
-      selectLists: {
-        wostatus: [],
-        allowedwostatus: [],
-        woItemPriorities: [],
-        woItemStatus: [],
-        woItemTaskCompletionTypes: [],
-        loanUnitRateUnits: []
-      },
-      maxTableNotesLength: 50, //value to cut off notes in tables
-      saveResult: {
-        fatal: false, //fatal error, further save is pointless, bail early and report
-        errors: null //contains error objects from save
-      },
-      lastGetContractId: -1, //note: -1 so that a new record updates
-      lastGetCustomerId: -1,
-      goto: null, //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
-      duplicateDlg: false,
-      duplicateDlgTitle: null,
-      duplicateTo: null, //"pm","wo" or "quote"
-      genCopyWiki: false,
-      genCopyAttachments: false
-    };
-  },
-  watch: {
-    formState: {
-      handler: function(val) {
-        if (this.formState.loading) {
-          return;
-        }
-        if (val.dirty && val.valid) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        if (!val.dirty && val.valid && !val.readOnly) {
-          window.$gz.eventBus.$emit(
-            "menu-enable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
-        } else {
-          window.$gz.eventBus.$emit(
-            "menu-disable-item",
-            FORM_KEY + ":duplicate"
-          );
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    currentState() {
-      //return actual status object from top level shell based on current state
-      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
-
-      if (this.obj.states != null && this.obj.states.length > 0) {
-        //find it in the status collection
-        //and return here
-        const laststate = this.obj.states[this.obj.states.length - 1];
-        const found = this.selectLists.wostatus.find(
-          z => z.id == laststate.workOrderStatusId
-        );
-        if (found) {
-          return found;
-        }
-      }
-      //default
-      return {
-        id: 0,
-        name: "-",
-        active: true,
-        color: "#ffffff", //invisible
-        completed: false,
-        locked: false
-      };
-    },
-    useInventory() {
-      return window.$gz.store.state.globalSettings.useInventory;
-    },
-    alertTechNotes() {
-      return this.obj.customerTechNotesViz
-        ? `${this.$ay.t("CustomerTechNotes")}\n${this.obj.customerTechNotesViz}`
-        : null;
-    }
-  },
   methods: {
     setDirty: function() {
       this.formState.dirty = true;
@@ -887,8 +887,9 @@ async function saveHeader(vm) {
   //the purpose of this is to remove the child collections so only the header itself is submitted
   //this was the cleanest way I could find to accomplish this
   //https://stackoverflow.com/a/58206483/8939
+  /* eslint-disable no-unused-vars */
   const { items: removedKey1, states: removedKey2, ...headerOnly } = vm.obj;
-
+  /* eslint-enable no-unused-vars */
   //remove *Viz keys so they don't generate traffic
   headerOnly.alertViz = undefined;
   headerOnly.projectViz = undefined;
@@ -979,6 +980,7 @@ async function saveItems(vm) {
   for (let i = 0; i < vm.obj.items.length; i++) {
     if (vm.obj.items[i].isDirty) {
       //get copy of item without child collections for independant submit
+      /* eslint-disable no-unused-vars */
       const {
         expenses: removedKey1,
         labors: removedKey2,
@@ -992,7 +994,7 @@ async function saveItems(vm) {
         outsideServices: removedKey10,
         ...o
       } = vm.obj.items[i];
-
+      /* eslint-enable no-unused-vars */
       const isPost = o.id == 0;
       const res = await window.$gz.api.upsert(`${API_BASE_URL}items`, o);
       if (res.error) {
@@ -1907,17 +1909,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicateDlg = true;
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.WorkOrder,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.WorkOrder,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "statuslist":
         m.vm.$router.push({
@@ -2142,7 +2146,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
   await populateSelectionLists(vm);
 }
@@ -2151,7 +2155,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "WorkOrder",
     "CopyWiki",
diff --git a/ayanova/src/views/svc-workorders.vue b/ayanova/src/views/svc-workorders.vue
index 6d1390e4..88b1f426 100644
--- a/ayanova/src/views/svc-workorders.vue
+++ b/ayanova/src/views/svc-workorders.vue
@@ -2,11 +2,11 @@
   <div>
     <v-row justify="center">
       <v-dialog
-        @keydown.esc="openDialog = false"
-        @keydown.enter="openWo()"
         v-model="openDialog"
         persistent
         max-width="600px"
+        @keydown.esc="openDialog = false"
+        @keydown.enter="openWo()"
       >
         <v-card>
           <v-card-title>
@@ -29,8 +29,8 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="openWo()"
               :disabled="!openWoNumber"
+              @click="openWo()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -39,9 +39,9 @@
     </v-row>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
 
@@ -51,10 +51,10 @@
       data-list-key="WorkOrderDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="workordersTable"
       :client-criteria="clientCriteria"
       :pre-filter-mode="preFilterMode"
+      @selection-change="handleSelected"
       @clear-pre-filter="clearPreFilter"
     >
     </gz-data-table>
@@ -63,6 +63,21 @@
 <script>
 const FORM_KEY = "workorder-list";
 export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrder,
+      selectedItems: [],
+      reload: false,
+      openDialog: false,
+      openWoNumber: null,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
   async created() {
     this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
     window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -94,21 +109,6 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  data() {
-    return {
-      rights: window.$gz.role.defaultRightsObject(),
-      aType: window.$gz.type.WorkOrder,
-      selectedItems: [],
-      reload: false,
-      openDialog: false,
-      openWoNumber: null,
-      clientCriteria: undefined,
-      preFilterMode: null,
-      objectId: null,
-      aForType: null,
-      name: null
-    };
-  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -160,11 +160,15 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.WorkOrder)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.WorkOrder
+            )
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/src/views/vendor.vue b/ayanova/src/views/vendor.vue
index 5e4612d9..66e71007 100644
--- a/ayanova/src/views/vendor.vue
+++ b/ayanova/src/views/vendor.vue
@@ -5,7 +5,7 @@
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
 
       <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab">
+        <v-tabs v-model="tab" mobile-breakpoint="100">
           <v-tab>{{ $ay.t("Vendor") }}</v-tab>
           <v-tab>{{ $ay.t("Address") }}</v-tab>
           <v-tabs-items v-model="tab">
@@ -13,12 +13,12 @@
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-text-field
+                    ref="name"
                     v-model="obj.name"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorName')"
                     :rules="[form().required(this, 'name')]"
                     :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
                     data-cy="name"
                     @input="fieldValueChanged('name')"
                   ></v-text-field>
@@ -32,10 +32,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="accountNumber"
                     v-model="obj.accountNumber"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorAccountNumber')"
-                    ref="accountNumber"
                     data-cy="accountNumber"
                     :error-messages="form().serverErrors(this, 'accountNumber')"
                     @input="fieldValueChanged('accountNumber')"
@@ -50,10 +50,10 @@
                   xl="3"
                 >
                   <gz-url
+                    ref="webAddress"
                     v-model="obj.webAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('WebAddress')"
-                    ref="webAddress"
                     data-cy="webAddress"
                     :error-messages="form().serverErrors(this, 'webAddress')"
                     @input="fieldValueChanged('webAddress')"
@@ -68,10 +68,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="contact"
                     v-model="obj.contact"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorContact')"
-                    ref="contact"
                     data-cy="contact"
                     :error-messages="form().serverErrors(this, 'contact')"
                     @input="fieldValueChanged('contact')"
@@ -86,10 +86,10 @@
                   xl="3"
                 >
                   <gz-email
+                    ref="emailAddress"
                     v-model="obj.emailAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorEmail')"
-                    ref="emailAddress"
                     data-cy="emailAddress"
                     :error-messages="form().serverErrors(this, 'emailAddress')"
                     @input="fieldValueChanged('emailAddress')"
@@ -104,10 +104,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone1"
                     v-model="obj.phone1"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorPhone1')"
-                    ref="phone1"
                     data-cy="phone1"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
@@ -122,10 +122,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone2"
                     v-model="obj.phone2"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorPhone2')"
-                    ref="phone2"
                     data-cy="phone2"
                     :error-messages="form().serverErrors(this, 'phone2')"
                     @input="fieldValueChanged('phone2')"
@@ -140,10 +140,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone3"
                     v-model="obj.phone3"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorPhone3')"
-                    ref="phone3"
                     data-cy="phone3"
                     :error-messages="form().serverErrors(this, 'phone3')"
                     @input="fieldValueChanged('phone3')"
@@ -158,10 +158,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone4"
                     v-model="obj.phone4"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorPhone4')"
-                    ref="phone4"
                     data-cy="phone4"
                     :error-messages="form().serverErrors(this, 'phone4')"
                     @input="fieldValueChanged('phone4')"
@@ -176,10 +176,10 @@
                   xl="3"
                 >
                   <gz-phone
+                    ref="phone5"
                     v-model="obj.phone5"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorPhone5')"
-                    ref="phone5"
                     data-cy="phone5"
                     :error-messages="form().serverErrors(this, 'phone5')"
                     @input="fieldValueChanged('phone5')"
@@ -187,10 +187,10 @@
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-checkbox
+                    ref="active"
                     v-model="obj.active"
                     :readonly="formState.readOnly"
                     :label="$ay.t('Active')"
-                    ref="active"
                     data-cy="active"
                     :error-messages="form().serverErrors(this, 'active')"
                     @change="fieldValueChanged('active')"
@@ -199,51 +199,51 @@
                 <!-- --------------------------------- -->
                 <v-col v-if="form().showMe(this, 'Notes')" cols="12">
                   <v-textarea
+                    ref="notes"
                     v-model="obj.notes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorNotes')"
                     :error-messages="form().serverErrors(this, 'notes')"
-                    ref="notes"
                     data-cy="notes"
-                    @input="fieldValueChanged('notes')"
                     auto-grow
+                    @input="fieldValueChanged('notes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'ContactNotes')" cols="12">
                   <v-textarea
+                    ref="contactNotes"
                     v-model="obj.contactNotes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorContactNotes')"
                     :error-messages="form().serverErrors(this, 'contactNotes')"
-                    ref="contactNotes"
                     data-cy="contactNotes"
-                    @input="fieldValueChanged('contactNotes')"
                     auto-grow
                     prepend-icon="$ayiUser"
+                    @input="fieldValueChanged('contactNotes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'VendorAlertNotes')" cols="12">
                   <v-textarea
+                    ref="alertNotes"
                     v-model="obj.alertNotes"
                     :readonly="formState.readOnly"
                     :label="$ay.t('VendorAlertNotes')"
                     :error-messages="form().serverErrors(this, 'alertNotes')"
-                    ref="alertNotes"
                     data-cy="alertNotes"
-                    @input="fieldValueChanged('alertNotes')"
                     auto-grow
                     prepend-icon="$ayiInfoCircle"
                     color="primary"
+                    @input="fieldValueChanged('alertNotes')"
                   ></v-textarea>
                 </v-col>
 
                 <v-col v-if="form().showMe(this, 'Tags')" cols="12">
                   <gz-tag-picker
+                    ref="tags"
                     v-model="obj.tags"
                     :readonly="formState.readOnly"
-                    ref="tags"
                     data-cy="tags"
                     :error-messages="form().serverErrors(this, 'tags')"
                     @input="fieldValueChanged('tags')"
@@ -252,11 +252,11 @@
 
                 <v-col cols="12">
                   <gz-custom-fields
+                    ref="customFields"
                     v-model="obj.customFields"
                     :form-key="formCustomTemplateKey"
                     :readonly="formState.readOnly"
                     :parent-v-m="this"
-                    ref="customFields"
                     data-cy="customFields"
                     :error-messages="form().serverErrors(this, 'customFields')"
                     @input="fieldValueChanged('customFields')"
@@ -265,10 +265,10 @@
 
                 <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
                   <gz-wiki
-                    :aya-type="ayaType"
-                    :aya-id="obj.id"
                     ref="wiki"
                     v-model="obj.wiki"
+                    :aya-type="ayaType"
+                    :aya-id="obj.id"
                     :readonly="formState.readOnly"
                     @input="fieldValueChanged('wiki')"
                   ></gz-wiki
@@ -289,7 +289,7 @@
             <v-tab-item class="mt-4 ml-2">
               <v-row>
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePhysical") }}</span
@@ -324,7 +324,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePhysical") }}</span
                   >
                 </v-col>
@@ -336,10 +336,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="address"
                     v-model="obj.address"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressDeliveryAddress')"
-                    ref="address"
                     data-cy="address"
                     :error-messages="form().serverErrors(this, 'address')"
                     @input="fieldValueChanged('address')"
@@ -354,10 +354,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="city"
                     v-model="obj.city"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCity')"
-                    ref="city"
                     data-cy="city"
                     :error-messages="form().serverErrors(this, 'city')"
                     @input="fieldValueChanged('city')"
@@ -372,10 +372,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="region"
                     v-model="obj.region"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressStateProv')"
-                    ref="region"
                     data-cy="region"
                     :error-messages="form().serverErrors(this, 'region')"
                     @input="fieldValueChanged('region')"
@@ -390,10 +390,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="country"
                     v-model="obj.country"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressCountry')"
-                    ref="country"
                     data-cy="country"
                     :error-messages="form().serverErrors(this, 'country')"
                     @input="fieldValueChanged('country')"
@@ -408,15 +408,15 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="latitude"
                     v-model="obj.latitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLatitude')"
-                    ref="latitude"
                     data-cy="latitude"
                     :rules="[form().decimalValid(this, 'latitude')]"
                     :error-messages="form().serverErrors(this, 'latitude')"
-                    @input="fieldValueChanged('latitude')"
                     :precision="6"
+                    @input="fieldValueChanged('latitude')"
                   ></gz-decimal>
                 </v-col>
 
@@ -428,20 +428,20 @@
                   xl="3"
                 >
                   <gz-decimal
+                    ref="longitude"
                     v-model="obj.longitude"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressLongitude')"
-                    ref="longitude"
                     data-cy="longitude"
                     :rules="[form().decimalValid(this, 'longitude')]"
                     :error-messages="form().serverErrors(this, 'longitude')"
-                    @input="fieldValueChanged('longitude')"
                     :precision="6"
+                    @input="fieldValueChanged('longitude')"
                   ></gz-decimal>
                 </v-col>
 
                 <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
+                  <v-menu v-if="rights.change" offset-y>
                     <template v-slot:activator="{ on, attrs }">
                       <span class="text-h6">
                         {{ $ay.t("AddressTypePostal") }}</span
@@ -468,7 +468,7 @@
                       </v-list-item>
                     </v-list>
                   </v-menu>
-                  <span class="text-h6" v-else>
+                  <span v-else class="text-h6">
                     {{ $ay.t("AddressTypePostal") }}</span
                   >
                 </v-col>
@@ -481,10 +481,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postAddress"
                     v-model="obj.postAddress"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalDeliveryAddress')"
-                    ref="postAddress"
                     data-cy="postAddress"
                     :error-messages="form().serverErrors(this, 'postAddress')"
                     @input="fieldValueChanged('postAddress')"
@@ -499,10 +499,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCity"
                     v-model="obj.postCity"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCity')"
-                    ref="postCity"
                     data-cy="postCity"
                     :error-messages="form().serverErrors(this, 'postCity')"
                     @input="fieldValueChanged('postCity')"
@@ -517,10 +517,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postRegion"
                     v-model="obj.postRegion"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalStateProv')"
-                    ref="postRegion"
                     data-cy="postRegion"
                     :error-messages="form().serverErrors(this, 'postRegion')"
                     @input="fieldValueChanged('postRegion')"
@@ -535,10 +535,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCountry"
                     v-model="obj.postCountry"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalCountry')"
-                    ref="postCountry"
                     data-cy="postCountry"
                     :error-messages="form().serverErrors(this, 'postCountry')"
                     @input="fieldValueChanged('postCountry')"
@@ -553,10 +553,10 @@
                   xl="3"
                 >
                   <v-text-field
+                    ref="postCode"
                     v-model="obj.postCode"
                     :readonly="formState.readOnly"
                     :label="$ay.t('AddressPostalPostal')"
-                    ref="postCode"
                     data-cy="postCode"
                     :error-messages="form().serverErrors(this, 'postCode')"
                     @input="fieldValueChanged('postCode')"
@@ -578,64 +578,6 @@ const FORM_KEY = "vendor-edit";
 const API_BASE_URL = "vendor/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Vendor";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Vendor);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      let setDirty = false;
-      //id 0 means create or duplicate to new
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid);
-        }
-      } else {
-        //Might be a duplicate and contain another record
-        if (this.$route.params.obj) {
-          this.obj = this.$route.params.obj;
-          this.obj.concurrency = undefined;
-          this.obj.id = 0;
-          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
-            "Copy"
-          )}`;
-          setDirty = true;
-        }
-      }
-
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: false,
-        dirty: setDirty,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
@@ -716,6 +658,64 @@ export default {
       deep: true
     }
   },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Vendor);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
+            "Copy"
+          )}`;
+          setDirty = true;
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -976,17 +976,19 @@ async function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
-        const res = await m.vm.$refs.reportSelector.open(
-          {
-            AType: window.$gz.type.Vendor,
-            selectedRowIds: [m.vm.obj.id]
-          },
-          m.id
-        );
-        if (res == null) {
-          return;
+        {
+          const res = await m.vm.$refs.reportSelector.open(
+            {
+              AType: window.$gz.type.Vendor,
+              selectedRowIds: [m.vm.obj.id]
+            },
+            m.id
+          );
+          if (res == null) {
+            return;
+          }
+          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         }
-        window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
         break;
       case "geoview":
         window.$gz.util.viewGeoLocation({
@@ -1103,7 +1105,7 @@ let JUST_DELETED = false;
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
 }
 
@@ -1111,7 +1113,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "Vendor",
     "VendorName",
diff --git a/ayanova/src/views/vendors.vue b/ayanova/src/views/vendors.vue
index 7932c435..7f980c82 100644
--- a/ayanova/src/views/vendors.vue
+++ b/ayanova/src/views/vendors.vue
@@ -2,9 +2,9 @@
   <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <gz-extensions
+      ref="extensions"
       :aya-type="aType"
       :selected-items="selectedItems"
-      ref="extensions"
     >
     </gz-extensions>
     <gz-data-table
@@ -13,8 +13,8 @@
       data-list-key="VendorDataList"
       :show-select="rights.read"
       :reload="reload"
-      @selection-change="handleSelected"
       data-cy="vendorsTable"
+      @selection-change="handleSelected"
     >
     </gz-data-table>
   </div>
@@ -22,14 +22,6 @@
 <script>
 const FORM_KEY = "vendor-list";
 export default {
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Vendor);
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    generateMenu(this);
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   data() {
     return {
       rights: window.$gz.role.defaultRightsObject(),
@@ -38,6 +30,14 @@ export default {
       reload: false
     };
   },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Vendor);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     handleSelected(selected) {
       this.selectedItems = selected;
@@ -62,11 +62,13 @@ async function clickHandler(menuItem) {
         });
         break;
       case "extensions":
-        const res = await m.vm.$refs.extensions.open(
-          m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Vendor)
-        );
-        if (res && res.refresh == true) {
-          m.vm.reload = !m.vm.reload;
+        {
+          const res = await m.vm.$refs.extensions.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Vendor)
+          );
+          if (res && res.refresh == true) {
+            m.vm.reload = !m.vm.reload;
+          }
         }
         break;
       case "report":
diff --git a/ayanova/tests/e2e/.eslintrc.js b/ayanova/tests/e2e/.eslintrc.js
deleted file mode 100644
index 364750f9..00000000
--- a/ayanova/tests/e2e/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  env: {
-    mocha: true
-  },
-  rules: {
-    strict: "off"
-  }
-};
diff --git a/ayanova/tests/e2e/OLD/_first_test_login-nav-logout.js b/ayanova/tests/e2e/OLD/_first_test_login-nav-logout.js
deleted file mode 100644
index 36202bb2..00000000
--- a/ayanova/tests/e2e/OLD/_first_test_login-nav-logout.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("Login", () => {
-  it("Logs in navigates to user options and log out", () => {
-    cy.visit("/login");
-
-    cy.get("input[name=username]")
-      .clear()
-      .type(Cypress.env("adminusername"));
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type(`${Cypress.env("adminpassword")}{enter}`);
-
-    // we should be redirected to /dashboard
-    cy.url().should("include", "/ay-evaluate");
-
-    //navigate and confirm
-    //open nav and home menu
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=home]").click();
-    cy.get("[data-cy='nav/home-user-settings']").click();
-    cy.url().should("include", "/home-user-settings");
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-  });
-});
diff --git a/ayanova/tests/e2e/OLD/customize-form.js b/ayanova/tests/e2e/OLD/customize-form.js
deleted file mode 100644
index 565baa68..00000000
--- a/ayanova/tests/e2e/OLD/customize-form.js
+++ /dev/null
@@ -1,64 +0,0 @@
-//#################  COMMENTED OUT BECAUSE TOO PROBLEMATIC TO TEST, HAS SIDE EFFECTS AND IF IT FAILS THEN NEEDS TO BE REVERSED TO RE-RUN THE TEST AGAIN
-//BAH
-
-// // https://docs.cypress.io/api/introduction/api.html
-
-// describe("CUSTOMIZE", () => {
-//   it("Edits and works", () => {
-//     cy.visit("/login");
-
-//     cy.get("input[name=username]")
-//       .clear()
-//       .type(Cypress.env("adminusername"));
-
-//     // {enter} causes the form to submit
-//     cy.get("input[name=password]")
-//       .clear()
-//       .type(`${Cypress.env("adminpassword")}{enter}`);
-
-//     cy.visit("/customers/1");
-//     cy.url().should("include", "/customers/1");
-//     //check serial field is present, then hide it and check it's gone then re-show it again
-//     cy.get("[data-cy=serial]").should("exist");
-//     cy.get("[data-cy=customerCustom8]").should("not.exist");
-
-//     cy.wait(100);
-//     cy.get("[data-cy=contextmenu]").click();
-//     cy.get('[data-cy="app:customize"]').click();
-//     cy.url().should("include", "/customize/customer");
-
-//     //hide serial
-//     cy.get("[data-cy=SerialVisible]").uncheck({ force: true });
-//     cy.wait(10);
-
-//     //show customer 8 and set it to a type
-//     cy.get("[data-cy=customerCustom8]").scrollIntoView();
-//     cy.get("[data-cy=customerCustom8Visible]").check({ force: true });
-//     cy.get("[data-cy=customerCustom8SelectType]").type("tr{enter}", {
-//       force: true
-//     });
-
-//     cy.get('[data-cy="customize:save"] > .v-btn__content > .v-icon').click();
-
-//     cy.go("back");
-//     //check customize worked
-//     cy.get("[data-cy=serial]").should("not.exist");
-//     cy.get("[data-cy=customerCustom8]").should("exist");
-
-//     //reverse
-//     cy.wait(100);
-//     cy.get("[data-cy=contextmenu]").click();
-//     cy.get('[data-cy="app:customize"]').click();
-//     cy.url().should("include", "/customize/customer");
-//     cy.get("[data-cy=SerialVisible]").check({ force: true });
-//     cy.get("[data-cy=customerCustom8Visible]").uncheck({ force: true });
-//     cy.get("[data-cy=customerCustom8SelectType]").type("te{enter}", {
-//       force: true
-//     });
-//     cy.get('[data-cy="customize:save"] > .v-btn__content > .v-icon').click();
-//     cy.go("back");
-//     cy.get("[data-cy=serial]").should("exist");
-//     cy.get("[data-cy=customerCustom8]").should("not.exist");
-//     //-----
-//   });
-// });
diff --git a/ayanova/tests/e2e/OLD/gz-data-table.js b/ayanova/tests/e2e/OLD/gz-data-table.js
deleted file mode 100644
index 76c77313..00000000
--- a/ayanova/tests/e2e/OLD/gz-data-table.js
+++ /dev/null
@@ -1,92 +0,0 @@
-describe("GZ-DATA-TABLE", () => {
-  it("Operations work", () => {
-    cy.visit("/login");
-
-    cy.get("input[name=username]")
-      .clear()
-      .type("BizAdmin");
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type("BizAdmin{enter}");
-    //cy.url().should("include", "/home-dashboard");
-    cy.visit("/customers");
-    cy.url().should("include", "/customers");
-
-    cy.contains("Rows per page");
-    //select default customer list view
-    cy.get("[data-cy=selectlistview]").type("-{enter}", { force: true });
-    //confirm we see the data expected
-    cy.contains("Name");
-    cy.contains("Serial #");
-    cy.contains("Price");
-    //refresh
-    cy.get("[data-cy=refresh]").click();
-
-    //confirm the first column is the customer name
-    cy.get("thead > tr > th:nth-child(1) > span").contains("Name");
-
-    // cy.get('[aria-label="Next page"] > .v-btn__content > .v-icon').click();
-    // cy.get(".v-data-footer__select input:nth-child(2)").type("10{enter}", {
-    //   force: true,
-    // });
-    // //confirm rows
-    // cy.get("tbody")
-    //   .find("tr")
-    //   .should("have.length", 10);
-
-    cy.get(".v-data-footer__select input:nth-child(2)").type("5{enter}", {
-      force: true
-    });
-
-    //confirm 5 rows
-    cy.get("tbody")
-      .find("tr")
-      .should("have.length", 5);
-
-    //filter
-    cy.get("[data-cy=filter]").click();
-    cy.contains("List view");
-    //move username to first position
-    cy.get(
-      '[data-cy="columncard:username"] > .v-card__text > .d-flex > :nth-child(1) > .v-btn__content > [data-cy=movestart]'
-    ).click();
-
-    //go back to customerlist
-    cy.go("back");
-
-    //confirm the first column is now the username
-    cy.get("thead > tr > th:nth-child(1) > span").contains("User");
-
-    //switch back to default filter
-    cy.get("[data-cy=selectlistview]").type("-{enter}{esc}", { force: true });
-
-    //open a customer record
-    cy.wait(100);
-    cy.get("tbody > :nth-child(1) > :nth-child(1)").click();
-    //cy.get(":nth-child(1) > :nth-child(1) > .subtitle-1 > a").click();
-
-    //confirm on customer edit form
-    cy.get('[data-cy="customer-edit:delete"]');
-
-    //go back to customerlist
-    cy.go("back");
-
-    //new
-    cy.get("[data-cy='customer-list:new']").click();
-    cy.url().should("include", "/customers/0");
-
-    //cy.get("thead > tr > th:nth-child(1)").contains("User");
-
-    // //navigate and confirm
-    // //open nav and home menu
-    // cy.get("[data-cy=navicon]").click();
-    // cy.get("[data-cy=home]").click();
-    // cy.get("[data-cy='nav/home-user-settings']").click();
-    //
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-  });
-});
diff --git a/ayanova/tests/e2e/OLD/help-docs.js b/ayanova/tests/e2e/OLD/help-docs.js
deleted file mode 100644
index 8ef67de5..00000000
--- a/ayanova/tests/e2e/OLD/help-docs.js
+++ /dev/null
@@ -1,6 +0,0 @@
-describe("HELP DOCS", () => {
-  it("is accessible", () => {
-    cy.visit("/docs/");
-    cy.contains("WELCOME TO AYANOVA");
-  });
-});
diff --git a/ayanova/tests/e2e/OLD/jwt-example.js b/ayanova/tests/e2e/OLD/jwt-example.js
deleted file mode 100644
index beccde15..00000000
--- a/ayanova/tests/e2e/OLD/jwt-example.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// // login just once using API
-// let user;
-
-// before(function fetchUser() {
-//   cy.request("POST", "http://localhost:7575/api/v8/auth", {
-//     username: Cypress.env("adminusername"),
-//     password: Cypress.env("adminpassword")
-//   })
-//     .its("body")
-//     .thsden(res => {
-//       user = res;
-//     });
-// });
-
-// // but set the user before visiting the page
-// // so the app thinks it is already authenticated
-// beforeEach(function setUser() {
-//   cy.visit("/", {
-//     onBeforeLoad(win) {
-//       // and before the page finishes loading
-//       // set the user object in local storage
-//       win.localStorage.setItem("user", JSON.stringify(user));
-//     }
-//   });
-//   // the page should be opened and the user should be logged in
-// });
-// describe("The home page", () => {
-//   it("Successfully loads the home page", () => {
-//     cy.visit("/");
-//   });
-// });
-
-// describe("JWT", () => {
-//   it("makes authenticated request", () => {
-//     // we can make authenticated request ourselves
-//     // since we know the token
-//     cy.request({
-//       url: "http://localhost:7575/api/v8/User/1",
-//       auth: {
-//         bearer: user.token
-//       }
-//     })
-//       .its("body")
-//       .should("deep.equal", [
-//         {
-//           id: 1,
-//           username: "test",
-//           firstName: "Test",
-//           lastName: "User"
-//         }
-//       ]);
-//   });
-
-//   it("is logged in", () => {
-//     cy.contains("Hi Test!").should("be.visible");
-//   });
-
-//   it("shows loaded user", () => {
-//     // this user information came from authenticated XHR call
-//     cy.contains("li", "Test User").should("be.visible");
-//   });
-// });
diff --git a/ayanova/tests/e2e/OLD/select-list-templates.js b/ayanova/tests/e2e/OLD/select-list-templates.js
deleted file mode 100644
index a2f4fe52..00000000
--- a/ayanova/tests/e2e/OLD/select-list-templates.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("PICK LIST TEMPLATE", () => {
-  it("Successfully changes pick list template", () => {
-    cy.visit("/login");
-
-    cy.get("input[name=username]")
-      .clear()
-      .type(Cypress.env("adminusername"));
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type(`${Cypress.env("adminpassword")}{enter}`);
-    // cy.url().should("include", "/home-dashboard");
-
-    cy.visit("/adm-global-settings");
-    cy.url().should("include", "/adm-global-settings");
-    cy.get("[data-cy=picklisttemplates]").click();
-    cy.url().should("include", "/adm-global-select-templates");
-    cy.get("[data-cy=SelectTemplate]").type("3{enter}", { force: true });
-
-    //hide tags field
-    cy.get("[data-cy=usertagsInclude]").uncheck({ force: true });
-    // cy.get(
-    //   '[data-cy="adm-global-select-templates:save"] > .v-btn__content > .v-icon'
-    // ).click();
-    cy.get(
-      '[data-cy="adm-global-select-templates:save"] > .v-btn__content > .v-icon'
-    ).click({ force: true });
-    cy.visit("/customers/0");
-    cy.url().should("include", "/customers/0");
-    //select a user with a zone set
-    cy.get("[data-cy=userid] > .v-input")
-      .type("..zone")
-      .wait(500)
-      .type("{downarrow}{downarrow}{enter}");
-    //tags is off so there shouldn't be any "zones" visible in there
-    cy.contains("zone").should("not.exist");
-
-    //NOW DO THE OPPOSITE
-    cy.visit("/adm-global-settings");
-    cy.url().should("include", "/adm-global-settings");
-    cy.get("[data-cy=picklisttemplates]").click();
-    cy.url().should("include", "/adm-global-select-templates");
-    cy.get("[data-cy=SelectTemplate]").type("3{enter}", { force: true });
-
-    //show tags field
-    cy.get("[data-cy=usertagsInclude]").check({ force: true });
-    cy.get(
-      '[data-cy="adm-global-select-templates:save"] > .v-btn__content > .v-icon'
-    ).click({ force: true });
-    cy.visit("/customers/0");
-    cy.url().should("include", "/customers/0");
-    //select a user with a zone set
-    cy.get("[data-cy=userid] > .v-input")
-      .type("..zone")
-      .wait(500)
-      .type("{downarrow}{downarrow}{enter}");
-    //tags is on so there should be "zone1" visible in there
-    cy.contains("zone").should("exist");
-
-    //-----------------
-  });
-});
diff --git a/ayanova/tests/e2e/e2e-strategy.txt b/ayanova/tests/e2e/e2e-strategy.txt
deleted file mode 100644
index 8ed55bbd..00000000
--- a/ayanova/tests/e2e/e2e-strategy.txt
+++ /dev/null
@@ -1,17 +0,0 @@
-e2e testing strategy:
-
-Only test critical parts of the system and in that, only those prone to failure.
-things prone to fail are:
-    - Vuetify on an update
-    - ?
-So excercise all form components will be a big help
-
-No need to test everything, just the most critical aspects and enough to confirm they essentially work.
-let the integration tests handle the failure modes, weird exceptional cases etc
-
-For example one solid test that can make a workorder and fill in all sections will be sufficient for that as a smoke test.
-No need to test every possible rule or unusual set of circumstances.
-
-This is important because the test maintenance could end up eating up tons of time better spent on other stuff.
-
-If a failure comes up in the wild can add a test for it then fix it and that will be most useful
\ No newline at end of file
diff --git a/ayanova/tests/e2e/plugins/index.js b/ayanova/tests/e2e/plugins/index.js
deleted file mode 100644
index db94ea70..00000000
--- a/ayanova/tests/e2e/plugins/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// https://docs.cypress.io/guides/guides/plugins-guide.html
-/* esXXXXXlint-disable import/no-extraneous-dependencies, global-require */
-/* eslint-disable global-require */
-const webpack = require("@cypress/webpack-preprocessor");
-
-module.exports = (on, config) => {
-  on(
-    "file:preprocessor",
-    webpack({
-      webpackOptions: require("@vue/cli-service/webpack.config"),
-      watchOptions: {}
-    })
-  );
-
-  return Object.assign({}, config, {
-    fixturesFolder: "tests/e2e/fixtures",
-    integrationFolder: "tests/e2e/specs",
-    screenshotsFolder: "tests/e2e/screenshots",
-    videosFolder: "tests/e2e/videos",
-    supportFile: "tests/e2e/support/index.js"
-  });
-};
diff --git a/ayanova/tests/e2e/specs/search-form.js b/ayanova/tests/e2e/specs/search-form.js
deleted file mode 100644
index e6850341..00000000
--- a/ayanova/tests/e2e/specs/search-form.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("SEARCH", () => {
-  it("Search works properly", () => {
-    cy.visit("/login");
-
-    cy.get("input[name=username]")
-      .clear()
-      .type(Cypress.env("adminusername"));
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type(`${Cypress.env("adminpassword")}{enter}`);
-
-    // we should be redirected to /dashboard
-    //cy.url().should("include", "/home-dashboard");
-
-    cy.visit("/home-search");
-    cy.url().should("include", "/home-search");
-
-    cy.get("[data-cy=phrase]").type("we{enter}");
-    cy.get("[data-cy=btnexcerpt1]").click();
-    //note: it doesn';t show in the test but it's there
-    cy.get("[data-cy=btnopenitem1] > .v-list-item__subtitle").should("exist");
-    //check that the cache is working
-    //nav to about form
-    cy.get("[data-cy=contextmenu]").click();
-    cy.get('[data-cy="app:nav:abt"]').click();
-    cy.url().should("include", "/about");
-    cy.go("back");
-    cy.get("[data-cy=btnopenitem1] > .v-list-item__subtitle").should("exist");
-    //get the text in the subtitle
-
-    //save the start url for later
-    let sub = null;
-    //funcs are async so need to get result via then
-
-    // cy.url().thsen(url => {
-    //     startUrl = url;
-    //   });
-
-    cy.get("[data-cy=btnopenitem1] > .v-list-item__title")
-      .invoke("text")
-      .then(t => {
-        sub = t;
-        //nave to first result form
-        cy.get("[data-cy=btnopenitem1]").click();
-        cy.url().should("include", "/customer");
-        //name field should contain whatever was shown in search results list
-        cy.contains(sub).should("exist");
-      });
-
-    //-----
-  });
-});
diff --git a/ayanova/tests/e2e/specs/smoke.js b/ayanova/tests/e2e/specs/smoke.js
deleted file mode 100644
index 9bdc0f32..00000000
--- a/ayanova/tests/e2e/specs/smoke.js
+++ /dev/null
@@ -1,463 +0,0 @@
-// Basic smoke test, visit every form to ensure they load
-
-describe("SMOKE", () => {
-  it("Every form opens without error", () => {
-    cy.visit("/login");
-
-    cy.get("input[name=username]")
-      .clear()
-      .type(Cypress.env("adminusername"));
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type(`${Cypress.env("adminpassword")}{enter}`);
-
-    //################# HOME
-    cy.visit("/home-dashboard");
-    cy.url({ timeout: 10000 }).should("include", "/home-dashboard");
-
-    cy.visit("/home-search");
-    cy.url({ timeout: 10000 }).should("include", "/home-search");
-    cy.get("[data-cy=phrase]");
-
-    cy.visit("/home-schedule");
-    cy.url({ timeout: 10000 }).should("include", "/home-schedule");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/home-memos");
-    cy.url({ timeout: 10000 }).should("include", "/home-memos");
-    cy.get("[data-cy=memosTable]");
-
-    cy.visit("/home-memos/0"); //no reliable single id would work for existing
-    cy.url({ timeout: 10000 }).should("include", "/home-memos/0");
-    cy.get("[data-cy=pickListSelectedUserId]");
-
-    cy.visit("/home-reminders");
-    cy.url({ timeout: 10000 }).should("include", "/home-reminders");
-    cy.get("[data-cy=remindersTable]");
-
-    cy.visit("/home-reminders/0");
-    cy.url({ timeout: 10000 }).should("include", "/home-reminders/0");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/home-reviews");
-    cy.url({ timeout: 10000 }).should("include", "/home-reviews");
-    cy.get("[data-cy=reviewsTable]");
-
-    cy.visit("/home-reviews/8/1");
-    cy.url({ timeout: 10000 }).should("include", "/home-reviews/8/1");
-    cy.get("[data-cy=clickThru]");
-
-    cy.visit("/home-user-settings");
-    cy.url({ timeout: 10000 }).should("include", "/home-user-settings");
-    cy.get("[data-cy=emailAddress]");
-
-    cy.visit("/home-password");
-    cy.url({ timeout: 10000 }).should("include", "/home-password");
-    cy.get("[data-cy=loginName]");
-
-    cy.visit("/home-security");
-    cy.url({ timeout: 10000 }).should("include", "/home-security");
-    cy.get("[data-cy=tfa]");
-
-    //can't do this without reset code etc, just logs out
-    // cy.visit("/home-reset");
-    // cy.url({ timeout: 10000 }).should("include", "/home-reset");
-    // cy.get("[data-cy=loginName]");
-
-    cy.visit("/home-notify-subscriptions");
-    cy.url({ timeout: 10000 }).should("include", "/home-notify-subscriptions");
-    cy.get("[data-cy=subsTable]");
-
-    cy.visit("/home-notify-subscriptions/0");
-    cy.url({ timeout: 10000 }).should(
-      "include",
-      "/home-notify-subscriptions/0"
-    );
-    cy.get("[data-cy=eventType]");
-
-    cy.visit("/home-notifications");
-    cy.url({ timeout: 10000 }).should("include", "/home-notifications");
-    cy.get("[data-cy=notifications]");
-
-    cy.visit("/home-notify-direct");
-    cy.url({ timeout: 10000 }).should("include", "/home-notify-direct");
-    cy.get("[data-cy=pickListSelectedUserId]");
-
-    //################# CUSTOMERS
-    cy.visit("/cust-customers");
-    cy.url({ timeout: 10000 }).should("include", "/cust-customers");
-    cy.get("[data-cy=customersTable]");
-
-    cy.visit("/cust-customers/1");
-    cy.url({ timeout: 10000 }).should("include", "/cust-customers/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/cust-customer-notes/1");
-    cy.url({ timeout: 10000 }).should("include", "/cust-customer-notes/1");
-    cy.get("[data-cy=clickThru]");
-
-    cy.visit("/cust-customer-note/0");
-    cy.url({ timeout: 10000 }).should("include", "/cust-customer-note/0");
-    cy.get("[data-cy=notes]");
-
-    cy.visit("/cust-head-offices");
-    cy.url({ timeout: 10000 }).should("include", "/cust-head-offices");
-    cy.get("[data-cy=headofficesTable]");
-
-    cy.visit("/cust-head-offices/1");
-    cy.url({ timeout: 10000 }).should("include", "cust-head-offices/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/cust-users");
-    cy.url({ timeout: 10000 }).should("include", "/cust-users");
-    cy.get("[data-cy=custUsersTable]");
-
-    // cy.visit("/cust-users/0");
-    // cy.url({ timeout: 10000 }).should("include", "/cust-users/0");
-    // cy.get("[data-cy=customerId]");
-
-    //################# SERVICE
-    cy.visit("/svc-schedule");
-    cy.url({ timeout: 10000 }).should("include", "/svc-schedule");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-workorders");
-    cy.url({ timeout: 10000 }).should("include", "/svc-workorders");
-    cy.get("[data-cy=workordersTable]");
-
-    cy.visit("/svc-workorders/1");
-    cy.url({ timeout: 10000 }).should("include", "svc-workorders/1");
-    cy.get("[data-cy=serial]");
-
-    cy.visit("/svc-workorder-templates");
-    cy.url({ timeout: 10000 }).should("include", "/svc-workorder-templates");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-quotes");
-    cy.url({ timeout: 10000 }).should("include", "/svc-quotes");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-quote-templates");
-    cy.url({ timeout: 10000 }).should("include", "/svc-quote-templates");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-pm-list");
-    cy.url({ timeout: 10000 }).should("include", "/svc-pm-list");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-pm-templates");
-    cy.url({ timeout: 10000 }).should("include", "/svc-pm-templates");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/svc-units");
-    cy.url({ timeout: 10000 }).should("include", "/svc-units");
-    cy.get("[data-cy=unitsTable]");
-
-    cy.visit("/svc-units/1");
-    cy.url({ timeout: 10000 }).should("include", "/svc-units/1");
-    cy.get("[data-cy=serial]");
-
-    cy.visit("/svc-unit-models");
-    cy.url({ timeout: 10000 }).should("include", "/svc-unit-models");
-    cy.get("[data-cy=unitmodelsTable]");
-
-    cy.visit("/svc-unit-models/1");
-    cy.url({ timeout: 10000 }).should("include", "svc-unit-models/1");
-    cy.get("[data-cy=number]");
-
-    cy.visit("/svc-loaners");
-    cy.url({ timeout: 10000 }).should("include", "/svc-loaners");
-    cy.get("[data-cy=loanUnitsTable]");
-
-    cy.visit("/svc-loaners/1");
-    cy.url({ timeout: 10000 }).should("include", "/svc-loaners/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/svc-contracts");
-    cy.url({ timeout: 10000 }).should("include", "/svc-contracts");
-    cy.get("[data-cy=contractsTable]");
-
-    cy.visit("/svc-contracts/1");
-    cy.url({ timeout: 10000 }).should("include", "/svc-contracts/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/svc-projects");
-    cy.url({ timeout: 10000 }).should("include", "/svc-projects");
-    cy.get("[data-cy=projectsTable]");
-
-    cy.visit("/svc-projects/1");
-    cy.url({ timeout: 10000 }).should("include", "/svc-projects/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/svc-csr");
-    cy.url({ timeout: 10000 }).should("include", "/svc-csr");
-    cy.get("[data-cy=csrTable]");
-
-    cy.visit("/svc-csr/1");
-    cy.url({ timeout: 10000 }).should("include", "/svc-csr/1");
-    cy.get("[data-cy=name]");
-
-    //################# INVENTORY
-    cy.visit("/inv-parts");
-    cy.url({ timeout: 10000 }).should("include", "/inv-parts");
-    cy.get("[data-cy=partsTable]");
-
-    cy.visit("/inv-parts/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-parts/1");
-    cy.get("[data-cy=partName]");
-
-    cy.visit("/inv-purchase-orders");
-    cy.url({ timeout: 10000 }).should("include", "/inv-purchase-orders");
-    cy.get("[data-cy=purchaseordersTable]");
-
-    cy.visit("/inv-purchase-orders/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-purchase-orders/1");
-    cy.get("[data-cy=serial]");
-
-    cy.visit("/inv-part-inventory");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-inventory");
-    cy.get("[data-cy=partInventoryTable]");
-
-    cy.visit("/inv-part-inventory-transactions");
-    cy.url({ timeout: 10000 }).should(
-      "include",
-      "/inv-part-inventory-transactions"
-    );
-    cy.get("[data-cy=partInventoryTransactionsTable]");
-
-    cy.visit("/inv-part-assemblies");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-assemblies");
-    cy.get("[data-cy=partassemblysTable]");
-
-    cy.visit("/inv-part-assemblies/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-assemblies/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/inv-part-serials/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-serials/1");
-    cy.get("[data-cy=selectedPartId]");
-
-    cy.visit("/inv-part-stock-levels/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-stock-levels/1");
-    cy.get("[data-cy=selectedPartId]");
-
-    cy.visit("/inv-part-warehouses");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-warehouses");
-    cy.get("[data-cy=partwarehousesTable]");
-
-    cy.visit("/inv-part-warehouses/1");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-warehouses/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/inv-part-adjustment");
-    cy.url({ timeout: 10000 }).should("include", "/inv-part-adjustment");
-    cy.get("[data-cy=description]");
-
-    //################# VENDORS
-    cy.visit("/vendors");
-    cy.url({ timeout: 10000 }).should("include", "/vendors");
-    cy.get("[data-cy=vendorsTable]");
-
-    cy.visit("/vendors/1");
-    cy.url({ timeout: 10000 }).should("include", "vendors/1");
-    cy.get("[data-cy=name]");
-
-    //################# ACCOUNTING
-    // cy.visit("/acc-service-banks");
-    // cy.url({ timeout: 10000 }).should("include", "/acc-service-banks");
-    // cy.get("[data-cy=serviceBanksTable]");
-
-    // cy.visit("/acc-service-banks/8/1");
-    // cy.url({ timeout: 10000 }).should("include", "/acc-service-banks/8/1");
-    // cy.get("[data-cy=clickThru]");
-
-    // cy.visit("/acc-service-banks/0/8/1");
-    // cy.url({ timeout: 10000 }).should("include", "/acc-service-banks/0/8/1");
-    // cy.get("[data-cy=name]");
-
-    cy.visit("/acc-service-rates");
-    cy.url({ timeout: 10000 }).should("include", "/acc-service-rates");
-    cy.get("[data-cy=serviceRatesTable]");
-
-    cy.visit("/acc-service-rates/1");
-    cy.url({ timeout: 10000 }).should("include", "/acc-service-rates/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/acc-travel-rates");
-    cy.url({ timeout: 10000 }).should("include", "/acc-travel-rates");
-    cy.get("[data-cy=travelRatesTable]");
-
-    cy.visit("/acc-travel-rates/1");
-    cy.url({ timeout: 10000 }).should("include", "/acc-travel-rates/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/acc-tax-codes");
-    cy.url({ timeout: 10000 }).should("include", "/acc-tax-codes");
-    cy.get("[data-cy=taxCodesTable]");
-
-    cy.visit("/acc-tax-codes/1");
-    cy.url({ timeout: 10000 }).should("include", "/acc-tax-codes/1");
-    cy.get("[data-cy=name]");
-
-    //################# ADMIN
-    cy.visit("/adm-global-settings");
-    cy.url({ timeout: 10000 }).should("include", "/adm-global-settings");
-    cy.get("[data-cy=filterCaseSensitive]");
-
-    cy.visit("/adm-global-select-templates");
-    cy.url({ timeout: 10000 }).should(
-      "include",
-      "/adm-global-select-templates"
-    );
-    cy.get("[data-cy=selectTemplate]");
-
-    cy.visit("/adm-global-logo");
-    cy.url({ timeout: 10000 }).should("include", "/adm-global-logo");
-    cy.get("[data-cy=uploadSmall]");
-
-    cy.visit("/adm-global-seeds");
-    cy.url({ timeout: 10000 }).should("include", "/adm-global-seeds");
-    cy.get("[data-cy=purchaseOrderNextSerial]");
-
-    cy.visit("/adm-license");
-    cy.url({ timeout: 10000 }).should("include", "/adm-license");
-    cy.get("[data-cy=licenseForm]");
-
-    cy.visit("/adm-users");
-    cy.url({ timeout: 10000 }).should("include", "/adm-users");
-    cy.get("[data-cy=usersTable]");
-
-    cy.visit("/adm-users/1");
-    cy.url({ timeout: 10000 }).should("include", "/adm-users/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/adm-translations");
-    cy.url({ timeout: 10000 }).should("include", "/adm-translations");
-    cy.get("[data-cy=transTable]");
-
-    cy.visit("/adm-translations/1");
-    cy.url({ timeout: 10000 }).should("include", "/adm-translations/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/adm-report-templates");
-    cy.url({ timeout: 10000 }).should("include", "/adm-report-templates");
-    cy.get("[data-cy=reportTemplatesTable]");
-
-    cy.visit("/report-edit/1");
-    cy.url({ timeout: 10000 }).should("include", "/report-edit/1");
-    cy.get("[data-cy=viewChange]");
-
-    cy.visit("/adm-attachments");
-    cy.url({ timeout: 10000 }).should("include", "/adm-attachments");
-    cy.get("[data-cy=attachTable]");
-
-    cy.visit("/adm-history");
-    cy.url({ timeout: 10000 }).should("include", "/adm-history");
-    cy.get("[data-cy=historyTable]");
-
-    cy.visit("/adm-import");
-    cy.url({ timeout: 10000 }).should("include", "/adm-import");
-    cy.get("[data-cy=ayaType]");
-
-    //################# OPERATIONS
-    cy.visit("/ops-backup");
-    cy.url({ timeout: 10000 }).should("include", "/ops-backup");
-    cy.get("[data-cy=backupTable]");
-
-    cy.visit("/ops-server-state");
-    cy.url({ timeout: 10000 }).should("include", "/ops-server-state");
-    cy.get("[data-cy=serverStateOpen]");
-
-    cy.visit("/ops-jobs");
-    cy.url({ timeout: 10000 }).should("include", "/ops-jobs");
-    cy.get("[data-cy=jobsTable]");
-
-    cy.visit("/ops-log");
-    cy.url({ timeout: 10000 }).should("include", "/ops-log");
-    cy.get("[data-cy=selectedLog]");
-
-    cy.visit("/ops-metrics");
-    cy.url({ timeout: 10000 }).should("include", "/ops-metrics");
-    cy.get("[data-cy=selectedTimePeriod]");
-
-    cy.visit("/ops-profile");
-    cy.url({ timeout: 10000 }).should("include", "/ops-profile");
-    cy.get("[data-cy=profileCard]");
-
-    cy.visit("/ops-notification-settings");
-    cy.url({ timeout: 10000 }).should("include", "/ops-notification-settings");
-    cy.get("[data-cy=smtpDeliveryActive]");
-
-    cy.visit("/ops-notify-queue");
-    cy.url({ timeout: 10000 }).should("include", "/ops-notify-queue");
-    cy.get("[data-cy=notifyQueueTable]");
-
-    cy.visit("/ops-view-configuration");
-    cy.url({ timeout: 10000 }).should("include", "/ops-view-configuration");
-    cy.get("[data-cy=configCard]");
-
-    //################# MISC
-    cy.visit("/about");
-    cy.url({ timeout: 10000 }).should("include", "/about");
-    cy.get("[data-cy=versionCard]");
-
-    cy.visit("/applog");
-    cy.url({ timeout: 10000 }).should("include", "/applog");
-    cy.get("[data-cy=logText]");
-
-    cy.visit("/customize/Customer");
-    cy.url({ timeout: 10000 }).should("include", "/customize/Customer");
-    cy.get("[data-cy=customizeForm]");
-
-    cy.visit("/data-list-column-view/CustomerDataList");
-    cy.url({ timeout: 10000 }).should(
-      "include",
-      "/data-list-column-view/CustomerDataList"
-    );
-    cy.get("[data-cy=dlcForm]");
-
-    cy.visit("/home-reviews/2/1");
-    cy.url({ timeout: 10000 }).should("include", "/home-reviews/2/1");
-    cy.get("[data-cy=reviewsTable]");
-
-    cy.visit("/history/3/1");
-    cy.url({ timeout: 10000 }).should("include", "/history/3/1");
-    cy.get("[data-cy=timeLine]");
-
-    cy.visit("/open/8/1");
-    cy.url({ timeout: 10000 }).should("include", "/cust-customers/1");
-    cy.get("[data-cy=name]");
-
-    cy.visit("/NOTFOUND");
-    cy.contains("404");
-
-    //LOGOUT MANAGER USER
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url({ timeout: 10000 }).should("include", "/login");
-
-    //CUSTOMER PAGES
-    cy.get("input[name=username]")
-      .clear()
-      .type("Customer");
-    cy.get("input[name=password]")
-      .clear()
-      .type("Customer{enter}");
-
-    cy.url({ timeout: 10000 }).should("include", "/customer-csr");
-    cy.get("[data-cy=underconstruction]");
-
-    cy.visit("/customer-workorders");
-    cy.url({ timeout: 10000 }).should("include", "/customer-workorders");
-    cy.get("[data-cy=underconstruction]");
-
-    //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url({ timeout: 10000 }).should("include", "/login");
-
-    //-----------------------------------------------------
-  });
-});
diff --git a/ayanova/tests/e2e/specs/translation-about.js b/ayanova/tests/e2e/specs/translation-about.js
deleted file mode 100644
index 8d40eab8..00000000
--- a/ayanova/tests/e2e/specs/translation-about.js
+++ /dev/null
@@ -1,129 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("TRANSLATION", () => {
-  it("About form works for all default languages", () => {
-    cy.visit("/login");
-
-    //FRENCH
-    cy.get("input[name=username]")
-      .clear()
-      .type("fr");
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type("fr{enter}");
-
-    //nav to about form
-    // cy.get("[data-cy=contextmenu]").click();
-    // cy.get('[data-cy="app:nav:abt"]').click();
-    cy.visit("/about");
-    cy.url().should("include", "/about");
-
-    //ensure there is french on the form
-    //title
-    cy.contains("À propos d'AyaNova");
-    //server section
-    cy.contains("Navigateur");
-    //open log
-    cy.get("[data-cy=contextmenu]").click();
-    cy.get('[data-cy="app:nav:log"]').click();
-    //cy.get('[data-cy="app:nav:log"] > .v-btn__content').click();
-    cy.url().should("include", "/applog");
-
-    //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-    //-----------------------------------------------------
-    //SPANISH
-    cy.get("input[name=username]")
-      .clear()
-      .type("es");
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type("es{enter}");
-
-    cy.wait(50);
-
-    //nav to about form
-    // cy.get("[data-cy=contextmenu]").click();
-    // cy.get('[data-cy="app:nav:abt"]').click();
-    cy.visit("/about");
-
-    //ensure there is translated text on the form
-    //title
-    cy.contains("Acerca de AyaNova");
-    //server section
-    cy.contains("Navegador");
-
-    //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-
-    //-------------------------
-    //-----------------------------------------------------
-    //GERMAN
-    cy.get("input[name=username]")
-      .clear()
-      .type("de");
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type("de{enter}");
-
-    cy.wait(50);
-
-    //nav to about form
-    // cy.get("[data-cy=contextmenu]").click();
-    // cy.get('[data-cy="app:nav:abt"]').click();
-    cy.visit("/about");
-
-    //ensure there is translated text on the form
-    //title
-    cy.contains("Über AyaNova");
-    //license to (uniquely german)
-    cy.contains("Registrierter Benutzer");
-
-    //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-
-    //-----------------------------------------------------
-    //ENGLISH - CustomerRestricted
-    cy.get("input[name=username]")
-      .clear()
-      .type("CustomerRestricted");
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type("CustomerRestricted{enter}");
-
-    // we should be redirected to /customer-csr
-    cy.url().should("include", "/customer-csr");
-
-    //nav to about form
-    // cy.get("[data-cy=contextmenu]").click();
-    // cy.get('[data-cy="app:nav:abt"]').click();
-    cy.visit("/about");
-
-    //ensure there is translated text on the form
-    //title
-    cy.contains("About AyaNova");
-    //client user should *NOT* see the licensed to bit or licensed options
-    cy.get("[data-cy='aboutlicensedoptions]").should("not.exist");
-
-    //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-
-    //-----------------------------------------------------
-  });
-});
diff --git a/ayanova/tests/e2e/specs/widget-crud.js b/ayanova/tests/e2e/specs/widget-crud.js
deleted file mode 100644
index 7b00ee4c..00000000
--- a/ayanova/tests/e2e/specs/widget-crud.js
+++ /dev/null
@@ -1,102 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-// const { WatchIgnorePlugin } = require("webpack");
-
-//https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions
-describe("customer FORM", () => {
-  it("Performs all crud ops on customer successfully", () => {
-    let unique = new Date().getTime();
-    cy.visit("/login");
-    cy.get("input[name=username]")
-      .clear()
-      .type(Cypress.env("adminusername"));
-
-    // {enter} causes the form to submit
-    cy.get("input[name=password]")
-      .clear()
-      .type(`${Cypress.env("adminpassword")}{enter}`);
-
-    cy.url().should("include", "/ay-evaluate");
-
-    //POST
-    cy.visit("/customers/0");
-    cy.url().should("include", "/customers/0");
-    //cy.wait(5000);
-
-    //save the start url for later
-    let startUrl = null;
-    //funcs are async so need to get result via then
-    cy.url().then(url => {
-      startUrl = url;
-    });
-
-    //first edit to break the required rules
-    cy.get("[data-cy=active]").check({ force: true }); //have to force, for some reason it thinks it's covered
-    //now name and price sb required rule broken
-    cy.contains("Name is a required field", { timeout: 1000 });
-    cy.contains("Price is a required field");
-    //enter name
-    let name = "E2E CRUD " + unique;
-    cy.get("[data-cy=name]").type(name);
-    //confirm error went away
-    cy.contains("Name is a required field").should("not.exist");
-
-    cy.get("[data-cy=count]").type("123");
-    cy.get("[data-cy=dollarAmount]").type("123.45{enter}");
-    //cy.wait(25);
-    cy.contains("Price is a required field").should("not.exist");
-
-    //start date
-    cy.get('[data-cy="dateinput:startDate"]').type("2021-01-01");
-    cy.get('[data-cy="timeinput:startDate"]').type("16:20");
-
-    //end date
-    cy.get('[data-cy="dateinput:endDate"]').type("2021-01-02");
-    cy.get('[data-cy="timeinput:endDate"]').type("16:20");
-
-    //USER PICKLIST
-    //this is an assumption but it's pretty hard to imagine there not being a user that matches this
-    //if it's an issue can just generate a known user before this test runs directly to the api, it's a thing that's possible with cypress
-    cy.get("[data-cy=userid] > .v-input").type("a ..zone");
-    //select the second item, this assumes only one picklist at a time is dropped down because nothing ties the picklist control to the actual content list
-    cy.get(
-      ".v-autocomplete__content > .v-select-list > div:nth-child(2)"
-    ).click();
-
-    cy.get("[data-cy=usertype]").type("cu{enter}", { force: true });
-    cy.get("[data-cy=notes]").type("Testing 1..2..3{enter}EOT");
-    cy.get("[data-cy=tags] input[type=text] ").type("zone1{enter}{esc}", {
-      force: true
-    }); //esc necessary to close tags control
-    cy.get(
-      "[data-cy=customerCustom2]"
-    ).type("Custom text field testing a...b...c...{enter}EOT", { force: true });
-
-    //GET ROUTE
-    //SAve the record and ensure it's different
-    cy.get('[data-cy="customer-edit:save"]').click();
-    cy.url().should("include", "/customers");
-
-    cy.get("[data-cy=serial]").should("not.have.value", 0); //server sets new value on save
-
-    //PUT
-    cy.get("[data-cy=count]").type("321", { force: true });
-
-    cy.get('[data-cy="customer-edit:save"]').click({ force: true });
-
-    //now get it back again and confirm settings
-
-    //confirm it's the same one
-    cy.get("[data-cy=name]").should("have.value", name);
-
-    //delete the record
-    cy.get("[data-cy=contextmenu]").click();
-    cy.get('[data-cy="customer-edit:delete"]').click();
-    cy.get('[data-cy="gzconfirm:yesbutton"]').click();
-
-    // //LOGOUT
-    cy.get("[data-cy=navicon]").click();
-    cy.get("[data-cy=logout]").click();
-    cy.url().should("include", "/login");
-  });
-});
diff --git a/ayanova/tests/e2e/support/commands.js b/ayanova/tests/e2e/support/commands.js
deleted file mode 100644
index c1f5a772..00000000
--- a/ayanova/tests/e2e/support/commands.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/ayanova/tests/e2e/support/index.js b/ayanova/tests/e2e/support/index.js
deleted file mode 100644
index d076cec9..00000000
--- a/ayanova/tests/e2e/support/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
diff --git a/ayanova/tests/unit/.eslintrc.js b/ayanova/tests/unit/.eslintrc.js
deleted file mode 100644
index 36004518..00000000
--- a/ayanova/tests/unit/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  env: {
-    jest: true
-  }
-};
diff --git a/ayanova/tests/unit/example.spec.js b/ayanova/tests/unit/example.spec.js
deleted file mode 100644
index a846fbdb..00000000
--- a/ayanova/tests/unit/example.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
-
-describe("HelloWorld.vue", () => {
-  it("renders props.msg when passed", () => {
-    const msg = "new message";
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
-    });
-    expect(wrapper.text()).toMatch(msg);
-  });
-});