diff --git a/ayanova/src/api/ayatype.js b/ayanova/src/api/ayatype.js
index 893147d3..6ba36165 100644
--- a/ayanova/src/api/ayatype.js
+++ b/ayanova/src/api/ayatype.js
@@ -91,7 +91,9 @@ export default {
   CustomerServiceRequest: 54,
   ServiceBank: 55,
   OpsNotificationSettings: 56,
-  Report: 57
+  Report: 57,
+  DashboardView: 58,
+  CustomerNote: 59
 };
 /**
  *
diff --git a/ayanova/src/plugins/vuetify.js b/ayanova/src/plugins/vuetify.js
index 785b1019..51cdab77 100644
--- a/ayanova/src/plugins/vuetify.js
+++ b/ayanova/src/plugins/vuetify.js
@@ -45,6 +45,7 @@ import {
   faChevronLeft,
   faChevronRight,
   faChild,
+  faClipboard,
   faClock,
   faClone,
   faCode,
@@ -194,6 +195,7 @@ library.add(
   faChevronLeft,
   faChevronRight,
   faChild,
+  faClipboard,
   farCircle,
   faClock,
   faClone,
@@ -434,6 +436,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "child"]
     }
   },
+  ayiClipboard: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "clipboard"]
+    }
+  },
   ayiClock: {
     component: FontAwesomeIcon,
     props: {
diff --git a/ayanova/src/router.js b/ayanova/src/router.js
index bdfdced4..219a23ea 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -168,11 +168,17 @@ export default new Router({
         import(/* webpackChunkName: "cust" */ "./views/cust-customer.vue")
     },
     {
-      path: "/cust-customer-notes/:customerid/:noteid?",
+      path: "/cust-customer-notes/:customerid",
       name: "customer-notes",
       component: () =>
         import(/* webpackChunkName: "cust" */ "./views/cust-customer-notes.vue")
     },
