diff --git a/ayanova/src/views/customer-workorders.vue b/ayanova/src/views/customer-workorders.vue
index 36b343f4..33ce220f 100644
--- a/ayanova/src/views/customer-workorders.vue
+++ b/ayanova/src/views/customer-workorders.vue
@@ -1,25 +1,140 @@
 <template>
   <div>
-    {{ $store.state.customerRights }}
-    todo: backend customer rights check in addition to here
-    <UnderConstruction data-cy="underconstruction" />
+    <gz-data-table
+      ref="gzdatatable"
+      form-key="workorder-list"
+      data-list-key="CustomerWorkOrderDataList"
+      :show-select="rights.read"
+      :reload="reload"
+      @selection-change="handleSelected"
+      data-cy="workordersTable"
+      :client-criteria="clientCriteria"
+      :pre-filter-mode="preFilterMode"
+      @clear-pre-filter="clearPreFilter"
+    >
+    </gz-data-table>
   </div>
 </template>
-
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
-
+const FORM_KEY = "customer-workorder-list";
 export default {
-  components: {
-    UnderConstruction
+  async created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.WorkOrder);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    await fetchTranslatedText();
+
+    //------ Show all ----
+    //OPTIONAL "Show All" FILTER
+    this.objectId = window.$gz.util.stringToIntOrNull(
+      this.$route.params.objectId
+    );
+    this.aForType = window.$gz.util.stringToIntOrNull(this.$route.params.aType);
+
+    if (this.objectId && this.objectId != 0 && this.aForType) {
+      //OBJECTID,AYATYPE
+      this.clientCriteria = `${this.objectId},${this.aForType}`;
+
+      this.preFilterMode = {
+        icon: window.$gz.util.iconForType(this.aForType),
+        id: this.objectId,
+        ayatype: this.aForType,
+        viz: this.$route.params.name,
+        clearable: true
+      };
+    }
+    //------ /show all ----
+
+    generateMenu(this);
   },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "$ayiTools",
-      title: "WorkOrderList",
-      helpUrl: "customer-workorders"
-    });
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.WorkOrder,
+      selectedItems: [],
+      reload: false,
+      openDialog: false,
+      openWoNumber: null,
+      clientCriteria: undefined,
+      preFilterMode: null,
+      objectId: null,
+      aForType: null,
+      name: null
+    };
+  },
+  methods: {
+    handleSelected(selected) {
+      this.selectedItems = selected;
+    },
+    clearPreFilter() {
+      this.clientCriteria = null;
+      this.preFilterMode = null;
+      this.reload = !this.reload;
+    }
   }
 };
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  const m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      // case "report":
+      //   {
+      //     const res = await m.vm.$refs.reportSelector.open(
+      //       m.vm.$refs.gzdatatable.getDataListSelection(
+      //         window.$gz.type.WorkOrder
+      //       ),
+      //       m.id
+      //     );
+      //     if (res == null) {
+      //       return;
+      //     }
+      //     window.$gz.form.setLastReport(FORM_KEY, res);
+      //     generateMenu(m.vm);
+      //   }
+      //   break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  const menuOptions = {
+    isMain: true,
+    icon: "$ayiTools",
+    title: "WorkOrderList",
+    helpUrl: "customer-workorders",
+    menuItems: [],
+    formData: {
+      ayaType: window.$gz.type.WorkOrder
+    }
+  };
+
+  menuOptions.menuItems.push({ divider: true, inset: false });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations(["WorkOrder"]);
+}
 </script>