From ed0e7dc77cd23800ab14d97d392b22d4326c690c Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 28 Jul 2021 19:09:37 +0000
Subject: [PATCH] PM Dawn

---
 ayanova/devdocs/todo.txt                      |    1 +
 ayanova/src/api/initialize.js                 |   12 +-
 ayanova/src/api/open-object-handler.js        |   46 +
 ayanova/src/components/pm-header.vue          |  666 ++++++
 ayanova/src/components/pm-item-expenses.vue   |  798 +++++++
 ayanova/src/components/pm-item-labors.vue     |  997 ++++++++
 ayanova/src/components/pm-item-loans.vue      |  885 +++++++
 .../components/pm-item-outside-services.vue   | 1098 +++++++++
 ayanova/src/components/pm-item-parts.vue      | 1129 +++++++++
 .../components/pm-item-scheduled-users.vue    |  710 ++++++
 ayanova/src/components/pm-item-tasks.vue      |  644 +++++
 ayanova/src/components/pm-item-travels.vue    |  976 ++++++++
 ayanova/src/components/pm-item-units.vue      |  850 +++++++
 ayanova/src/components/pm-items.vue           | 1249 ++++++++++
 ayanova/src/router.js                         |   20 +-
 ayanova/src/views/svc-pm-list.vue             |   21 -
 ayanova/src/views/svc-pm-templates.vue        |   21 -
 ayanova/src/views/svc-pm.vue                  | 2102 +++++++++++++++++
 ayanova/src/views/svc-pms.vue                 |  295 +++
 ayanova/src/views/svc-quote-templates.vue     |   21 -
 ayanova/src/views/svc-quote.vue               |    3 -
 ayanova/src/views/svc-workorder-templates.vue |   21 -
 ayanova/src/views/svc-workorder.vue           |    1 -
 23 files changed, 12453 insertions(+), 113 deletions(-)
 create mode 100644 ayanova/src/components/pm-header.vue
 create mode 100644 ayanova/src/components/pm-item-expenses.vue
 create mode 100644 ayanova/src/components/pm-item-labors.vue
 create mode 100644 ayanova/src/components/pm-item-loans.vue
 create mode 100644 ayanova/src/components/pm-item-outside-services.vue
 create mode 100644 ayanova/src/components/pm-item-parts.vue
 create mode 100644 ayanova/src/components/pm-item-scheduled-users.vue
 create mode 100644 ayanova/src/components/pm-item-tasks.vue
 create mode 100644 ayanova/src/components/pm-item-travels.vue
 create mode 100644 ayanova/src/components/pm-item-units.vue
 create mode 100644 ayanova/src/components/pm-items.vue
 delete mode 100644 ayanova/src/views/svc-pm-list.vue
 delete mode 100644 ayanova/src/views/svc-pm-templates.vue
 create mode 100644 ayanova/src/views/svc-pm.vue
 create mode 100644 ayanova/src/views/svc-pms.vue
 delete mode 100644 ayanova/src/views/svc-quote-templates.vue
 delete mode 100644 ayanova/src/views/svc-workorder-templates.vue

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 1be1bd36..2d50dbac 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -515,6 +515,7 @@ CURRENTLY DOING: PM stuff:
 	Pore over quote and PM and look for workorder remnants, particularly biz actions and rules
 	Add back end rules as necessary for quotes and PM's
 		Sanity checks for PM settings will be a must here
+	test help links
 	Child->grandchild data lists for quotes and pm's like workorders
 	release
 	profit$
diff --git a/ayanova/src/api/initialize.js b/ayanova/src/api/initialize.js
index 3c3a19be..154517bd 100644
--- a/ayanova/src/api/initialize.js
+++ b/ayanova/src/api/initialize.js
@@ -330,16 +330,6 @@ function initNavPanel() {
     });
   }
 
