seperated the credit and usage page

Author: varsha766

src/App.vue

@@ -560,7 +560,11 @@ export default {
               title: "Credential",
               icon: "fa fa-certificate",
             })
-
+            menu.push({
+              href: "/studio/ssi/usage/" + this.getSelectedService.appId,
+              title: "Usages",
+              icon: "fa fa-chart-bar",
+                      })
 
             menu.push({
               href: "/studio/ssi/credit/" + this.getSelectedService.appId,

src/router.js

@@ -12,6 +12,7 @@ const Credential = () => import('./views/playground/Sessions.vue')
 const CredentialDetails = () => import('./views/playground/SessionsDetails.vue')
 const DIDs = () => import('./views/playground/DID.vue')
 const SSIDashboardCredit = () => import('./views/playground/SSIDashboardCredit.vue')
+const SSIDashboardUsage = () => import('./views/playground/SSIDashboardUsages.vue')
 const KYCCreditDashboard = () => import('./views/playground/KYCDashboardCredit.vue')
 const UsageS = () => import('./views/playground/Usage.vue')
 const OnChainKycSystems = () => import('./views/playground/OnChainKycSystems.vue')
@@ -125,6 +126,15 @@ const router = new Router({
         title: `${config.app.name} - SSI Credit`
       }
     },
+    {
+      path: '/studio/ssi/usage/:appId',
+      name: 'Usage',
+      component: SSIDashboardUsage,
+      meta: {
+        requiresAuth: true,
+        title: `${config.app.name} - Usages`
+      }
+    },
     {
       path: '/studio/onchainkyc/credit/:appId',
       name: 'KYCCredit',

src/views/playground/KYCDashboardCredit.vue

@@ -158,15 +158,26 @@ h5 span {
                     <div class="">
                         <div class="">
                             <p><b>Total Credits</b></p>
-                            <p>
-                                <span style="font-size:xx-large;">
-                                    {{ numberFormat(myKYCCredits.allRemainingCredits) }}
-                                </span> <span style="font-size:larger;">/</span>
-                                <span style="font-size:larger; color: grey">
-                                    {{ numberFormat(myKYCCredits.allAvailableCredits) }}
+                          <p v-if="myKYCCredits.allRemainingCredits === 0 && myKYCCredits.allAvailableCredits === 0">
+                            <span style="font-size: xx-large;">
+                                {{ numberFormat(myKYCCredits.allRemainingCredits) }}
+                            </span>
+                         </p>
+                         <p v-else>
+                            <span style="font-size: xx-large;">
+                                {{ numberFormat(myKYCCredits.allRemainingCredits) }}
+                            </span> 
+                            <span style="font-size: larger;">/</span>
+                            <span style="font-size: larger; color: grey">
+                                {{ numberFormat(myKYCCredits.allAvailableCredits) }}
+                            </span>
+                         </p>
+                            <p v-if="this.timeRemaining==='Expired'">
+                                <span style="font-size:small; color: grey">
+                                    Expired
                                 </span>
                             </p>
-                            <p>
+                             <p v-else>
                                 <span style="font-size:small; color: grey">
                                     Expires In: {{ this.timeRemaining }}
                                 </span>

src/views/playground/SSIDashboardCredit.vue

@@ -185,34 +185,6 @@ h5 span {
             </div>
         </div>
 
-        <!--Usage -->
-        <div class="">
-            <div class="" style="text-align: left">
-                <div class="form-group" style="display:flex">
-                    <h3 style="text-align: left;">Usage</h3>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="didChart"></canvas>
-                </v-card>
-            </div>
-
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="credChart"></canvas>
-                </v-card>
-            </div>
-
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="schemaChart"></canvas>
-                </v-card>
-            </div>
-        </div>
-
         <!-- Credit History -->
         <!--