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>
-    <UnderConstruction data-cy="underconstruction" />
-  </div>
+  <v-row>
+    <v-col
+      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>