Add Platform and Strata Details pages. Update tabs in header.

bcgov · Jan 9, 2025 · 7fe1ade · 7fe1ade
1 parent 702b3e5
commit 7fe1ade
Show file tree

Hide file tree

Showing 6 changed files with 340 additions and 168 deletions.
diff --git a/strr-examiner-web/app/components/HostDetailsView.vue b/strr-examiner-web/app/components/HostDetailsView.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{ application: HostApplicationResp }>()
+
+const { header, registration } = props.application
+
+const emit = defineEmits<{
+    approveApplication: [],
+    rejectApplication: []
+}>()
+
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 align-middle text-lg">
+      <strong>
+        {{ header?.applicationNumber }}
+      </strong>
+      <UButton label="View History" variant="link" size="sm" class="mx-2 underline" />
+    </div>
+    <div
+      v-if="registration?.registrationType === ApplicationType.HOST"
+      class="flex flex-row gap-x-5 divide-x text-sm"
+    >
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4">
+          <dt>Status:</dt>
+          <dd>{{ header?.hostStatus }}</dd>
+
+          <dt>Submitted:</dt>
+          <dd>{{ dateToString(header?.applicationDateTime || '') }}</dd>
+
+          <dt>Registration Type:</dt>
+          <dd>{{ registration?.registrationType }}</dd>
+        </dl>
+      </div>
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Unit Address:</dt>
+          <dd class="w-[150px]">
+            {{ displayFullUnitAddress(registration?.unitAddress) }}
+          </dd>
+
+          <dt>Municipality:</dt>
+          <dd>{{ registration?.strRequirements?.organizationNm }}</dd>
+        </dl>
+      </div>
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Host Address:</dt>
+          <dd class="w-[150px]">
+            {{ displayFullAddress(registration?.primaryContact.mailingAddress) }}
+          </dd>
+
+          <dt>Address Type:</dt>
+          <dd>Mailing</dd>
+
+          <dt>Same as Unit Address:</dt>
+          <dd>{{ registration?.unitDetails.hostResidence }}</dd>
+
+          <dt>Host Name:</dt>
+          <dd>{{ displayContactFullName(registration?.primaryContact || {}) }}</dd>
+
+          <dt>Host Type:</dt>
+          <dd>{{ registration?.primaryContact.contactType }}</dd>
+
+          <dt>Ownership Type:</dt>
+          <dd>{{ registration?.unitDetails.ownershipType }}</dd>
+        </dl>
+      </div>
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Property Type:</dt>
+          <dd>{{ registration?.unitDetails.propertyType }}</dd>
+
+          <dt>Configuration:</dt>
+          <dd>{{ registration?.unitDetails.rentalUnitSpaceType }}</dd>
+
+          <dt>Rooms:</dt>
+          <dd>{{ registration?.unitDetails.numberOfRoomsForRent }}</dd>
+        </dl>
+      </div>
+    </div>
+
+    <!-- APPLICATION SECTIONS -->
+    <div class="mt-6 divide-y">
+      <ApplicationDetailsSection label="Short-term rentals prohibited" hide-checklist>
+        <div class="flex items-center justify-between">
+          <div class="flex">
+            {{ registration?.strRequirements?.isStrProhibited ? 'Yes' : 'No' }}
+          </div>
+          <div class="flex items-start justify-end gap-x-2">
+            <UButton label="Quick send to supervisor" color="primary" />
+          </div>
+        </div>
+      </ApplicationDetailsSection>
+
+      <ApplicationDetailsSection label="Principal Residence">
+        <div>
+          {{ registration?.strRequirements?.isPrincipalResidenceRequired ?
+            'Required' : 'Not Required' }}
+        </div>
+        <div>
+          <strong>STR Accommodations Act: </strong>
+          {{ registration?.strRequirements?.isStraaExempt ?
+            'Exempt' : 'Not Exempt' }}
+        </div>
+      </ApplicationDetailsSection>
+
+      <ApplicationDetailsSection label="" hide-checkbox hide-checklist class="pt-8">
+        <div class="flex justify-end gap-x-2">
+          <UButton label="Approve" color="primary" @click="emit('approveApplication')" />
+          <UButton label="Reject" color="gray" @click="emit('rejectApplication')" />
+        </div>
+      </ApplicationDetailsSection>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/strr-examiner-web/app/components/PlatformDetailsView.vue b/strr-examiner-web/app/components/PlatformDetailsView.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const props = defineProps<{ application: PlatformApplicationResp }>()
+
+const { header, registration } = props.application
+
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 align-middle text-lg">
+      <strong>
+        {{ header?.applicationNumber }}
+      </strong>
+      <UButton
+        label="View History"
+        variant="link"
+        size="sm"
+        class="mx-2 underline"
+      />
+    </div>
+
+    <div
+      class="flex flex-row gap-x-5 divide-x text-sm"
+    >
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4">
+          <dt>Status:</dt>
+          <dd>{{ header?.hostStatus }}</dd>
+
+          <dt>Submitted:</dt>
+          <dd>{{ dateToString(header?.applicationDateTime || '') }}</dd>
+
+          <dt>Registration Type:</dt>
+          <dd>{{ registration?.registrationType }}</dd>
+        </dl>
+      </div>
+
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Completing Party</dt>
+          <dd />
+
+          <dt>Name:</dt>
+          <dd>{{ displayContactFullName(registration?.completingParty) }}</dd>
+
+          <dt>Email:</dt>
+          <dd>{{ registration?.completingParty.emailAddress }}</dd>
+
+          <dt>Phone:</dt>
+          <dd>{{ registration?.completingParty.phoneNumber }}</dd>
+        </dl>
+      </div>
+
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Platform Representative</dt>
+          <dd />
+
+          <dt>Name:</dt>
+          <dd>{{ displayContactFullName(registration?.platformRepresentatives[0]) }}</dd>
+
+          <dt>Email:</dt>
+          <dd>{{ registration?.completingParty.emailAddress }}</dd>
+        </dl>
+      </div>
+    </div>
+
+    <!-- APPLICATION SECTIONS -->
+    <div class="mt-6 divide-y">
+      <ApplicationDetailsSection
+        label="Business Details"
+        hide-checklist
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex">
+            {{ registration?.businessDetails?.legalName }} |
+            {{ displayFullAddress(registration?.businessDetails.mailingAddress) }}
+          </div>
+        </div>
+      </ApplicationDetailsSection>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/strr-examiner-web/app/components/StrataHotelDetailsView.vue b/strr-examiner-web/app/components/StrataHotelDetailsView.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const props = defineProps<{ application: StrataApplicationResp }>()
+
+const { header, registration } = props.application
+
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 align-middle text-lg">
+      <strong>
+        {{ header?.applicationNumber }}
+      </strong>
+      <UButton
+        label="View History"
+        variant="link"
+        size="sm"
+        class="mx-2 underline"
+      />
+    </div>
+
+    <div
+      class="flex flex-row gap-x-5 divide-x text-sm"
+    >
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4">
+          <dt>Status:</dt>
+          <dd>{{ header?.hostStatus }}</dd>
+
+          <dt>Submitted:</dt>
+          <dd>{{ dateToString(header?.applicationDateTime || '') }}</dd>
+
+          <dt>Registration Type:</dt>
+          <dd>{{ registration?.registrationType }}</dd>
+        </dl>
+      </div>
+
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Completing Party</dt>
+          <dd />
+
+          <dt>Name:</dt>
+          <dd>{{ displayContactFullName(registration?.completingParty) }}</dd>
+
+          <dt>Email:</dt>
+          <dd>{{ registration?.completingParty.emailAddress }}</dd>
+
+          <dt>Phone:</dt>
+          <dd>{{ registration?.completingParty.phoneNumber }}</dd>
+        </dl>
+      </div>
+
+      <div>
+        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
+          <dt>Strata Hotel Representative</dt>
+          <dd />
+
+          <dt>Name:</dt>
+          <dd>{{ displayContactFullName(registration?.strataHotelRepresentatives[0]) }}</dd>
+
+          <dt>Email:</dt>
+          <dd>{{ registration?.completingParty.emailAddress }}</dd>
+        </dl>
+      </div>
+    </div>
+
+    <!-- APPLICATION SECTIONS -->
+    <div class="mt-6 divide-y">
+      <ApplicationDetailsSection
+        label="Business Details"
+        hide-checklist
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex">
+            {{ registration?.businessDetails?.legalName }} |
+            {{ displayFullAddress(registration?.businessDetails.mailingAddress) }}
+          </div>
+        </div>
+      </ApplicationDetailsSection>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/strr-examiner-web/app/layouts/examiner.vue b/strr-examiner-web/app/layouts/examiner.vue
@@ -14,12 +14,10 @@ const { getNextApplication } = useExaminerStore()
 const items = [{
   key: 'dashboard',
   label: 'Dashboard',
-  icon: 'i-mdi-list-box-outline',
   path: RoutesE.DASHBOARD
 }, {
   key: 'examine',
   label: 'Examine',
-  icon: 'i-mdi-file-search-outline',
   path: RoutesE.EXAMINE
 }]
 
