diff --git a/ayanova/src/components/quote-header.vue b/ayanova/src/components/quote-header.vue
new file mode 100644
index 00000000..779b1deb
--- /dev/null
+++ b/ayanova/src/components/quote-header.vue
@@ -0,0 +1,694 @@
+<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('WorkOrderSerialNumber')"
+          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, 'CustomerSignature') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoSignature
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          :pvm="pvm"
+          variant="customer"
+          data-cy="customerSignature"
+        />
+      </v-col>
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderStatus') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoState
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          data-cy="woState"
+          :all-states="pvm.selectLists.wostatus"
+          :allowed-states="pvm.selectLists.allowedwostatus"
+        />
+      </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
+        v-if="
+          form().showMe(this, 'TechSignature') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoSignature
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          :pvm="pvm"
+          variant="tech"
+          data-cy="techSignature"
+        />
+      </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, 'WorkOrderCloseByDate') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('WorkOrderCloseByDate')"
+          v-model="value.completeByDate"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="completeByDate"
+          data-cy="completeByDate"
+          :error-messages="form().serverErrors(this, 'completeByDate')"
+          @input="fieldValueChanged('completeByDate')"
+        ></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, 'WorkOrderInvoiceNumber') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-text-field
+          v-model="value.invoiceNumber"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          :label="$ay.t('WorkOrderInvoiceNumber')"
+          ref="invoiceNumber"
+          data-cy="invoiceNumber"
+          :error-messages="form().serverErrors(this, 'invoiceNumber')"
+          @input="fieldValueChanged('invoiceNumber')"
+        ></v-text-field>
+      </v-col>
+
+      <v-col
+        v-if="
+          form().showMe(this, 'WorkOrderServiceDate') &&
+            !(
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+            )
+        "
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-date-time-picker
+          :label="$ay.t('WorkOrderServiceDate')"
+          v-model="value.serviceDate"
+          :readonly="formState.readOnly || value.userIsTechRestricted"
+          ref="serviceDate"
+          data-cy="serviceDate"
+          :error-messages="form().serverErrors(this, 'serviceDate')"
+          @input="fieldValueChanged('serviceDate')"
+        ></gz-date-time-picker>
+      </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 GzWoState from "./work-order-state.vue";
+import GzWoAddress from "./work-order-address.vue";
+import GzWoSignature from "./work-order-signature.vue";
+export default {
+  components: {
+    GzWoState,
+    GzWoAddress,
+    GzWoSignature
+  },
+  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;
+    }
+  }
+};
+
+/*
+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",
+    fromQuoteId: 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: [],
+        workOrderId: 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,
+            workOrderItemId: 21
+          },
+          {
+            id: 42,
+            concurrency: 7728489,
+            userId: 22,
+            estimatedQuantity: 2.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            workOrderItemId: 21
+          }
+        ],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: []
+      },
+      {
+        id: 22,
+        concurrency: 7728489,
+        notes: "itemnotes",
+        wiki: null,
+        customFields: null,
+        tags: [],
+        workOrderId: 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,
+            workOrderItemId: 22
+          },
+          {
+            id: 44,
+            concurrency: 7728489,
+            userId: 40,
+            estimatedQuantity: 2.0,
+            startDate: null,
+            stopDate: null,
+            serviceRateId: null,
+            isDirty: false,
+            workOrderItemId: 22
+          }
+        ],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: []
+      }
+    ],
+    states: [
+      {
+        id: 37,
+        concurrency: 7728489,
+        workOrderId: 10,
+        workOrderStatusId: 2,
+        created: "2021-05-29T21:30:31.421011Z",
+        userId: 37,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 38,
+        concurrency: 7728489,
+        workOrderId: 10,
+        workOrderStatusId: 3,
+        created: "2021-05-29T22:25:31.421011Z",
+        userId: 10,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 39,
+        concurrency: 7728489,
+        workOrderId: 10,
+        workOrderStatusId: 1,
+        created: "2021-05-29T22:30:31.421011Z",
+        userId: 31,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 40,
+        concurrency: 7728489,
+        workOrderId: 10,
+        workOrderStatusId: 3,
+        created: "2021-05-29T23:25:31.421011Z",
+        userId: 2,
+        isDirty: false,
+        workOrderStatus: null
+      },
+      {
+        id: 41,
+        concurrency: 7728489,
+        workOrderId: 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/quote-items.vue b/ayanova/src/components/quote-items.vue
new file mode 100644
index 00000000..98c66d3a
--- /dev/null
+++ b/ayanova/src/components/quote-items.vue
@@ -0,0 +1,1430 @@
+<template>
+  <div v-if="value != null" class="mt-8">
+    <!-- {{
+      {
+        isRestrictedType: value.userIsRestrictedType,
+        isTechRestricted: value.userIsTechRestricted,
+        subfull: value.userIsSubContractorFull,
+        subRestricted: value.userIsSubContractorRestricted,
+        showLabors: showLabors,
+        showTravels: showTravels,
+        showExpenses: showExpenses,
+        showLoans: showLoans,
+        showOutsideServices: showOutsideServices,
+        showParts: showParts,
+        showPartRequests: showPartRequests,
+        showScheduledUsers: showScheduledUsers,
+        showTasks: showTasks,
+        showUnits: showUnits
+      }
+    }} -->
+    <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="hasData && hasSelection && canAdd"
+              @click="copyItemDialog = true"
+            >
+              <v-list-item-icon>
+                <v-icon>$ayiCopy</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{
+                $ay.t("CopyToWorkOrder")
+              }}</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">
+          <GzWoItemUnits
+            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">
+          <GzWoItemScheduledUsers
+            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">
+          <GzWoItemTasks
+            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">
+          <GzWoItemParts
+            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-if="showPartRequests">
+          <GzWoItemPartRequests
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoPartRequestIndex"
+            data-cy="woItemPartRequests"
+            @change="$emit('change')"
+          />
+        </v-col>
+
+        <v-col cols="12" v-show="showLabors">
+          <GzWoItemLabors
+            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">
+          <GzWoItemTravels
+            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">
+          <GzWoItemExpenses
+            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">
+          <GzWoItemLoans
+            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">
+          <GzWoItemOutsideServices
+            v-model="value"
+            :pvm="pvm"
+            :active-wo-item-index="activeItemIndex"
+            :goto-index="gotoOutsideServiceIndex"
+            data-cy="woItemOutsideServices"
+            @change="$emit('change')"
+          />
+        </v-col>
+      </template>
+    </v-row>
+    <!-- ################################################################################-->
+    <!-- ##########################  COPY WOITEM DIALOG  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row justify="center">
+        <v-dialog v-model="copyItemDialog" max-width="600px">
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">{{ $ay.t("CopyToWorkOrder") }}</span>
+            </v-card-title>
+            <v-card-text>
+              <v-text-field
+                v-model="copyItemWoNumber"
+                :label="$ay.t('WorkOrder')"
+                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="copyItemDialog = false"
+                >{{ $ay.t("Cancel") }}</v-btn
+              >
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="copyItemToWorkOrder()"
+                :disabled="!copyItemWoNumber"
+                >{{ $ay.t("OK") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+import GzWoItemUnits from "../components/work-order-item-units.vue";
+import GzWoItemScheduledUsers from "../components/work-order-item-scheduled-users.vue";
+import GzWoItemLabors from "../components/work-order-item-labors.vue";
+import GzWoItemTravels from "../components/work-order-item-travels.vue";
+import GzWoItemExpenses from "../components/work-order-item-expenses.vue";
+import GzWoItemTasks from "../components/work-order-item-tasks.vue";
+import GzWoItemParts from "../components/work-order-item-parts.vue";
+import GzWoItemPartRequests from "../components/work-order-item-part-requests.vue";
+import GzWoItemLoans from "../components/work-order-item-loans.vue";
+import GzWoItemOutsideServices from "../components/work-order-item-outside-services.vue";
+
+export default {
+  components: {
+    GzWoItemUnits,
+    GzWoItemScheduledUsers,
+    GzWoItemExpenses,
+    GzWoItemLabors,
+    GzWoItemTravels,
+    GzWoItemTasks,
+    GzWoItemParts,
+    GzWoItemPartRequests,
+    GzWoItemLoans,
+    GzWoItemOutsideServices
+  },
+  created() {
+    this.setDefaultView();
+  },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      gotoOutsideServiceIndex: null,
+      gotoExpenseIndex: null,
+      gotoLaborIndex: null,
+      gotoLoanIndex: null,
+      gotoPartIndex: null,
+      gotoPartRequestIndex: null,
+      gotoTaskIndex: null,
+      gotoScheduledUserIndex: null,
+      gotoTravelIndex: null,
+      gotoUnitIndex: null,
+      copyItemDialog: false,
+      copyItemWoNumber: null
+    };
+  },
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    goto: {
+      default: null,
+      type: Object
+    }
+  },
+  watch: {
+    goto(val, oldVal) {
+      if (val != oldVal) {
+        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.WorkOrderItemPartRequest:
+                z.partRequests.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemScheduledUser:
+                z.scheduledUsers.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemTask:
+                z.tasks.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemTravel:
+                z.travels.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+              case window.$gz.type.WorkOrderItemUnit:
+                z.units.forEach((x, childindex) => {
+                  if (x.id == val.id) {
+                    navto.woitemindex = itemindex;
+                    navto.childindex = childindex;
+                    keepgoing = false;
+                  }
+                });
+                break;
+            }
+          }
+        });
+
+        if (navto.woitemindex != null) {
+          this.selectedRow = [{ index: navto.woitemindex }];
+          this.activeItemIndex = navto.woitemindex;
+
+          this.$nextTick(() => {
+            const el = this.$refs.topform;
+            if (el) {
+              el.scrollIntoView({ behavior: "smooth" });
+            }
+          });
+
+          if (navto.childindex != null) {
+            this.$nextTick(() => {
+              switch (val.type) {
+                case window.$gz.type.WorkOrderItemOutsideService:
+                  this.gotoOutsideServiceIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemExpense:
+                  this.gotoExpenseIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemLabor:
+                  this.gotoLaborIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemLoan:
+                  this.gotoLoanIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemPart:
+                  this.gotoPartIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemPartRequest:
+                  this.gotoPartRequestIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemTask:
+                  this.gotoTaskIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemScheduledUser:
+                  this.gotoScheduledUserIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemTravel:
+                  this.gotoTravelIndex = navto.childindex;
+                  break;
+                case window.$gz.type.WorkOrderItemUnit:
+                  this.gotoUnitIndex = navto.childindex;
+                  break;
+              }
+            });
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async copyItemToWorkOrder() {
+      if (!this.copyItemWoNumber) {
+        return;
+      }
+
+      //Self copy to current workorder??
+      if (this.copyItemWoNumber == this.value.serial) {
+        let newIndex = this.value.items.length;
+
+        let wi = JSON.parse(
+          JSON.stringify(this.value.items[this.activeItemIndex])
+        );
+
+        this.pvm.washWorkOrderItem(wi);
+        wi.workOrderId = this.value.id;
+        wi.sequence = newIndex + 1;
+        this.value.items.push(wi);
+        this.$emit("change");
+        this.selectedRow = [{ index: newIndex }];
+        this.activeItemIndex = newIndex;
+      } else {
+        if (this.pvm.formState.dirty) {
+          if ((await window.$gz.dialog.confirmLeaveUnsaved()) !== true) {
+            return;
+          }
+        }
+        //get id from number then push open
+        let res = await window.$gz.api.get(
+          "workorder/id-from-number/" + this.copyItemWoNumber
+        );
+        if (res.error) {
+          window.$gz.eventBus.$emit(
+            "notify-warning",
+            window.$gz.errorHandler.errorToString(res, this)
+          );
+          return;
+        }
+        this.$router.push({
+          name: "workorder-edit",
+          params: {
+            recordid: res.data,
+            copyItem: this.value.items[this.activeItemIndex]
+          }
+        });
+      }
+      this.copyItemDialog = false;
+    },
+    newItem() {
+      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: [],
+        workOrderId: 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: [],
+        partRequests: [],
+        scheduledUsers: [],
+        tasks: [],
+        travels: [],
+        units: [],
+        outsideServices: [],
+        uid: Date.now() //used for error tracking / display
+      });
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
+      //trigger rule breaking / validation
+      this.$nextTick(() => {
+        this.value.items[this.activeItemIndex].notes = null;
+        this.fieldValueChanged(`items[${this.activeItemIndex}].notes`);
+      });
+    },
+    newSubItem(atype) {
+      //new Id value to use (by convention goto negative will trigger create and then goto instead of simple goto)
+      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() {
+      /*
+         public uint Concurrency { get; set; }
+        public string Notes { get; set; }//Was Summary
+        public string Wiki { get; set; }
+        public string CustomFields { get; set; }
+        public List<string> Tags { get; set; } = new List<string>();
+
+        [Required]
+        public long WorkOrderId { get; set; }
+        public string TechNotes { get; set; }
+        public long? WorkorderItemStatusId { get; set; }
+        public long? WorkorderItemPriorityId { get; set; }
+        public DateTime RequestDate { get; set; }
+        public bool WarrantyService { get; set; } = false;
+
+
+IN ORDER: notes, status, date, priority, warranty, tags
+
+except they will not prefill at server but will be set here since the wo differs from the po in that there is no instant update with new viz fields to populate from server
+and it's probably not a big list to fill anyway
+
+
+  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, "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"
+        });
+      }
+
+      // headers.push({ text: "", value: "actions" });
+
+      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
+      );
+    },
+    showPartRequests: function() {
+      return (
+        this.pvm.useInventory &&
+        this.value.items[this.activeItemIndex].partRequests.length > 0 &&
+        this.form().showMe(this, "WorkOrderItemPartRequestList") &&
+        !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 a7e7db8c..e89a1f07 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -407,10 +407,10 @@ export default new Router({
         import(/* webpackChunkName: "svc" */ "./views/svc-quotes.vue")
     },
     {
-      path: "/svc-quote-templates",
-      name: "svc-quote-templates",
+      path: "/svc-quotes/:recordid",
+      name: "quote-edit",
       component: () =>
-        import(/* webpackChunkName: "svc" */ "./views/svc-quote-templates.vue")
+        import(/* webpackChunkName: "svc" */ "./views/svc-quote.vue")
     },
     {
       path: "/svc-pm-list",
diff --git a/ayanova/src/views/svc-quote.vue b/ayanova/src/views/svc-quote.vue
new file mode 100644
index 00000000..c41a5830
--- /dev/null
+++ b/ayanova/src/views/svc-quote.vue
@@ -0,0 +1,2207 @@
+<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">
+        <GzQuoteHeader
+          v-model="obj"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="this"
+          data-cy="woHeader"
+          @change="setDirty()"
+        />
+
+        <GzQuoteItems
+          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>
+  </div>
+  <!-- :reset-selections="resetSelections" -->
+</template>
+
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+
+import GzQuoteHeader from "../components/quote-header.vue";
+import GzQuoteItems from "../components/quote-items.vue";
+
+const FORM_KEY = "quote-edit";
+const API_BASE_URL = "quote/";
+const FORM_CUSTOM_TEMPLATE_KEY = "Quote"; //<-- Should always be CoreBizObject AyaType name here where possible
+
+export default {
+  components: {
+    GzQuoteHeader,
+    GzQuoteItems
+  },
+  async created() {
+    const vm = this;
+
+    try {
+      await initForm(vm);
+
+      //set base rights
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Quote);
+      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.washWorkOrderItem(wi);
+            wi.workOrderId = 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.workOrderId = 0;
+            this.washWorkOrderItem(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.Quote) {
+          this.$nextTick(() => {
+            //not workorder?  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,
+        fromQuoteId: 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.Quote,
+      currencyName: window.$gz.locale.getCurrencyName(),
+      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      hour12: window.$gz.locale.getHour12(),
+      // resetSelections: false,
+      selectLists: {
+        wostatus: [],
+        allowedwostatus: [],
+        woItemPriorities: [],
+        woItemStatus: [],
+        woItemTaskCompletionTypes: [],
+        loanUnitRateUnits: []
+      },
+      maxTableNotesLength: 50, //value to cut off notes in tables
+      saveResult: {
+        fatal: false, //fatal error, further save is pointless, bail early and report
+        errors: null //contains error objects from save
+      },
+      lastGetContractId: -1, //note: -1 so that a new record updates
+      lastGetCustomerId: -1,
+      goto: null //{type:ayatype,id:wodescendant id} picked up by woitem when set non-null to trigger navigate to the item in question
+    };
+  },
+  //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: {
+    currentState() {
+      //return actual status object from top level shell based on current state
+      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
+
+      if (this.obj.states != null && this.obj.states.length > 0) {
+        //find it in the status collection
+        //and return here
+        const laststate = this.obj.states[this.obj.states.length - 1];
+        const found = this.selectLists.wostatus.find(
+          z => z.id == laststate.workOrderStatusId
+        );
+        if (found) {
+          return found;
+        }
+      }
+      //default
+      return {
+        id: 0,
+        name: "-",
+        active: true,
+        color: "#ffffff", //invisible
+        completed: false,
+        locked: false
+      };
+    },
+    useInventory() {
+      return window.$gz.store.state.globalSettings.useInventory;
+    }
+  },
+  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.partRequests.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;
+        }
+
+        //LOCKED? State must be saved first then (assuming it unlocks)
+        let stateSaved = false;
+        if (this.obj.isLockedAtServer) {
+          await saveState(vm);
+          if (!this.saveResult.fatal) {
+            stateSaved = true;
+            //update which areas are available to user
+            //which may have changed due to state being saved (saveState sets the current islocked value)
+            updateRights(vm);
+          }
+        }
+
+        //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);
+        }
+
+        //### STATE last normally
+        //in case it locks or is completed
+        if (!this.saveResult.fatal && !stateSaved) {
+          await saveState(vm);
+          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: "workorder-edit",
+              params: {
+                recordid: vm.obj.id
+                // ,obj: vm.obj // Do NOT Pass data object to new form as normal because for a workorder, 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: "workorder-edit",
+        params: {
+          recordid: 0,
+          obj: this.obj
+        }
+      });
+    },
+    /////////////////////////////////////////////////////////
+    // Clean woitem and children so it's
+    // savable as a new record
+    // (used by duplicate and copy wo item functions
+    //  also called from quote-items.vue copy woitem when
+    //  self target)
+    //
+    washWorkOrderItem(wi) {
+      if (wi) {
+        wi.id = 0;
+        wi.concurrency = 0;
+        wi.uid = Date.now();
+        wi.isDirty = true;
+        if (wi.partRequests) {
+          wi.partRequests.splice(0);
+        }
+        wi.expenses.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.labors.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.loans.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+          x.cost = 0;
+          x.listPrice = 0;
+        });
+        wi.parts.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+          x.cost = 0;
+          x.listPrice = 0;
+        });
+
+        wi.scheduledUsers.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.tasks.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.travels.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.units.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 0;
+          x.concurrency = undefined;
+          x.isDirty = true;
+        });
+        wi.outsideServices.forEach(x => {
+          x.id = 0;
+          x.workOrderItemId = 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 workorder id so they can save
+      vm.obj.states.forEach(z => (z.workOrderId = vm.obj.id));
+      vm.obj.items.forEach(z => (z.workOrderId = vm.obj.id));
+    }
+  }
+}
+
+/////////////////////////////
+// STATES
+//
+async function saveState(vm) {
+  //CHANGED?
+  let totalItems = vm.obj.states.length;
+  if (totalItems == 0) {
+    return;
+  }
+  for (let i = 0; i < totalItems; i++) {
+    let o = vm.obj.states[i];
+    if (o.concurrency == null) {
+      //it's new so save it
+      let res = await window.$gz.api.upsert(`${API_BASE_URL}states`, o);
+      if (res.error) {
+        handleSaveError(vm, { error: res.error });
+      } else {
+        vm.obj.states[i] = res.data;
+
+        //set locked status of entire wo now
+        vm.obj.isLockedAtServer = vm.currentState.locked;
+      }
+    }
+  }
+}
+
+/////////////////////////////
+// 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,
+        partRequests: removedKey5,
+        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 workorder 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].workorderId = res.data.workorderId;
+
+          //walk all unsaved children and set the workorder item id so they can save
+          vm.obj.items[i].units.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].scheduledUsers.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].tasks.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].parts.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].partRequests.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].labors.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].travels.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].expenses.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+
+          vm.obj.items[i].loans.forEach(
+            z => (z.workorderItemId = vm.obj.items[i].id)
+          );
+          vm.obj.items[i].outsideServices.forEach(
+            z => (z.workorderItemId = 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 savePartRequests(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 workorder 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 workorder 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 workorder 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 workorder 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
+}
+
+/////////////////////////////
+// PART REQUESTS
+//
+async function deletePartRequests(vm, woItemIndex) {
+  //walk the array backwards as items may be spliced out
+  for (var i = vm.obj.items[woItemIndex].partRequests.length - 1; i >= 0; i--) {
+    const d = vm.obj.items[woItemIndex].partRequests[i];
+    if (!d.deleted) {
+      continue;
+    }
+    if (d.id != 0) {
+      let res = await window.$gz.api.remove(
+        `${API_BASE_URL}items/part-requests/${d.id}`
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "partRequests",
+          childUid: d.uid
+        });
+        return;
+      }
+    }
+    vm.obj.items[woItemIndex].partRequests.splice(i, 1);
+  }
+
+  //----
+  return;
+}
+
+async function savePartRequests(vm, woItemIndex) {
+  //DELETE FLAGGED ITEMS FIRST
+  await deletePartRequests(vm, woItemIndex);
+  if (vm.saveResult.fatal) {
+    return;
+  }
+
+  for (let i = 0; i < vm.obj.items[woItemIndex].partRequests.length; i++) {
+    if (vm.obj.items[woItemIndex].partRequests[i].isDirty) {
+      //clone and skip viz and other fields
+      const o = window.$gz.util.deepCopySkip(
+        vm.obj.items[woItemIndex].partRequests[i],
+        ["uid", "isDirty"]
+      );
+
+      const res = await window.$gz.api.upsert(
+        `${API_BASE_URL}items/part-requests`,
+        o
+      );
+      if (res.error) {
+        handleSaveError(vm, {
+          error: res.error,
+          itemUid: vm.obj.items[woItemIndex].uid,
+          childKey: "partRequests",
+          childUid: vm.obj.items[woItemIndex].partRequests[i].uid
+        });
+      } else {
+        //Server will update fields on put or post for most workorder graph objecs so need to update entire object here
+        res.data.isDirty = false; //prime isDirty to detect future edits
+        vm.obj.items[woItemIndex].partRequests.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 workorder 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 workorder 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 workorder 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 workorder 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 workorder 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: "workorder-edit",
+          params: { recordid: 0 }
+        });
+        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.Quote }
+          });
+        } else {
+          //general report selector chosen
+
+          let res = await m.vm.$refs.reportSelector.open({
+            AType: window.$gz.type.Quote,
+            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.Quote }
+          });
+        }
+        break;
+      case "statuslist":
+        m.vm.$router.push({
+          name: "svc-quote-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 "quote":
+        window.$gz.eventBus.$emit("openobject", {
+          type: window.$gz.type.Quote,
+          id: m.vm.obj.fromQuoteId
+        });
+        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: "Quote",
+    helpUrl: "svc-quotes",
+    formData: {
+      ayaType: window.$gz.type.Quote,
+      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: "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: "QuoteStatusList",
+      icon: "$ayiFlag",
+      key: FORM_KEY + ":statuslist",
+      vm: vm
+    });
+    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([
+    "Quote",
+    "QuotePreparedByID",
+    "QuoteIntroduction",
+    "QuoteQuoteRequestDate",
+    "QuoteValidUntilDate",
+    "QuoteDateSubmitted",
+    "QuoteDateApproved",
+    "CopyWiki",
+    "CopyAttachments",
+    "Customer",
+    "QuoteSerialNumber",
+    "WorkOrderSummary",
+    //"WorkOrderCloseByDate",
+    "Contract",
+    "Project",
+    //"WorkOrderInvoiceNumber",
+    //"WorkOrderServiceDate",
+    "WorkOrderCustomerContactName",
+    "WorkOrderCustomerReferenceNumber",
+    "WorkOrderInternalReferenceNumber",
+    "WorkOrderOnsite",
+    "NewStatus",
+    "WorkOrderStatus",
+    "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",
+    "WorkOrderStatusList",
+    "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",
+    "WorkOrderItemPartRequestList",
+    "WorkOrderItemPartRequestPartID",
+    "WorkOrderItemPartRequestPartWarehouseID",
+    "WorkOrderItemPartRequestQuantity",
+    "WorkOrderItemPartRequestMore",
+    "PurchaseOrder",
+    "PurchaseOrderExpectedReceiveDate",
+    "PurchaseOrderOrderedDate",
+    "WorkOrderItemPartRequestOnOrder",
+    "WorkOrderItemPartRequestReceived",
+    "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",
+    "WorkOrderFromQuoteID",
+    "WorkOrderFromPMID",
+    "CustomerServiceRequest"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function populateSelectionLists(vm) {
+  let res = await window.$gz.api.get("quote-status/list");
+  if (res.error) {
+    vm.formState.serverError = res.error;
+    window.$gz.form.setErrorBoxErrors(vm);
+  } else {
+    vm.selectLists.wostatus = res.data.all;
+    vm.selectLists.allowedwostatus = res.data.allowed;
+  }
+
+  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>