+    {
+      path: "/cust-customer-notes/:customerid/:recordid",
+      name: "customer-note-edit",
+      component: () =>
+        import(/* webpackChunkName: "cust" */ "./views/cust-customer-note.vue")
+    },
     {
       path: "/cust-headoffices",
       name: "cust-headoffices",
diff --git a/ayanova/src/views/cust-customer-note.vue b/ayanova/src/views/cust-customer-note.vue
new file mode 100644
index 00000000..553405f0
--- /dev/null
+++ b/ayanova/src/views/cust-customer-note.vue
@@ -0,0 +1,493 @@
+<template>
+  <v-container fluid>
+    <gz-report-selector ref="reportSelector"></gz-report-selector>
+    <!-- {{ formState }} -->
+
+    <v-form ref="form" v-if="formState.ready">
+      <v-row>
+        <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+
+        <v-col v-if="form().showMe(this, 'Notes')" cols="12">
+          <v-textarea
+            v-model="obj.notes"
+            :readonly="formState.readOnly"
+            :disabled="formState.readOnly"
+            :label="$ay.t('CustomerNoteNotes')"
+            :error-messages="form().serverErrors(this, 'notes')"
+            ref="notes"
+            data-cy="notes"
+            @input="fieldValueChanged('notes')"
+            auto-grow
+            :clearable="!formState.readOnly"
+          ></v-textarea>
+        </v-col>
+
+        <v-col v-if="form().showMe(this, 'Tags')" cols="12">
+          <gz-tag-picker
+            v-model="obj.tags"
+            :readonly="formState.readOnly"
+            :disabled="formState.readOnly"
+            ref="tags"
+            data-cy="tags"
+            :error-messages="form().serverErrors(this, 'tags')"
+            @input="fieldValueChanged('tags')"
+          ></gz-tag-picker>
+        </v-col>
+      </v-row>
+    </v-form>
+
+    <template v-if="!formState.ready">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        :size="60"
+      ></v-progress-circular>
+    </template>
+  </v-container>
+</template>
+
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+const FORM_KEY = "customer-note-edit";
+const API_BASE_URL = "customer-note/";
+
+export default {
+  async created() {
+    let vm = this;
+
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      //id 0 means create a new record don't load one
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
+        }
+      } else {
+        vm.obj.customerId = this.$route.params.customerid;
+        vm.obj.userId = vm.$store.state.userId;
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  data() {
+    return {
+      selectLists: {
+        usertypes: []
+      },
+      obj: {
+        //IMPORTANT NOTE: Fields that are NON NULLABLE in the schema for the table but *are* hideable **MUST** have a default value set here or else there will be no way to save the record
+        //I.E. Serial, usertype fields
+        //Also, if it's a non-nullable Enum backed field then it should have a valid selection i.e. not zero if there is no zero
+        id: 0,
+        concurrency: 0,
+        notes: null,
+        noteDate: null,
+        tags: [],
+        customerId: undefined,
+        userId: undefined
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.CustomerNote
+    };
+  },
+  //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 && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        //enable / disable duplicate / new button
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    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 &&
+        !this.formState.readOnly
+      ) {
+        window.$gz.form.fieldValueChanged(this, ref);
+      }
+    },
+    async getDataFromApi(recordId) {
+      let vm = this;
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: true
+      });
+      if (!recordId) {
+        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
+      }
+      let url = API_BASE_URL + recordId;
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+        let 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 {
+          vm.obj = res.data;
+          //modify the menu as necessary
+          generateMenu(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() {
+      let vm = this;
+      if (vm.canSave == false) {
+        return;
+      }
+
+      try {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: true
+        });
+        let url = API_BASE_URL; // + vm.$route.params.recordid;
+        //clear any errors vm might be around from previous submit
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+        let res = await window.$gz.api.upsert(url, vm.obj);
+
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          //Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
+          if (res.data.id) {
+            //POST - whole new object returned
+            vm.obj = res.data;
+            //Change URL to new record
+            //NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
+
+            this.$router.push({
+              name: "customer-note-edit",
+              params: {
+                recordid: res.data.id,
+                customerid: res.data.customerId,
+                obj: res.data // Pass data object to new form
+              }
+            });
+          } else {
+            //PUT - only concurrency token is returned (**warning, if server changes object other fields then this needs to act more like POST above but is more efficient this way**)
+            //Handle "put" of an existing record (UPDATE)
+            vm.obj.concurrency = res.data.concurrency;
+          }
+          //Update the form status
+          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);
+      }
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+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: "customer-note-edit",
+          params: { recordid: 0, new: true }
+        });
+        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.CustomerNote }
+          });
+        } else {
+          //general report selector chosen
+
+          let res = await m.vm.$refs.reportSelector.open({
+            ObjectType: window.$gz.type.CustomerNote,
+            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.CustomerNote }
+          });
+        }
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: false,
+    icon: "$ayiClipboard",
+    title: "CustomerNoteNote",
+    helpUrl: "form-customer-note",
+    formData: {
+      ayaType: window.$gz.type.CustomerNote,
+      recordId: vm.$route.params.recordid
+    },
+    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) {
+    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) {
+    menuOptions.menuItems.push({
+      title: lastReport.name,
+      icon: "$ayiFileAlt",
+      key: FORM_KEY + ":report:" + lastReport.id,
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "$ayiPlus",
+      key: FORM_KEY + ":new",
+      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);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations(["CustomerNoteNote"]);
+}
+</script>
+
+<style></style>
diff --git a/ayanova/src/views/cust-customer-notes.vue b/ayanova/src/views/cust-customer-notes.vue
index fecebb5e..09b3b2de 100644
--- a/ayanova/src/views/cust-customer-notes.vue
+++ b/ayanova/src/views/cust-customer-notes.vue
@@ -1,763 +1,24 @@
 <template>
-  <v-container fluid>
+  <div>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
-    <!-- {{ formState }} -->
-    <div v-if="formState.ready">
-      <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-
-      <v-form ref="form">
-        <v-tabs mobile-breakpoint="100" v-model="tab" @change="tabChanged">
-          <v-tab>{{ $ay.t("Customer") }}</v-tab>
-          <v-tab>{{ $ay.t("Address") }}</v-tab>
-          <v-tab>{{ $ay.t("Contacts") }}</v-tab>
-
-          <v-tabs-items v-model="tab">
-            <v-tab-item class="mt-4">
-              <v-row>
-                <v-col cols="12" sm="6" lg="4" xl="3">
-                  <v-text-field
-                    v-model="obj.name"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerName')"
-                    :rules="[form().required(this, 'name')]"
-                    :error-messages="form().serverErrors(this, 'name')"
-                    ref="name"
-                    data-cy="name"
-                    @input="fieldValueChanged('name')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Active')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-checkbox
-                    v-model="obj.active"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('Active')"
-                    ref="active"
-                    data-cy="active"
-                    :error-messages="form().serverErrors(this, 'active')"
-                    @change="fieldValueChanged('active')"
-                  ></v-checkbox>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'AccountNumber')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.accountNumber"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerAccountNumber')"
-                    ref="accountNumber"
-                    data-cy="accountNumber"
-                    :error-messages="form().serverErrors(this, 'accountNumber')"
-                    @input="fieldValueChanged('accountNumber')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'EmailAddress')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.emailAddress"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerEmail')"
-                    ref="emailAddress"
-                    data-cy="emailAddress"
-                    type="email"
-                    :error-messages="form().serverErrors(this, 'emailAddress')"
-                    @input="fieldValueChanged('emailAddress')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Phone1')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.phone1"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPhone1')"
-                    ref="phone1"
-                    data-cy="phone1"
-                    type="tel"
-                    :error-messages="form().serverErrors(this, 'phone1')"
-                    @input="fieldValueChanged('phone1')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Phone2')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.phone2"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPhone2')"
-                    ref="phone2"
-                    data-cy="phone2"
-                    type="tel"
-                    :error-messages="form().serverErrors(this, 'phone2')"
-                    @input="fieldValueChanged('phone2')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Phone3')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.phone3"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPhone3')"
-                    ref="phone3"
-                    data-cy="phone3"
-                    type="tel"
-                    :error-messages="form().serverErrors(this, 'phone3')"
-                    @input="fieldValueChanged('phone3')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Phone4')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.phone4"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPhone4')"
-                    ref="phone4"
-                    data-cy="phone4"
-                    type="tel"
-                    :error-messages="form().serverErrors(this, 'phone4')"
-                    @input="fieldValueChanged('phone4')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Phone5')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.phone5"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPhone5')"
-                    ref="phone5"
-                    data-cy="phone5"
-                    type="tel"
-                    :error-messages="form().serverErrors(this, 'phone5')"
-                    @input="fieldValueChanged('phone5')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'DefaultServiceTemplateID')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-pick-list
-                    :ayaType="ayaTypes().WorkOrderTemplate"
-                    :showEditIcon="true"
-                    v-model="obj.defaultServiceTemplateID"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('WorkOrderTemplate')"
-                    ref="defaultServiceTemplateID"
-                    data-cy="defaultServiceTemplateID"
-                    :error-messages="
-                      form().serverErrors(this, 'defaultServiceTemplateID')
-                    "
-                    @input="fieldValueChanged('defaultServiceTemplateID')"
-                  ></gz-pick-list>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'BillHeadOffice')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-checkbox
-                    v-model="obj.billHeadOffice"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerBillHeadOffice')"
-                    ref="billHeadOffice"
-                    data-cy="billHeadOffice"
-                    :error-messages="
-                      form().serverErrors(this, 'billHeadOffice')
-                    "
-                    @change="fieldValueChanged('billHeadOffice')"
-                  ></v-checkbox>
-                </v-col>
-
-                <v-col
-                  v-if="
-                    form().showMe(this, 'HeadOfficeID') && obj.billHeadOffice
-                  "
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-pick-list
-                    :ayaType="ayaTypes().HeadOffice"
-                    :showEditIcon="true"
-                    v-model="obj.headOfficeID"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('HeadOffice')"
-                    ref="headOfficeID"
-                    data-cy="headOfficeID"
-                    :error-messages="form().serverErrors(this, 'headOfficeID')"
-                    @input="fieldValueChanged('headOfficeID')"
-                  ></gz-pick-list>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'ContractID')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-pick-list
-                    :ayaType="ayaTypes().Contract"
-                    :showEditIcon="true"
-                    v-model="obj.contractID"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :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, 'ContractExpires') && obj.contractId
-                  "
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-date-time-picker
-                    :label="$ay.t('ContractExpires')"
-                    v-model="obj.contractExpires"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    ref="contractExpires"
-                    testId="contractExpires"
-                    :error-messages="
-                      form().serverErrors(this, 'contractExpires')
-                    "
-                    @input="fieldValueChanged('contractExpires')"
-                  ></gz-date-time-picker>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'UsesBanking')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-checkbox
-                    v-model="obj.usesBanking"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('UsesBanking')"
-                    ref="usesBanking"
-                    data-cy="usesBanking"
-                    :error-messages="form().serverErrors(this, 'usesBanking')"
-                    @change="fieldValueChanged('usesBanking')"
-                  ></v-checkbox>
-                </v-col>
-
-                <!-- --------------------------------- -->
-                <v-col v-if="form().showMe(this, 'Notes')" cols="12">
-                  <v-textarea
-                    v-model="obj.notes"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerNotes')"
-                    :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, 'TechNotes')" cols="12">
-                  <v-textarea
-                    v-model="obj.techNotes"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerTechNotes')"
-                    :error-messages="form().serverErrors(this, 'techNotes')"
-                    ref="techNotes"
-                    data-cy="techNotes"
-                    @input="fieldValueChanged('techNotes')"
-                    auto-grow
-                    prepend-icon="$ayiTools"
-                  ></v-textarea>
-                </v-col>
-
-                <v-col v-if="form().showMe(this, 'PopUpNotes')" cols="12">
-                  <v-textarea
-                    v-model="obj.popUpNotes"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('CustomerPopUpNotes')"
-                    :error-messages="form().serverErrors(this, 'popUpNotes')"
-                    ref="popUpNotes"
-                    data-cy="popUpNotes"
-                    @input="fieldValueChanged('popUpNotes')"
-                    auto-grow
-                    prepend-icon="$ayiExclamationCircle"
-                  ></v-textarea>
-                </v-col>
-
-                <v-col v-if="form().showMe(this, 'Tags')" cols="12">
-                  <gz-tag-picker
-                    v-model="obj.tags"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    ref="tags"
-                    data-cy="tags"
-                    :error-messages="form().serverErrors(this, 'tags')"
-                    @input="fieldValueChanged('tags')"
-                  ></gz-tag-picker>
-                </v-col>
-
-                <v-col cols="12">
-                  <gz-custom-fields
-                    v-model="obj.customFields"
-                    :formKey="formCustomTemplateKey"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :parentVM="this"
-                    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')" cols="12">
-                  <gz-wiki
-                    :ayaType="ayaType"
-                    :ayaId="obj.id"
-                    ref="wiki"
-                    v-model="obj.wiki"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    @input="fieldValueChanged('wiki')"
-                  ></gz-wiki
-                ></v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Attachments') && obj.id"
-                  cols="12"
-                >
-                  <gz-attachments
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :ayaType="ayaType"
-                    :ayaId="obj.id"
-                  ></gz-attachments
-                ></v-col>
-              </v-row>
-            </v-tab-item>
-            <v-tab-item class="mt-4">
-              <v-row>
-                <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
-                    <template v-slot:activator="{ on, attrs }">
-                      <span class="text-h6">
-                        {{ $ay.t("AddressTypePhysical") }}</span
-                      ><v-btn icon v-bind="attrs" v-on="on">
-                        <v-icon small>$ayiEllipsisV</v-icon>
-                      </v-btn>
-                    </template>
-                    <v-list>
-                      <v-list-item @click="AddressCopyPhysicalToClipBoard()">
-                        <v-list-item-icon>
-                          <v-icon>$ayiCopy</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          $ay.t("CopyToClipboard")
-                        }}</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item @click="AddressCopyToPostal">
-                        <v-list-item-icon>
-                          <v-icon>$ayiClone</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          $ay.t("AddressCopyToPostal")
-                        }}</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item @click="GeoCapture">
-                        <v-list-item-icon>
-                          <v-icon>$ayiMapMarker</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          $ay.t("GeoCapture")
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <span class="text-h6" v-else>
-                    {{ $ay.t("AddressTypePhysical") }}</span
-                  >
-                </v-col>
-                <v-col
-                  v-if="form().showMe(this, 'Address')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.address"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressDeliveryAddress')"
-                    ref="address"
-                    data-cy="address"
-                    :error-messages="form().serverErrors(this, 'address')"
-                    @input="fieldValueChanged('address')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'City')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.city"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressCity')"
-                    ref="city"
-                    data-cy="city"
-                    :error-messages="form().serverErrors(this, 'city')"
-                    @input="fieldValueChanged('city')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Region')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.region"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressStateProv')"
-                    ref="region"
-                    data-cy="region"
-                    :error-messages="form().serverErrors(this, 'region')"
-                    @input="fieldValueChanged('region')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Country')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.country"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressCountry')"
-                    ref="country"
-                    data-cy="country"
-                    :error-messages="form().serverErrors(this, 'country')"
-                    @input="fieldValueChanged('country')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Latitude')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-decimal
-                    v-model="obj.latitude"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressLatitude')"
-                    ref="latitude"
-                    data-cy="latitude"
-                    :rules="[form().decimalValid(this, 'latitude')]"
-                    :error-messages="form().serverErrors(this, 'latitude')"
-                    @input="fieldValueChanged('latitude')"
-                    :precision="6"
-                  ></gz-decimal>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'Longitude')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <gz-decimal
-                    v-model="obj.longitude"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressLongitude')"
-                    ref="longitude"
-                    data-cy="longitude"
-                    :rules="[form().decimalValid(this, 'longitude')]"
-                    :error-messages="form().serverErrors(this, 'longitude')"
-                    @input="fieldValueChanged('longitude')"
-                    :precision="6"
-                  ></gz-decimal>
-                </v-col>
-
-                <v-col cols="12">
-                  <v-menu offset-y v-if="rights.change">
-                    <template v-slot:activator="{ on, attrs }">
-                      <span class="text-h6">
-                        {{ $ay.t("AddressTypePostal") }}</span
-                      ><v-btn icon v-bind="attrs" v-on="on">
-                        <v-icon small>$ayiEllipsisV</v-icon>
-                      </v-btn>
-                    </template>
-                    <v-list>
-                      <v-list-item @click="AddressCopyPostalToClipBoard()">
-                        <v-list-item-icon>
-                          <v-icon>$ayiCopy</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          $ay.t("CopyToClipboard")
-                        }}</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item @click="AddressCopyToPhysical">
-                        <v-list-item-icon>
-                          <v-icon>$ayiClone</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          $ay.t("AddressCopyToPostal")
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <span class="text-h6" v-else>
-                    {{ $ay.t("AddressTypePhysical") }}</span
-                  >
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'PostAddress')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.postAddress"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressPostalDeliveryAddress')"
-                    ref="postAddress"
-                    data-cy="postAddress"
-                    :error-messages="form().serverErrors(this, 'postAddress')"
-                    @input="fieldValueChanged('postAddress')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'PostCity')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.postCity"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressPostalCity')"
-                    ref="postCity"
-                    data-cy="postCity"
-                    :error-messages="form().serverErrors(this, 'postCity')"
-                    @input="fieldValueChanged('postCity')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'PostRegion')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.postRegion"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressPostalStateProv')"
-                    ref="postRegion"
-                    data-cy="postRegion"
-                    :error-messages="form().serverErrors(this, 'postRegion')"
-                    @input="fieldValueChanged('postRegion')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'PostCountry')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.postCountry"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressPostalCountry')"
-                    ref="postCountry"
-                    data-cy="postCountry"
-                    :error-messages="form().serverErrors(this, 'postCountry')"
-                    @input="fieldValueChanged('postCountry')"
-                  ></v-text-field>
-                </v-col>
-
-                <v-col
-                  v-if="form().showMe(this, 'PostCode')"
-                  cols="12"
-                  sm="6"
-                  lg="4"
-                  xl="3"
-                >
-                  <v-text-field
-                    v-model="obj.postCode"
-                    :readonly="formState.readOnly"
-                    :disabled="formState.readOnly"
-                    :label="$ay.t('AddressPostalPostal')"
-                    ref="postCode"
-                    data-cy="postCode"
-                    :error-messages="form().serverErrors(this, 'postCode')"
-                    @input="fieldValueChanged('postCode')"
-                  ></v-text-field>
-                </v-col>
-              </v-row>
-            </v-tab-item>
-            <v-tab-item class="mt-4">
-              <v-row>
-                <v-col cols="12">
-                  <v-data-table
-                    v-model="selected"
-                    :headers="headers"
-                    :items="contactsObj"
-                    class="elevation-1"
-                    :disable-pagination="true"
-                    :disable-filtering="true"
-                    hide-default-footer
-                    @click:row="contactsRowClick"
-                    :sort-by="['name']"
-                    :show-select="false"
-                    :header-props="{ sortByText: $ay.t('Sort') }"
-                    data-cy="custUsersTable"
-                  >
-                    <template v-slot:[`item.active`]="{ item }">
-                      <v-simple-checkbox
-                        v-model="item.active"
-                        disabled
-                      ></v-simple-checkbox>
-                    </template>
-
-                    <template v-slot:top>
-                      <div class="text-right mb-6">
-                        <v-btn
-                          @click="contactsGetDataFromApi"
-                          :disabled="obj.id == 0"
-                        >
-                          <v-icon data-cy="refresh">$ayiSync</v-icon>
-                        </v-btn>
-                        <v-btn
-                          class="ml-12"
-                          @click="addContact"
-                          :disabled="obj.id == 0"
-                        >
-                          <v-icon data-cy="add">$ayiPlus</v-icon>
-                        </v-btn>
-                      </div>
-                    </template>
-                  </v-data-table>
-                </v-col>
-              </v-row>
-            </v-tab-item>
-          </v-tabs-items>
-        </v-tabs>
-      </v-form>
-    </div>
-    <template v-if="!formState.ready">
-      <v-progress-circular
-        indeterminate
-        color="primary"
-        :size="60"
-      ></v-progress-circular>
-    </template>
-  </v-container>
+    <gz-extensions
+      :ayaType="ayType"
+      :selectedItems="selectedItems"
+      ref="extensions"
+    >
+    </gz-extensions>
+    <gz-data-table
+      ref="gzdatatable"
+      formKey="customer-note-list"
+      :dataListKey="dataListKey"
+      :dataListFilter="dataListFilter"
+      :dataListSort="dataListSort"
+      :showSelect="rights.change"
+      v-on:selection-change="handleSelected"
+      data-cy="customerNotesTable"
+    >
+    </gz-data-table>
+  </div>
 </template>
 
 <script>
