introducing dashboard

q-manui/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
+    "lodash": "^4.17.21",
     "pinia": "^2.0.11",
     "pinia-plugin-persistedstate": "^3.2.1",
     "quasar": "^2.8.0",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.4.3",
+    "@types/lodash": "^4.14.202",
     "@types/node": "^12.20.21",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

q-manui/src/components/ServerComponent.vue

@@ -1,35 +1,57 @@
 <template>
-  <q-splitter v-model="splitterModel" class="full-width-vw">
-    <template v-slot:before>
-      <div class="q-a-xl no-margin no-padding">
-        <service-details-component
-          :service="selectedService"
-          v-on:on-open-service="
+  <div class="container fit row wrap justify-start items-start content-start">
+    <div class="s-left">
+      <q-tabs v-model="tab" vertical>
+        <q-tab name="dashboard" icon="dashboard" />
+        <q-tab name="services" icon="miscellaneous_services" />
+      </q-tabs>
+    </div>
+    <div class="s-right col-grow">
+      <q-tab-panels v-model="tab">
+        <q-tab-panel name="dashboard">
+          <dashboard-component />
+        </q-tab-panel>
+        <q-tab-panel name="services" style="padding: 0">
+          <q-splitter
+            v-model="splitterModel"
+            class="full-width-vw"
+            separator-style="border: 1px solid white;"
+          >
+            <template v-slot:before>
+              <div class="q-a-xl no-margin no-padding">
+                <service-details-component
+                  :service="selectedService"
+                  v-on:on-open-service="
             (svr: ServiceType) => {
               openService(svr);
             }
           "
-        />
-      </div>
-    </template>
+                />
+              </div>
+            </template>
 
-    <template v-slot:after>
-      <div class="q-a-xl no-margin no-padding">
-        <services-list-component
-          v-on:on-select-service="
+            <template v-slot:after>
+              <div class="q-a-xl no-margin no-padding">
+                <services-list-component
+                  v-on:on-select-service="
             (svr: ServiceType) => {
               selectedService = svr;
             }
           "
-          v-on:on-open-service="
+                  v-on:on-open-service="
             (svr: ServiceType) => {
               openService(svr);
             }
           "
-        />
-      </div>
-    </template>
-  </q-splitter>
+                />
+              </div>
+            </template>
+          </q-splitter>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+
   <dialog id="serviceWindow" ref="serviceWindow" class="shadow-24">
     <header>
       <div class="fit row wrap justify-between items-start content-start">
@@ -57,14 +79,25 @@
   </dialog>
 </template>
 
-<style lang="css">
+<style lang="css" scoped>
+div.s-left {
+  overflow: auto;
+  min-width: 50px;
+  max-width: 50px;
+}
+div.s-right {
+  overflow: hidden;
+  width: calc(100vw - 70px);
+  height: calc(100vh - 100px);
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
 .dialog-title {
   white-space: nowrap;
   overflow: hidden;
   max-width: 355px;
 }
 .full-width-vw {
-  width: 100vw !important;
+  /*width: 100vw !important;*/
 }
 .left {
   border-right: 1px solid rgb(230, 229, 229);
@@ -134,6 +167,8 @@ import { bus } from 'boot/bus';
 import ServicesListComponent from '../components/ServicesListComponent.vue';
 import ServiceDetailsComponent from '../components/ServiceDetailsComponent.vue';
 import ServiceWindowComponent from '../components/service-window/ServiceWindowComponent.vue';
+import DashboardComponent from '../components/dashboard/DashboardComponent.vue';
+
 import { ServiceModel, ServiceType } from './models';
 
 //import { ServiceModel, ServiceType } from './repo/models';
@@ -144,6 +179,7 @@ export default defineComponent({
     ServicesListComponent,
     ServiceDetailsComponent,
     ServiceWindowComponent,
+    DashboardComponent,
   },
   methods: {
     openService(service: ServiceType) {
@@ -183,6 +219,7 @@ export default defineComponent({
       services: ref<Array<ServiceModel>>([]),
       isDialogOpen: isDialogOpen,
       serviceWindow,
+      tab: ref('dashboard'),
     };
   },
 });

q-manui/src/components/ServiceDetailsComponent.vue

@@ -117,7 +117,7 @@
 }
 .container {
   padding: 16px;
-  height: 90vh;
+  height: 88vh;
 }
 .mb-12 {
   margin-bottom: 12px;

q-manui/src/components/ServicesListComponent.vue

@@ -146,11 +146,9 @@
 .grid-style-transition {
   transition: transform 0.28s, background-color 0.28s;
 }
-.grid-cell {
-}
 .my-sticky-header-table {
-  height: 90vh;
-  width: -webkit-fill-available;
+  height: 88vh;
+  width: calc(100vw - 354px);
 }
 .my-sticky-header-table .q-table__top,
 .my-sticky-header-table .q-table__bottom,

q-manui/src/components/dashboard/DCardComponent.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-card flat bordered v-if="$props.loading" class="col-grow q-ma-sm">
+    <q-item>
+      <q-item-section avatar>
+        <q-avatar>
+          <q-skeleton type="QAvatar" size="38px" />
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label class="card-value">
+          <q-skeleton type="text" />
+        </q-item-label>
+        <q-item-label class="card-caption">
+          <q-skeleton type="text" />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-card>
+  <q-card
+    v-if="!$props.loading"
+    flat
+    bordered
+    :class="`${$props.class} col-grow q-ma-sm`"
+    style="height: 73px"
+  >
+    <q-item>
+      <q-item-section avatar>
+        <q-avatar>
+          <q-icon :name="$props.icon" size="42px" />
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label class="card-value">{{ $props.value }}</q-item-label>
+        <q-item-label class="card-caption">{{ $props.caption }}</q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-card>
+</template>
+
+<style lang="css" scoped>
+.card-value {
+  font-size: 28px;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DCardComponent',
+  props: {
+    icon: String,
+    class: String,
+    value: String,
+    caption: String,
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup() {
+    return {};
+  },
+});
+</script>