create dashboard

src/main.ts

@@ -13,6 +13,7 @@ import VueSweetalert2 from 'vue-sweetalert2'
 import 'sweetalert2/dist/sweetalert2.min.css'
 
 import VueApexCharts from 'vue3-apexcharts'
+
 const app = createApp(App)
 
 app.use(createPinia())

src/router/index.ts

@@ -21,7 +21,13 @@ const router = createRouter({
           path: '/token',
           name: 'token',
           component: () => import('../views/pages/auth/TokenPage.vue')
-        }
+        },
+        {
+          path: '/user_blocked',
+          name: 'user_blocked',
+          component: () => import('../views/pages/auth/UserBlockedPage.vue')
+        },
+
       ]
     },
     {
@@ -75,6 +81,9 @@ const router = createRouter({
 
 
         },
+
+
+
 
 
       ]

src/views/pages/admin/AdminPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {  ref } from 'vue'
+import {  onMounted, ref } from 'vue'
 import NavBar from './components/NavBar.vue'
 import HeaderNav from './components/HeaderNav.vue'
 import { getUserData } from '@/helper/auth'
@@ -28,6 +28,24 @@ async function logout() {
     showError((error as Error).message)
   }
 }
+
+async function tryLogoutUser(){
+
+  try {
+    await makeHttpReq<{ userId: undefined }, { message: string }>('logout', 'POST', {
+      userId: undefined
+    })
+  } catch (error) {
+    showError((error as Error).message)
+    
+  }
+}
+
+onMounted(async()=>{
+
+  await tryLogoutUser()
+
+})
 </script>
 
 <template>

src/views/pages/admin/dashboard/DashbaordPage.vue

@@ -1,6 +1,46 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import ApexDonut from './components/ApexDonut.vue';
+import { makeHttpReq } from '@/http/makeHttpReq';
+import { showError } from '@/helper/toastnotification';
+
+
+type ResponseType = Array<number> 
+  
+    const loading = ref(false)
+    const serverData = ref<ResponseType>([] as ResponseType)
+  
+    async function getChartData() {
+      try {
+       
+        loading.value = true
+        const data = await makeHttpReq<undefined, ResponseType>('chartdata', 'GET')
+        serverData.value = data
+        loading.value = false
+      } catch (error) {
+        showError((error as Error).message)
+        loading.value = false
+      }
+    }
+
+
+    onMounted(async()=>{
+      await getChartData()
+    })
+</script>
 
 <template>
   <div class="container">
     <h1>Dashboard</h1>
+
+    <div class="row">
+      <div class="col-md-4">
+        <div v-if="serverData.length>0">
+          <ApexDonut :data="serverData"/>
+        </div>
+
+      </div>
+    </div>
+
   </div>
 </template>

src/views/pages/admin/dashboard/components/ApexDonut.vue

@@ -0,0 +1,57 @@
+
+<template>
+    <apexchart
+      height="155"
+      type="donut"
+      :options="options"
+      :series="series"
+    ></apexchart>
+  </template>
+
+  <script lang="ts">
+  import { defineComponent } from 'vue';
+  
+  export default defineComponent({
+    name: 'ApexDonut',
+    props: {
+      data: { type: Array, required: true },
+    },
+    data() {
+      return {
+        options: {
+          title: {
+            text: '',
+            align: 'left',
+          },
+          chart: {
+            id: 'apex-donut',
+          },
+
+          states: {
+              hover: {
+                filter: 'none'
+              }
+            },
+          theme: {
+              palette: 'palette2'
+            },
+
+        labels: ['Income','Expenses'],
+          colors: [ ],
+          markers: {
+            size: 5,
+            hover: {
+              sizeOffset: 6,
+            },
+          },
+        //   xaxis: {
+        //     categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
+        //   },
+        },
+        series: this.$props.data,
+      
+      };
+    },
+  });
+  </script>
+

src/views/pages/auth/TokenPage.vue

@@ -59,8 +59,9 @@ async function getAccessTokenAndRefreshToken() {
       input
     )
     ])
-  
-    setUserData({
+
+    if(userAccount?.account_status==='Active'){
+      setUserData({
       user: {
         name:user?.name,
         email: user?.email,
@@ -80,6 +81,14 @@ async function getAccessTokenAndRefreshToken() {
     })
 
     window.location.href = '/dashboard'
+    }else{
+      window.location.href = '/user_blocked'
+    }
+      
+   
+ 
+
+    
   } catch (error) {
     showError((error as Error).message)
   }

src/views/pages/auth/UserBlockedPage.vue

@@ -0,0 +1,15 @@
+<template>
+     <br>
+    <br>
+    <br>
+    <div align="center">
+
+        Your account has been blocked, please contact admin : <a>[email protected]</a>
+
+        <br>
+        <br>
+        <br>
+        <a href="/">Go to the login page</a>
+    </div>
+
+</template>