-  // //WORKORDER TEMPLATES LIST
-  //this will be an item inside the workorders NEW menu or grid or wherever but it's not top level worthy
-  //there used to be an array for 3rd level shit but that's whack yo! ;)
-  // subSub.push({
-  //   title: "WorkOrderServiceTemplate",
-  //   icon: "fa - stamp",
-  //   route: "/svc-workorder-templates",
-  //   key: key++
-  // });
-
   //QUOTE LIST
   if (window.$gz.role.canOpen(window.$gz.type.Quote)) {
     sub.push({
@@ -355,7 +345,7 @@ function initNavPanel() {
     sub.push({
       title: "PMList",
       icon: "$ayiBusinessTime",
-      route: "/svc-pm-list",
+      route: "/svc-pms",
       key: key++
     });
   }
diff --git a/ayanova/src/api/open-object-handler.js b/ayanova/src/api/open-object-handler.js
index 8b88f57a..d9a2842c 100644
--- a/ayanova/src/api/open-object-handler.js
+++ b/ayanova/src/api/open-object-handler.js
@@ -145,6 +145,52 @@ export default {
             });
             break;
 
+          //### PM AND RELATIVES ###
+          case ayatype.PMItem:
+          case ayatype.PMItemExpense:
+          case ayatype.PMItemLabor:
+          case ayatype.PMItemLoan:
+          case ayatype.PMItemOutsideService:
+          case ayatype.PMItemPart:
+          case ayatype.PMItemPartRequest:
+          case ayatype.PMItemScheduledUser:
+          case ayatype.PMItemTask:
+          case ayatype.PMItemTravel:
+          case ayatype.PMItemUnit:
+            (async () => {
+              try {
+                let res = await window.$gz.api.get(
+                  `search/ancestor/${tid.type}/${tid.id}`
+                );
+
+                if (res.error) {
+                  throw new Error(
+                    window.$gz.errorHandler.errorToString(res, vm)
+                  );
+                }
+                if (res.data.id && res.data.id != 0) {
+                  this.handleOpenObjectClick(vm, {
+                    type: ayatype.PM,
+                    id: res.data.id,
+                    gotype: tid.type,
+                    goid: tid.id
+                  });
+                  return;
+                }
+              } catch (e) {
+                //throw new Error(e);
+                throw new Error(window.$gz.errorHandler.errorToString(e, vm));
+              }
+            })();
+
+            break;
+          case ayatype.PM:
+            vm.$router.push({
+              name: "pm-edit",
+              params: { recordid: tid.id, gotype: tid.gotype, goid: tid.goid }
+            });
+            break;
+
           case ayatype.Memo:
             vm.$router.push({
               name: "memo-edit",
diff --git a/ayanova/src/components/pm-header.vue b/ayanova/src/components/pm-header.vue
new file mode 100644
index 00000000..228ec0ef
--- /dev/null
+++ b/ayanova/src/components/pm-header.vue
@@ -0,0 +1,666 @@
+<template>
+  <div>
+    <v-row>
+      <v-col
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+        v-if="value.serial != 0 && canEditSerial"
+      >
+        <v-text-field
+          v-model="value.serial"
+          :readonly="formState.readOnly"
+          :label="$ay.t('PMSerialNumber')"
+          ref="serial"
+          data-cy="serial"
+          :rules="[
+            form().integerValid(this, 'serial'),
+            form().required(this, 'serial')
+          ]"
+          :error-messages="form().serverErrors(this, 'serial')"
+          @input="fieldValueChanged('serial')"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <gz-pick-list
+          :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')"
+          @input="fieldValueChanged('customerId')"
+        ></gz-pick-list>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Address') && !value.userIsSubContractorRestricted
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoAddress
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly || value.userIsRestrictedType"
+          :pvm="pvm"
+          data-cy="woAddress"
+        />
+      </v-col>
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <v-checkbox
+          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')"
+        ></v-checkbox>
+      </v-col>
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderSummary') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+      >
+        <v-textarea
+          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
+        ></v-textarea>
+      </v-col>
+
+      <!-- <v-col
+        v-if="
+          form().showMe(this, 'PMPMRequestDate') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('PMPMRequestDate')"
+          v-model="value.requested"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="requested"
+          data-cy="requested"
+          :error-messages="form().serverErrors(this, 'requested')"
+          @input="fieldValueChanged('requested')"
+        ></gz-date-time-picker>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'PMValidUntilDate') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('PMValidUntilDate')"
+          v-model="value.validUntil"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="validUntil"
+          data-cy="validUntil"
+          :error-messages="form().serverErrors(this, 'validUntil')"
+          @input="fieldValueChanged('validUntil')"
+        ></gz-date-time-picker>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'PMDateSubmitted') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('PMDateSubmitted')"
+          v-model="value.submitted"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="submitted"
+          data-cy="submitted"
+          :error-messages="form().serverErrors(this, 'submitted')"
+          @input="fieldValueChanged('submitted')"
+        ></gz-date-time-picker>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'PMDateApproved') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('PMDateApproved')"
+          v-model="value.approved"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="approved"
+          data-cy="approved"
+          :error-messages="form().serverErrors(this, 'approved')"
+          @input="fieldValueChanged('approved')"
+        ></gz-date-time-picker>
+      </v-col> -->
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Contract') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-pick-list
+          :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')"
+        ></gz-pick-list>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Project') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-pick-list
+          :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')"
+        ></gz-pick-list>
+      </v-col>
+
+      <v-col
+        v-if="form().showMe(this, 'WorkOrderCustomerContactName')"
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-text-field
+          v-model="value.customerContactName"
+          :readonly="
+            formState.readOnly ||
+              value.userIsTechRestricted ||
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+          "
+          :label="$ay.t('WorkOrderCustomerContactName')"
+          ref="customerContactName"
+          data-cy="customerContactName"
+          :error-messages="form().serverErrors(this, 'customerContactName')"
+          @input="fieldValueChanged('customerContactName')"
+        ></v-text-field>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderCustomerReferenceNumber') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-text-field
+          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')"
+        ></v-text-field>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderInternalReferenceNumber') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-text-field
+          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')"
+        ></v-text-field>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderOnsite') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-checkbox
+          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')"
+        ></v-checkbox>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Tags') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+      >
+        <gz-tag-picker
+          v-model="value.tags"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="tags"
+          data-cy="tags"
+          :error-messages="form().serverErrors(this, 'tags')"
+          @input="fieldValueChanged('tags')"
+        ></gz-tag-picker>
+      </v-col>
+
+      <v-col
+        v-if="
+          !(
+            value.userIsSubContractorFull || value.userIsSubContractorRestricted
+          )
+        "
+        cols="12"
+      >
+        <gz-custom-fields
+          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')"
+        ></gz-custom-fields>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Wiki') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+      >
+        <gz-wiki
+          :aya-type="pvm.ayaType"
+          :aya-id="value.id"
+          ref="wiki"
+          v-model="value.wiki"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          @input="fieldValueChanged('wiki')"
+        ></gz-wiki
+      ></v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'Attachments') &&
+            value.id &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+      >
+        <gz-attachments
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          :aya-type="pvm.ayaType"
+          :aya-id="value.id"
+        ></gz-attachments
+      ></v-col>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+import GzWoAddress from "./work-order-address.vue";
+export default {
+  components: {
+    GzWoAddress
+  },
+  data() {
+    return {
+      canEditSerial: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
+      ])
+    };
+  },
+
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    }
+  },
+
+  methods: {
+    form() {
+      return window.$gz.form;
+    },
+    async fieldValueChanged(ref) {
+      if (!this.formState.loading && !this.formState.readonly) {
+        //flag this record dirty so it gets picked up by save
+        this.value.isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    }
+  },
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  }
+};
+
+/*
+l.Add(new FormField { TKey = "PMPreparedByID", FieldKey = "PMPreparedByID" });
+l.Add(new FormField { TKey = "PMIntroduction", FieldKey = "PMIntroduction" });
+l.Add(new FormField { TKey = "PMPMRequestDate", FieldKey = "PMPMRequestDate" });
+l.Add(new FormField { TKey = "PMValidUntilDate", FieldKey = "PMValidUntilDate" });
+l.Add(new FormField { TKey = "PMDateSubmitted", FieldKey = "PMDateSubmitted" });
+l.Add(new FormField { TKey = "PMDateApproved", FieldKey = "PMDateApproved" });
+l.Add(new FormField { TKey = "CopyWiki", FieldKey = "CopyWiki" });
+l.Add(new FormField { TKey = "CopyAttachments", FieldKey = "CopyAttachments" });
+
+Example workorder
+{
+    id: 10,
+    concurrency: 7728489,
+    serial: 10,
+    notes: "Quae officia placeat aliquid ducimus consequatur quia.",
+    wiki: null,
+    customFields: null,
+    tags: ["green", "zone6"],
+    customerId: 12,
+    projectId: null,
+    internalReferenceNumber: "irf-3339",
+    customerReferenceNumber: "crf-1889",
+    customerContactName: "contact name here",
+    fromPMId: null,
+    fromPMId: null,
+    fromCSRId: null,
+    serviceDate: "2021-05-29T21:25:31.421011Z",
+    completeByDate: "2021-06-03T21:25:31.421011Z",
+    invoiceNumber: null,
+    customerSignature: null,
+    customerSignatureName: null,
+    customerSignatureCaptured: "0001-01-01T00:00:00Z",
+    postAddress: null,
+    postCity: null,
+    postRegion: null,
+    postCountry: null,
+    postCode: null,
+    address: null,
+    city: null,
+    region: null,
+    country: null,
+    latitude: null,
+    longitude: null,
+    items: [
+      {
+        id: 21,
+        concurrency: 7728489,
+        notes: "itemnotes",
+        wiki: null,
+        customFields: null,
+        tags: [],
+        pmId: 10,
+        techNotes: "technotes",
+        workorderItemStatusId: null,
+        workorderItemPriorityId: null,
+        requestDate: "2021-05-29T21:25:31.421011Z",
+        warrantyService: false,
+        isDirty: false,
+        expenses: [],
+        labors: [],
+        loans: [],
+        parts: [],
+        partRequests: [],
+        scheduledUsers: [
+          {
+            id: 41,
+            concurrency: 7728489,
+            userId: 15,
+            estimatedQuantity: 1.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            pmItemId: 21
+          },
+          {
+            id: 42,
+            concurrency: 7728489,
+            userId: 22,
+            estimatedQuantity: 2.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            pmItemId: 21
+          }
+        ],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: []
+      },
+      {
+        id: 22,
+        concurrency: 7728489,
+        notes: "itemnotes",
+        wiki: null,
+        customFields: null,
+        tags: [],
+        pmId: 10,
+        techNotes: "technotes",
+        workorderItemStatusId: null,
+        workorderItemPriorityId: null,
+        requestDate: "2021-05-29T21:25:31.421011Z",
+        warrantyService: false,
+        isDirty: false,
+        expenses: [],
+        labors: [],
+        loans: [],
+        parts: [],
+        partRequests: [],
+        scheduledUsers: [
+          {
+            id: 43,
+            concurrency: 7728489,
+            userId: 24,
+            estimatedQuantity: 1.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            pmItemId: 22
+          },
+          {
+            id: 44,
+            concurrency: 7728489,
+            userId: 40,
+            estimatedQuantity: 2.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            pmItemId: 22
+          }
+        ],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: []
+      }
+    ],
+    states: [
+      {
+        id: 37,
+        concurrency: 7728489,
+        pmId: 10,
+        workOrderStatusId: 2,
+        created: "2021-05-29T21:30:31.421011Z",
+        userId: 37,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 38,
+        concurrency: 7728489,
+        pmId: 10,
+        workOrderStatusId: 3,
+        created: "2021-05-29T22:25:31.421011Z",
+        userId: 10,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 39,
+        concurrency: 7728489,
+        pmId: 10,
+        workOrderStatusId: 1,
+        created: "2021-05-29T22:30:31.421011Z",
+        userId: 31,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 40,
+        concurrency: 7728489,
+        pmId: 10,
+        workOrderStatusId: 3,
+        created: "2021-05-29T23:25:31.421011Z",
+        userId: 2,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 41,
+        concurrency: 7728489,
+        pmId: 10,
+        workOrderStatusId: 9,
+        created: "2021-04-06T00:10:44.636Z",
+        userId: 1,
+        isDirty: false,
+        workOrderStatus: null
+      }
+    ],
+    isDirty: false,
+    isLockedAtServer: false
+  };
+
+
+*/
+</script>
diff --git a/ayanova/src/components/pm-item-expenses.vue b/ayanova/src/components/pm-item-expenses.vue
new file mode 100644
index 00000000..8d702dcb
--- /dev/null
+++ b/ayanova/src/components/pm-item-expenses.vue
@@ -0,0 +1,798 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiMoneyBillWave</v-icon
+              >
+              {{ $ay.t("WorkOrderItemExpenseList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="expensesTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+            <template v-slot:[`item.reimburseUser`]="{ item }">
+              <v-simple-checkbox
+                v-model="item.reimburseUser"
+                disabled
+              ></v-simple-checkbox>
+            </template>
+
+            <template v-slot:[`item.chargeToCustomer`]="{ item }">
+              <v-simple-checkbox
+                v-model="item.chargeToCustomer"
+                disabled
+              ></v-simple-checkbox>
+            </template>
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="expensetopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemExpenseName')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            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`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].name`
+              )
+            "
+          ></v-text-field>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemExpenseTotalCost')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            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(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].totalCost`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemExpenseChargeAmount') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex]
+                .chargeAmount
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemExpenseChargeAmount')"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+            "
+            data-cy="expenseChargeAmount"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeAmount`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemExpenseChargeToCustomer') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-checkbox
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex]
+                .chargeToCustomer
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemExpenseChargeToCustomer')"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+            "
+            data-cy="chargeToCustomer"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+              )
+            "
+            @change="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeToCustomer`
+              )
+            "
+          ></v-checkbox>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemExpenseTaxPaid')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            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(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].taxPaid`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemExpenseChargeTaxCodeID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex]
+                .chargeTaxCodeId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemExpenseChargeTaxCodeID')"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+            "
+            data-cy="expenseChargeTaxCode"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].chargeTaxCodeId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemExpenseReimburseUser') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-checkbox
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex]
+                .reimburseUser
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemExpenseReimburseUser')"
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+            "
+            data-cy="expenseReimburseUser"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+              )
+            "
+            @change="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].reimburseUser`
+              )
+            "
+          ></v-checkbox>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemExpenseUserID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex].userId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].userId`
+              )
+            "
+            @update:name="userChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemExpenseDescription')"
+          cols="12"
+        >
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].expenses[activeItemIndex]
+                .description
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemExpenseDescription')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+              )
+            "
+            :ref="
+              `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+            "
+            data-cy="expenseDescription"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].expenses[${activeItemIndex}].description`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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() {
+      let 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() //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);
+
+        // //set viz if applicable
+        // if(ref==""){
+        //    let selectedPartWarehouse = vm.$refs.partWarehouseId.getFullSelectionValue();
+        // }
+      }
+    },
+    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;
+    }
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].expenses[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].expenses[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseName")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseName"),
+          align: "start",
+          value: "name"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseTotalCost")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseTotalCost"),
+          align: "right",
+          value: "totalCost"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseChargeAmount")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseChargeAmount"),
+          align: "right",
+          value: "chargeAmount"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseChargeToCustomer")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseChargeToCustomer"),
+          align: "center",
+          value: "chargeToCustomer"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseTaxPaid")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseTaxPaid"),
+          align: "right",
+          value: "taxPaid"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseChargeTaxCodeID")) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (this.form().showMe(this, "ExpenseTaxAViz")) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (this.form().showMe(this, "ExpenseTaxBViz")) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (this.form().showMe(this, "ExpenseLineTotalViz")) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseReimburseUser")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseReimburseUser"),
+          align: "center",
+          value: "reimburseUser"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemExpenseUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemExpenseUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].expenses.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          name: x.name,
+          totalCost: window.$gz.locale.currencyLocalized(
+            x.totalCost,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          chargeAmount: window.$gz.locale.currencyLocalized(
+            x.chargeAmount,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          chargeToCustomer: x.chargeToCustomer,
+          taxPaid: window.$gz.locale.currencyLocalized(
+            x.taxPaid,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          taxCodeViz: x.taxCodeViz,
+          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
+          ),
+          reimburseUser: x.reimburseUser,
+          userViz: x.userViz
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].expenses.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change;
+    },
+    canDelete: function() {
+      return this.activeItemIndex != null && this.pvm.rights.change;
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/components/pm-item-labors.vue b/ayanova/src/components/pm-item-labors.vue
new file mode 100644
index 00000000..b37ecbdd
--- /dev/null
+++ b/ayanova/src/components/pm-item-labors.vue
@@ -0,0 +1,997 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiHammer</v-icon
+              >
+              {{ $ay.t("WorkOrderItemLaborList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="hasSelection && !formState.readOnly"
+              @click="appendTasks"
+            >
+              <v-list-item-icon>
+                <v-icon>$ayiTasks</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("AppendTasks") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="laborsTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="labortopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborServiceStartDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemLaborServiceStartDate')"
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .serviceStartDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+            "
+            data-cy="serviceStartDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborServiceStopDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemLaborServiceStopDate')"
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .serviceStopDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+            "
+            data-cy="serviceStopDate"
+            :rules="[
+              form().datePrecedence(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStartDate`,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceStopDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborServiceRateQuantity')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .serviceRateQuantity
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLaborServiceRateQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+            "
+            data-cy="laborServiceRateQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateQuantity`
+              )
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborServiceRateID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .serviceRateId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLaborServiceRateID')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+            "
+            data-cy="labors.serviceRateId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceRateId`
+              )
+            "
+            @update:name="rateChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborUserID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex].userId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].userId`
+              )
+            "
+            @update:name="userChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborNoChargeQuantity')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .noChargeQuantity
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLaborNoChargeQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+            "
+            data-cy="laborNoChargeQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].noChargeQuantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(`Items[${activeWoItemIndex}].labors[
+              ${activeItemIndex}
+            ].noChargeQuantity`)
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemLaborTaxRateSaleID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .taxCodeSaleId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLaborTaxRateSaleID')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+            "
+            data-cy="laborTaxCodeSaleId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].taxCodeSaleId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'LaborPriceOverride') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .priceOverride
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('PriceOverride')"
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+            "
+            data-cy="laborpriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].priceOverride`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLaborServiceDetails')"
+          cols="12"
+        >
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].labors[activeItemIndex]
+                .serviceDetails
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLaborServiceDetails')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+              )
+            "
+            :ref="
+              `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+            "
+            data-cy="laborserviceDetails"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].labors[${activeItemIndex}].serviceDetails`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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() {
+      let 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: 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,
+        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;
+    }
+    //---
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].labors[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemLaborServiceStartDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborServiceStartDate"),
+          align: "right",
+          value: "serviceStartDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborServiceStopDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborServiceStopDate"),
+          align: "right",
+          value: "serviceStopDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborServiceRateQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborServiceRateQuantity"),
+          align: "right",
+          value: "serviceRateQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborServiceRateID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborServiceRateID"),
+          align: "left",
+          value: "serviceRateViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborServiceDetails")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborServiceDetails"),
+          align: "left",
+          value: "serviceDetails"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLaborNoChargeQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLaborNoChargeQuantity"),
+          align: "right",
+          value: "noChargeQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "LaborUnitOfMeasureViz")) {
+        headers.push({
+          text: this.$ay.t("UnitOfMeasure"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborCostViz") &&
+        this.value.userCanViewLaborOrTravelRateCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "costViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborListPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPriceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemLaborTaxRateSaleID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LaborLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].labors.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          serviceStartDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.serviceStartDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          serviceStopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.serviceStopDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+
+          serviceRateQuantity: window.$gz.locale.decimalLocalized(
+            x.serviceRateQuantity,
+            this.pvm.languageName
+          ),
+          serviceRateViz: x.serviceRateViz,
+          userViz: x.userViz,
+          noChargeQuantity: window.$gz.locale.decimalLocalized(
+            x.noChargeQuantity,
+            this.pvm.languageName
+          ),
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          costViz: window.$gz.locale.currencyLocalized(
+            x.costViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          listPriceViz: window.$gz.locale.currencyLocalized(
+            x.listPriceViz,
+            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
+          ),
+          serviceDetails: window.$gz.util.truncateString(
+            x.serviceDetails,
+            this.pvm.maxTableNotesLength
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].labors.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change;
+    },
+    canDelete: function() {
+      return this.activeItemIndex != null && this.pvm.rights.change;
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+    //----
+  }
+};
+</script>
diff --git a/ayanova/src/components/pm-item-loans.vue b/ayanova/src/components/pm-item-loans.vue
new file mode 100644
index 00000000..e8e04c09
--- /dev/null
+++ b/ayanova/src/components/pm-item-loans.vue
@@ -0,0 +1,885 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiPlug</v-icon
+              >
+              {{ $ay.t("WorkOrderItemLoanList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("New")
+              }}</v-list-item-title> </v-list-item
+            ><v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="loansTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="loantopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLoanUnit')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().LoanUnit"
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].loanUnitId`
+              )
+            "
+            @update:name="loanUnitChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemLoanRate') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-select
+            v-model="value.items[activeWoItemIndex].loans[activeItemIndex].rate"
+            :items="pvm.selectLists.loanUnitRateUnits"
+            item-text="name"
+            item-value="id"
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLoanRate')"
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`"
+            data-cy="loanUnitRateUnit"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].rate`
+              )
+            "
+            @change="loanUnitRateUnitChange"
+          ></v-select>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemLoanQuantity') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            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(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].quantity`
+              )
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLoanOutDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          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`
+            "
+            data-cy="loanUnitOutDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].outDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].outDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLoanDueDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          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`
+            "
+            data-cy="loanUnitDueDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].dueDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].dueDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemLoanReturnDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          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`
+            "
+            data-cy="loanUnitReturnDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].returnDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].returnDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemLoanTaxCodeID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          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`
+            "
+            data-cy="loanTaxCodeSaleId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].taxCodeId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].taxCodeId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'LoanPriceOverride') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex]
+                .priceOverride
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('PriceOverride')"
+            :ref="
+              `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+            "
+            data-cy="loanpriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].priceOverride`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col v-if="form().showMe(this, 'WorkOrderItemLoanNotes')" cols="12">
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].loans[activeItemIndex].notes
+            "
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemLoanNotes')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
+              )
+            "
+            :ref="`Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`"
+            data-cy="loanUnitNotes"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].loans[${activeItemIndex}].notes`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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() {
+      let 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: null,
+        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;
+    }
+    //---
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].loans[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].loans[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemLoanUnit")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanUnit"),
+          align: "left",
+          value: "loanUnitViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemLoanRate") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanRate"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemLoanQuantity") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanQuantity"),
+          align: "right",
+          value: "quantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLoanOutDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanOutDate"),
+          align: "right",
+          value: "outDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLoanDueDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanDueDate"),
+          align: "right",
+          value: "dueDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLoanReturnDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanReturnDate"),
+          align: "right",
+          value: "returnDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemLoanNotes")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemLoanNotes"),
+          align: "left",
+          value: "notes"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanCost") &&
+        this.value.userCanViewLoanerCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "cost"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanListPrice") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPrice"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemLoanTaxCodeID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "LoanLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].loans.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          loanUnitViz: x.loanUnitViz,
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.pvm.languageName
+          ),
+          outDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.outDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          dueDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.dueDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          returnDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.returnDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          notes: window.$gz.util.truncateString(
+            x.notes,
+            this.pvm.maxTableNotesLength
+          ),
+
+          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].loans.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-outside-services.vue b/ayanova/src/components/pm-item-outside-services.vue
new file mode 100644
index 00000000..efbfc3e4
--- /dev/null
+++ b/ayanova/src/components/pm-item-outside-services.vue
@@ -0,0 +1,1098 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiLuggageCart</v-icon
+              >
+              {{ $ay.t("WorkOrderItemOutsideServiceList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="outsideServicesTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="outsideservicetopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceUnit')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().Unit"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .unitId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('Unit')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+            "
+            data-cy="outsideServices.unitId"
+            :rules="[
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].unitId`
+              )
+            "
+            @update:name="unitChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemOutsideServiceVendorSentToID')
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .vendorSentToId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceVendorSentToID')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+            "
+            data-cy="outsideServices.vendorSentToId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentToId`
+              )
+            "
+            @update:name="vendorSentToChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceRMANumber')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .rmaNumber
+            "
+            :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`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].rmaNumber`
+              )
+            "
+          ></v-text-field>
+        </v-col>
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceRepairCost')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .repairCost
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceRepairCost')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+            "
+            data-cy="outsideServicepriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairCost`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceRepairPrice')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .repairPrice
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceRepairPrice')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+            "
+            data-cy="outsideServicepriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].repairPrice`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemOutsideServiceVendorSentViaID')
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().Vendor"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .vendorSentViaId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceVendorSentViaID')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+            "
+            data-cy="outsideServices.vendorSentViaId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].vendorSentViaId`
+              )
+            "
+            @update:name="vendorSentViaChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemOutsideServiceTrackingNumber')
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .trackingNumber
+            "
+            :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`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].trackingNumber`
+              )
+            "
+          ></v-text-field>
+        </v-col>
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceShippingCost')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .shippingCost
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceShippingCost')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+            "
+            data-cy="outsideServicepriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingCost`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceShippingPrice')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .shippingPrice
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceShippingPrice')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+            "
+            data-cy="outsideServicepriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].shippingPrice`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceDateSent')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemOutsideServiceDateSent')"
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .sentDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+            "
+            data-cy="outsideServiceSentDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].sentDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceDateETA')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemOutsideServiceDateETA')"
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .etaDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+            "
+            data-cy="outsideServiceEtaDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].etaDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceDateReturned')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemOutsideServiceDateReturned')"
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .returnDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+            "
+            data-cy="outsideServiceDateReturned"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].returnDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceTaxCode')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .taxCodeId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('TaxCode')"
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+            "
+            data-cy="outsideServiceTaxCodeSaleId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].taxCodeId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemOutsideServiceNotes')"
+          cols="12"
+        >
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].outsideServices[activeItemIndex]
+                .notes
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemOutsideServiceNotes')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+              )
+            "
+            :ref="
+              `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+            "
+            data-cy="outsideServiceNotes"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].outsideServices[${activeItemIndex}].notes`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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() {
+      let 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;
+    }
+    //---
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].outsideServices[
+          this.activeItemIndex
+        ].deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceUnit")) {
+        headers.push({
+          text: this.$ay.t("Unit"),
+          align: "left",
+          value: "unitViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceVendorSentToID")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceVendorSentToID"),
+          align: "left",
+          value: "vendorSentToViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceRMANumber")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceRMANumber"),
+          align: "left",
+          value: "rmaNumber"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceRepairCost")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceRepairCost"),
+          align: "right",
+          value: "repairCost"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceRepairPrice")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceRepairPrice"),
+          align: "right",
+          value: "repairPrice"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceVendorSentViaID")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceVendorSentViaID"),
+          align: "left",
+          value: "vendorSentViaViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceTrackingNumber")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceTrackingNumber"),
+          align: "left",
+          value: "trackingNumber"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceShippingCost")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceShippingCost"),
+          align: "right",
+          value: "shippingCost"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceShippingPrice")
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceShippingPrice"),
+          align: "right",
+          value: "shippingPrice"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceDateSent")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceDateSent"),
+          align: "right",
+          value: "sentDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceDateETA")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceDateETA"),
+          align: "right",
+          value: "etaDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceDateReturned")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceDateReturned"),
+          align: "right",
+          value: "returnDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceNotes")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemOutsideServiceNotes"),
+          align: "left",
+          value: "notes"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServiceCostViz")) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "costViz"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServicePriceViz")) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServiceNetViz")) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemOutsideServiceTaxCode")) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServiceTaxAViz")) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServiceTaxBViz")) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (this.form().showMe(this, "OutsideServiceLineTotalViz")) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].outsideServices.map(
+        (x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            unitViz: x.unitViz,
+            vendorSentToViz: x.vendorSentToViz,
+            rmaNumber: x.rmaNumber,
+            repairCost: window.$gz.locale.currencyLocalized(
+              x.repairCost,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            repairPrice: window.$gz.locale.currencyLocalized(
+              x.repairPrice,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            vendorSentViaViz: x.vendorSentViaViz,
+            trackingNumber: x.trackingNumber,
+            shippingCost: window.$gz.locale.currencyLocalized(
+              x.shippingCost,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            shippingPrice: window.$gz.locale.currencyLocalized(
+              x.shippingPrice,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            sentDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.sentDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            etaDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.etaDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            returnDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.returnDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            notes: window.$gz.util.truncateString(
+              x.notes,
+              this.pvm.maxTableNotesLength
+            ),
+            costViz: window.$gz.locale.currencyLocalized(
+              x.costViz,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            priceViz: window.$gz.locale.currencyLocalized(
+              x.priceViz,
+              this.pvm.languageName,
+              this.pvm.currencyName
+            ),
+            taxCodeViz: x.taxCodeViz,
+            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].outsideServices.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-parts.vue b/ayanova/src/components/pm-item-parts.vue
new file mode 100644
index 00000000..57f88829
--- /dev/null
+++ b/ayanova/src/components/pm-item-parts.vue
@@ -0,0 +1,1129 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiBoxes</v-icon
+              >
+              {{ $ay.t("WorkOrderItemPartList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="hasSelection && !formState.readOnly"
+              @click="generateUnit"
+            >
+              <v-list-item-icon>
+                <v-icon>$ayiFan</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("WorkOrderGenerateUnit")
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canAdd" @click="partAssemblyDialog = true">
+              <v-list-item-icon>
+                <v-icon>$ayiObjectGroup</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("PartAssembly") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="partsTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="parttopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemPartPartID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().Part"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex].partId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+              )
+            "
+            :rules="[
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partId`
+              )
+            "
+            @update:name="partChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            pvm.useInventory &&
+              form().showMe(this, 'WorkOrderItemPartPartWarehouseID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().PartWarehouse"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex]
+                .partWarehouseId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemPartPartWarehouseID')"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+            "
+            data-cy="parts.partWarehouseId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].partWarehouseId`
+              )
+            "
+            @update:name="warehouseChange"
+          ></gz-pick-list>
+        </v-col>
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemPartQuantity')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex].quantity
+            "
+            :readonly="
+              formState.readOnly || isDeleted || value.userIsRestrictedType
+            "
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemPartQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+            "
+            data-cy="partQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].quantity`
+              )
+            "
+          ></gz-decimal>
+          <template
+            v-if="
+              value.items[activeWoItemIndex].parts[activeItemIndex]
+                .requestAmountViz != null
+            "
+          >
+            <v-btn color="secondary" text @click="doRequest()">
+              <v-icon left>
+                $ayiParachuteBox
+              </v-icon>
+              {{ requestMore }}
+            </v-btn>
+          </template>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemPartDescription')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex].description
+            "
+            :readonly="
+              formState.readOnly || isDeleted || value.userIsRestrictedType
+            "
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemPartDescription')"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+            "
+            data-cy="partQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].description`
+              )
+            "
+          ></v-text-field>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemPartTaxPartSaleID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex]
+                .taxPartSaleId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemPartTaxPartSaleID')"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+            "
+            data-cy="partTaxCodeSaleId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].taxPartSaleId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'PartPriceOverride') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex]
+                .priceOverride
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('PriceOverride')"
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+            "
+            data-cy="partpriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].priceOverride`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col v-if="form().showMe(this, 'WorkOrderItemPartSerials')" cols="12">
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].parts[activeItemIndex].serials
+            "
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :label="$ay.t('PurchaseOrderItemSerialNumbers')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+              )
+            "
+            :ref="
+              `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+            "
+            data-cy="partSerials"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].parts[${activeItemIndex}].serials`
+              )
+            "
+            auto-grow
+            prepend-icon="$ayiListUl"
+            @click:prepend="selectSerials()"
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+    <!-- ################################################################################-->
+    <!-- ##########################  ASSEMBLY SELECTOR FORM  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog max-width="600px" v-model="partAssemblyDialog">
+          <v-card>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              <gz-pick-list
+                :aya-type="$ay.ayt().PartAssembly"
+                show-edit-icon
+                v-model="selectedPartAssembly"
+                :label="$ay.t('PartAssemblyList')"
+                ref="selectedPartAssembly"
+                data-cy="selectedPartAssembly"
+              ></gz-pick-list>
+
+              <gz-pick-list
+                v-if="
+                  pvm.useInventory &&
+                    form().showMe(this, 'WorkOrderItemPartPartWarehouseID')
+                "
+                :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">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                :disabled="selectedPartAssembly == null"
+                color="primary"
+                text
+                @click="addPartAssembly()"
+                class="ml-4"
+                >{{ $ay.t("Add") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+    <!-- ################################################################################-->
+    <!-- ##########################  SERIAL NUMBER SELECTOR FORM  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog persistent max-width="600px" v-model="serialDialog">
+          <v-card>
+            <v-card-title>
+              <v-btn text @click="serialDialog = false" color="primary">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                :disabled="selectedSerials.length == 0"
+                color="primary"
+                text
+                @click="addSelectedSerials()"
+                >{{ $ay.t("Add") }}</v-btn
+              >
+            </v-card-title>
+            <v-card-text>
+              <v-select
+                v-model="selectedSerials"
+                :items="availableSerials"
+                :label="$ay.t('PartSerialNumbersAvailable')"
+                multiple
+              ></v-select>
+            </v-card-text>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      partAssemblyDialog: false,
+      selectedPartAssembly: null,
+      selectedPartWarehouse: 1,
+      serialDialog: false,
+      availableSerials: [],
+      selectedSerials: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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.parttopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    generateUnit() {
+      const thisPart = this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ];
+      this.$router.push({
+        name: "unit-edit",
+        params: {
+          recordid: 0,
+          genFromPart: {
+            customerId: this.value.customerId,
+            partId: thisPart.partId,
+            purchaseDate: this.value.serviceDate,
+            serial: thisPart.serials,
+            address: this.value.address,
+            city: this.value.city,
+            region: this.value.region,
+            country: this.value.country,
+            latitude: this.value.latitude,
+            longitude: this.value.longitude
+          }
+        }
+      });
+    },
+    async selectSerials() {
+      this.availableSerials.splice(0);
+      this.selectedSerials.splice(0);
+
+      const partId = this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].partId;
+      if (!partId || partId == 0) {
+        return;
+      }
+      let res = await window.$gz.api.get(`part/serials/${partId}`);
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+      } else {
+        this.availableSerials = res.data;
+        this.serialDialog = true;
+      }
+    },
+    addSelectedSerials() {
+      let serials = this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].serials;
+
+      if (!window.$gz.util.stringIsNullOrEmpty(serials)) {
+        serials = serials.trim();
+        serials += ", ";
+      } else {
+        serials = "";
+      }
+
+      serials += this.selectedSerials.join(", ");
+
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].serials = serials;
+      this.serialDialog = false;
+      this.availableSerials.splice(0);
+      this.selectedSerials.splice(0);
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].isDirty = true;
+      this.$emit("change");
+    },
+    async addPartAssembly() {
+      let res = await window.$gz.api.get(
+        `part-assembly/${this.selectedPartAssembly}`
+      );
+      if (res.data && res.data.items) {
+        let newIndex = this.value.items[this.activeWoItemIndex].parts.length;
+        res.data.items.forEach(z => {
+          newIndex++;
+          this.value.items[this.activeWoItemIndex].parts.push({
+            id: 0,
+            concurrency: 0,
+            userId: null,
+            description: null,
+            serials: null,
+            partId: z.partId,
+            partWarehouseId: this.selectedPartWarehouse,
+            quantity: z.quantity,
+            taxPartSaleId: null,
+            price: 0,
+            priceOverride: null,
+            cost: 0,
+            listPrice: 0,
+            isDirty: true,
+            pmItemId: this.value.items[this.activeWoItemIndex].id,
+            uid: Date.now(),
+            partWarehouseViz: null,
+            partViz: z.partViz,
+            taxCodeViz: null
+          });
+        });
+        this.$emit("change");
+        this.selectedRow = [{ index: newIndex }];
+        this.activeItemIndex = newIndex;
+      }
+
+      this.partAssemblyDialog = false;
+    },
+    doRequest() {
+      const requestQuantity = this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].requestAmountViz; //set in svc-workorder.vue on save of part with insufficient qty
+      if (requestQuantity != null && requestQuantity > 0) {
+        //Get names for UI for request record so user knows it's the right one
+        let selectedPartWarehouse = this.$refs[
+          `Items[${this.activeWoItemIndex}].parts[${this.activeItemIndex}].partWarehouseId`
+        ].getFullSelectionValue();
+        if (
+          selectedPartWarehouse != null &&
+          selectedPartWarehouse.name != null
+        ) {
+          selectedPartWarehouse = selectedPartWarehouse.name;
+        }
+
+        let selectedPart = this.$refs[
+          `Items[${this.activeWoItemIndex}].parts[${this.activeItemIndex}].partId`
+        ].getFullSelectionValue();
+        if (selectedPart != null && selectedPart.name != null) {
+          selectedPart = selectedPart.name;
+        }
+
+        //change the part quantity to the balance in stock
+        this.value.items[this.activeWoItemIndex].parts[
+          this.activeItemIndex
+        ].quantity =
+          this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+            .quantity - requestQuantity;
+
+        //add a request record
+        this.value.items[this.activeWoItemIndex].partRequests.push({
+          id: 0,
+          concurrency: 0,
+          partId: this.value.items[this.activeWoItemIndex].parts[
+            this.activeItemIndex
+          ].partId,
+          partViz: selectedPart,
+          partWarehouseId: this.value.items[this.activeWoItemIndex].parts[
+            this.activeItemIndex
+          ].partWarehouseId,
+          partWarehouseViz: selectedPartWarehouse,
+          quantity: requestQuantity,
+          isDirty: true,
+          pmItemId: this.value.items[this.activeWoItemIndex].id,
+          uid: Date.now(),
+          requestAmountViz: null
+        });
+
+        this.$emit("change");
+
+        //clear the error but leave dirty and let user save it
+        this.value.items[this.activeWoItemIndex].parts[
+          this.activeItemIndex
+        ].requestAmountViz = null;
+
+        this.fieldValueChanged(`Items[${this.activeWoItemIndex}].parts[
+              ${this.activeItemIndex}
+            ].quantity`);
+      }
+    },
+
+    warehouseChange(newName) {
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].partWarehouseViz = newName;
+    },
+    partChange(newName) {
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].partViz = newName;
+    },
+    taxCodeChange(newName) {
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].taxCodeViz = newName;
+    },
+    newItem() {
+      let newIndex = this.value.items[this.activeWoItemIndex].parts.length;
+
+      this.value.items[this.activeWoItemIndex].parts.push({
+        id: 0,
+        concurrency: 0,
+        userId: null,
+        description: null,
+        serials: null,
+        partId: 0, //deliberately zero to break rule on new
+        partWarehouseId: 1, //important always default to "default" warehouse id 1 as even with inventory turned off it's required
+        quantity: 1,
+        taxPartSaleId: null,
+        price: 0,
+        priceOverride: null,
+        cost: 0,
+        listPrice: 0,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        partWarehouseViz: null,
+        partViz: null,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].parts[
+          this.activeItemIndex
+        ].partId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].parts[${this.activeItemIndex}].partId`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].parts[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].parts.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].parts.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].parts[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+
+      //reset part request if part, qty or warehouse is changed
+      if (
+        this.value.items[this.activeWoItemIndex].parts[this.activeItemIndex]
+          .requestAmountViz != null
+      ) {
+        if (
+          ref.endsWith("partWarehouseId") ||
+          ref.endsWith("partId") ||
+          ref.endsWith("quantity")
+        )
+          this.value.items[this.activeWoItemIndex].parts[
+            this.activeItemIndex
+          ].requestAmountViz = null;
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].parts[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Parts[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      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() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemPartPartID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPartPartID"),
+          align: "left",
+          value: "partViz"
+        });
+      }
+
+      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, "PartName")) {
+        headers.push({
+          text: this.$ay.t("PartName"),
+          align: "left",
+          value: "partNameViz"
+        });
+      }
+
+      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,
+          partViz: x.partViz,
+          partWarehouseViz: x.partWarehouseViz,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.pvm.languageName
+          ),
+          partNameViz: x.partNameViz,
+          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
new file mode 100644
index 00000000..262abea1
--- /dev/null
+++ b/ayanova/src/components/pm-item-scheduled-users.vue
@@ -0,0 +1,710 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiUserClock</v-icon
+              >
+              {{ $ay.t("WorkOrderItemScheduledUserList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="hasSelection && !formState.readOnly"
+              @click="convertToLabor"
+            >
+              <v-list-item-icon>
+                <v-icon>$ayiHammer</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("WorkOrderConvertScheduledUserToLabor")
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="!formState.readOnly && hasMultipleItems"
+              @click="convertAllToLabor"
+            >
+              <v-list-item-icon>
+                <v-icon>$ayiHammer</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("WorkOrderConvertAllScheduledUsersToLabor")
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ################################ SCHEDULED USERS TABLE ############################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="scheduledUsersTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="scheduledusertopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemScheduledUserStartDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemScheduledUserStartDate')"
+            v-model="
+              value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+                .startDate
+            "
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+            "
+            data-cy="startDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemScheduledUserStopDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemScheduledUserStopDate')"
+            v-model="
+              value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+                .stopDate
+            "
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+            "
+            data-cy="stopDate"
+            :rules="[
+              form().datePrecedence(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].startDate`,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].stopDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemScheduledUserEstimatedQuantity')
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+                .estimatedQuantity
+            "
+            :readonly="
+              formState.readOnly || isDeleted || value.userIsRestrictedType
+            "
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+            "
+            data-cy="scheduledUsers.EstimatedQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
+              )
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemScheduledUserUserID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+                .userId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].userId`
+              )
+            "
+            @update:name="userChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemScheduledUserServiceRateID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().ServiceRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+                .serviceRateId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].serviceRateId`
+              )
+            "
+            @update:name="rateChange"
+          ></gz-pick-list>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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.scheduledusertopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    convertAllToLabor() {
+      this.value.items[this.activeWoItemIndex].scheduledUsers.forEach(z => {
+        this.doConvertToLabor(z);
+      });
+    },
+    convertToLabor() {
+      this.doConvertToLabor(
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ]
+      );
+    },
+    doConvertToLabor(s) {
+      this.value.items[this.activeWoItemIndex].labors.push({
+        id: 0,
+        concurrency: 0,
+        userId: s.userId,
+        serviceStartDate: s.startDate,
+        serviceStopDate: s.stopDate,
+        serviceRateId: s.serviceRateId,
+        serviceDetails: null,
+        serviceRateQuantity: s.estimatedQuantity,
+        noChargeQuantity: 0,
+        taxCodeSaleId: null,
+        price: 0,
+        priceOverride: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        userViz: s.userViz,
+        serviceRateViz: s.serviceRateViz,
+        taxCodeViz: null
+      });
+      this.$emit("change");
+    },
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].scheduledUsers[
+        this.activeItemIndex
+      ].userViz = newName;
+    },
+    rateChange(newName) {
+      this.value.items[this.activeWoItemIndex].scheduledUsers[
+        this.activeItemIndex
+      ].serviceRateViz = newName;
+    },
+    newItem() {
+      let newIndex = this.value.items[this.activeWoItemIndex].scheduledUsers
+        .length;
+
+      this.value.items[this.activeWoItemIndex].scheduledUsers.push({
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.getters.isScheduleableUser
+          ? this.$store.state.userId
+          : null,
+        estimatedQuantity: 0,
+        startDate: null,
+        stopDate: null,
+        serviceRateId: 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
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].scheduledUsers[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].scheduledUsers[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].scheduledUsers.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].scheduledUsers.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].scheduledUsers[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+        //------- SPECIAL HANDLING OF CHANGES -----------
+        const isNew =
+          this.value.items[this.activeWoItemIndex].scheduledUsers[
+            this.activeItemIndex
+          ].id == 0;
+
+        //Auto calculate dates / quantities / global defaults
+        const dStart = this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ].startDate;
+        const dStop = this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
+        ].stopDate;
+        if (ref.includes("startDate") && dStart != null) {
+          this.handleStartDateChange(isNew, dStart, dStop);
+        }
+        if (ref.includes("stopDate") && 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].scheduledUsers[
+            this.activeItemIndex
+          ].stopDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStart,
+            globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].scheduledUsers[
+            this.activeItemIndex
+          ].estimatedQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStop != null) {
+          this.value.items[this.activeWoItemIndex].scheduledUsers[
+            this.activeItemIndex
+          ].estimatedQuantity = 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].scheduledUsers[
+            this.activeItemIndex
+          ].startDate = window.$gz.locale.addMinutesToUTC8601String(
+            dStop,
+            0 - globalMinutes
+          );
+
+          this.value.items[this.activeWoItemIndex].scheduledUsers[
+            this.activeItemIndex
+          ].estimatedQuantity = globalMinutes;
+        }
+      } else {
+        //Existing record or both dates filled, just update quantity
+        if (dStart != null) {
+          this.value.items[this.activeWoItemIndex].scheduledUsers[
+            this.activeItemIndex
+          ].estimatedQuantity = window.$gz.locale.diffHoursFromUTC8601String(
+            dStart,
+            dStop
+          );
+        }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].scheduledUsers[item.index]
+          .deleted === true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].ScheduledUsers[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      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() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let 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
new file mode 100644
index 00000000..4482d4d1
--- /dev/null
+++ b/ayanova/src/components/pm-item-tasks.vue
@@ -0,0 +1,644 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiTasks</v-icon
+              >
+              {{ $ay.t("WorkOrderItemTasks") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canAdd" @click="taskGroupDialog = true">
+              <v-list-item-icon>
+                <v-icon>$ayiTasks</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("TaskGroup") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="expensesTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="tasktopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTaskSequence')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            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,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+              )
+            "
+            type="number"
+          ></v-text-field>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(
+              this,
+              'WorkOrderItemTaskWorkOrderItemTaskCompletionType'
+            )
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-select
+            v-model="
+              value.items[activeWoItemIndex].tasks[activeItemIndex].status
+            "
+            :items="pvm.selectLists.woItemTaskCompletionTypes"
+            item-text="name"
+            item-value="id"
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTaskWorkOrderItemTaskCompletionType')"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+            "
+            data-cy="usertype"
+            :rules="[
+              form().integerValid(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+              )
+            "
+            @change="statusChange"
+          ></v-select>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTaskUser')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].tasks[activeItemIndex]
+                .completedByUserId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+              )
+            "
+            @update:name="userChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTaskCompletedDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
+            v-model="
+              value.items[activeWoItemIndex].tasks[activeItemIndex]
+                .completedDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+            "
+            data-cy="travelCompletedDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col v-if="form().showMe(this, 'WorkOrderItemTaskTaskID')" cols="12">
+          <v-textarea
+            v-model="value.items[activeWoItemIndex].tasks[activeItemIndex].task"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTaskTaskID')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
+              )
+            "
+            :rules="[
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
+              )
+            ]"
+            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
+            data-cy="task"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+    <!-- ################################################################################-->
+    <!-- ##########################  GROUP SELECTOR FORM  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog max-width="600px" v-model="taskGroupDialog">
+          <v-card>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              <gz-pick-list
+                :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">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                :disabled="selectedTaskGroup == null"
+                color="primary"
+                text
+                @click="addTaskGroup()"
+                class="ml-4"
+                >{{ $ay.t("Add") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      taskGroupDialog: false,
+      selectedTaskGroup: null
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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.tasktopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    async addTaskGroup() {
+      let res = await window.$gz.api.get(
+        `task-group/${this.selectedTaskGroup}`
+      );
+      if (res.data && res.data.items) {
+        let newIndex = this.value.items[this.activeWoItemIndex].tasks.length;
+        let incompleteViz = this.pvm.selectLists.woItemTaskCompletionTypes.find(
+          s => s.id == 1 //incomplete
+        ).name;
+        res.data.items.forEach(z => {
+          newIndex++;
+
+          this.value.items[this.activeWoItemIndex].tasks.push({
+            id: 0,
+            concurrency: 0,
+            sequence: newIndex,
+            task: z.task,
+            status: 1, //incomplete==1
+            statusViz: incompleteViz,
+            completedByUserId: null,
+            completedDate: null,
+            isDirty: true,
+            pmItemId: this.value.items[this.activeWoItemIndex].id,
+            uid: Date.now(),
+            completedByUserViz: null
+          });
+        });
+        this.$emit("change");
+        this.selectedRow = [{ index: newIndex }];
+        this.activeItemIndex = newIndex;
+      }
+
+      this.taskGroupDialog = false;
+    },
+    userChange(newName) {
+      this.value.items[this.activeWoItemIndex].tasks[
+        this.activeItemIndex
+      ].completedByUserViz = newName;
+    },
+    statusChange(newStatusId) {
+      this.value.items[this.activeWoItemIndex].tasks[
+        this.activeItemIndex
+      ].statusViz = this.pvm.selectLists.woItemTaskCompletionTypes.find(
+        s => s.id == newStatusId
+      ).name;
+
+      //completed date auto set by status change if not a todo
+      if (newStatusId != 1) {
+        this.value.items[this.activeWoItemIndex].tasks[
+          this.activeItemIndex
+        ].completedDate = window.$gz.locale.nowUTC8601String();
+      } else {
+        this.value.items[this.activeWoItemIndex].tasks[
+          this.activeItemIndex
+        ].completedDate = null;
+      }
+    },
+    newItem() {
+      let newIndex = this.value.items[this.activeWoItemIndex].tasks.length;
+      this.value.items[this.activeWoItemIndex].tasks.push({
+        id: 0,
+        concurrency: 0,
+        sequence: newIndex + 1, //indexes are zero based but sequences are visible to user so 1 based
+        task: undefined, //to trigger validation on new
+        status: 1, //incomplete==1
+        completedByUserId: null,
+        completedDate: null,
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        completedByUserViz: null,
+        statusViz: null
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].tasks[
+          this.activeItemIndex
+        ].task = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].tasks[${this.activeItemIndex}].task`
+        );
+      });
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].tasks[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].tasks[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].tasks.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].tasks.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].tasks[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].tasks[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Tasks[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      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() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let 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
new file mode 100644
index 00000000..88cb3574
--- /dev/null
+++ b/ayanova/src/components/pm-item-travels.vue
@@ -0,0 +1,976 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiTruckMonster</v-icon
+              >
+              {{ $ay.t("WorkOrderItemTravelList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="travelsTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="traveltopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelStartDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemTravelStartDate')"
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .travelStartDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+            "
+            data-cy="travelStartDate"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelStopDate')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemTravelStopDate')"
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .travelStopDate
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+            "
+            data-cy="travelStopDate"
+            :rules="[
+              form().datePrecedence(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStartDate`,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelStopDate`
+              )
+            "
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelRateQuantity')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .travelRateQuantity
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTravelRateQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+            "
+            data-cy="travelTravelRateQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateQuantity`
+              )
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelServiceRateID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TravelRate"
+            :variant="'contractid:' + value.contractId"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .travelRateId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTravelServiceRateID')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+            "
+            data-cy="travels.travelRateId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelRateId`
+              )
+            "
+            @update:name="rateChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelUserID')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex].userId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].userId`
+              )
+            "
+            @update:name="userChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelNoChargeQuantity')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-decimal
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .noChargeQuantity
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTravelNoChargeQuantity')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+            "
+            data-cy="travelNoChargeQuantity"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+              ),
+              form().required(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].noChargeQuantity`
+              )
+            "
+          ></gz-decimal>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemTravelTaxRateSaleID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().TaxCode"
+            show-edit-icon
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .taxCodeSaleId
+            "
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTravelTaxRateSaleID')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+            "
+            data-cy="travelTaxCodeSaleId"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].taxCodeSaleId`
+              )
+            "
+            @update:name="taxCodeChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'TravelPriceOverride') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-currency
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .priceOverride
+            "
+            can-clear
+            :readonly="formState.readOnly || isDeleted"
+            :disabled="isDeleted"
+            :label="$ay.t('PriceOverride')"
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+            "
+            data-cy="travelpriceoverride"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+              )
+            "
+            :rules="[
+              form().decimalValid(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+              )
+            ]"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].priceOverride`
+              )
+            "
+          ></gz-currency>
+        </v-col>
+
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemTravelDetails')"
+          cols="12"
+        >
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].travels[activeItemIndex]
+                .travelDetails
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTravelDetails')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+              )
+            "
+            :ref="
+              `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+            "
+            data-cy="traveltravelDetails"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].travels[${activeItemIndex}].travelDetails`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      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() {
+      let 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,
+        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;
+    }
+    //---
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].travels[
+          this.activeItemIndex
+        ] == null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].travels[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemTravelStartDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelStartDate"),
+          align: "right",
+          value: "travelStartDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelStopDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelStopDate"),
+          align: "right",
+          value: "travelStopDate"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelRateQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelRateQuantity"),
+          align: "right",
+          value: "travelRateQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelServiceRateID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelServiceRateID"),
+          align: "left",
+          value: "travelRateViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelDetails")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelDetails"),
+          align: "left",
+          value: "travelDetails"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelUserID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelUserID"),
+          align: "left",
+          value: "userViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTravelNoChargeQuantity")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTravelNoChargeQuantity"),
+          align: "right",
+          value: "noChargeQuantity"
+        });
+      }
+
+      if (this.form().showMe(this, "TravelUnitOfMeasureViz")) {
+        headers.push({
+          text: this.$ay.t("UnitOfMeasure"),
+          align: "left",
+          value: "unitOfMeasureViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelCostViz") &&
+        this.value.userCanViewLaborOrTravelRateCosts &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Cost"),
+          align: "right",
+          value: "costViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelListPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("ListPrice"),
+          align: "right",
+          value: "listPriceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelPriceOverride") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("PriceOverride"),
+          align: "right",
+          value: "priceOverride"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelPriceViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Price"),
+          align: "right",
+          value: "priceViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemTravelTaxRateSaleID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tax"),
+          align: "left",
+          value: "taxCodeViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelNetViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("NetPrice"),
+          align: "right",
+          value: "netViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelTaxAViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxAAmt"),
+          align: "right",
+          value: "taxAViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelTaxBViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("TaxBAmt"),
+          align: "right",
+          value: "taxBViz"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "TravelLineTotalViz") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("LineTotal"),
+          align: "right",
+          value: "lineTotalViz"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].travels.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          travelStartDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.travelStartDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          travelStopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.travelStopDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+
+          travelRateQuantity: window.$gz.locale.decimalLocalized(
+            x.travelRateQuantity,
+            this.pvm.languageName
+          ),
+          travelRateViz: x.travelRateViz,
+          userViz: x.userViz,
+          noChargeQuantity: window.$gz.locale.decimalLocalized(
+            x.noChargeQuantity,
+            this.pvm.languageName
+          ),
+          unitOfMeasureViz: x.unitOfMeasureViz,
+          costViz: window.$gz.locale.currencyLocalized(
+            x.costViz,
+            this.pvm.languageName,
+            this.pvm.currencyName
+          ),
+          listPriceViz: window.$gz.locale.currencyLocalized(
+            x.listPriceViz,
+            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
+          ),
+          travelDetails: window.$gz.util.truncateString(
+            x.travelDetails,
+            this.pvm.maxTableNotesLength
+          )
+        };
+      });
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].travels.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change;
+    },
+    canDelete: function() {
+      return this.activeItemIndex != null && this.pvm.rights.change;
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+
+    //----
+  }
+};
+</script>
diff --git a/ayanova/src/components/pm-item-units.vue b/ayanova/src/components/pm-item-units.vue
new file mode 100644
index 00000000..ce3b554d
--- /dev/null
+++ b/ayanova/src/components/pm-item-units.vue
@@ -0,0 +1,850 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h6">
+              <v-icon large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiFan</v-icon
+              >
+              {{ $ay.t("WorkOrderItemUnitList") }}
+              <v-btn v-if="!parentDeleted" large icon v-bind="attrs" v-on="on">
+                <v-icon small color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canAdd" @click="showBulkUnitsDialog()">
+              <v-list-item-icon>
+                <v-icon>$ayiFan</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("AddMultipleUnits")
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ############################################################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="unitsTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <div ref="unittopform"></div>
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+        <v-col
+          v-if="form().showMe(this, 'WorkOrderItemUnit')"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-pick-list
+            :aya-type="$ay.ayt().Unit"
+            :variant="'customerid:' + value.customerId"
+            :show-edit-icon="!value.userIsRestrictedType"
+            v-model="
+              value.items[activeWoItemIndex].units[activeItemIndex].unitId
+            "
+            :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(
+                this,
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+              )
+            ]"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].unitId`
+              )
+            "
+            @update:name="unitChange"
+          ></gz-pick-list>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'UnitWarrantyInfo') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-card>
+            <v-card-title>{{ $ay.t("UnitWarrantyInfo") }}</v-card-title>
+            <v-card-text
+              v-html="
+                value.items[activeWoItemIndex].units[activeItemIndex]
+                  .warrantyViz
+              "
+            >
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="getWarrantyInfo">{{
+                $ay.t("Search")
+              }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemUnitNotes') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <v-textarea
+            v-model="
+              value.items[activeWoItemIndex].units[activeItemIndex].notes
+            "
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemUnitNotes')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
+              )
+            "
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`"
+            data-cy="unitUnitNotes"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].notes`
+              )
+            "
+            auto-grow
+          ></v-textarea>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemUnitTags') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <gz-tag-picker
+            v-model="value.items[activeWoItemIndex].units[activeItemIndex].tags"
+            :readonly="formState.readOnly"
+            data-cy="unitTags"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
+              )
+            "
+            :ref="`Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].tags`
+              )
+            "
+          ></gz-tag-picker>
+        </v-col>
+
+        <v-col v-if="!value.userIsRestrictedType" cols="12">
+          <gz-custom-fields
+            v-model="
+              value.items[activeWoItemIndex].units[activeItemIndex].customFields
+            "
+            :form-key="formCustomTemplateKey"
+            :readonly="formState.readOnly"
+            :parent-v-m="this"
+            key-start-with="WorkOrderItemUnitCustom"
+            :ref="
+              `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+            "
+            data-cy="unitCustomFields"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+              )
+            "
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].customFields`
+              )
+            "
+          ></gz-custom-fields>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemUnitWiki') &&
+              !value.userIsRestrictedType
+          "
+          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"
+            :readonly="formState.readOnly"
+            @input="
+              fieldValueChanged(
+                `Items[${activeWoItemIndex}].units[${activeItemIndex}].wiki`
+              )
+            "
+          ></gz-wiki
+        ></v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemUnitAttachments') &&
+              value.id &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <gz-attachments
+            :readonly="formState.readOnly"
+            :aya-type="$ay.ayt().WorkOrderItemUnit"
+            :aya-id="value.items[activeWoItemIndex].units[activeItemIndex].id"
+          ></gz-attachments
+        ></v-col>
+      </template>
+    </v-row>
+    <!-- ################################################################################-->
+    <!-- ##########################  BULK ADD UNITS FORM  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog persistent max-width="600px" v-model="bulkUnitsDialog">
+          <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
+                :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"
+                :headers="bulkUnitTableHeaders"
+                :items="availableBulkUnits"
+                class="my-10"
+                :disable-filtering="true"
+                hide-default-footer
+                :no-data-text="$ay.t('NoData')"
+                show-select
+                item-key="unitId"
+              >
+              </v-data-table>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn text @click="bulkUnitsDialog = false" color="primary">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                :disabled="selectedBulkUnitTags.length == 0"
+                color="primary"
+                text
+                @click="bulkUnitsSearch()"
+                >{{ $ay.t("Search") }}</v-btn
+              >
+              <v-btn
+                :disabled="selectedBulkUnits.length == 0"
+                color="primary"
+                text
+                @click="addSelectedBulkUnits()"
+                >{{ $ay.t("Add") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      bulkUnitsDialog: false,
+      selectedBulkUnitCustomer: this.value.customerId,
+      availableBulkUnits: [],
+      selectedBulkUnits: [],
+      selectedBulkUnitTags: [],
+      bulkUnitTableHeaders: []
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
+    },
+    gotoIndex: {
+      default: null,
+      type: Number
+    },
+    addNew: {
+      default: null,
+      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.unittopform;
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    async updateContractIfApplicable() {
+      const id = this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].unitId;
+      if (!id || id == 0) {
+        return;
+      }
+      let res = await window.$gz.api.get(`unit/active-contract/${id}`);
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+      } else {
+        if (res.data.id == 0) {
+          //no contract, just bail
+          return;
+        }
+        //has contract, if it differs from main work order contract then offer to set it
+        if (res.data.id == this.value.contractId) {
+          //same contract, just bail
+          //yes the date could not be different but we're not going to pick that nit, they can just unset and set if it matters
+          return;
+        }
+        //Prompt user to use new contract
+        const prompt = this.$ay
+          .t("ApplyUnitContract")
+          .replace("{0}", res.data.name);
+
+        let dialogResult = await window.$gz.dialog.confirmGenericPreTranslated(
+          prompt,
+          "question"
+        );
+        if (dialogResult == false) {
+          return;
+        } else {
+          this.value.contractId = res.data.id;
+          this.value.isDirty = true;
+          this.pvm.formState.dirty = true;
+          this.$emit("change");
+        }
+      }
+    },
+    async getWarrantyInfo() {
+      this.warrantyInfo = null;
+
+      const id = this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].unitId;
+      if (!id || id == 0) {
+        return;
+      }
+      let res = await window.$gz.api.get(`unit/service-warranty-info/${id}`);
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+      } else {
+        /* {
+  "recentWorkOrders":[{"serial":10,"id":10,"serviceDate":"2021-01-19T22:00:00Z"},{"serial":8,"id":8,"serviceDate":"2021-04-08T22:00:00Z"},{"serial":7,"id":7,"serviceDate":"2021-04-18T20:00:00Z"}],
+  "purchaseDate":"2019-03-12T09:37:52.930923Z",
+  "purchasedFromVendor":null,
+  "purchaseFromVendorId":null,
+  "purchaseReceiptNumber":"139736",
+  "lifeTimeWarranty":false,
+  "warrantyExpiryDate":"2019-04-12T09:37:52.930923Z",
+  "warrantyTerms":"Shipping parts and service"} 
+  
+  "UnitPurchasedDate": "Purchased Date",
+  "UnitPurchaseFromID": "Purchased From",
+  "UnitReceipt": "Receipt Number",
+  */
+        const r = res.data;
+
+        let WarrantyInfo = `${this.$ay.t("Warranty")}: `;
+        let WarrantyExpiryInfo = "-";
+        if (r.lifeTimeWarranty) {
+          WarrantyExpiryInfo = this.$ay.t("UnitModelLifeTimeWarranty");
+        } else {
+          if (r.warrantyExpiryDate) {
+            WarrantyExpiryInfo = `${this.$ay.t(
+              "WarrantyExpires"
+            )}:  ${window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              r.warrantyExpiryDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )}`;
+          }
+        }
+        WarrantyInfo += WarrantyExpiryInfo;
+
+        let PurchasedFrom = "-";
+        if (r.purchaseFromVendorId) {
+          PurchasedFrom = `<a href="/vendors/${r.purchaseFromVendorId}"> ${r.purchasedFromVendor}</a>`;
+        }
+        let PurchasedDate = "-";
+        if (r.purchaseDate) {
+          PurchasedDate = window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            r.purchaseDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          );
+        }
+        let PurchaseInfo = `${this.$ay.t(
+          "UnitPurchaseFromID"
+        )}: ${PurchasedFrom}<br/>${this.$ay.t(
+          "UnitPurchasedDate"
+        )}: ${PurchasedDate}<br/>${this.$ay.t(
+          "UnitReceipt"
+        )}: ${r.purchaseReceiptNumber ?? "-"}`;
+
+        let RecentWorkOrderList = "";
+        if (r.recentWorkOrders.length > 0) {
+          RecentWorkOrderList += "<br/>";
+          r.recentWorkOrders.forEach(x => {
+            RecentWorkOrderList += `<a href="/svc-workorders/${x.id}"> ${
+              x.serial
+            }<span class='ml-5'>${window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.serviceDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )}</span></a><br/>`;
+          });
+        } else {
+          RecentWorkOrderList = "-";
+        }
+
+        let RecentWorkOrderInfo = `${this.$ay.t(
+          "RecentWorkOrders"
+        )}:${RecentWorkOrderList}`;
+
+        let d = `<div>${WarrantyInfo}<br/>${PurchaseInfo}<br/>${RecentWorkOrderInfo}</div>`;
+
+        this.value.items[this.activeWoItemIndex].units[
+          this.activeItemIndex
+        ].warrantyViz = d;
+      }
+    },
+    showBulkUnitsDialog() {
+      if (this.bulkUnitTableHeaders.length == 0) {
+        //init bulk table headers
+        this.bulkUnitTableHeaders = [
+          { text: this.$ay.t("Customer"), value: "customerName" },
+          { text: this.$ay.t("Unit"), value: "unitSerial" }
+        ];
+      }
+      this.bulkUnitsDialog = true;
+    },
+    async bulkUnitsSearch() {
+      this.selectedBulkUnits.splice(0);
+      this.availableBulkUnits.splice(0);
+
+      let res = await window.$gz.api.post(`unit/bulk-add-selection-list`, {
+        tags: this.selectedBulkUnitTags,
+        restrictToCustomerId: this.selectedBulkUnitCustomer
+      });
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+      } else {
+        this.availableBulkUnits = res.data;
+      }
+    },
+    addSelectedBulkUnits() {
+      if (this.selectedBulkUnits.length > 0) {
+        let newIndex = this.value.items[this.activeWoItemIndex].units.length;
+        this.selectedBulkUnits.forEach(z => {
+          newIndex++;
+          this.value.items[this.activeWoItemIndex].units.push({
+            id: 0,
+            concurrency: 0,
+            wiki: null,
+            customFields: "{}",
+            tags: [],
+            notes: null,
+            unitId: z.unitId, //zero to break rule on new
+            isDirty: true,
+            pmItemId: this.value.items[this.activeWoItemIndex].id,
+            uid: Date.now(),
+            unitViz: z.unitSerial,
+            warrantyViz: null
+          });
+        });
+        this.$emit("change");
+        this.selectedRow = [{ index: newIndex }];
+        this.activeItemIndex = newIndex;
+      }
+      this.bulkUnitsDialog = false;
+    },
+    async unitChange(newName) {
+      this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].unitViz = newName;
+      this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].warrantyViz = null;
+      await this.updateContractIfApplicable();
+    },
+    newItem() {
+      let newIndex = this.value.items[this.activeWoItemIndex].units.length;
+      // {
+      // 	"0": {
+      // 		"id": 53,
+      // 		"concurrency": 9586762,
+      // 		"notes": "Aut modi molestias molestiae ipsa id.",
+      // 		"wiki": null,
+      // 		"customFields": null,
+      // 		"tags": [],
+      // 		"unitId": 4,
+      // 		"unitViz": "83429560",
+      // 		"pmItemId": 22
+      // 	}
+      // }
+
+      this.value.items[this.activeWoItemIndex].units.push({
+        id: 0,
+        concurrency: 0,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        notes: null,
+        unitId: 0, //zero to break rule on new
+        isDirty: true,
+        pmItemId: this.value.items[this.activeWoItemIndex].id,
+        uid: Date.now(),
+        unitViz: null,
+        warrantyViz: null
+      });
+
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeWoItemIndex].units[
+          this.activeItemIndex
+        ].unitId = null;
+        this.fieldValueChanged(
+          `Items[${this.activeWoItemIndex}].units[${this.activeItemIndex}].unitId`
+        );
+      });
+
+      return newIndex; //for create new on goto
+    },
+    unDeleteItem() {
+      this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].deleted = false;
+      this.setDefaultView();
+    },
+    deleteItem() {
+      this.value.items[this.activeWoItemIndex].units[
+        this.activeItemIndex
+      ].deleted = true;
+      this.setDefaultView();
+      this.$emit("change");
+    },
+    deleteAllItem() {
+      this.value.items[this.activeWoItemIndex].units.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].units.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].units[
+          this.activeItemIndex
+        ].isDirty = true;
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+
+        // //set viz if applicable
+        // if(ref==""){
+        //    let selectedPartWarehouse = vm.$refs.partWarehouseId.getFullSelectionValue();
+        // }
+      }
+    },
+    itemRowClasses: function(item) {
+      let ret = "";
+      const isDeleted =
+        this.value.items[this.activeWoItemIndex].units[item.index].deleted ===
+        true;
+
+      const hasError = this.form().childRowHasError(
+        this,
+        `Items[${this.activeWoItemIndex}].Units[${item.index}].`
+      );
+
+      if (isDeleted) {
+        ret += this.form().tableRowDeletedClass();
+      }
+      if (hasError) {
+        ret += this.form().tableRowErrorClass();
+      }
+      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() {
+      /*
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemUnit")) {
+        headers.push({
+          text: this.$ay.t("Unit"),
+          align: "left",
+          value: "unitViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelModelNumber")) {
+        headers.push({
+          text: this.$ay.t("UnitModelModelNumber"),
+          align: "left",
+          value: "unitModelModelNumberViz"
+        });
+      }
+      if (this.form().showMe(this, "UnitModelVendorID")) {
+        headers.push({
+          text: this.$ay.t("UnitModelVendorID"),
+          align: "left",
+          value: "unitModelVendorViz"
+        });
+      }
+
+      if (this.form().showMe(this, "UnitModelName")) {
+        headers.push({
+          text: this.$ay.t("UnitModelName"),
+          align: "left",
+          value: "unitModelNameViz"
+        });
+      }
+
+      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,
+          unitModelModelNumberViz: x.unitModelModelNumberViz,
+          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
new file mode 100644
index 00000000..843989bc
--- /dev/null
+++ b/ayanova/src/components/pm-items.vue
@@ -0,0 +1,1249 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <v-row>
+      <!-- Title and menu -->
+      <v-col cols="12">
+        <v-menu offset-y max-width="600px">
+          <template v-slot:activator="{ on, attrs }">
+            <div class="text-h5">
+              <v-icon x-large :color="hasData ? 'primary' : null" class="mr-2"
+                >$ayiWrench</v-icon
+              >
+              {{ $ay.t("WorkOrderItemList") }}
+              <v-btn large icon v-bind="attrs" v-on="on">
+                <v-icon color="primary">$ayiEllipsisV</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item v-if="canAdd" @click="newItem">
+              <v-list-item-icon>
+                <v-icon>$ayiPlus</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
+            </v-list-item>
+
+            <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDeleteAll" @click="deleteAllItem">
+              <v-list-item-icon>
+                <v-icon>$ayiDumpster</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("SoftDeleteAll")
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
+              <v-list-item-icon>
+                <v-icon>$ayiTrashRestoreAlt</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
+            </v-list-item>
+
+            <template v-if="hasData && hasSelection && pvm.rights.change">
+              <v-divider></v-divider>
+              <v-subheader>{{ $ay.t("Add") }}</v-subheader>
+
+              <v-list-item
+                v-if="canAddUnit"
+                @click="newSubItem($ay.ayt().WorkOrderItemUnit)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiFan</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemUnit")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddScheduledUser"
+                @click="newSubItem($ay.ayt().WorkOrderItemScheduledUser)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiUserClock</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemScheduledUser")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddTask"
+                @click="newSubItem($ay.ayt().WorkOrderItemTask)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiTasks</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemTask")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddPart"
+                @click="newSubItem($ay.ayt().WorkOrderItemPart)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiBoxes</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemPart")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddLabor"
+                @click="newSubItem($ay.ayt().WorkOrderItemLabor)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiHammer</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemLabor")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddTravel"
+                @click="newSubItem($ay.ayt().WorkOrderItemTravel)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiTruckMonster</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemTravel")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddExpense"
+                @click="newSubItem($ay.ayt().WorkOrderItemExpense)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiMoneyBillWave</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemExpense")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddLoan"
+                @click="newSubItem($ay.ayt().WorkOrderItemLoan)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiPlug</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemLoan")
+                }}</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canAddOutsideService"
+                @click="newSubItem($ay.ayt().WorkOrderItemOutsideService)"
+              >
+                <v-list-item-icon>
+                  <v-icon>$ayiLuggageCart</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>{{
+                  $ay.t("WorkOrderItemOutsideService")
+                }}</v-list-item-title>
+              </v-list-item>
+            </template>
+          </v-list>
+        </v-menu>
+      </v-col>
+
+      <template v-if="hasData">
+        <!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
+        <v-col cols="12" class="mb-10">
+          <v-data-table
+            :headers="headerList"
+            :items="itemList"
+            item-key="index"
+            v-model="selectedRow"
+            class="elevation-1"
+            disable-pagination
+            disable-filtering
+            disable-sort
+            hide-default-footer
+            data-cy="itemsTable"
+            dense
+            :item-class="itemRowClasses"
+            @click:row="handleRowClick"
+            :show-select="$vuetify.breakpoint.xs"
+            single-select
+          >
+            <template v-slot:[`item.status`]="{ item }">
+              <template v-if="item.status.id != null">
+                <v-icon class="mr-3" :color="item.status.color"
+                  >$ayiCircle</v-icon
+                >{{ item.status.name }}
+              </template>
+            </template>
+
+            <template v-slot:[`item.priority`]="{ item }">
+              <template v-if="item.priority.id != null">
+                <v-icon class="mr-3" :color="item.priority.color"
+                  >$ayiFireAlt</v-icon
+                >{{ item.priority.name }}
+              </template>
+            </template>
+
+            <template v-slot:[`item.warranty`]="{ item }">
+              <v-simple-checkbox
+                v-model="item.warranty"
+                disabled
+              ></v-simple-checkbox>
+            </template>
+          </v-data-table>
+        </v-col>
+      </template>
+      <template v-if="hasData && hasSelection">
+        <v-btn
+          v-if="canDelete && isDeleted"
+          large
+          @click="unDeleteItem"
+          color="primary"
+          >{{ $ay.t("Undelete")
+          }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
+        >
+        <div ref="topform"></div>
+        <v-col
+          v-if="form().showMe(this, 'Items.WorkOrderItemSummary')"
+          cols="12"
+        >
+          <v-textarea
+            v-model="value.items[activeItemIndex].notes"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemSummary')"
+            :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
+          ></v-textarea>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemSequence') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-text-field
+            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"
+          ></v-text-field>
+        </v-col>
+
+        <v-col v-if="form().showMe(this, 'WorkOrderItemTechNotes')" cols="12">
+          <v-textarea
+            v-model="value.items[activeItemIndex].techNotes"
+            :readonly="formState.readOnly || value.userIsRestrictedType"
+            :disabled="isDeleted"
+            :label="$ay.t('WorkOrderItemTechNotes')"
+            :error-messages="
+              form().serverErrors(this, `items[${activeItemIndex}].techNotes`)
+            "
+            :ref="`items[${activeItemIndex}].techNotes`"
+            data-cy="items.techNotes"
+            @input="fieldValueChanged(`items[${activeItemIndex}].techNotes`)"
+            auto-grow
+          ></v-textarea>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemRequestDate') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <gz-date-time-picker
+            :label="$ay.t('WorkOrderItemRequestDate')"
+            v-model="value.items[activeItemIndex].requestDate"
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            :ref="`items[${activeItemIndex}].requestDate`"
+            data-cy="requestDate"
+            :error-messages="
+              form().serverErrors(this, `items[${activeItemIndex}].requestDate`)
+            "
+            @input="fieldValueChanged('requestDate')"
+          ></gz-date-time-picker>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemWorkOrderStatusID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-autocomplete
+            v-model="value.items[activeItemIndex].workorderItemStatusId"
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            @input="fieldValueChanged('workorderItemStatusId')"
+            :items="selectableStatusList"
+            item-text="name"
+            item-value="id"
+            :label="$ay.t('WorkOrderItemWorkOrderStatusID')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `items[${activeItemIndex}].workorderItemStatusId`
+              )
+            "
+            :ref="`items[${activeItemIndex}].workorderItemStatusId`"
+            data-cy="workorderItemStatusId"
+            prepend-icon="$ayiEdit"
+            @click:prepend="handleEditItemStatusClick()"
+          >
+            <template v-slot:selection="{ item }">
+              <v-icon class="mr-3" :color="item.color">$ayiCircle</v-icon
+              >{{ item.name }}
+            </template>
+
+            <template v-slot:item="{ item }">
+              <v-list-item-avatar>
+                <v-icon :color="item.color">$ayiCircle</v-icon>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title
+                  ><span
+                    :class="
+                      item.active
+                        ? ''
+                        : 'disabled--text text-decoration-line-through'
+                    "
+                    >{{ item.name }}</span
+                  ></v-list-item-title
+                >
+                <v-list-item-subtitle> {{ item.notes }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </template>
+          </v-autocomplete>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemPriorityID') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-autocomplete
+            v-model="value.items[activeItemIndex].workorderItemPriorityId"
+            :readonly="formState.readOnly"
+            :disabled="isDeleted"
+            @input="fieldValueChanged('workorderItemPriorityId')"
+            :items="selectablePriorityList"
+            item-text="name"
+            item-value="id"
+            :label="$ay.t('WorkOrderItemPriorityID')"
+            :error-messages="
+              form().serverErrors(
+                this,
+                `items[${activeItemIndex}].workorderItemPriorityId`
+              )
+            "
+            :ref="`items[${activeItemIndex}].workorderItemPriorityId`"
+            data-cy="workorderItemPriorityId"
+            prepend-icon="$ayiEdit"
+            @click:prepend="handleEditItemPriorityClick()"
+          >
+            <template v-slot:selection="{ item }">
+              <v-icon class="mr-3" :color="item.color">$ayiFireAlt</v-icon
+              >{{ item.name }}
+            </template>
+
+            <template v-slot:item="{ item }">
+              <v-list-item-avatar>
+                <v-icon :color="item.color">$ayiFireAlt</v-icon>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title
+                  ><span
+                    :class="
+                      item.active
+                        ? ''
+                        : 'disabled--text text-decoration-line-through'
+                    "
+                    >{{ item.name }}</span
+                  ></v-list-item-title
+                >
+              </v-list-item-content>
+            </template>
+          </v-autocomplete>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemWarrantyService') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
+          <v-checkbox
+            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(
+                this,
+                `items[${activeItemIndex}].warrantyService`
+              )
+            "
+            @change="fieldValueChanged('warrantyService')"
+          ></v-checkbox>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemTags') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <gz-tag-picker
+            v-model="value.items[activeItemIndex].tags"
+            :readonly="formState.readOnly"
+            :ref="`items[${activeItemIndex}].tags`"
+            data-cy="tags"
+            :error-messages="
+              form().serverErrors(this, `items[${activeItemIndex}].tags`)
+            "
+            @input="fieldValueChanged('tags')"
+          ></gz-tag-picker>
+        </v-col>
+
+        <v-col v-if="!value.userIsRestrictedType" cols="12">
+          <gz-custom-fields
+            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(
+                this,
+                `items[${activeItemIndex}].customFields`
+              )
+            "
+            @input="fieldValueChanged('customFields')"
+          ></gz-custom-fields>
+        </v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemWiki') &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <gz-wiki
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.id"
+            :ref="`items[${activeItemIndex}].wiki`"
+            v-model="value.items[activeItemIndex].wiki"
+            :readonly="formState.readOnly"
+            @input="fieldValueChanged('wiki')"
+          ></gz-wiki
+        ></v-col>
+
+        <v-col
+          v-if="
+            form().showMe(this, 'WorkOrderItemAttachments') &&
+              value.id &&
+              !value.userIsRestrictedType
+          "
+          cols="12"
+        >
+          <gz-attachments
+            :readonly="formState.readOnly"
+            :aya-type="$ay.ayt().WorkOrderItem"
+            :aya-id="value.items[activeItemIndex].id"
+          ></gz-attachments
+        ></v-col>
+
+        <!--  ############################################################################
+                                        GRANDCHILDREN
+              ############################################################################ -->
+
+        <v-col cols="12" v-show="showUnits">
+          <GzPMItemUnits
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoUnitIndex"
+            data-cy="woItemUnits"
+            @change="$emit('change')"
+          />
+        </v-col>
+
+        <v-col cols="12" v-show="showScheduledUsers">
+          <GzPMItemScheduledUsers
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoScheduledUserIndex"
+            data-cy="woItemScheduledUsers"
+            @change="$emit('change')"
+          />
+        </v-col>
+        <v-col cols="12" v-show="showTasks">
+          <GzPMItemTasks
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoTaskIndex"
+            data-cy="woItemTasks"
+            @change="$emit('change')"
+          />
+        </v-col>
+
+        <v-col cols="12" v-show="showParts">
+          <GzPMItemParts
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoPartIndex"
+            data-cy="woItemParts"
+            @change="$emit('change')"
+          />
+        </v-col>
+
+        <v-col cols="12" v-show="showLabors">
+          <GzPMItemLabors
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoLaborIndex"
+            data-cy="woItemLabors"
+            @change="$emit('change')"
+          />
+        </v-col>
+        <v-col cols="12" v-show="showTravels">
+          <GzPMItemTravels
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoTravelIndex"
+            data-cy="woItemTravels"
+            @change="$emit('change')"
+          />
+        </v-col>
+        <v-col cols="12" v-show="showExpenses">
+          <GzPMItemExpenses
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoExpenseIndex"
+            data-cy="woItemExpenses"
+            @change="$emit('change')"
+          />
+        </v-col>
+
+        <v-col cols="12" v-show="showLoans">
+          <GzPMItemLoans
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoLoanIndex"
+            data-cy="woItemLoans"
+            @change="$emit('change')"
+          />
+        </v-col>
+        <v-col cols="12" v-show="showOutsideServices">
+          <GzPMItemOutsideServices
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoOutsideServiceIndex"
+            data-cy="woItemOutsideServices"
+            @change="$emit('change')"
+          />
+        </v-col>
+      </template>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+import GzPMItemUnits from "../components/pm-item-units.vue";
+import GzPMItemScheduledUsers from "../components/pm-item-scheduled-users.vue";
+import GzPMItemLabors from "../components/pm-item-labors.vue";
+import GzPMItemTravels from "../components/pm-item-travels.vue";
+import GzPMItemExpenses from "../components/pm-item-expenses.vue";
+import GzPMItemTasks from "../components/pm-item-tasks.vue";
+import GzPMItemParts from "../components/pm-item-parts.vue";
+import GzPMItemLoans from "../components/pm-item-loans.vue";
+import GzPMItemOutsideServices from "../components/pm-item-outside-services.vue";
+
+export default {
+  components: {
+    GzPMItemUnits,
+    GzPMItemScheduledUsers,
+    GzPMItemExpenses,
+    GzPMItemLabors,
+    GzPMItemTravels,
+    GzPMItemTasks,
+    GzPMItemParts,
+    GzPMItemLoans,
+    GzPMItemOutsideServices
+  },
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      gotoOutsideServiceIndex: null,
+      gotoExpenseIndex: null,
+      gotoLaborIndex: null,
+      gotoLoanIndex: null,
+      gotoPartIndex: null,
+      gotoTaskIndex: null,
+      gotoScheduledUserIndex: null,
+      gotoTravelIndex: null,
+      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) {
+        let 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.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.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: {
+    newItem() {
+      let 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)
+      let 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) {
+        this.setDefaultView();
+        return true;
+      }
+      return this.value.items[this.activeItemIndex].deleted === true;
+    },
+    headerList: function() {
+      let headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemSequence")) {
+        headers.push({
+          text: this.$ay.t("Sequence"),
+          align: "left",
+          value: "sequence"
+        });
+      }
+
+      headers.push({
+        text: this.$ay.t("WorkOrderItemSummary"), //mandatory not hidden
+        align: "left",
+        value: "notes"
+      });
+
+      if (
+        this.form().showMe(this, "WorkOrderItemWorkOrderStatusID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemWorkOrderStatusID"),
+          align: "left",
+          value: "status"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemRequestDate") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemRequestDate"),
+          align: "right",
+          value: "requestDate"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemPriorityID") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemPriorityID"),
+          align: "left",
+          value: "priority"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemWarrantyService") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemWarrantyService"),
+          align: "center",
+          value: "warranty"
+        });
+      }
+
+      if (
+        this.form().showMe(this, "WorkOrderItemTags") &&
+        !this.value.userIsRestrictedType
+      ) {
+        headers.push({
+          text: this.$ay.t("Tags"),
+          align: "left",
+          value: "tags"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items
+        .map((x, i) => {
+          const stat = statusViz(x.workorderItemStatusId, this);
+          const prior = priorityViz(x.workorderItemPriorityId, this);
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            notes: x.notes,
+            status: stat,
+            requestDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.requestDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            ),
+            priority: prior,
+            warranty: x.warrantyService,
+            tags: x.tags
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    },
+    selectableStatusList: function() {
+      const selectedId = this.value.items[this.activeItemIndex]
+        .workorderItemStatusId;
+      return this.pvm.selectLists.woItemStatus.filter(s => {
+        return s.active == true || s.id == selectedId;
+      });
+    },
+    selectablePriorityList: function() {
+      const selectedId = this.value.items[this.activeItemIndex]
+        .workorderItemPriorityId;
+      return this.pvm.selectLists.woItemPriorities.filter(s => {
+        return s.active == true || s.id == selectedId;
+      });
+    },
+
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return (
+        !this.pvm.formState.readOnly &&
+        !this.value.userIsRestrictedType &&
+        this.pvm.rights.change
+      );
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return (
+        !this.pvm.formState.readOnly &&
+        this.pvm.rights.change &&
+        this.hasData &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canAddUnit: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemUnitList") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showUnits: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemUnitList") &&
+        this.value.items[this.activeItemIndex].units.length > 0 &&
+        !this.value.userIsSubContractorRestricted
+      );
+    },
+    canAddScheduledUser: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemScheduledUserList") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showScheduledUsers: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemScheduledUserList") &&
+        this.value.items[this.activeItemIndex].scheduledUsers.length > 0
+      );
+    },
+    canAddTask: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemTasks") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showTasks: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemTasks") &&
+        this.value.items[this.activeItemIndex].tasks.length > 0
+      );
+    },
+    canAddPart: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemPartList") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showParts: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemPartList") &&
+        this.value.items[this.activeItemIndex].parts.length > 0 &&
+        !this.value.userIsSubContractorRestricted
+      );
+    },
+    canAddLabor: function() {
+      return this.form().showMe(this, "WorkOrderItemLaborList");
+    },
+    showLabors: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemLaborList") &&
+        this.value.items[this.activeItemIndex].labors.length > 0
+      );
+    },
+    canAddTravel: function() {
+      return this.form().showMe(this, "WorkOrderItemTravelList");
+    },
+    showTravels: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemTravelList") &&
+        this.value.items[this.activeItemIndex].travels.length > 0
+      );
+    },
+    canAddExpense: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemExpenseList") &&
+        !this.value.userIsSubContractorFull &&
+        !this.value.userIsSubContractorRestricted
+      );
+    },
+    showExpenses: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemExpenseList") &&
+        this.value.items[this.activeItemIndex].expenses.length > 0 &&
+        !this.value.userIsSubContractorFull &&
+        !this.value.userIsSubContractorRestricted
+      );
+    },
+    canAddLoan: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemLoanList") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showLoans: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemLoanList") &&
+        this.value.items[this.activeItemIndex].loans.length > 0 &&
+        !this.value.userIsSubContractorRestricted
+      );
+    },
+    canAddOutsideService: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceList") &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    showOutsideServices: function() {
+      return (
+        this.form().showMe(this, "WorkOrderItemOutsideServiceList") &&
+        this.value.items[this.activeItemIndex].outsideServices.length > 0 &&
+        !this.value.userIsRestrictedType
+      );
+    }
+  }
+};
+
+//////////////////////
+//
+//
+function statusViz(id, vm) {
+  if (id == null) {
+    return { name: null, color: null };
+  }
+
+  return vm.pvm.selectLists.woItemStatus.find(s => s.id == id);
+}
+
+//////////////////////
+//
+//
+function priorityViz(id, vm) {
+  if (id == null) {
+    return { name: null, color: null };
+  }
+
+  return vm.pvm.selectLists.woItemPriorities.find(s => s.id == id);
+}
+</script>
diff --git a/ayanova/src/router.js b/ayanova/src/router.js
index cd736794..6f538d4a 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -392,14 +392,6 @@ export default new Router({
         )
     },
 
-    {
-      path: "/svc-workorder-templates",
-      name: "svc-workorder-templates",
-      component: () =>
-        import(
-          /* webpackChunkName: "svc" */ "./views/svc-workorder-templates.vue"
-        )
-    },
     {
       path: "/svc-quotes",
       name: "svc-quotes",
@@ -429,16 +421,16 @@ export default new Router({
     },
 
     {
-      path: "/svc-pm-list",
-      name: "svc-pm-list",
+      path: "/svc-pms",
+      name: "svc-pms",
       component: () =>
-        import(/* webpackChunkName: "svc" */ "./views/svc-pm-list.vue")
+        import(/* webpackChunkName: "svc" */ "./views/svc-pms.vue")
     },
     {
-      path: "/svc-pm-templates",
-      name: "svc-pm-templates",
+      path: "/svc-pms/:recordid",
+      name: "pm-edit",
       component: () =>
-        import(/* webpackChunkName: "svc" */ "./views/svc-pm-templates.vue")
+        import(/* webpackChunkName: "svc" */ "./views/svc-pm.vue")
     },
     {
       path: "/svc-units",
diff --git a/ayanova/src/views/svc-pm-list.vue b/ayanova/src/views/svc-pm-list.vue
deleted file mode 100644
index 0028f1d7..00000000
--- a/ayanova/src/views/svc-pm-list.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <UnderConstruction data-cy="underconstruction" />
-</template>
-
-<script>
-import UnderConstruction from "../components/underconstruction.vue";
-
-export default {
-  components: {
-    UnderConstruction
-  },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "$ayiBusinessTime",
-      title: "PMList",
-      helpUrl: "svc-pm-list"
-    });
-  }
-};
-</script>
diff --git a/ayanova/src/views/svc-pm-templates.vue b/ayanova/src/views/svc-pm-templates.vue
deleted file mode 100644
index f1ad6c90..00000000
--- a/ayanova/src/views/svc-pm-templates.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <UnderConstruction data-cy="underconstruction" />
-</template>
-
-<script>
-import UnderConstruction from "../components/underconstruction.vue";
-
-export default {
-  components: {
-    UnderConstruction
-  },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "$ayiStamp",
-      title: "PMTemplate",
-      helpUrl: "svc-pm-templates"
-    });
-  }
-};
-</script>
diff --git a/ayanova/src/views/svc-pm.vue b/ayanova/src/views/svc-pm.vue
new file mode 100644
index 00000000..9a4c04dd
--- /dev/null
+++ b/ayanova/src/views/svc-pm.vue
@@ -0,0 +1,2102 @@
+<template>
+  <div>
+    <gz-report-selector ref="reportSelector"></gz-report-selector>
+    <div v-if="formState.ready">
+      <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+      <gz-alert :alert-message="obj.alertViz" red-alert></gz-alert>
+      <gz-alert :alert-message="obj.customerTechNotesViz"></gz-alert>
+      <!-- SERVERERROR:{{ formState.serverError }} -->
+      <v-form ref="form">
+        <GzPMHeader
+          v-model="obj"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="this"
+          data-cy="woHeader"
+          @change="setDirty()"
+        />
+
+        <GzPMItems
+          v-model="obj"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="this"
+          :goto="this.goto"
+          data-cy="woItems"
+          @change="setDirty()"
+          class="mt-16"
+        />
+      </v-form>
+    </div>
+    <template v-if="!formState.ready">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        :size="60"
+      ></v-progress-circular>
+    </template>
+    <!-- ################################################################################-->
+    <!-- ##########################  GENERATE WO DIALOG  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog persistent max-width="600px" v-model="genDlg">
+          <v-card>
+            <v-card-title>{{ $ay.t("GenerateWorkOrder") }}</v-card-title>
+            <v-card-text>
+              <v-checkbox
+                v-model="genCopyWiki"
+                :label="$ay.t('CopyWiki')"
+              ></v-checkbox>
+
+              <v-checkbox
+                v-model="genCopyAttachments"
+                :label="$ay.t('CopyAttachments')"
+              ></v-checkbox>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn text @click="genDlg = false" color="primary">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+
+              <v-btn color="primary" text @click="generateWorkOrder()">{{
+                $ay.t("OK")
+              }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+
+import GzPMHeader from "../components/pm-header.vue";
+import GzPMItems from "../components/pm-items.vue";
+
+const FORM_KEY = "pm-edit";
+const API_BASE_URL = "pm/";
+const FORM_CUSTOM_TEMPLATE_KEY = "PM"; //<-- Should always be CoreBizObject AyaType name here where possible
+
+export default {
+  components: {
+    GzPMHeader,
+    GzPMItems
+  },
+  async created() {
+    const vm = this;
+
+    try {
+      await initForm(vm);
+
+      //set base rights
+      vm.rights = window.$gz.role.getRights(window.$gz.type.PM);
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      let setValid = true;
+
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //open existing path
+        //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); //let getdata handle loading
+          //check for copy wo item on route params
+          let wi = this.$route.params.copyItem;
+          if (wi) {
+            this.washPMItem(wi);
+            wi.pmId = vm.obj.id;
+            wi.sequence = vm.obj.items.length + 1;
+            vm.obj.items.push(wi);
+            setDirty = true;
+          }
+        }
+      } else {
+        //new path
+        if (this.$route.params.obj) {
+          //DUPLICATE
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          this.obj.serial = 0;
+          this.obj.isDirty = true;
+          vm.obj.items.forEach(z => {
+            z.pmId = 0;
+            this.washPMItem(z);
+          });
+          setDirty = true;
+        } else {
+          //NEW
+          this.formState.loading = false;
+          this.formState.ready = true;
+          //trigger rule breaking / validation
+          this.$nextTick(() => {
+            this.obj.customerId = null;
+            this.fieldValueChanged(`customerId`);
+          });
+        }
+      }
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: setValid
+      });
+
+      //update which areas are available to user and force generate menu
+      updateRights(vm, true);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+      //navigate somewhere??
+      if (this.$route.params.gotype != null) {
+        //console.log("wo-go:", this.$route.params);
+        //find out which woitem and then find out which type to set and then set them as the active item somehow
+        const gotype = Number(this.$route.params.gotype);
+        const goid = Number(this.$route.params.goid);
+        if (gotype != window.$gz.type.PM) {
+          this.$nextTick(() => {
+            //Then must be a descendant so let's gooooooooooo!
+            this.goto = { type: gotype, id: goid };
+          });
+        }
+      }
+    }
+  },
+  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,
+      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,
+        fromPMId: null,
+        fromPMId: null,
+        fromCSRId: 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.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: []
+      },
+      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
+      genDlg: false,
+      genCopyWiki: false,
+      genCopyAttachments: false
+    };
+  },
+  //WATCHERS
+  watch: {
+    formState: {
+      handler: function(val) {
+        //,oldval is available here too if necessary
+        if (this.formState.loading) {
+          return;
+        }
+
+        //enable / disable save button
+        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");
+        }
+
+        //enable / disable duplicate / new button
+        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;
+    }
+  },
+  methods: {
+    setDirty: function() {
+      //console.log("WO HEADER SET DIRTY!! TRIGGERED");
+      this.formState.dirty = true;
+      // window.$gz.form.setFormState({
+      //   vm: this,
+      //   dirty: true
+      // });
+    },
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    },
+    ayaTypes: function() {
+      return window.$gz.type;
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (this.formState.ready && !this.formState.loading) {
+        window.$gz.form.fieldValueChanged(this, ref);
+      }
+    },
+    async getDataFromApi(recordId) {
+      const vm = this;
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: true
+      });
+      if (!recordId) {
+        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
+      }
+      const url = API_BASE_URL + recordId;
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+        const res = await window.$gz.api.get(url);
+
+        if (res.error) {
+          //Not found?
+          if (res.error.code == "2010") {
+            window.$gz.form.handleObjectNotFound(vm);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          //assign opening values
+          res.data.isDirty = false;
+          res.data.items.forEach((z, index) => {
+            z.uid = index;
+            z.isDirty = false;
+            z.expenses.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.labors.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.loans.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.parts.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+
+            z.scheduledUsers.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.tasks.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.travels.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+            z.units.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+              x.warrantyViz = null; //locally added field for reactivity, set on demand in UI not by server
+            });
+            z.outsideServices.forEach((x, index) => {
+              x.uid = index;
+              x.isDirty = false;
+            });
+          });
+
+          //insert into vue data
+          vm.obj = res.data;
+          vm.lastGetContractId = vm.obj.contractId; //preserve for triggering full update if something changes it later
+          vm.lastGetCustomerId = vm.obj.customerId; //preserve for triggering full update if something changes it later
+
+          //modify the menu as necessary
+          generateMenu(vm);
+          //update which areas are available to user
+          updateRights(vm);
+
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      } finally {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+    },
+    async submit() {
+      const vm = this;
+      if (vm.canSave == false) {
+        return;
+      }
+
+      try {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: true
+        });
+
+        //clear any errors vm might be around from previous submit
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+        //#######################################################
+        // ███████╗ █████╗ ██╗   ██╗███████╗
+        // ██╔════╝██╔══██╗██║   ██║██╔════╝
+        // ███████╗███████║██║   ██║█████╗
+        // ╚════██║██╔══██║╚██╗ ██╔╝██╔══╝
+        // ███████║██║  ██║ ╚████╔╝ ███████╗
+        // ╚══════╝╚═╝  ╚═╝  ╚═══╝  ╚══════╝
+        //########################################################
+
+        const isPost = vm.obj.id == 0;
+
+        //some ops require a full refresh like ones that trigger contract changes
+        let forceFullRefresh = false;
+
+        //reset error object
+        this.saveResult.fatal = false;
+        this.saveResult.errors = null;
+
+        //UNSAVED HEADER MUST BE FIRST
+        //(otherwise there's nothing to hang the other things off of)
+        let headerSaved = false;
+        if (this.obj.concurrency == 0) {
+          await saveHeader(vm);
+          headerSaved = true;
+        }
+
+        //HEADER
+        if (!this.saveResult.fatal && !headerSaved) {
+          await saveHeader(vm);
+        }
+
+        //WOITEMS
+        if (!this.saveResult.fatal) {
+          //first sort items into sequence order so that the errors line up with the display
+          this.obj.items.sort((a, b) => a.sequence - b.sequence);
+          //This saves all bottom level collections as well
+          await saveItems(vm);
+        }
+
+        //was state save in wo but I think also needed for rights part so keeping without state check
+        if (!this.saveResult.fatal) {
+          updateRights(vm);
+        }
+
+        //## ALL PARTIAL UPDATES COMPLETED
+        //handle errors
+        if (this.saveResult.errors != null) {
+          //# FAIL ROUTE
+          const processedErrors = formErrorFromSaveResult(this);
+          vm.formState.serverError = processedErrors; //this is the bit that triggers field and row errors to display as they pickup from this setting
+          window.$gz.form.setErrorBoxErrors(vm); //set generalerror errors in error box at top, not related to form field errors which happen alternatively based on formState.serverError which is confusing
+        } else {
+          //# SUCCESS ROUTE
+          if (isPost) {
+            //nav to id'd url
+            //note that an isPost will never be here if there is a fatal error so this is safe to do
+            this.$router.push({
+              name: "pm-edit",
+              params: {
+                recordid: vm.obj.id
+                // ,obj: vm.obj // Do NOT Pass data object to new form as normal because for a pm, it's not a full and complete record at this end
+              }
+            });
+          } else {
+            //check if full refresh is necessary
+
+            if (
+              vm.obj.contractId != vm.lastGetContractId ||
+              vm.obj.customerId != vm.lastGetCustomerId
+            ) {
+              //there may be others which is why I'm doing it this way with the extra variable
+              forceFullRefresh = true;
+            }
+
+            if (forceFullRefresh) {
+              await vm.getDataFromApi(vm.$route.params.recordid);
+            } else {
+              window.$gz.form.setFormState({
+                vm: vm,
+                dirty: false,
+                valid: true
+              });
+            }
+          }
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+    },
+    async remove() {
+      let vm = this;
+      try {
+        let dialogResult = await window.$gz.dialog.confirmDelete();
+        if (dialogResult != true) {
+          return;
+        }
+
+        //do the delete
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: true
+        });
+        //No need to delete a new record, just abandon it...
+        if (vm.$route.params.recordid == 0) {
+          //this should not get offered for delete but to be safe and clear just in case:
+          JUST_DELETED = true;
+          // navigate backwards
+          vm.$router.go(-1);
+        } else {
+          let url = API_BASE_URL + vm.$route.params.recordid;
+
+          window.$gz.form.deleteAllErrorBoxErrors(vm);
+          let res = await window.$gz.api.remove(url);
+          if (res.error) {
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            //workaround to prevent warning about leaving dirty record
+            //For some reason I couldn't just reset isdirty in formstate
+            JUST_DELETED = true;
+            // navigate backwards
+            vm.$router.go(-1);
+          }
+        }
+      } catch (error) {
+        //Update the form status
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
+    duplicate() {
+      //Navigate to new record
+      this.$router.push({
+        name: "pm-edit",
+        params: {
+          recordid: 0,
+          obj: this.obj
+        }
+      });
+    },
+    generateWorkOrder() {
+      let cp = JSON.parse(JSON.stringify(this.obj));
+      if (this.genCopyAttachments) {
+        //this property set will trigger server to copy attachments
+        cp.genCopyAttachmentsFrom = {
+          sAType: window.$gz.type.PM,
+          sId: this.obj.id
+        };
+      }
+      if (!this.genCopyWiki) {
+        cp.wiki = null; //already copied, need to remove it instead
+      }
+      cp.states = [];
+      cp.items.forEach(x => {
+        x.partRequests = [];
+      });
+      cp.id = 0;
+      cp.fromPMId = this.obj.id;
+
+      //Navigate to new record
+      this.$router.push({
+        name: "workorder-edit",
+        params: {
+          recordid: 0,
+          obj: cp
+        }
+      });
+    },
+
+    /////////////////////////////////////////////////////////
+    // Clean woitem and children so it's
+    // savable as a new record
+    // (used by duplicate and copy wo item functions
+    //  also called from pm-items.vue copy woitem when
+    //  self target)
+    //
+    washPMItem(wi) {
+      if (wi) {
+        wi.id = 0;
+        wi.concurrency = 0;
+        wi.uid = Date.now();
+        wi.isDirty = true;
+
+        wi.expenses.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.labors.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.loans.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+          x.cost = 0;
+          x.listPrice = 0;
+        });
+        wi.parts.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+          x.cost = 0;
+          x.listPrice = 0;
+        });
+
+        wi.scheduledUsers.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.tasks.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.travels.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.units.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.outsideServices.forEach(x => {
+          x.id = 0;
+          x.pmItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+      }
+    }
+
+    //end methods
+  }
+};
+
+//########################################## SAVE METHODS ##############################################
+
+/////////////////////////////
+// HEADER
+//
+async function saveHeader(vm) {
+  if (!vm.obj.isDirty) {
+    return;
+  }
+  const isPost = vm.obj.id == 0;
+
+  //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
+  const { items: removedKey1, states: removedKey2, ...headerOnly } = vm.obj;
+
+  //remove *Viz keys so they don't generate traffic
+  headerOnly.alertViz = undefined;
+  headerOnly.projectViz = undefined;
+  headerOnly.contractViz = undefined;
+  headerOnly.customerViz = undefined;
+
+  let res = await window.$gz.api.upsert(`${API_BASE_URL}`, headerOnly);
+  if (res.error) {
+    handleSaveError(vm, { fatal: true, error: res.error });
+  } else {
+    //update any server changed fields
+    vm.obj.concurrency = res.data.concurrency;
+    vm.obj.isDirty = false;
+
+    vm.obj.customerId = res.data.customerId;
+    vm.obj.contractId = res.data.contractId; //may or may not have changed at server, this will ensure entire ui gets updated if it has as all prices may have changed and other stuff
+
+    //repopulate *viz fields from return value
+    vm.obj.alertViz = res.data.alertViz;
+    vm.obj.projectViz = res.data.projectViz;
+    vm.obj.contractViz = res.data.contractViz;
+    vm.obj.customerViz = res.data.customerViz;
+
+    if (isPost) {
+      vm.obj.id = res.data.id;
+      vm.obj.serial = res.data.serial;
+      //walk all unsaved direct children and set the id so they can save
+      vm.obj.states.forEach(z => (z.pmId = vm.obj.id));
+      vm.obj.items.forEach(z => (z.pmId = vm.obj.id));
+    }
+  }
+}
+
+/////////////////////////////
+// ITEMS
+//
+async function deleteItems(vm) {
+  //walk the array backwards as items may or may not be spliced out
+  for (var i = vm.obj.items.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[i];
+    if (!d.deleted) {
+      continue;
+    }
+    let res = await window.$gz.api.remove(`${API_BASE_URL}items/${d.id}`);
+    if (res.error) {
+      handleSaveError(vm, { error: res.error, itemUid: d.uid });
+    } else {
+      vm.obj.items.splice(i, 1);
+    }
+  }
+  return;
+}
+
+async function saveItems(vm) {
+  //DELETE FLAGGED WOITEMS FIRST
+  await deleteItems(vm);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  //SAVE WOITEMS
+  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
+      const {
+        expenses: removedKey1,
+        labors: removedKey2,
+        loans: removedKey3,
+        parts: removedKey4,
+        scheduledUsers: removedKey6,
+        tasks: removedKey7,
+        travels: removedKey8,
+        units: removedKey9,
+        outsideServices: removedKey10,
+        ...o
+      } = vm.obj.items[i];
+
+      const isPost = o.id == 0;
+      let res = await window.$gz.api.upsert(`${API_BASE_URL}items`, o);
+      if (res.error) {
+        handleSaveError(vm, { error: res.error, itemUid: o.uid });
+        if (isPost) {
+          //a post error precludes further operations on this item below
+          //however, an update error doesn't necessarily because it's still a existing  item
+          //so it's children can probably be updated and we want that
+          continue;
+        }
+      } else {
+        //no error so update any server changed fields
+        //put fields
+        vm.obj.items[i].concurrency = res.data.concurrency;
+        vm.obj.items[i].isDirty = false;
+
+        //fields to update if post
+        if (isPost) {
+          vm.obj.items[i].id = res.data.id;
+          vm.obj.items[i].pmId = res.data.pmId;
+
+          //walk all unsaved children and set the pm item id so they can save
+          vm.obj.items[i].units.forEach(z => (z.pmItemId = vm.obj.items[i].id));
+
+          vm.obj.items[i].scheduledUsers.forEach(
+            z => (z.pmItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].tasks.forEach(z => (z.pmItemId = vm.obj.items[i].id));
+
+          vm.obj.items[i].parts.forEach(z => (z.pmItemId = vm.obj.items[i].id));
+
+          vm.obj.items[i].labors.forEach(
+            z => (z.pmItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].travels.forEach(
+            z => (z.pmItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].expenses.forEach(
+            z => (z.pmItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].loans.forEach(z => (z.pmItemId = vm.obj.items[i].id));
+          vm.obj.items[i].outsideServices.forEach(
+            z => (z.pmItemId = vm.obj.items[i].id)
+          );
+        }
+      }
+    }
+
+    //------
+    //save grandchildren
+    if (!vm.saveResult.fatal) {
+      await saveUnits(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveScheduledUsers(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveTasks(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveParts(vm, i);
+    }
+
+    if (!vm.saveResult.fatal) {
+      await saveLabors(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveTravels(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveExpenses(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveLoans(vm, i);
+    }
+    if (!vm.saveResult.fatal) {
+      await saveOutsideServices(vm, i);
+    }
+  }
+}
+//####################################################################################
+//## GRANDCHILDREN
+
+/////////////////////////////
+// UNITS
+//
+async function deleteUnits(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].units.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].units[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/units/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "units",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].units.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function saveUnits(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteUnits(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].units.length; i++) {
+    if (vm.obj.items[woItemIndex].units[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].units[i],
+        ["uid", "isDirty"]
+      );
+      let res = await window.$gz.api.upsert(`${API_BASE_URL}items/units`, o);
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "units",
+          childUid: vm.obj.items[woItemIndex].units[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most  graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        res.data.warrantyViz = null; //Add local key so it's reactive in vue
+        vm.obj.items[woItemIndex].units.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+/////////////////////////////
+// SCHEDULED USERS
+//
+async function saveScheduledUsers(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteScheduledUsers(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].scheduledUsers.length; i++) {
+    if (vm.obj.items[woItemIndex].scheduledUsers[i].isDirty) {
+      // console.log("BEFORE", vm.obj.items[woItemIndex].scheduledUsers[i].uid);
+
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].scheduledUsers[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(
+        `${API_BASE_URL}items/scheduled-users`,
+        o
+      );
+      if (res.error) {
+        //console.log("ERROR", vm.obj.items[woItemIndex].scheduledUsers[i].uid);
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "scheduledUsers",
+          childUid: vm.obj.items[woItemIndex].scheduledUsers[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most  graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].scheduledUsers.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+async function deleteScheduledUsers(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (
+    var i = vm.obj.items[woItemIndex].scheduledUsers.length - 1;
+    i >= 0;
+    i--
+  ) {
+    const d = vm.obj.items[woItemIndex].scheduledUsers[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/scheduled-users/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "scheduledUsers",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].scheduledUsers.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+/////////////////////////////
+// TASKS
+//
+async function saveTasks(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteTasks(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].tasks.length; i++) {
+    if (vm.obj.items[woItemIndex].tasks[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].tasks[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(`${API_BASE_URL}items/tasks`, o);
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "tasks",
+          childUid: vm.obj.items[woItemIndex].tasks[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].tasks.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+async function deleteTasks(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].tasks.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].tasks[i];
+    if (!d.deleted) {
+      continue;
+    }
+
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/tasks/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "tasks",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].tasks.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+/////////////////////////////
+// PARTS
+//
+async function deleteParts(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].parts.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].parts[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/parts/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "parts",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].parts.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function saveParts(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteParts(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].parts.length; i++) {
+    if (vm.obj.items[woItemIndex].parts[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].parts[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(`${API_BASE_URL}items/parts`, o);
+      if (res.error) {
+        //insufficient stock?
+        if (res.error.details) {
+          const balanceError = res.error.details.find(z => z.error == "2040");
+          if (balanceError && balanceError.message) {
+            //set the amount requestable so it surfaces in the UI and can be requested
+            let balance = window.$gz.util.stringToFloat(balanceError.message);
+            if (balance != null || balance != 0) {
+              vm.obj.items[woItemIndex].parts[i].requestAmountViz =
+                vm.obj.items[woItemIndex].parts[i].quantity - balance;
+            }
+          }
+        }
+
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "parts",
+          childUid: vm.obj.items[woItemIndex].parts[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].parts.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+/////////////////////////////
+// LABOR
+//
+async function saveLabors(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteLabors(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].labors.length; i++) {
+    if (vm.obj.items[woItemIndex].labors[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].labors[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(`${API_BASE_URL}items/labors`, o);
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "labors",
+          childUid: vm.obj.items[woItemIndex].labors[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].labors.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return;
+}
+
+async function deleteLabors(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].labors.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].labors[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/labors/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "labors",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].labors.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+/////////////////////////////
+// TRAVEL
+//
+async function saveTravels(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteTravels(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].travels.length; i++) {
+    if (vm.obj.items[woItemIndex].travels[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].travels[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(
+        `${API_BASE_URL}items/travels`,
+        o
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "travels",
+          childUid: vm.obj.items[woItemIndex].travels[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].travels.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return;
+}
+
+async function deleteTravels(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].travels.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].travels[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/travels/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "travels",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+
+    vm.obj.items[woItemIndex].travels.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+/////////////////////////////
+// EXPENSES
+//
+async function deleteExpenses(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].expenses.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].expenses[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/expenses/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "expenses",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].expenses.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function saveExpenses(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteExpenses(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].expenses.length; i++) {
+    if (vm.obj.items[woItemIndex].expenses[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].expenses[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(
+        `${API_BASE_URL}items/expenses`,
+        o
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "expenses",
+          childUid: vm.obj.items[woItemIndex].scheduledUsers[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].expenses.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+/////////////////////////////
+// LOANS
+//
+async function deleteLoans(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].loans.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].loans[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/loans/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "loans",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+
+    vm.obj.items[woItemIndex].loans.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function saveLoans(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteLoans(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].loans.length; i++) {
+    if (vm.obj.items[woItemIndex].loans[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].loans[i],
+        ["uid", "isDirty"]
+      );
+      const res = await window.$gz.api.upsert(`${API_BASE_URL}items/loans`, o);
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "loans",
+          childUid: vm.obj.items[woItemIndex].loans[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].loans.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+/////////////////////////////
+// OUTSIDE SERVICES
+//
+async function deleteOutsideServices(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (
+    var i = vm.obj.items[woItemIndex].outsideServices.length - 1;
+    i >= 0;
+    i--
+  ) {
+    const d = vm.obj.items[woItemIndex].outsideServices[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/outside-services/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "outsideServices",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].outsideServices.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function saveOutsideServices(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deleteOutsideServices(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].outsideServices.length; i++) {
+    if (vm.obj.items[woItemIndex].outsideServices[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].outsideServices[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(
+        `${API_BASE_URL}items/outside-services`,
+        o
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "outsideServices",
+          childUid: vm.obj.items[woItemIndex].outsideServices[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most pm graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].outsideServices.splice(i, 1, res.data); //vue needs the splice rather than just setting the value in order to trigger reactivity or else the UI won't update
+      }
+    }
+  }
+  return; //made it
+}
+
+//######################################### UTILITY METHODS ###########################################
+
+function handleSaveError(vm, e) {
+  //### NOTE: Nothing using FATAL yet, but if necessary here is where it should be determined and set
+
+  if (vm.saveResult.errors == null) {
+    vm.saveResult.errors = [];
+  }
+  vm.saveResult.errors.push(e);
+}
+
+function errorTargetFromSaveResult(vm, r, t) {
+  //no particular target
+  //or not a woitem tree error (header)
+  if (r.itemUid == null || t == null || t == "generalerror") {
+    return t;
+  }
+
+  let woitemindex = vm.obj.items.findIndex(z => z.uid == r.itemUid);
+  if (woitemindex == -1) {
+    return null;
+  }
+
+  if (r.childKey == null || r.childUid == null) {
+    return `Items[${woitemindex}].${t}`;
+  }
+
+  let childindex = vm.obj.items[woitemindex][r.childKey].findIndex(
+    z => z.uid == r.childUid
+  );
+  if (childindex == -1) {
+    return null;
+  }
+  return `Items[${woitemindex}].${r.childKey}[${childindex}].${t}`;
+}
+
+function formErrorFromSaveResult(vm) {
+  /** 
+   * convention:
+   * {
+        error: res.error,
+        itemUid: item.uid, //uid of item none means it's a header error
+        childKey: "scheduledUsers",
+        childUid: i //uid of child item will be located later as index
+      }
+   * 
+   */
+  //Note: re code 2200 hard coded here below -- if for some reason it becomes necessary there is the idea of making an envelope error to contain variety of errors,
+  //but so far I think they are all server errors (that go in the error box) or validation errors that work here
+  let ret = {
+    code: "2200",
+    details: [],
+    message: "ErrorAPI2200"
+  };
+  //console.log("formErrorFromSaveResult - input is:", vm.saveResult.errors);
+  vm.saveResult.errors.forEach(z => {
+    //console.log("z", z);
+    //{error:{code:xx,message:xx,target:xx},fatal:true}
+    if (z.error.details != null) {
+      z.error.details.forEach(x => {
+        let target = errorTargetFromSaveResult(vm, z, x.target);
+        if (target != null) {
+          ret.details.push({
+            message: x.message,
+            error: x.error,
+            target: target
+          });
+        }
+      });
+    } else {
+      //only one error so just return it
+      //console.log("single error path:", z.error);
+      ret = z.error;
+      //ret.details.push(z.error);
+    }
+  });
+
+  //console.log("formErrorFromSaveResult Returning ret=:", ret);
+  return ret;
+}
+
+/////////////////////////////
+//
+//
+function updateRights(vm, forceGenerateMenu) {
+  //determine rights to each which sections are hidden due to form customized out or rights / roles
+  const readOnlyBefore = vm.formState.readOnly;
+  if (vm.obj.isLockedAtServer) {
+    //locked is always read only (with state exception for sufficient roles)
+    vm.formState.readOnly = true;
+  } else {
+    //state may have changed so update readOnly
+    vm.formState.readOnly = !vm.rights.change;
+  }
+
+  if (readOnlyBefore != vm.formState.readOnly || forceGenerateMenu === true) {
+    generateMenu(vm);
+  }
+}
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+      case "delete":
+        m.vm.remove();
+        break;
+      case "new":
+        m.vm.$router.push({
+          name: "pm-edit",
+          params: { recordid: 0 }
+        });
+        break;
+      case "genwo":
+        m.vm.genDlg = true;
+        break;
+      case "duplicate":
+        m.vm.duplicate();
+        break;
+      case "report":
+        if (m.id != null) {
+          //last report selected is in m.id
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: m.id, ayatype: window.$gz.type.PM }
+          });
+        } else {
+          //general report selector chosen
+
+          let res = await m.vm.$refs.reportSelector.open({
+            AType: window.$gz.type.PM,
+            selectedRowIds: [m.vm.obj.id]
+          });
+
+          //if null for no selection
+          //just bail out
+          if (res == null) {
+            return;
+          }
+          //persist last report selected
+          window.$gz.form.setLastReport(FORM_KEY, res);
+
+          //Now open the report viewer...
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: res.id, ayatype: window.$gz.type.PM }
+          });
+        }
+        break;
+      case "statuslist":
+        m.vm.$router.push({
+          name: "svc-pm-status"
+        });
+        break;
+      case "itemstatuslist":
+        m.vm.$router.push({
+          name: "svc-work-order-item-status"
+        });
+        break;
+      case "prioritylist":
+        m.vm.$router.push({
+          name: "svc-work-order-item-priorities"
+        });
+        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;
+      case "csr":
+        window.$gz.eventBus.$emit("openobject", {
+          type: window.$gz.type.CustomerServiceRequest,
+          id: m.vm.obj.fromCSRId
+        });
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: false,
+    readOnly: vm.formState.readOnly,
+    hideCoreBizStandardOptions: vm.obj.userIsRestrictedType,
+    hideSearch: vm.obj.userIsRestrictedType,
+    icon: "$ayiPencilAlt",
+    title: "PM",
+    helpUrl: "svc-pms",
+    formData: {
+      ayaType: window.$gz.type.PM,
+      recordId: vm.$route.params.recordid,
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      recordName: vm.obj.serial == 0 ? null : vm.obj.serial.toString()
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "Save",
+      icon: "$ayiSave",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  if (
+    vm.rights.delete &&
+    vm.$route.params.recordid != 0 &&
+    !vm.obj.userIsRestrictedType
+  ) {
+    menuOptions.menuItems.push({
+      title: "Delete",
+      icon: "$ayiTrashAlt",
+      surface: false,
+      key: FORM_KEY + ":delete",
+      vm: vm
+    });
+  }
+
+  //REPORTS
+  //Report not Print, print is a further option
+  menuOptions.menuItems.push({
+    title: "Report",
+    icon: "$ayiFileAlt",
+    key: FORM_KEY + ":report",
+    vm: vm
+  });
+
+  //get last report selected
+  let lastReport = window.$gz.form.getLastReport(FORM_KEY);
+  if (lastReport != null && !vm.obj.userIsRestrictedType) {
+    menuOptions.menuItems.push({
+      title: lastReport.name,
+      icon: "$ayiFileAlt",
+      key: FORM_KEY + ":report:" + lastReport.id,
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change && !vm.obj.userIsRestrictedType) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "$ayiPlus",
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  if (
+    vm.rights.change &&
+    vm.$route.params.recordid != 0 &&
+    !vm.obj.userIsRestrictedType
+  ) {
+    menuOptions.menuItems.push({
+      title: "GenerateWorkOrder",
+      icon: "$ayiTools",
+      key: FORM_KEY + ":genwo",
+      vm: vm
+    });
+  }
+
+  if (
+    vm.rights.change &&
+    vm.$route.params.recordid != 0 &&
+    !vm.obj.userIsRestrictedType
+  ) {
+    menuOptions.menuItems.push({
+      title: "Duplicate",
+      icon: "$ayiClone",
+      key: FORM_KEY + ":duplicate",
+      vm: vm
+    });
+  }
+
+  //--- /show all ---
+
+  if (!vm.obj.userIsRestrictedType) {
+    menuOptions.menuItems.push({ divider: true, inset: false });
+
+    menuOptions.menuItems.push({
+      title: "WorkOrderItemStatusList",
+      icon: "$ayiCircle",
+      key: FORM_KEY + ":itemstatuslist",
+      vm: vm
+    });
+    menuOptions.menuItems.push({
+      title: "WorkOrderItemPriorityList",
+      icon: "$ayiFireAlt",
+      key: FORM_KEY + ":prioritylist",
+      vm: vm
+    });
+  }
+  menuOptions.menuItems.push({ divider: true, inset: false });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+//####################################################
+
+let JUST_DELETED = false;
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText(vm);
+  await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
+  await populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations([
+    "PM",
+    "PMStopGeneratingDate",
+    "ExcludeDaysOfWeek",
+    "PMNextServiceDate",
+    "GenerateBefore",
+    "RepeatInterval",
+    "CopyWiki",
+    "CopyAttachments",
+    "Customer",
+    "PMSerialNumber",
+    "WorkOrderSummary",
+    "GenerateWorkOrder",
+    "Contract",
+    "Project",
+    "WorkOrderCustomerContactName",
+    "WorkOrderCustomerReferenceNumber",
+    "WorkOrderInternalReferenceNumber",
+    "WorkOrderOnsite",
+    "WorkOrderCustom1",
+    "WorkOrderCustom2",
+    "WorkOrderCustom3",
+    "WorkOrderCustom4",
+    "WorkOrderCustom5",
+    "WorkOrderCustom6",
+    "WorkOrderCustom7",
+    "WorkOrderCustom8",
+    "WorkOrderCustom9",
+    "WorkOrderCustom10",
+    "WorkOrderCustom11",
+    "WorkOrderCustom12",
+    "WorkOrderCustom13",
+    "WorkOrderCustom14",
+    "WorkOrderCustom15",
+    "WorkOrderCustom16",
+    "WorkOrderItemList",
+    "WorkOrderItemTechNotes",
+    "WorkOrderItemScheduledUserList",
+    "WorkOrderItemSummary",
+    "WorkOrderItemWorkOrderStatusID",
+    "WorkOrderItemRequestDate",
+    "WorkOrderItemPriorityID",
+    "WorkOrderItemWarrantyService",
+    "WorkOrderItemScheduledUserStartDate",
+    "WorkOrderItemScheduledUserStopDate",
+    "WorkOrderItemScheduledUserEstimatedQuantity",
+    "WorkOrderItemScheduledUserUserID",
+    "WorkOrderItemScheduledUserServiceRateID",
+    "Sequence",
+    "WorkOrderItemCustom1",
+    "WorkOrderItemCustom2",
+    "WorkOrderItemCustom3",
+    "WorkOrderItemCustom4",
+    "WorkOrderItemCustom5",
+    "WorkOrderItemCustom6",
+    "WorkOrderItemCustom7",
+    "WorkOrderItemCustom8",
+    "WorkOrderItemCustom9",
+    "WorkOrderItemCustom10",
+    "WorkOrderItemCustom11",
+    "WorkOrderItemCustom12",
+    "WorkOrderItemCustom13",
+    "WorkOrderItemCustom14",
+    "WorkOrderItemCustom15",
+    "WorkOrderItemCustom16",
+    "AddressTypePhysical",
+    "AddressTypePostal",
+    "AddressCopyToPostal",
+    "AddressCopyToPhysical",
+    "Address",
+    "AddressPostalDeliveryAddress",
+    "AddressPostalCity",
+    "AddressPostalStateProv",
+    "AddressPostalCountry",
+    "AddressPostalPostal",
+    "AddressDeliveryAddress",
+    "AddressCity",
+    "AddressStateProv",
+    "AddressCountry",
+    "AddressLatitude",
+    "AddressLongitude",
+    "SelectAlternateAddress",
+    "WorkOrderItemStatusList",
+    "WorkOrderItemPriorityList",
+    "WorkOrderItemUnitList",
+    "WorkOrderItemUnitNotes",
+    "Unit",
+    "WorkOrderItemUnitCustom1",
+    "WorkOrderItemUnitCustom2",
+    "WorkOrderItemUnitCustom3",
+    "WorkOrderItemUnitCustom4",
+    "WorkOrderItemUnitCustom5",
+    "WorkOrderItemUnitCustom6",
+    "WorkOrderItemUnitCustom7",
+    "WorkOrderItemUnitCustom8",
+    "WorkOrderItemUnitCustom9",
+    "WorkOrderItemUnitCustom10",
+    "WorkOrderItemUnitCustom11",
+    "WorkOrderItemUnitCustom12",
+    "WorkOrderItemUnitCustom13",
+    "WorkOrderItemUnitCustom14",
+    "WorkOrderItemUnitCustom15",
+    "WorkOrderItemUnitCustom16",
+    "WorkOrderItemExpenseChargeAmount",
+    "WorkOrderItemExpenseChargeTaxCodeID",
+    "WorkOrderItemExpenseChargeToCustomer",
+    "WorkOrderItemExpenseDescription",
+    "WorkOrderItemExpenseList",
+    "WorkOrderItemExpenseName",
+    "WorkOrderItemExpenseReimburseUser",
+    "WorkOrderItemExpenseTaxPaid",
+    "WorkOrderItemExpenseTotalCost",
+    "WorkOrderItemExpenseUserID",
+    "WorkOrderItemLaborList",
+    "WorkOrderItemLaborServiceStartDate",
+    "WorkOrderItemLaborServiceStopDate",
+    "WorkOrderItemLaborServiceRateQuantity",
+    "WorkOrderItemLaborServiceRateID",
+    "WorkOrderItemLaborServiceDetails",
+    "WorkOrderItemLaborUserID",
+    "WorkOrderItemLaborNoChargeQuantity",
+    "WorkOrderItemLaborTaxRateSaleID",
+    "WorkOrderItemLaborPrice",
+    "WorkOrderItemLoanNotes",
+    "WorkOrderItemLoanOutDate",
+    "WorkOrderItemLoanDueDate",
+    "WorkOrderItemLoanReturnDate",
+    "WorkOrderItemLoanTaxCodeID",
+    "WorkOrderItemLoanUnit",
+    "WorkOrderItemLoanQuantity",
+    "WorkOrderItemLoanRate",
+    "WorkOrderItemLoanList",
+    "WorkOrderItemTravelList",
+    "WorkOrderItemTravelStartDate",
+    "WorkOrderItemTravelStopDate",
+    "WorkOrderItemTravelRateQuantity",
+    "WorkOrderItemTravelServiceRateID",
+    "WorkOrderItemTravelDetails",
+    "WorkOrderItemTravelUserID",
+    "WorkOrderItemTravelNoChargeQuantity",
+    "WorkOrderItemTravelTaxRateSaleID",
+    "WorkOrderItemTaskTaskID",
+    "WorkOrderItemTaskWorkOrderItemTaskCompletionType",
+    "WorkOrderItemTaskUser",
+    "WorkOrderItemTaskCompletedDate",
+    "WorkOrderItemTasks",
+    "WorkOrderItemPartList",
+    "WorkOrderItemPartDescription",
+    "PurchaseOrderItemSerialNumbers",
+    "WorkOrderItemPartPartWarehouseID",
+    "WorkOrderItemPartQuantity",
+    "WorkOrderItemPartTaxPartSaleID",
+    "WorkOrderItemPartPartID",
+    "PurchaseOrder",
+    "PurchaseOrderExpectedReceiveDate",
+    "PurchaseOrderOrderedDate",
+    "WorkOrderItemOutsideServiceList",
+    "WorkOrderItemOutsideServiceNotes",
+    "WorkOrderItemOutsideServiceVendorSentToID",
+    "WorkOrderItemOutsideServiceVendorSentViaID",
+    "WorkOrderItemOutsideServiceRMANumber",
+    "WorkOrderItemOutsideServiceTrackingNumber",
+    "WorkOrderItemOutsideServiceRepairCost",
+    "WorkOrderItemOutsideServiceRepairPrice",
+    "WorkOrderItemOutsideServiceShippingCost",
+    "WorkOrderItemOutsideServiceShippingPrice",
+    "WorkOrderItemOutsideServiceDateSent",
+    "WorkOrderItemOutsideServiceDateETA",
+    "WorkOrderItemOutsideServiceDateReturned",
+    "TaxCode",
+    "PartName",
+    "PartUPC",
+    "TaskGroup",
+    "TaskGroupList",
+    "SaveRecordToProceed",
+    "Cost",
+    "ListPrice",
+    "NetPrice",
+    "Price",
+    "PriceOverride",
+    "Tax",
+    "TaxAAmt",
+    "TaxBAmt",
+    "LineTotal",
+    "UnitOfMeasure",
+    "WorkOrderItemPart",
+    "WorkOrderItemLabor",
+    "WorkOrderItemTravel",
+    "WorkOrderItemExpense",
+    "WorkOrderItemScheduledUser",
+    "WorkOrderItemUnit",
+    "WorkOrderItemTask",
+    "WorkOrderItemLoan",
+    "WorkOrderItemOutsideService",
+    "CustomerSignature",
+    "TechSignature",
+    "Name",
+    "PartAssemblyList",
+    "PartAssembly",
+    "PartSerialNumbersAvailable",
+    "AddMultipleUnits",
+    "CopyToWorkOrder",
+    "WorkOrderConvertScheduledUserToLabor",
+    "WorkOrderConvertAllScheduledUsersToLabor",
+    "AppendTasks",
+    "UnitWarrantyInfo",
+    "UnitModelLifeTimeWarranty",
+    "UnitModelModelNumber",
+    "UnitModelVendorID",
+    "UnitModelName",
+    "UnitDescription",
+    "Warranty",
+    "WarrantyExpires",
+    "UnitPurchaseFromID",
+    "UnitPurchasedDate",
+    "UnitReceipt",
+    "RecentWorkOrders",
+    "WorkOrderGenerateUnit",
+    "ApplyUnitContract",
+    "CustomerServiceRequest"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function populateSelectionLists(vm) {
+  let res = await window.$gz.api.get("work-order-item-status/list");
+  if (res.error) {
+    vm.formState.serverError = res.error;
+    window.$gz.form.setErrorBoxErrors(vm);
+  } else {
+    vm.selectLists.woItemStatus = res.data;
+  }
+
+  res = await window.$gz.api.get("work-order-item-priority/list");
+  if (res.error) {
+    vm.formState.serverError = res.error;
+    window.$gz.form.setErrorBoxErrors(vm);
+  } else {
+    vm.selectLists.woItemPriorities = res.data;
+  }
+
+  await window.$gz.enums.fetchEnumList("WorkorderItemTaskCompletionType"); //prefetch
+  vm.selectLists.woItemTaskCompletionTypes = window.$gz.enums.getSelectionList(
+    "WorkorderItemTaskCompletionType"
+  );
+
+  await window.$gz.enums.fetchEnumList("LoanUnitRateUnit"); //prefetch
+  vm.selectLists.loanUnitRateUnits = window.$gz.enums.getSelectionList(
+    "LoanUnitRateUnit"
+  );
+  //---------
+}
+</script>
diff --git a/ayanova/src/views/svc-pms.vue b/ayanova/src/views/svc-pms.vue
new file mode 100644
index 00000000..2f72d173
--- /dev/null
+++ b/ayanova/src/views/svc-pms.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <v-row justify="center">
+      <v-dialog
+        @keydown.esc="openDialog = false"
+        @keydown.enter="openPM()"
+        v-model="openDialog"
+        persistent
+        max-width="600px"
+      >
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">{{ $ay.t("Open") }}</span>
+          </v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="openPMNumber"
+              :label="$ay.t('PM')"
+              autofocus
+              required
+              type="number"
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" text @click="openDialog = false">{{
+              $ay.t("Cancel")
+            }}</v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="openPM()"
+              :disabled="!openPMNumber"
+              >{{ $ay.t("OK") }}</v-btn
+            >
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <gz-report-selector ref="reportSelector"></gz-report-selector>
+    <gz-extensions
+      :aya-type="aType"
+      :selected-items="selectedItems"
+      ref="extensions"
+    >
+    </gz-extensions>
+
+    <gz-data-table
+      ref="gzdatatable"
+      form-key="pm-list"
+      data-list-key="PMDataList"
+      :show-select="rights.read"
+      :reload="reload"
+      @selection-change="handleSelected"
+      data-cy="pmsTable"
+      :client-criteria="clientCriteria"
+      :pre-filter-mode="preFilterMode"
+      @clear-pre-filter="clearPreFilter"
+    >
+    </gz-data-table>
+  </div>
+</template>
+
+<script>
+const FORM_KEY = "pm-list";
+export default {
+  async created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.PM);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    await fetchTranslatedText();
+
+    //------ Show all ----
+    //OPTIONAL "Show All" FILTER
+    this.objectId = window.$gz.util.stringToIntOrNull(
+      this.$route.params.objectId
+    );
+    this.aForType = window.$gz.util.stringToIntOrNull(this.$route.params.aType);
+
+    if (this.objectId && this.objectId != 0 && this.aForType) {
+      //OBJECTID,AYATYPE
+      this.clientCriteria = `${this.objectId},${this.aForType}`;
+
+      this.preFilterMode = {
+        icon: window.$gz.util.iconForType(this.aForType),
+        id: this.objectId,
+        ayatype: this.aForType,
+        viz: this.$route.params.name,
+        clearable: true
+      };
+    }
+    //------ /show all ----
+
+    generateMenu(this);
+  },
+  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;
+    },
+    clearPreFilter() {
+      this.clientCriteria = null;
+      this.preFilterMode = null;
+      this.reload = !this.reload;
+    },
+
+    async openPM() {
+      if (!this.openPMNumber) {
+        return;
+      }
+      //get id from number then push open
+      let res = await window.$gz.api.get(
+        "pm/id-from-number/" + this.openPMNumber
+      );
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+        return;
+        // throw new Error(window.$gz.errorHandler.errorToString(res, this));
+      }
+
+      this.$router.push({
+        name: "pm-edit",
+        params: { recordid: res.data }
+      });
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "new":
+        m.vm.$router.push({
+          name: "pm-edit",
+          params: { recordid: 0 }
+        });
+        break;
+      case "extensions":
+        let 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":
+        if (m.id != null) {
+          //last report selected is in m.id
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: m.id, ayatype: window.$gz.type.PM }
+          });
+        } else {
+          //general report selector chosen
+
+          let res = await m.vm.$refs.reportSelector.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.PM)
+          );
+
+          //if null for no selection
+          //just bail out
+          if (res == null) {
+            return;
+          }
+          //persist last report selected
+          window.$gz.form.setLastReport(FORM_KEY, res);
+
+          //Now open the report viewer...
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: res.id, ayatype: window.$gz.type.PM }
+          });
+        }
+        break;
+      case "PMItemList":
+        m.vm.$router.push({
+          name: "svc-pm-items"
+        });
+        break;
+      case "open":
+        m.vm.openDialog = true;
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: true,
+    icon: "$ayiBusinessTime",
+    title: "PMList",
+    helpUrl: "svc-pms",
+    menuItems: [],
+    formData: {
+      ayaType: window.$gz.type.PM
+    }
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "$ayiPlus",
+      surface: true,
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  //REPORTS
+  //Report not Print, print is a further option
+  menuOptions.menuItems.push({
+    title: "Report",
+    icon: "$ayiFileAlt",
+    key: FORM_KEY + ":report",
+    vm: vm
+  });
+
+  //get last report selected
+  let lastReport = window.$gz.form.getLastReport(FORM_KEY);
+  if (lastReport != null) {
+    menuOptions.menuItems.push({
+      title: lastReport.name,
+      icon: "$ayiFileAlt",
+      key: FORM_KEY + ":report:" + lastReport.id,
+      vm: vm
+    });
+  }
+
+  menuOptions.menuItems.push({
+    title: "Extensions",
+    icon: "$ayiPuzzlePiece",
+    key: FORM_KEY + ":extensions",
+    vm: vm
+  });
+  menuOptions.menuItems.push({
+    title: "Open",
+    icon: "$ayiTools",
+    key: FORM_KEY + ":open",
+    vm: vm
+  });
+  menuOptions.menuItems.push({ divider: true, inset: false });
+
+  menuOptions.menuItems.push({
+    title: "PMItemList",
+    icon: "$ayiWrench",
+    key: FORM_KEY + ":PMItemList",
+    vm: vm
+  });
+
+  menuOptions.menuItems.push({ divider: true, inset: false });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations(["PM"]);
+}
+</script>
diff --git a/ayanova/src/views/svc-quote-templates.vue b/ayanova/src/views/svc-quote-templates.vue
deleted file mode 100644
index fdd5f804..00000000
--- a/ayanova/src/views/svc-quote-templates.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <UnderConstruction data-cy="underconstruction" />
-</template>
-
-<script>
-import UnderConstruction from "../components/underconstruction.vue";
-
-export default {
-  components: {
-    UnderConstruction
-  },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "$ayiStamp",
-      title: "WorkOrderQuoteTemplate",
-      helpUrl: "svc-quote-templates"
-    });
-  }
-};
-</script>
diff --git a/ayanova/src/views/svc-quote.vue b/ayanova/src/views/svc-quote.vue
index d5598b79..b4909835 100644
--- a/ayanova/src/views/svc-quote.vue
+++ b/ayanova/src/views/svc-quote.vue
@@ -1947,7 +1947,6 @@ async function fetchTranslatedText(vm) {
     "WorkOrderCustomerReferenceNumber",
     "WorkOrderInternalReferenceNumber",
     "WorkOrderOnsite",
-    "NewStatus",
     "QuoteQuoteStatusType",
     "WorkOrderCustom1",
     "WorkOrderCustom2",
@@ -2150,8 +2149,6 @@ async function fetchTranslatedText(vm) {
     "RecentWorkOrders",
     "WorkOrderGenerateUnit",
     "ApplyUnitContract",
-    "WorkOrderFromQuoteID",
-    "WorkOrderFromPMID",
     "CustomerServiceRequest"
   ]);
 }
diff --git a/ayanova/src/views/svc-workorder-templates.vue b/ayanova/src/views/svc-workorder-templates.vue
deleted file mode 100644
index c719dca3..00000000
--- a/ayanova/src/views/svc-workorder-templates.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <UnderConstruction data-cy="underconstruction" />
-</template>
-
-<script>
-import UnderConstruction from "../components/underconstruction.vue";
-
-export default {
-  components: {
-    UnderConstruction
-  },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "$ayiStamp",
-      title: "WorkOrderServiceTemplate",
-      helpUrl: "svc-workorder-templates"
-    });
-  }
-};
-</script>
diff --git a/ayanova/src/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index db8aa809..faaba5f0 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -2138,7 +2138,6 @@ async function fetchTranslatedText(vm) {
     "WorkOrderCustomerReferenceNumber",
     "WorkOrderInternalReferenceNumber",
     "WorkOrderOnsite",
-    "NewStatus",
     "WorkOrderStatus",
     "WorkOrderCustom1",
     "WorkOrderCustom2",