ayanova/package-lock.json

@@ -18537,9 +18537,9 @@
       }
     },
     "vue-router": {
-      "version": "3.4.7",
+      "version": "3.4.8",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.8.tgz",
-      "integrity": "sha512-CbHXue5BLrDivOk5O4eZ0WT4Yj8XwdXa4kCnsEIOzYUPF/07ZukayA2jGxDCJxLc9SgVQX9QX0OuGOwGlVB4Qg=="
+      "integrity": "sha512-3BsR84AqarcmweXjItxw3jwQsiYNssYg090yi4rlzTnCJxmHtkyCvhNz9Z7qRSOkmiV485KkUCReTp5AjNY4wg=="
     },
     "vue-style-loader": {
       "version": "4.1.2",
@@ -18576,9 +18576,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.3.15",
+      "version": "2.3.16",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.15.tgz",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.16.tgz",
-      "integrity": "sha512-YVJN/ld60S2mmFCKxoVFkB8X2kmuLT0E28ql4kr8HQUeCYdK8axoca/N8ZIP1hFH4NIz392f0nVpZKS4ZFZBVA=="
+      "integrity": "sha512-LHPqY+Gmyb/75xJscO0a3CuB4ZdpqHLNaGMAbmfTyapI8Q02+hjABEZzitFU/XObD2KhrNWPJzmGZPhbshGUzg=="
     },
     "vuetify-loader": {
       "version": "1.6.0",

ayanova/package.json

@@ -22,6 +22,7 @@
     "chartjs-adapter-luxon": "^0.2.2",
     "core-js": "^3.6.5",
     "dompurify": "^2.1.1",
+    "fontsource-roboto": "^3.0.3",
     "github-markdown-css": "^4.0.0",
     "jwt-decode": "^3.0.0",
     "luxon": "^1.25.0",
@@ -30,12 +31,11 @@
     "monaco-editor-webpack-plugin": "^2.0.0",
     "nprogress": "^0.2.0",
     "register-service-worker": "^1.7.1",
-    "fontsource-roboto": "^3.0.3",
     "vue": "^2.6.12",
     "vue-chartjs": "^3.5.1",
     "vue-currency-input": "1.20.3",
-    "vue-router": "^3.4.7",
+    "vue-router": "^3.4.8",
-    "vuetify": "^2.3.15",
+    "vuetify": "^2.3.16",
     "vuex": "^3.5.1",
     "vuex-persistedstate": "^2.7.1"
   },

ayanova/src/components/dash-base.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-sheet color="white" elevation="4" height="300">
+    <slot name="dash-title">
+      <!-- <div class="mx-2 mt-1 text-subtitle-1 text-md-h6 text-xl-h4">
+        {{ title }}
+
+        <v-btn icon class="float-right">
+          <v-icon>$ayiEllipsisV</v-icon>
+        </v-btn>
+      </div> -->
+
+      <v-toolbar flat dense>
+        <v-toolbar-title> {{ title }}</v-toolbar-title>
+
+        <v-spacer></v-spacer>
+
+        <!-- <v-btn icon>
+          <v-icon>mdi-heart</v-icon>
+        </v-btn> -->
+
+        <v-btn icon>
+          <v-icon>$ayiEllipsisV</v-icon>
+        </v-btn>
+      </v-toolbar>
+    </slot>
+    <slot name="main"><div class="ml-4 mt-1">CONTENT HERE</div></slot>
+  </v-sheet>
+</template>
+<script>
+export default {
+  data: () => ({}),
+  props: {
+    title: String
+  }
+};
+</script>

ayanova/src/views/home-dashboard.vue

@@ -1,11 +1,21 @@
 <template>
-  <div>
+  <v-row>
-    <UnderConstruction data-cy="underconstruction" />
+    <v-col
-  </div>
+      v-for="(item, i) in TestItems()"
+      :key="i"
+      class="d-flex child-flex"
+      cols="12"
+      sm="6"
+      lg="4"
+      xl="3"
+    >
+      <gz-dash :title="'Dash-' + i" />
+    </v-col>
+  </v-row>
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
+import GzDash from "../components/dash-base.vue";
 /**
  * 
  * 
@@ -19,7 +29,7 @@ import UnderConstruction from "../components/underconstruction.vue";
  */
 export default {
   components: {
-    UnderConstruction
+    GzDash
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
@@ -28,6 +38,28 @@ export default {
       title: "Dashboard",
       helpUrl: "form-home-dashboard"
     });
+  },
+  methods: {
+    TestItems: function() {
+      let ret = [];
+      for (var i = 0; i < 12; i++) {
+        ret.push({ index: i, title: `Dash ${i}` });
+      }
+      return ret;
+    }
+  },
+  data() {
+    return {};
+    // items: [
+    //   {
+    //     color: "#1F7087",
+    //     title: "Supermodel"
+    //   },
+    //   {
+    //     color: "#952175",
+    //     title: "Halcyon Days"
+    //   }
+    // ];
   }
 };
 </script>