Add /my-cert.../in-progress, .../completed child routes

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/CertificationTabs.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-tabs align-tabs="start" color="links">
+      <v-tab :style="{ 'text-transform': 'none' }" to="in-progress">In Progress ({{ applicationStore.inProgressCount }})</v-tab>
+      <v-tab :style="{ 'text-transform': 'none' }" to="completed">Completed ({{ applicationStore.completedCount }})</v-tab>
+    </v-tabs>
+    <router-view class="mt-4"></router-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { useApplicationStore } from "@/store/application";
+
+export default defineComponent({
+  name: "CertificationTabs",
+  setup() {
+    const applicationStore = useApplicationStore();
+    return { applicationStore };
+  },
+  created() {
+    this.applicationStore.fetchApplications();
+  },
+});
+</script>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Certifications.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <h1>Certifications</h1>
-
     <div v-if="applications" class="content">
       <table>
         <thead>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue

@@ -18,7 +18,7 @@
         <v-list-item
           v-for="item in navigationOptions"
           :key="item.path"
-          :active="item.path === $router.currentRoute.value.path"
+          :active="$router.currentRoute.value.path.includes(item.path)"
           :prepend-icon="item.icon"
           :title="item.name"
           @click="$router.push(item.path)"
@@ -31,33 +31,26 @@
         <v-row>
           <v-col cols="12" md="8" lg="8" xl="8">
             <v-card class="rounded-lg fill-height" flat color="white">
-              <v-card-item>
-                <v-row>
-                  <v-col cols="12">
-                    <h3>Welcome Jane Doe</h3>
-                    <p class="small">Complete and submit your application for certification in early childhood education.</p>
-                  </v-col>
-                  <v-col cols="12">
-                    <v-btn color="primary">Apply Now</v-btn>
-                  </v-col>
-                </v-row>
+              <v-card-item class="ma-4">
+                <h3>Welcome Jane Doe</h3>
+                <p class="small">Complete and submit your application for certification in early childhood education.</p>
               </v-card-item>
+              <v-card-actions class="ma-4">
+                <v-btn variant="flat" rounded="lg" color="primary">Apply Now</v-btn>
+              </v-card-actions>
             </v-card>
           </v-col>
           <v-col cols="12" md="4" lg="4" xl="4">
             <v-card class="rounded-lg fill-height" flat color="white">
-              <v-card-item>
-                <v-row>
-                  <v-col cols="12">
-                    <p class="small">
-                      Not sure which certificate to apply for? Fill out a quick self-assessment to see your certification options​​​​​​​.
-                    </p> </v-col
-                  ><v-col cols="12"> <v-btn color="warning">Check Elegibility</v-btn></v-col>
-                </v-row>
+              <v-card-item class="ma-4">
+                <p class="small">Not sure which certificate to apply for? Fill out a quick self-assessment to see your certification options.</p>
               </v-card-item>
+              <v-card-actions class="ma-4">
+                <v-btn variant="flat" rounded="lg" color="warning">Check Elegibility</v-btn>
+              </v-card-actions>
             </v-card>
           </v-col>
-          <v-col cols="12" class="order-first order-md-last order-lg-last order-xl-last">
+          <v-col cols="12" class="order-first order-lg-last order-xl-last">
             <v-card class="rounded-lg" flat color="white"
               ><v-card-item> <router-view></router-view> </v-card-item></v-card
           ></v-col>
@@ -81,7 +74,6 @@ export default defineComponent({
       { name: "Profile", path: "/profile", icon: "mdi-account-edit" },
     ],
     drawer: null as boolean | null | undefined,
-    selected: "my-certifications",
   }),
   methods: {
     formatPhoneNumber,

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts

@@ -17,7 +17,18 @@ const router = createRouter({
         },
         {
           path: "my-certifications",
-          component: () => import("./components/Certifications.vue"),
+          redirect: "/my-certifications/in-progress",
+          component: () => import("./components/CertificationTabs.vue"),
+          children: [
+            {
+              path: "in-progress",
+              component: () => import("./components/Certifications.vue"),
+            },
+            {
+              path: "completed",
+              component: () => import("./components/Certifications.vue"),
+            },
+          ],
         },
         {
           path: "messages",

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/application.ts

@@ -11,6 +11,14 @@ export const useApplicationStore = defineStore("application", {
   state: (): ApplicationState => ({
     applications: [],
   }),
+  getters: {
+    inProgressCount(state): number {
+      return state.applications?.length ?? 0;
+    },
+    completedCount(): number {
+      return 0;
+    },
+  },
   actions: {
     async fetchApplications() {
       this.applications = await getApplications();