Add dashboard overview

Author: MohamedElmdary

frontend/kubecloud-v2/pages/dashboard/index.vue

@@ -1,20 +1,25 @@
 <template>
   <div>
-    <h1>Dashboard Overview {{ isLoading }}</h1>
-
-    <pre>
-      {{ balance }}
-    </pre>
-
-    <p>
-      spent balance:
-      {{ spent }}
-    </p>
+    <div class="mb-8">
+      <h1 class="text-h5 font-weight-bold">
+        Dashboard Overview
+      </h1>
+      <p class="text-body-2 mt-1 opacity-70">
+        Your Mycelium Cloud platform at a glance
+      </p>
 
-    <p>
-      clusters Count:
-      {{ deploymentsCount }}
-    </p>
+      <v-row class="mt-4">
+        <v-col
+          v-for="stat in stats"
+          :key="stat.id"
+          cols="12"
+          md="6"
+          lg="4"
+        >
+          <StatsCard v-bind="stat" />
+        </v-col>
+      </v-row>
+    </div>
 
     <div>
       <p class="text-h6 font-weight-bold mb-4">
@@ -71,20 +76,46 @@ import type { ModelsInvoice } from "~/generated/api"
 
 const api = useApi()
 
-const { state: balance, isLoading } = useAsyncState(async () => {
+const { state: balance } = useAsyncState(async () => {
   const { data } = await api.users.getUserBalance()
-  return data
-}, null)
+  return toPrecision(data.data?.balance_usd ?? 0, 2)
+}, 0)
 
 const { state: spent } = useAsyncState(async () => {
   const { data } = await api.invoices.getInvoices()
   const { invoices } = data.data as unknown as { invoices: ModelsInvoice[] }
   const total = invoices.reduce((a, b) => a + (b.total ?? 0) * 1000, 0) ?? 0
   return toPrecision(total / 1000, 2)
-}, null)
+}, 0)
 
 const { state: deploymentsCount } = useAsyncState(async () => {
   const { data } = await api.deployments.deploymentsGet()
   return data.data?.count ?? 0
 }, 0)
+
+const stats = computed<StatsResource[]>(() => {
+  return [
+    {
+      id: "clusters",
+      title: "Active Clusters",
+      icon: "mdi-server",
+      color: "#359EFF",
+      value: deploymentsCount.value,
+    },
+    {
+      id: "balance",
+      title: "Balance",
+      icon: "mdi-wallet-bifold",
+      color: "#607AFB",
+      value: `$${balance.value}`,
+    },
+    {
+      id: "spent",
+      title: "Total Spent",
+      icon: "mdi-currency-usd",
+      color: "#39E079",
+      value: `$${spent.value}`,
+    },
+  ]
+})
 </script>