Merge pull request #413 from dimak1/examiner-dashboard

Examiner Dashboard Updates

strr-examiner-web/app/app.config.ts

@@ -1,8 +1,44 @@
+import { RoutesE } from '~/enums/routes'
+
 export default defineAppConfig({
+  connect: {
+    core: {
+      login: {
+        redirectPath: '',
+        idps: () => ['idir']
+      },
+      header: {
+        options: {
+          localeSelect: false,
+          unauthenticated: {
+            whatsNew: false,
+            loginMenu: false,
+            createAccount: false
+          },
+          authenticated: {
+            notifications: true,
+            accountOptionsMenu: true
+          }
+        }
+      },
+      plugin: {
+        authApi: {
+          errorRedirect: {
+            401: '/auth/login'
+          }
+        },
+        payApi: {
+          errorRedirect: {
+            401: '/auth/login'
+          }
+        }
+      }
+    }
+  },
   strrBaseLayer: {
     page: {
       login: {
-        redirectPath: '/dashboard',
+        redirectPath: RoutesE.DASHBOARD,
         options: {
           createAccount: false,
           idps: () => ['idir'] // function required to overwrite default value, will merge if no function

strr-examiner-web/app/enums/routes.ts

@@ -0,0 +1,4 @@
+export enum RoutesE {
+    DASHBOARD = '/dashboard',
+    EXAMINE = '/examine'
+  }

strr-examiner-web/app/layouts/examiner.vue

@@ -1,37 +1,50 @@
 <script setup lang="ts">
+import { RoutesE } from '~/enums/routes'
 import { useExaminerStore } from '~/store/examiner'
 
 const { isAuthenticated } = useKeycloak()
 const headerOptions = useAppConfig().connect.core.header.options
 provide(headerOptionsSymbol, headerOptions)
 const localePath = useLocalePath()
+const { loading } = storeToRefs(useConnectDetailsHeaderStore())
+const route = useRoute()
 
 const { getNextApplication } = useExaminerStore()
 
 const items = [{
   key: 'dashboard',
   label: 'Dashboard',
   icon: 'i-mdi-list-box-outline',
-  path: '/dashboard'
+  path: RoutesE.DASHBOARD
 }, {
   key: 'examine',
   label: 'Examine',
   icon: 'i-mdi-file-search-outline',
-  path: '/dashboard'
+  path: RoutesE.EXAMINE
 }]
 
+const activeTab = computed(() => route.path.includes(RoutesE.EXAMINE) ? 1 : 0)
+
 async function onChange (index: number) {
+  loading.value = true
   const item = items[index]
 
-  const nextApp = await getNextApplication()
-  const navigateToPath = index === 0 ? item.path : `${item?.path}/${nextApp}`
+  let navigateToPath = item.path as string
+
+  if (item.path.includes(RoutesE.EXAMINE)) {
+    const nextApp = await getNextApplication()
+    navigateToPath = `${item?.path}/${nextApp}`
+  }
+
   return navigateTo(localePath(navigateToPath))
 }
 
 </script>
 <template>
   <div>
-    <ConnectHeaderWrapper>
+    <ConnectHeaderWrapper
+      class="py-0"
+    >
       <div class="flex items-center justify-between">
         <ConnectHeaderLogoHomeLink />
         <UTabs
@@ -41,14 +54,18 @@ async function onChange (index: number) {
             wrapper: 'relative h-full space-y-0',
             list: {
               padding: 'p-0',
-              height: 'h-14',
+              height: 'h-16',
               rounded: 'rounded-none',
+              marker: {
+                rounded: 'rounded-none'
+              },
               tab: {
                 rounded: 'rounded-none',
                 height: 'h-full'
               }
             }
           }"
+          :model-value="activeTab"
           @change="onChange"
         />
         <ClientOnly>

strr-examiner-web/app/pages/dashboard.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { RoutesE } from '~/enums/routes'
+import { useExaminerStore } from '~/store/examiner'
+import { displayFullUnitAddress } from '~/utils/format-helper'
+const localePath = useLocalePath()
+const { t } = useI18n()
+const { loading } = storeToRefs(useConnectDetailsHeaderStore())
+
+useHead({
+  title: t('page.dashboardList.title')
+})
+
+definePageMeta({
+  layout: 'examiner',
+  middleware: ['auth', 'require-account']
+})
+
+const HOST_TYPE = 'Host'
+const PROPERTY_MANAGER_TYPE = 'Property Manager'
+const STRATA_HOTEL_TYPE = 'Strata Hotel'
+const PLATFORM_TYPE = 'Platform'
+
+const applications = ref()
+const mappedApplications = ref()
+
+const columns = [
+  { key: 'applicationNumber', label: 'Application Number', sortable: false },
+  { key: 'registrationNumber', label: 'Registration Number', sortable: false },
+  { key: 'registrationType', label: 'Type', sortable: false },
+  { key: 'propertyAddress', label: 'Address', sortable: false },
+  { key: 'applicantName', label: 'Applicant Name', sortable: false },
+  { key: 'status', label: 'Status', sortable: false },
+  { key: 'submissionDate', label: 'Submission Date', sortable: false },
+  { key: 'actions', label: t('label.actions') }
+]
+
+async function handleItemSelect (row: any) {
+  await navigateTo(localePath(`${RoutesE.EXAMINE}/${row.applicationNumber}`))
+}
+
+onMounted(async () => {
+  loading.value = true
+
+  applications.value = await useExaminerStore().getAllApplications()
+
+  mappedApplications.value = applications.value.map(
+    (application: HostApplicationResp | PlatformApplicationResp | StrataApplicationResp) => {
+      const {
+        header: {
+          applicationNumber,
+          registrationNumber,
+          examinerStatus,
+          status,
+          applicationDateTime
+        },
+        registration: { registrationType }
+      } = application
+
+      let applicationType = ''
+      let applicantName = ''
+      let propertyAddress = ''
+      if (registrationType === ApplicationType.HOST) {
+        const hostApplication: ApiHostApplication = application.registration as ApiHostApplication
+        if (hostApplication.propertyManager && hostApplication.propertyManager.initiatedByPropertyManager) {
+          applicationType = PROPERTY_MANAGER_TYPE
+        } else {
+          applicationType = HOST_TYPE
+        }
+        applicantName = displayContactFullName(hostApplication.primaryContact) || ''
+        propertyAddress = displayFullUnitAddress(hostApplication.unitAddress) || '-'
+      } else if (registrationType === ApplicationType.PLATFORM) {
+        const platformApplication = application.registration
+        applicationType = PLATFORM_TYPE
+        applicantName = platformApplication.businessDetails.legalName
+        propertyAddress = displayFullAddress(platformApplication.businessDetails.mailingAddress) || '-'
+      } else if (registrationType === ApplicationType.STRATA_HOTEL) {
+        const strataApplication = application.registration
+        applicationType = STRATA_HOTEL_TYPE
+        const { firstName, middleName, lastName } = strataApplication.completingParty
+        applicantName = displayContactFullName({ firstName, middleName, lastName }) || '-'
+        propertyAddress = displayFullAddress(strataApplication.strataHotelDetails.location) || '-'
+      }
+
+      return {
+        applicationNumber,
+        registrationNumber: registrationNumber ?? '-',
+        registrationType: applicationType,
+        propertyAddress,
+        applicantName,
+        status: examinerStatus || status,
+        isPaid: status !== 'DRAFT' && status !== 'PAYMENT_DUE',
+        submissionDate: dateToString(applicationDateTime, 'MMMM d, yyyy')
+      }
+    }
+  )
+
+  loading.value = false
+})
+
+</script>
+<template>
+  <div v-if="loading" class="w-full justify-center p-14">
+    Loading...
+  </div>
+  <div v-else class="space-y-8 py-8 sm:space-y-10 sm:py-10">
+    <div class="bg-white">
+      <UTable :columns="columns" :rows="mappedApplications">
+        <template #actions-data="{ row }">
+          <UButton :label="$t('btn.view')" @click="handleItemSelect(row)" />
+        </template>
+      </UTable>
+    </div>
+  </div>
+</template>

strr-examiner-web/app/pages/dashboard/[applicationId].vue → strr-examiner-web/app/pages/examine/[applicationId].vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import type { ApiHostApplication } from '#build/imports'
 import ApplicationDetailsSection from '~/components/ApplicationDetailsSection.vue'
 import { useExaminerStore } from '~/store/examiner'
 
 const { t } = useI18n()
-const localePath = useLocalePath()
 const route = useRoute()
-const config = useRuntimeConfig().public
 const { loading } = storeToRefs(useConnectDetailsHeaderStore())
 const { getApplication, approveApplication, rejectApplication } = useExaminerStore()
 
@@ -54,19 +51,9 @@ const fetchApplication = async (applicationNumber: string): Promise<void> => {
 onMounted(async () => {
   loading.value = true
 
-  await fetchApplication(route.params.applicationId as string)
-
-  // update breadcrumbs with strata business name
-  setBreadcrumbs([
-    {
-      label: t('label.bcregDash'),
-      to: config.registryHomeURL + 'dashboard',
-      appendAccountId: true,
-      external: true
-    },
-    { label: t('strr.title.dashboard'), to: localePath('/dashboard') },
-    { label: applicationId }
-  ])
+  applicationId = route.params.applicationId as string
+
+  await fetchApplication(applicationId)
 
   loading.value = false
 })