@@ -42,9 +40,7 @@ async function onChange (index: number) {
 </script>
 <template>
   <div>
-    <ConnectHeaderWrapper
-      class="py-0"
-    >
+    <ConnectHeaderWrapper>
       <div class="flex items-center justify-between">
         <ConnectHeaderLogoHomeLink />
         <UTabs
@@ -53,15 +49,13 @@ async function onChange (index: number) {
           :ui="{
             wrapper: 'relative h-full space-y-0',
             list: {
-              padding: 'p-0',
-              height: 'h-16',
-              rounded: 'rounded-none',
+              background: '',
               marker: {
-                rounded: 'rounded-none'
+                background: ''
               },
               tab: {
-                rounded: 'rounded-none',
-                height: 'h-full'
+                background: 'bg-transparent',
+                active: 'text-white font-bold bg-transparent underline underline-offset-4',
               }
             }
           }"
@@ -81,7 +75,14 @@ async function onChange (index: number) {
     <ConnectSystemBanner />
 
     <main class="app-inner-container app-body">
-      <slot />
+      <NuxtErrorBoundary>
+        <slot />
+        <template #error="{ error }">
+          <p class="py-10">
+            {{ error }}
+          </p>
+        </template>
+      </NuxtErrorBoundary>
     </main>
     <ConnectFooter />
   </div>

diff --git a/strr-examiner-web/app/pages/dashboard.vue b/strr-examiner-web/app/pages/dashboard.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { RoutesE } from '~/enums/routes'
+import type { HostApplicationResp } from '~/interfaces/host-i'
+import type { ApiBasePlatformApplication, PlatformApplicationResp } from '~/interfaces/platform-i'
+import type { StrataApplicationResp } from '~/interfaces/strata-i'
 import { useExaminerStore } from '~/store/examiner'
 import { displayFullUnitAddress } from '~/utils/format-helper'
 const localePath = useLocalePath()
@@ -69,12 +72,12 @@ onMounted(async () => {
         applicantName = displayContactFullName(hostApplication.primaryContact) || ''
         propertyAddress = displayFullUnitAddress(hostApplication.unitAddress) || '-'
       } else if (registrationType === ApplicationType.PLATFORM) {
-        const platformApplication = application.registration
+        const platformApplication = application.registration as ApiBasePlatformApplication
         applicationType = PLATFORM_TYPE
         applicantName = platformApplication.businessDetails.legalName
         propertyAddress = displayFullAddress(platformApplication.businessDetails.mailingAddress) || '-'
       } else if (registrationType === ApplicationType.STRATA_HOTEL) {
-        const strataApplication = application.registration
+        const strataApplication = application.registration as ApiBaseStrataApplication
         applicationType = STRATA_HOTEL_TYPE
         const { firstName, middleName, lastName } = strataApplication.completingParty
         applicantName = displayContactFullName({ firstName, middleName, lastName }) || '-'