From c611b39f52469e599fa61082941b83227264e078 Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:26:03 +0530
Subject: [PATCH] feat: introducing metrics to admin dashboard homepage (#47)

---
 .../hoppscotch-sh-admin/src/components.d.ts   | 15 ++++
 .../backend/gql/queries/Metrics.graphql       |  8 ++
 .../src/pages/dashboard.vue                   | 73 +++++++++++++------
 3 files changed, 72 insertions(+), 24 deletions(-)
 create mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Metrics.graphql

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 963c86ccd..66d312765 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -28,6 +28,21 @@ declare module '@vue/runtime-core' {
     IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
     IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideBell: typeof import('~icons/lucide/bell')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideFolderTree: typeof import('~icons/lucide/folder-tree')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
+    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
+    IconLucideSettings: typeof import('~icons/lucide/settings')['default']
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Metrics.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Metrics.graphql
new file mode 100644
index 000000000..b75020167
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Metrics.graphql
@@ -0,0 +1,8 @@
+query Metrics {
+  admin {
+    usersCount
+    teamsCount
+    teamRequestsCount
+    teamCollectionsCount
+  }
+}
diff --git a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
index fa7b6c548..af9bbba75 100644
--- a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
@@ -2,62 +2,87 @@
   <div class="sm:px-6 p-4">
     <h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>
 
-    <div class="mt-4">
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div v-if="fetching" class="flex justify-center">
+      <HoppSmartSpinner />
+    </div>
+    <div v-else-if="error">
+      <p class="text-xl">No Metrics Found..</p>
+    </div>
+
+    <div v-else class="mt-4">
+      <div class="grid lg:grid-cols-2 gap-6">
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
           >
-            <icon-lucide-user-cog class="text-2xl text-emerald-500" />
+            <icon-lucide-user-cog class="text-5xl text-emerald-500" />
 
-            <div class="mx-5">
-              <h4 class="text-2xl font-semibold text-gray-200">1000</h4>
-              <div class="text-gray-400">Total Users</div>
+            <div class="mx-10">
+              <h4 class="text-4xl font-semibold text-gray-200">
+                {{ metrics?.usersCount }}
+              </h4>
+              <div class="text-gray-400 font-bold text-xl">Total Users</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
           >
-            <icon-lucide-users class="text-2xl text-pink-400" />
+            <icon-lucide-users class="text-5xl text-pink-400" />
 
-            <div class="mx-5">
-              <h4 class="text-2xl font-semibold text-gray-200">200</h4>
-              <div class="text-gray-400">Total Teams</div>
+            <div class="mx-10">
+              <h4 class="text-4xl font-semibold text-gray-200">
+                {{ metrics?.teamsCount }}
+              </h4>
+              <div class="text-gray-400 font-bold text-xl">Total Teams</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
           >
-            <icon-lucide-line-chart class="text-2xl text-cyan-400" />
+            <icon-lucide-line-chart class="text-5xl text-cyan-400" />
 
-            <div class="mx-5">
-              <h4 class="text-2xl font-semibold text-gray-200">20</h4>
-              <div class="text-gray-400">Total Requests</div>
+            <div class="mx-10">
+              <h4 class="text-4xl font-semibold text-gray-200">
+                {{ metrics?.teamRequestsCount }}
+              </h4>
+              <div class="text-gray-400 font-bold text-xl">Total Requests</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
           >
-            <icon-lucide-folder-tree class="text-2xl text-orange-400" />
+            <icon-lucide-folder-tree class="text-5xl text-orange-400" />
 
-            <div class="mx-5">
-              <h4 class="text-2xl font-semibold text-gray-200">215</h4>
-              <div class="text-gray-400">Total Collections</div>
+            <div class="mx-10">
+              <h4 class="text-4xl font-semibold text-gray-200">
+                {{ metrics?.teamCollectionsCount }}
+              </h4>
+              <div class="text-gray-400 font-bold text-xl">
+                Total Collections
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="mt-8"></div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useQuery } from '@urql/vue';
+import { MetricsDocument } from '../helpers/backend/graphql';
+
+// Get Metrics Data
+const { fetching, error, data } = useQuery({ query: MetricsDocument });
+const metrics = computed(() => data?.value?.admin);
+</script>