@@ -766,572 +27,35 @@
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //
-const FORM_KEY = "customer-edit";
-const API_BASE_URL = "customer/";
-const FORM_CUSTOM_TEMPLATE_KEY = "Customer"; //<-- Should always be CoreBizObject AyaType name here where possible
+const FORM_KEY = "cust-customer-notes";
 
 export default {
-  async created() {
-    let vm = this;
-
-    try {
-      await initForm(vm);
-
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
-      vm.formState.readOnly = !vm.rights.change;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-
-      //id 0 means create a new record don't load one
-      if (vm.$route.params.recordid != 0) {
-        //is there already an obj from a prior operation?
-        if (this.$route.params.obj) {
-          //yes, no need to fetch it
-          this.obj = this.$route.params.obj;
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-        } else {
-          await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
-        }
-      } else {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        dirty: false,
-        valid: true
-      });
-
-      generateMenu(vm);
-    } catch (error) {
-      window.$gz.errorHandler.handleFormError(error, vm);
-    } finally {
-      vm.formState.ready = true;
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty || JUST_DELETED) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
+  created() {
+    this.dataListKey = this.$route.params.dataListKey;
+    this.customerId = this.$route.params.customerId;
+    this.rights = window.$gz.role.getRights(window.$gz.type.Customer);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
   },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   data() {
     return {
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
-      selectLists: {
-        usertypes: []
-      },
-      obj:
-        //IMPORTANT NOTE: Fields that are NON NULLABLE in the schema for the table but *are* hideable **MUST** have a default value set here or else there will be no way to save the record
-        //I.E. Serial, usertype fields
-        //Also, if it's a non-nullable Enum backed field then it should have a valid selection i.e. not zero if there is no zero
-        {
-          id: 0,
-          concurrency: 0,
-          name: null,
-          active: null,
-          notes: null,
-          wiki: null,
-          customFields: "{}",
-          tags: [],
-          webAddress: null,
-          popUpNotes: null,
-          billHeadOffice: false,
-          headOfficeID: null,
-          techNotes: null,
-          accountNumber: null,
-          usesBanking: false,
-          contractID: null,
-          contractExpires: null,
-          defaultServiceTemplateID: null,
-          phone1: null,
-          phone2: null,
-          phone3: null,
-          phone4: null,
-          phone5: null,
-          emailAddress: null,
-          postAddress: null,
-          postCity: null,
-          postRegion: null,
-          postCountry: null,
-          postCode: null,
-          address: null,
-          city: null,
-          region: null,
-          country: null,
-          latitude: null,
-          longitude: null
-        },
-      tab: 0,
-      formState: {
-        ready: false,
-        dirty: false,
-        valid: true,
-        readOnly: false,
-        loading: true,
-        errorBoxMessage: null,
-        appError: null,
-        serverError: {}
-      },
+      customerId: undefined,
+      currentListViewId: 1,
+      dataListKey: "CustomerNoteDataList",
+      dataListFilter: "",
+      dataListSort: "",
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Customer,
-      contactsObj: [],
-      hasFetchedContacts: false,
-      headers: [],
-      selected: [],
-      availableRoles: [],
-      timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
-      languageName: window.$gz.locale.getBrowserLanguages(),
-      hour12: window.$gz.locale.getHour12()
+      ayType: window.$gz.type.CustomerNote,
+      selectedItems: []
     };
   },
-  //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 && !val.readOnly) {
-          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-        } else {
-          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-        }
-
-        //enable / disable 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
-    }
-  },
   methods: {
-    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 &&
-        !this.formState.readOnly
-      ) {
-        window.$gz.form.fieldValueChanged(this, ref);
-      }
-    },
-    async getDataFromApi(recordId) {
-      let vm = this;
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: true
-      });
-      if (!recordId) {
-        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
-      }
-      let url = API_BASE_URL + recordId;
-      try {
-        window.$gz.form.deleteAllErrorBoxErrors(vm);
-
-        let 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 {
-          vm.obj = res.data;
-          //modify the menu as necessary
-          generateMenu(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() {
-      let vm = this;
-      if (vm.canSave == false) {
-        return;
-      }
-
-      try {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: true
-        });
-        let url = API_BASE_URL; // + vm.$route.params.recordid;
-        //clear any errors vm might be around from previous submit
-        window.$gz.form.deleteAllErrorBoxErrors(vm);
-
-        let res = await window.$gz.api.upsert(url, vm.obj);
-
-        if (res.error) {
-          vm.formState.serverError = res.error;
-          window.$gz.form.setErrorBoxErrors(vm);
-        } else {
-          //Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
-          if (res.data.id) {
-            //POST - whole new object returned
-            vm.obj = res.data;
-            //Change URL to new record
-            //NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
-
-            this.$router.push({
-              name: "customer-edit",
-              params: {
-                recordid: res.data.id,
-                obj: res.data // Pass data object to new form
-              }
-            });
-          } else {
-            //PUT - only concurrency token is returned (**warning, if server changes object other fields then this needs to act more like POST above but is more efficient this way**)
-            //Handle "put" of an existing record (UPDATE)
-            vm.obj.concurrency = res.data.concurrency;
-          }
-          //Update the form status
-          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);
-      }
-    },
-    async duplicate() {
-      let vm = this;
-      if (!vm.canDuplicate || vm.$route.params.recordid == 0) {
-        return;
-      }
-      window.$gz.form.setFormState({
-        vm: vm,
-        loading: true
-      });
-      let url = API_BASE_URL + "duplicate/" + vm.$route.params.recordid;
-
-      try {
-        window.$gz.form.deleteAllErrorBoxErrors(vm);
-        let res = await window.$gz.api.upsert(url);
-        if (res.error) {
-          vm.formState.serverError = res.error;
-          window.$gz.form.setErrorBoxErrors(vm);
-        } else {
-          //Navigate to new record
-          this.$router.push({
-            name: "customer-edit",
-            params: {
-              recordid: res.data.id,
-              obj: res.data // Pass data object to new form
-            }
-          });
-        }
-      } catch (ex) {
-        window.$gz.errorHandler.handleFormError(ex, vm);
-      } finally {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-      }
-    },
-    tabChanged: async function(tab) {
-      if (tab == 2) {
-        //contacts tab, load contacts if not done already
-        if (!this.hasFetchedContacts) {
-          await this.contactsGetDataFromApi();
-        }
-      }
-      // let vm = this;
-      // if (vm[tabIndexToRoute(vm.tab)].isnew) {
-      //   vm.getDataFromApi();
-      // }
-    },
-    addContact() {
-      if (this.obj.id == 0) {
-        return;
-      }
-      this.$router.push({
-        name: "cust-user",
-        params: { recordid: 0, customerid: this.obj.id }
-      });
-    },
-    contactsRowClick(item) {
-      window.$gz.eventBus.$emit("openobject", {
-        type: window.$gz.type.User,
-        id: item.id,
-        inside: false
-      });
-    },
-    rolesDisplayFromRoles(roles) {
-      let roleNames = [];
-      if (roles != null && roles != 0) {
-        for (let i = 0; i < this.availableRoles.length; i++) {
-          let role = this.availableRoles[i];
-          if (!!(roles & role.id)) {
-            roleNames.push(role.name);
-          }
-        }
-      }
-      return roleNames.join(", ");
-    },
-    async contactsGetDataFromApi() {
-      let vm = this;
-      vm.formState.loading = true;
-
-      window.$gz.form.deleteAllErrorBoxErrors(vm);
-      try {
-        let res = await window.$gz.api.get(
-          `user/customer-contacts/${vm.obj.id}`
-        );
-        vm.hasFetchedContacts = true;
-
-        if (res.error) {
-          if (res.error.code == "2010") {
-            window.$gz.form.handleObjectNotFound(vm);
-          }
-          vm.formState.serverError = res.error;
-          window.$gz.form.setErrorBoxErrors(vm);
-        } else {
-          if (res.data) {
-            /*   Id = z.Id,
-                Active = z.Active,
-                Name = z.Name,
-                UserType = z.UserType,
-                LastLogin = z.LastLogin */
-            let ret = [];
-            for (let i = 0; i < res.data.length; i++) {
-              let o = res.data[i];
-              ret.push({
-                id: o.id,
-                name: o.name,
-                emailAddress: o.emailAddress,
-                phone1: o.phone1,
-                phone2: o.phone2,
-                phone3: o.phone3,
-                active: o.active,
-                lastLogin: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-                  o.lastLogin,
-                  this.timeZoneName,
-                  this.languageName,
-                  this.hour12
-                )
-              });
-            }
-
-            vm.contactsObj = ret;
-          } else {
-            vm.rawObj = [];
-            vm.contactsObj = [];
-          }
-
-          window.$gz.form.setFormState({
-            vm: vm,
-            dirty: false,
-            valid: true,
-            loading: false
-          });
-          generateMenu(vm);
-        }
-      } catch (error) {
-        window.$gz.form.setFormState({
-          vm: vm,
-          loading: false
-        });
-        window.$gz.errorHandler.handleFormError(error, vm);
-      }
-    },
-    AddressCopyToPostal() {
-      let vm = this;
-      vm.obj.postAddress = vm.obj.address;
-      vm.obj.postCity = vm.obj.city;
-      vm.obj.postRegion = vm.obj.region;
-      vm.obj.postCountry = vm.obj.country;
-    },
-    AddressCopyToPhysical() {
-      let vm = this;
-      vm.obj.address = vm.obj.postAddress;
-      vm.obj.city = vm.obj.postCity;
-      vm.obj.region = vm.obj.postRegion;
-      vm.obj.country = vm.obj.postCountry;
-    },
-    AddressCopyPhysicalToClipBoard() {
-      let vm = this;
-      let ret = "";
-      if (vm.obj.name) {
-        ret += vm.obj.name + "\n";
-      }
-      if (vm.obj.address) {
-        ret += vm.obj.address + "\n";
-      }
-
-      if (vm.obj.city) {
-        ret += vm.obj.city + " ";
-      }
-
-      if (vm.obj.region) {
-        ret += vm.obj.region + " ";
-      }
-
-      if (vm.obj.country) {
-        ret += vm.obj.country + "\n";
-      }
-      window.$gz.util.copyToClipboard(ret);
-
-      /* todo maybe down the road if asked for?
-
-				if(mAddressType==AddressTypes.Physical)
-				{
-					if(mLatitude!=0 || mLongitude!=0)
-					{
-						sb.Append(" \r\n");
-						sb.Append(LongitudeToString(mLongitude));
-						sb.Append("   ");
-						sb.Append(LatitudeToString(mLatitude));
-						sb.Append(" \r\n");
-					}
-				} */
-    },
-    AddressCopyPostalToClipBoard() {
-      let vm = this;
-      let ret = "";
-      if (vm.obj.name) {
-        ret += vm.obj.name + "\n";
-      }
-      if (vm.obj.postAddress) {
-        ret += vm.obj.postAddress + "\n";
-      }
-
-      if (vm.obj.postCity) {
-        ret += vm.obj.postCity + " ";
-      }
-
-      if (vm.obj.postRegion) {
-        ret += vm.obj.postRegion + " ";
-      }
-
-      if (vm.obj.postCode) {
-        //Postal codes should have two spaces before them according to regs.
-        ret += "  " + vm.obj.postCode + "\n";
-      }
-
-      if (vm.obj.postCountry) {
-        ret += vm.obj.postCountry + "\n";
-      }
-      window.$gz.util.copyToClipboard(ret);
-    },
-    async GeoCapture() {
-      let vm = this;
-      try {
-        window.$gz.form.deleteAllErrorBoxErrors(vm);
-        let loc = await window.$gz.util.getGeoLocation();
-        vm.obj.latitude = loc.latitude;
-        vm.fieldValueChanged("latitude");
-        vm.obj.longitude = loc.longitude;
-        vm.fieldValueChanged("longitude");
-      } catch (ex) {
-        window.$gz.errorHandler.handleFormError(ex, vm);
-      }
+    handleSelected(selected) {
+      this.selectedItems = selected;
     }
-
-    //end methods
   }
 };
 
