diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue
index 51e69cd9..ed00e701 100644
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -2,6 +2,7 @@
   <v-app>
     <gznotify ref="gznotify"></gznotify>
     <gzconfirm ref="gzconfirm"></gzconfirm>
+    <!-- <gzreportselector ref="gzreportselector"></gzreportselector> -->
     <!-- Width of nav drawer set to allow widest translated text menu item to show which is spanish client service requests item -->
     <v-navigation-drawer
       v-if="isAuthenticated"
@@ -230,12 +231,14 @@
 import ayaNovaVersion from "./api/ayanova-version";
 import gzconfirm from "./components/gzconfirm";
 import gznotify from "./components/gznotify";
+//import gzreportselector from "./components/report-selector-control";
 import openObjectHandler from "./api/open-object-handler";
 
 export default {
   components: {
     gzconfirm,
     gznotify
+    //,gzreportselector
   },
   data() {
     return {
diff --git a/ayanova/src/components/report-selector-control.vue b/ayanova/src/components/report-selector-control.vue
new file mode 100644
index 00000000..6cc58856
--- /dev/null
+++ b/ayanova/src/components/report-selector-control.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="text-center">
+    <v-dialog
+      persistent
+      v-model="isVisible"
+      :max-width="options.width"
+      @keydown.esc="cancel"
+      :data-cy="!!$ay.dev ? 'reportselector' : false"
+    >
+      <v-card elevation="24">
+        <v-card-title class="headline lighten-2" primary-title>
+          <span> {{ $ay.t("Report") }} </span>
+        </v-card-title>
+
+        <v-card-text>
+          //list of reports here
+        </v-card-text>
+
+        <!-- <v-divider></v-divider> v-bind:class="options.type" -->
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary darken-1"
+            text
+            @click.native="cancel"
+            :data-cy="!!$ay.dev ? 'reportselector:cancel' : false"
+            >{{ $ay.t("Cancel") }}</v-btn
+          >
+          <v-btn
+            color="primary darken-1"
+            text
+            @click.native="ok"
+            :data-cy="!!$ay.dev ? 'reportselector:ok' : false"
+            >{{ $ay.t("Ok") }}</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data: () => ({
+    isVisible: false,
+    resolve: null,
+    reject: null,
+    options: {
+      width: 290,
+      zIndex: 200
+    },
+    selectedReportId: null
+  }),
+  props: {
+    ayaType: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    open() {
+      this.isVisible = true;
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    },
+    ok() {
+      this.resolve(true);
+      this.isVisible = false;
+    },
+    cancel() {
+      this.resolve(false);
+      this.isVisible = false;
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index cda5b2e0..53d20a74 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -16,6 +16,7 @@ import VueCurrencyInput from "vue-currency-input";
 import lodash from "./libs/lodash.min.js";
 
 //my libs
+import errorhandler from "./api/errorhandler";
 import ayaNovaVersion from "./api/ayanova-version";
 import gzeventbus from "./api/eventbus";
 import gzmenu from "./api/gzmenu";
@@ -42,7 +43,7 @@ import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
 import errorControl from "./components/error-control.vue";
-import errorhandler from "./api/errorhandler";
+import reportSelectorControl from "./components/report-selector-control.vue";
 
 /////////////////////////////////////////////////////////////////
 // LIBS AND GLOBAL ITEMS
@@ -170,6 +171,7 @@ Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);
 Vue.component("gz-error", errorControl);
+Vue.component("gz-report-selector", reportSelectorControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);
diff --git a/ayanova/src/views/widget.vue b/ayanova/src/views/widget.vue
index 149c8e48..0d832ad1 100644
--- a/ayanova/src/views/widget.vue
+++ b/ayanova/src/views/widget.vue
@@ -1,6 +1,7 @@
 <template>
   <v-container>
     <v-row v-if="formState.ready">
+      <gz-report-selector ref="reportSelector"></gz-report-selector>
       <v-col>
         <v-form ref="form">
           <v-row>
@@ -572,10 +573,15 @@ function clickHandler(menuItem) {
         m.vm.duplicate();
         break;
       case "report":
+        //debugger;
+        m.vm.$refs.reportSelector.open().then(res => {
+          console.log("Report selector result:", res);
+        });
+
         //TODO: FOLLOWING TWO LINES STILL VALID BUT NEED TO MAKE A REPORT CHOOSER COMPONENT
         // let reportList = window.$gz.report.availableReports("WIDGET");
         // let selectedItem = reportList[0].value;
-        alert("STUB: REPORT LIST DIALOG");
+        //alert("STUB: REPORT LIST DIALOG");
 
         // window.$gz.dialog
         //   .getReportChoice(m.vm, reportList, selectedItem)