@@ -1345,35 +69,34 @@ async function clickHandler(menuItem) {
   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: "customer-edit",
-          params: { recordid: 0, new: true }
+          name: "customer-note-edit",
+          params: { recordid: 0, customerid: m.vm.customerId }
         });
         break;
-      case "duplicate":
-        m.vm.duplicate();
+      case "extensions":
+        let res = await m.vm.$refs.extensions.open(
+          m.vm.$refs.gzdatatable.getDataListSelection(
+            window.$gz.type.CustomerNote
+          )
+        );
         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.Customer }
+            params: { recordid: m.id, ayatype: window.$gz.type.CustomerNote }
           });
         } else {
           //general report selector chosen
 
-          let res = await m.vm.$refs.reportSelector.open({
-            ObjectType: window.$gz.type.Customer,
-            selectedRowIds: [m.vm.obj.id]
-          });
+          let res = await m.vm.$refs.reportSelector.open(
+            m.vm.$refs.gzdatatable.getDataListSelection(
+              window.$gz.type.CustomerNote
+            )
+          );
 
           //if null for no selection
           //just bail out
@@ -1386,22 +109,11 @@ async function clickHandler(menuItem) {
           //Now open the report viewer...
           m.vm.$router.push({
             name: "ay-report",
-            params: { recordid: res.id, ayatype: window.$gz.type.Customer }
+            params: { recordid: res.id, ayatype: window.$gz.type.CustomerNote }
           });
         }
         break;
 
-      case "geoview":
-        window.$gz.util.viewGeoLocation({
-          latitude: m.vm.obj.latitude,
-          longitude: m.vm.obj.longitude,
-          address: m.vm.obj.address || m.vm.obj.postAddress,
-          city: m.vm.obj.city || m.vm.obj.postCity,
-          region: m.vm.obj.region || m.vm.obj.postRegion,
-          country: m.vm.obj.country || m.vm.obj.postCountry,
-          postCode: m.vm.obj.postCode
-        });
-        break;
       default:
         window.$gz.eventBus.$emit(
           "notify-warning",
@@ -1416,34 +128,22 @@ async function clickHandler(menuItem) {
 //
 function generateMenu(vm) {
   let menuOptions = {
-    isMain: false,
-    icon: "$ayiAddressCard",
-    title: "Customer",
-    helpUrl: "form-customer",
+    isMain: true,
+    icon: "$ayiClipboard",
+    title: "CustomerNoteList",
+    helpUrl: "form-ay-data-list-view",
+    menuItems: [],
     formData: {
-      ayaType: window.$gz.type.Customer,
-      recordId: vm.$route.params.recordid,
-      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY
-    },
-    menuItems: []
+      ayaType: window.$gz.type.CustomerNote
+    }
   };
 
   if (vm.rights.change) {
     menuOptions.menuItems.push({
-      title: "Save",
-      icon: "$ayiSave",
+      title: "New",
+      icon: "$ayiPlus",
       surface: true,
-      key: FORM_KEY + ":save",
-      vm: vm
-    });
-  }
-
-  if (vm.rights.delete && vm.$route.params.recordid != 0) {
-    menuOptions.menuItems.push({
-      title: "Delete",
-      icon: "$ayiTrashAlt",
-      surface: false,
-      key: FORM_KEY + ":delete",
+      key: FORM_KEY + ":new",
       vm: vm
     });
   }
@@ -1468,160 +168,12 @@ function generateMenu(vm) {
     });
   }
 
-  if (vm.rights.change) {
-    menuOptions.menuItems.push({
-      title: "New",
-      icon: "$ayiPlus",
-      key: FORM_KEY + ":new",
-      vm: vm
-    });
-  }
-
-  if (vm.rights.change) {
-    menuOptions.menuItems.push({
-      title: "Duplicate",
-      icon: "$ayiClone",
-      key: FORM_KEY + ":duplicate",
-      vm: vm
-    });
-  }
-
-  menuOptions.menuItems.push({ divider: true, inset: false });
-
-  //---- SHOW ALL ---
-  //MIGRATE_OUTSTANDING show all: workorderlist, unitlist, quotelist, pmlist
   menuOptions.menuItems.push({
-    title: "WorkOrderList",
-    icon: "$ayiTools",
-    key: FORM_KEY + ":WorkOrderList",
+    title: "Extensions",
+    icon: "$ayiPuzzlePiece",
+    key: FORM_KEY + ":extensions",
     vm: vm
   });
-
-  menuOptions.menuItems.push({
-    title: "UnitList",
-    icon: "$ayiFan",
-    key: FORM_KEY + ":UnitList",
-    vm: vm
-  });
-
-  menuOptions.menuItems.push({
-    title: "QuoteList",
-    icon: "$ayiPencilAlt",
-    key: FORM_KEY + ":QuoteList",
-    vm: vm
-  });
-
-  menuOptions.menuItems.push({
-    title: "PMList",
-    icon: "$ayiBusinessTime",
-    key: FORM_KEY + ":PMList",
-    vm: vm
-  });
-  //--- /show all ---
-
-  menuOptions.menuItems.push({
-    title: "GeoView",
-    icon: "$ayiMapMarked",
-    key: FORM_KEY + ":geoview",
-    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);
-  // await populateSelectionLists(vm);
-  // await cacheEnums(vm);
-  await createTableHeaders(vm);
-}
-
-//////////////////////////////////////////////////////////
-//
-// Ensures UI translated text is available
-//
-async function fetchTranslatedText(vm) {
-  await window.$gz.translation.cacheTranslations([
-    "Customer",
-    "CustomerName",
-    "CustomerNotes",
-    "WebAddress",
-    "CustomerPopUpNotes",
-    "CustomerBillHeadOffice",
-    "HeadOffice",
-    "CustomerTechNotes",
-    "CustomerAccountNumber",
-    "UsesBanking",
-    "Contract",
-    "ContractExpires",
-    "WorkOrderTemplate",
-    "CustomerPhone1",
-    "CustomerPhone2",
-    "CustomerPhone3",
-    "CustomerPhone4",
-    "CustomerPhone5",
-    "CustomerEmail",
-    "AddressTypePhysical",
-    "AddressTypePostal",
-    "AddressCopyToPostal",
-    "AddressCopyToPhysical",
-    "Address",
-    "AddressPostalDeliveryAddress",
-    "AddressPostalCity",
-    "AddressPostalStateProv",
-    "AddressPostalCountry",
-    "AddressPostalPostal",
-    "AddressDeliveryAddress",
-    "AddressCity",
-    "AddressStateProv",
-    "AddressCountry",
-    "AddressLatitude",
-    "AddressLongitude",
-    "CustomerCustom1",
-    "CustomerCustom2",
-    "CustomerCustom3",
-    "CustomerCustom4",
-    "CustomerCustom5",
-    "CustomerCustom6",
-    "CustomerCustom7",
-    "CustomerCustom8",
-    "CustomerCustom9",
-    "CustomerCustom10",
-    "CustomerCustom11",
-    "CustomerCustom12",
-    "CustomerCustom13",
-    "CustomerCustom14",
-    "CustomerCustom15",
-    "CustomerCustom16",
-    "UserEmailAddress",
-    "UserPhone1",
-    "UserPhone2",
-    "UserPageAddress",
-    "Contact",
-    "LastLogin"
-  ]);
-}
-
-//////////////////////
-//
-//
-async function createTableHeaders(vm) {
-  vm.headers = [
-    { text: vm.$ay.t("Contact"), value: "name" },
-    { text: vm.$ay.t("UserEmailAddress"), value: "emailAddress" },
-    { text: vm.$ay.t("UserPhone1"), value: "phone1" },
-    { text: vm.$ay.t("UserPhone2"), value: "phone2" },
-    { text: vm.$ay.t("UserPageAddress"), value: "phone3" },
-    { text: vm.$ay.t("Active"), value: "active" },
-    { text: vm.$ay.t("LastLogin"), value: "lastLogin" }
-  ];
-}
 </script>
diff --git a/ayanova/src/views/cust-customer.vue b/ayanova/src/views/cust-customer.vue
index fecebb5e..241553d4 100644
--- a/ayanova/src/views/cust-customer.vue
+++ b/ayanova/src/views/cust-customer.vue
@@ -1402,6 +1402,12 @@ async function clickHandler(menuItem) {
           postCode: m.vm.obj.postCode
         });
         break;
+      case "CustomerNoteList":
+        m.vm.$router.push({
+          name: "customer-notes",
+          params: { customerId: m.vm.Id }
+        });
+        break;
       default:
         window.$gz.eventBus.$emit(
           "notify-warning",
@@ -1488,6 +1494,13 @@ function generateMenu(vm) {
 
   menuOptions.menuItems.push({ divider: true, inset: false });
 
+  menuOptions.menuItems.push({
+    title: "CustomerNoteList",
+    icon: "$ayiClipboard",
+    key: FORM_KEY + ":CustomerNoteList",
+    vm: vm
+  });
+
   //---- SHOW ALL ---
   //MIGRATE_OUTSTANDING show all: workorderlist, unitlist, quotelist, pmlist
   menuOptions.menuItems.push({
@@ -1606,7 +1619,9 @@ async function fetchTranslatedText(vm) {
     "UserPhone2",
     "UserPageAddress",
     "Contact",
-    "LastLogin"
+    "LastLogin",
+    "CustomerNoteList",
+    "CustomerNoteNotes"
   ]);
 }