From d1477eaa6a83974c1e2664c6c09e911e343bf82c Mon Sep 17 00:00:00 2001
From: qhanson55 <quinnhanson55@gmail.com>
Date: Fri, 13 Dec 2024 15:09:59 -0800
Subject: [PATCH] Made updates to permit project and tracker pages, as well as
 permit enquiry updates.

---
 ...41209000000_016-permit-complete-status.ts} |   0
 frontend/src/components/common/StatusPill.vue |  35 +-
 .../enquiry/EnquiryIntakeConfirmation.vue     |   4 +-
 .../housing/projects/CreateEnquiryDialog.vue  |   9 +-
 .../components/permit/PermitEnquiryModal.vue  |  11 +-
 frontend/src/router/index.ts                  |   2 +
 .../src/views/housing/project/ProjectView.vue |  54 ++-
 .../src/views/permit/PermitStatusView.vue     | 440 +++++++++++-------
 8 files changed, 359 insertions(+), 196 deletions(-)
 rename app/src/db/migrations/{20241209000000_16-permit-complete-status.ts => 20241209000000_016-permit-complete-status.ts} (100%)

diff --git a/app/src/db/migrations/20241209000000_16-permit-complete-status.ts b/app/src/db/migrations/20241209000000_016-permit-complete-status.ts
similarity index 100%
rename from app/src/db/migrations/20241209000000_16-permit-complete-status.ts
rename to app/src/db/migrations/20241209000000_016-permit-complete-status.ts
diff --git a/frontend/src/components/common/StatusPill.vue b/frontend/src/components/common/StatusPill.vue
index 991f11ce..a32064c0 100644
--- a/frontend/src/components/common/StatusPill.vue
+++ b/frontend/src/components/common/StatusPill.vue
@@ -4,11 +4,29 @@ import { computed } from 'vue';
 import { PermitAuthorizationStatus, PermitAuthorizationStatusDescriptions } from '@/utils/enums/housing';
 
 // Props
-const { authStatus, toolTipDirection = 'right' } = defineProps<{
+const {
+  authStatus,
+  toolTipDirection = 'right',
+  enlarge = false
+} = defineProps<{
   authStatus?: string;
   toolTipDirection?: string;
+  enlarge?: boolean;
 }>();
 
+const defaultDimensions = {
+  fontSize: '0.75rem',
+  height: '1.5rem',
+  iconFontSize: '1rem',
+  lineHeight: '1.5rem'
+};
+const enlargedDimensions = {
+  fontSize: '1rem',
+  height: '2rem',
+  iconFontSize: '1.5rem',
+  lineHeight: '2rem'
+};
+
 const pillState = {
   [PermitAuthorizationStatus.ABANDONED]: {
     badgeClass: 'grey',
@@ -60,6 +78,7 @@ const pillState = {
   }
 };
 
+const dimensions = computed(() => (enlarge ? enlargedDimensions : defaultDimensions));
 const getState = computed(() => {
   return pillState[authStatus as keyof typeof pillState];
 });
@@ -71,6 +90,12 @@ const getState = computed(() => {
       v-tooltip="{ value: getState?.toolTip, modifier: toolTipDirection }"
       class="flex justify-content-center align-items-center auth-indicator"
       :class="[getState?.badgeClass]"
+      :style="{
+        '--font-size': dimensions.fontSize,
+        '--icon-font-size': dimensions.iconFontSize,
+        '--height': dimensions.height,
+        '--line-height': dimensions.lineHeight
+      }"
     >
       <font-awesome-icon
         v-if="getState?.iconString"
@@ -88,9 +113,9 @@ const getState = computed(() => {
   border-radius: 2px;
   border-style: solid;
   border-width: 0.1rem;
-  font-size: 0.75rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
+  font-size: var(--font-size);
+  height: var(--height);
+  line-height: var(--line-height);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   cursor: default;
@@ -102,7 +127,7 @@ const getState = computed(() => {
 }
 
 .icon-detail {
-  font-size: 1rem;
+  font-size: var(--icon-font-height);
   margin-right: 0.5rem;
 }
 
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
index 0233b070..1f2afd66 100644
--- a/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
+++ b/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
@@ -27,8 +27,8 @@ const {
     </Message>
     <h3>Confirmation ID: {{ assignedActivityId }}</h3>
     <div>
-      A Housing Navigator will review your submission and contact you. Please check your email for the confirmation
-      email and keep the confirmation ID for future reference.
+      Your submission will be reviewed and you will be contacted by your Housing Navigator in 2 business days. Please
+      check your email for the confirmation email and keep the confirmation ID for future reference.
     </div>
     <div
       v-if="showHomeLink"
diff --git a/frontend/src/components/housing/projects/CreateEnquiryDialog.vue b/frontend/src/components/housing/projects/CreateEnquiryDialog.vue
index 53ed50cc..3502882c 100644
--- a/frontend/src/components/housing/projects/CreateEnquiryDialog.vue
+++ b/frontend/src/components/housing/projects/CreateEnquiryDialog.vue
@@ -7,10 +7,12 @@ import { useSubmissionStore } from '@/store';
 import { formatDate } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
+import type { User } from '@/types';
 
 // Props
-const { confirmationId = '' } = defineProps<{
+const { confirmationId = '', navigator } = defineProps<{
   confirmationId?: string;
+  navigator?: User;
 }>();
 
 // Store
@@ -75,11 +77,14 @@ const handleCloseDialog = () => {
             </div>
           </div>
         </div>
+        <div class="mb-2 mt-4 font-bold">
+          <span class="query-to-nav mt-3">To: {{ navigator?.firstName }} {{ navigator?.lastName }}</span>
+        </div>
         <Textarea
           v-model="enquiryDescription"
           aria-describedby="ask-navigator"
           placeholder="Ask a navigator"
-          class="w-full mt-4"
+          class="w-full"
           maxlength="4000"
           rows="5"
         />
diff --git a/frontend/src/components/permit/PermitEnquiryModal.vue b/frontend/src/components/permit/PermitEnquiryModal.vue
index 29a9cf2e..17c144b8 100644
--- a/frontend/src/components/permit/PermitEnquiryModal.vue
+++ b/frontend/src/components/permit/PermitEnquiryModal.vue
@@ -5,7 +5,7 @@ import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntak
 import { Button, Dialog, Textarea } from '@/lib/primevue';
 import { formatDate } from '@/utils/formatters';
 
-import type { Permit, PermitType } from '@/types';
+import type { Permit, PermitType, User } from '@/types';
 import type { Ref } from 'vue';
 
 // Types
@@ -15,11 +15,13 @@ type CombinedPermit = Permit & PermitType;
 const {
   permit,
   confirmationId = '',
+  navigator,
   updatedBy
 } = defineProps<{
   permit: CombinedPermit | undefined;
   confirmationId?: string;
-  updatedBy?: string;
+  navigator: User | undefined;
+  updatedBy: string | undefined;
 }>();
 
 // State
@@ -37,7 +39,7 @@ const handleCloseDialog = () => {
 
 const onSubmitEnquiry = () => {
   if (enquiryDescription.value) {
-    const enquiryMessage = enquiryDescription.value + `\n\nRe: ${permit?.name} \nTracking ID: ${permit?.trackingId}`;
+    const enquiryMessage = `Re: ${permit?.name} \nTracking ID: ${permit?.trackingId} \n\n` + enquiryDescription.value;
     emits('onSumbitEnquiry', enquiryMessage);
   }
 };
@@ -116,6 +118,9 @@ const onSubmitEnquiry = () => {
             <div class="font-bold">{{ permit?.agency }}</div>
           </div>
         </div>
+        <div class="mb-2 mt-4 font-bold">
+          <span class="query-to-nav mt-3">To: {{ navigator?.firstName }} {{ navigator?.lastName }}</span>
+        </div>
         <Textarea
           v-model="enquiryDescription"
           aria-describedby="ask-navigator"
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0abfe12b..31425679 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -275,6 +275,8 @@ export default function getRouter() {
           }, 500);
         });
       }
+
+      return { top: 0 };
     }
   });
 
diff --git a/frontend/src/views/housing/project/ProjectView.vue b/frontend/src/views/housing/project/ProjectView.vue
index c1f9b0e3..1f0b1ede 100644
--- a/frontend/src/views/housing/project/ProjectView.vue
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -5,12 +5,13 @@ import { useRouter } from 'vue-router';
 
 import Breadcrumb from '@/components/common/Breadcrumb.vue';
 import CreateEnquiryDialog from '@/components/housing/projects/CreateEnquiryDialog.vue';
-// import ProjectPermitModal from '@/components/housing/projects/ProjectPermitModal.vue';
 import StatusPill from '@/components/common/StatusPill.vue';
 import { Accordion, AccordionTab, Button, Card, Divider, useToast } from '@/lib/primevue';
+import { useAuthNStore, useConfigStore } from '@/store';
 import { BasicResponse, RouteName } from '@/utils/enums/application';
 import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
+import { confirmationTemplateEnquiry } from '@/utils/templates';
 
 import { enquiryService, permitService, submissionService, userService } from '@/services';
 import { useSubmissionStore, useTypeStore } from '@/store';
@@ -40,6 +41,8 @@ const breadcrumbHome: MenuItem = { label: 'Housing', route: RouteName.HOUSING };
 
 // Store
 const submissionStore = useSubmissionStore();
+const { getConfig } = storeToRefs(useConfigStore());
+const { getProfile } = storeToRefs(useAuthNStore());
 const { getPermits, getSubmission } = storeToRefs(submissionStore);
 
 const typeStore = useTypeStore();
@@ -87,6 +90,31 @@ const permitsSubmitted: ComputedRef<Array<CombinedPermit>> = computed(() => {
 const router = useRouter();
 const toast = useToast();
 
+async function emailConfirmation(activityId: string, enquiryId: string, enquiryDescription: string) {
+  const configCC = getConfig.value.ches?.submission?.cc;
+  const user = getProfile;
+
+  const body = confirmationTemplateEnquiry({
+    '{{ contactName }}': user.value?.name,
+    '{{ activityId }}': activityId,
+    '{{ enquiryDescription }}': enquiryDescription,
+    '{{ enquiryId }}': enquiryId
+  });
+  let applicantEmail = user.value?.email;
+
+  if (applicantEmail) {
+    let emailData = {
+      from: configCC,
+      to: [applicantEmail],
+      cc: configCC,
+      subject: 'Confirmation of Submission', // eslint-disable-line quotes
+      bodyType: 'html',
+      body: body
+    };
+    await submissionService.emailConfirmation(emailData);
+  }
+}
+
 function permitBusinessSortFcn(a: CombinedPermit, b: CombinedPermit) {
   return a.businessDomain > b.businessDomain ? 1 : -1;
 }
@@ -154,6 +182,11 @@ async function handleEnquirySubmit(enquiryDescription: string = '') {
   try {
     const response = await enquiryService.createEnquiry(enquiryData);
     enquiryConfirmationId.value = response?.data?.activityId ? response.data.activityId : '';
+
+    // Send confirmation email
+    if (enquiryConfirmationId.value) {
+      emailConfirmation(response.data.activityId, response.data.enquiryId, enquiryDescription);
+    }
   } catch (e: any) {
     toast.error('Failed to submit enquiry', e);
   }
@@ -197,7 +230,12 @@ onMounted(async () => {
     v-if="!loading && getSubmission"
     class="app-primary-color"
   >
-    <div class="mt-7 mb-2 flex justify-content-between align-items-center">
+    <div class="disclaimer-block p-5 mt-5">
+      Based on the information you provided, the following permits are recommended. Please note, that this information
+      is for guidance purposes only and is intended to help you prepare a complete application. Recommendations may be
+      updated as we review your project or receive further details.
+    </div>
+    <div class="mt-8 mb-2 flex justify-content-between align-items-center">
       <h1
         class="m-0 cursor-pointer hover:underline"
         @click="
@@ -231,12 +269,12 @@ onMounted(async () => {
       </span>
       <span v-else>Navigator: -</span>
     </div>
-    <div><h3 class="mb-5">Required permits</h3></div>
+    <div><h3 class="mb-5">Recommended permits</h3></div>
     <div
       v-if="!permitsNeeded?.length"
       class="empty-block p-5 mb-2"
     >
-      We will update the necessary permits here as the project progresses. You may see this message while we are
+      We will update the recommended permits here as the project progresses. You may see this message while we are
       investigating or if no application is needed at this time.
     </div>
     <Card
@@ -330,6 +368,7 @@ onMounted(async () => {
     <CreateEnquiryDialog
       v-model:visible="enquiryModalVisible"
       dismissable-mask
+      :navigator="assignee"
       :confirmation-id="enquiryConfirmationId"
       @on-hide="handleDialogClose"
       @on-sumbit-enquiry="handleEnquirySubmit"
@@ -346,6 +385,11 @@ a {
   text-decoration: underline;
 }
 
+.disclaimer-block {
+  outline: solid 1px $app-grey;
+  border-radius: 8px;
+}
+
 .ellipsis-icon {
   cursor: pointer;
   width: 1.5rem;
@@ -358,7 +402,9 @@ a {
 
 .empty-block {
   background-color: $app-grey;
+  border-radius: 8px;
 }
+
 .header-btn {
   max-height: 2rem;
 }
diff --git a/frontend/src/views/permit/PermitStatusView.vue b/frontend/src/views/permit/PermitStatusView.vue
index 165e8c05..8fc60c57 100644
--- a/frontend/src/views/permit/PermitStatusView.vue
+++ b/frontend/src/views/permit/PermitStatusView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { onBeforeMount, ref } from 'vue';
 
 import Breadcrumb from '@/components/common/Breadcrumb.vue';
 import PermitEnquiryModal from '@/components/permit/PermitEnquiryModal.vue';
 import StatusPill from '@/components/common/StatusPill.vue';
+import { Button, Card, Timeline, useToast } from '@/lib/primevue';
+import { useAuthNStore, useConfigStore } from '@/store';
 import { BasicResponse, RouteName } from '@/utils/enums/application';
 import { PermitAuthorizationStatus, PermitAuthorizationStatusDescriptions, PermitStatus } from '@/utils/enums/housing';
 import { formatDate, formatDateLong } from '@/utils/formatters';
-import { Button, Card, Timeline, useToast } from '@/lib/primevue';
+import { confirmationTemplateEnquiry } from '@/utils/templates';
 
 import { enquiryService, permitService, submissionService, userService } from '@/services';
 
@@ -23,16 +26,22 @@ const { permitId } = defineProps<{ permitId: string }>();
 
 // Constants
 const breadcrumbHome: MenuItem = { label: 'Housing', route: RouteName.HOUSING };
-const circle = (trackerStatus: string) => ({
+const complete = (trackerStatus: string) => ({
   class: 'stage-blue',
-  iconClass: 'circle',
-  iconString: 'fas fa-circle',
+  iconClass: 'complete',
+  iconString: 'fas fa-circle-check',
   text: trackerStatus
 });
-const halfCircle = (trackerStatus: string) => ({
-  class: 'stage-blue',
-  iconClass: 'half-circle',
-  iconString: 'fa fa-circle-half-stroke',
+const crossedCirlce = (trackerStatus: string) => ({
+  class: 'stage-grey',
+  iconClass: 'crossed-circle',
+  iconString: 'fa-solid fa-ban',
+  text: trackerStatus
+});
+const current = (trackerStatus: string) => ({
+  class: 'stage-blue text-current',
+  iconClass: 'current',
+  iconString: 'fa fa-circle-dot',
   text: trackerStatus
 });
 const empty = (trackerStatus: string) => ({
@@ -41,13 +50,17 @@ const empty = (trackerStatus: string) => ({
   iconString: 'fa fa-circle',
   text: trackerStatus
 });
-const crossedCirlce = (trackerStatus: string) => ({
-  class: 'stage-grey',
-  iconClass: 'crossed-circle',
-  iconString: 'fa-solid fa-ban',
+const previous = (trackerStatus: string) => ({
+  class: 'stage-blue-opaque',
+  iconClass: 'previous',
+  iconString: 'fas fa-circle-check',
   text: trackerStatus
 });
 
+// Store
+const { getConfig } = storeToRefs(useConfigStore());
+const { getProfile } = storeToRefs(useAuthNStore());
+
 // State
 const breadcrumbItems: Ref<Array<MenuItem>> = ref([
   { label: 'Applications and Permits', route: RouteName.HOUSING_PROJECTS_LIST },
@@ -59,7 +72,8 @@ const enquiryConfirmationId: Ref<string | undefined> = ref(undefined);
 const enquiryModalVisible: Ref<boolean> = ref(false);
 const permit: Ref<CombinedPermit | undefined> = ref(undefined);
 const submission: Ref<Submission | undefined> = ref(undefined);
-const user: Ref<User | undefined> = ref(undefined);
+const updatedBy: Ref<string | undefined> = ref(undefined);
+const assignedNavigator: Ref<User | undefined> = ref(undefined);
 
 const statusBoxStates = {
   [PermitAuthorizationStatus.ABANDONED]: {
@@ -98,28 +112,28 @@ const statusBoxStates = {
 
 const timelineStages = {
   [PermitStatus.APPLIED]: [
-    halfCircle(PermitStatus.APPLIED),
+    current(PermitStatus.APPLIED),
     empty(PermitStatus.TECHNICAL_REVIEW),
     empty(PermitStatus.PENDING),
     empty(PermitStatus.COMPLETED)
   ],
   [PermitStatus.TECHNICAL_REVIEW]: [
-    circle(PermitStatus.APPLIED),
-    halfCircle(PermitStatus.TECHNICAL_REVIEW),
+    previous(PermitStatus.APPLIED),
+    current(PermitStatus.TECHNICAL_REVIEW),
     empty(PermitStatus.PENDING),
     empty(PermitStatus.COMPLETED)
   ],
   [PermitStatus.PENDING]: [
-    circle(PermitStatus.APPLIED),
-    circle(PermitStatus.TECHNICAL_REVIEW),
-    halfCircle(PermitStatus.PENDING),
+    previous(PermitStatus.APPLIED),
+    previous(PermitStatus.TECHNICAL_REVIEW),
+    current(PermitStatus.PENDING),
     empty(PermitStatus.COMPLETED)
   ],
   [PermitStatus.COMPLETED]: [
-    circle(PermitStatus.APPLIED),
-    circle(PermitStatus.TECHNICAL_REVIEW),
-    circle(PermitStatus.PENDING),
-    circle(PermitStatus.COMPLETED)
+    complete(PermitStatus.APPLIED),
+    complete(PermitStatus.TECHNICAL_REVIEW),
+    complete(PermitStatus.PENDING),
+    complete(PermitStatus.COMPLETED)
   ],
   terminatedStatus: [
     crossedCirlce(PermitStatus.APPLIED),
@@ -138,6 +152,31 @@ const timelineStages = {
 // Actions
 const toast = useToast();
 
+async function emailConfirmation(activityId: string, enquiryId: string, enquiryDescription: string) {
+  const configCC = getConfig.value.ches?.submission?.cc;
+  const user = getProfile;
+
+  const body = confirmationTemplateEnquiry({
+    '{{ contactName }}': user.value?.name,
+    '{{ activityId }}': activityId,
+    '{{ enquiryDescription }}': enquiryDescription,
+    '{{ enquiryId }}': enquiryId
+  });
+  let applicantEmail = user.value?.email;
+
+  if (applicantEmail) {
+    let emailData = {
+      from: configCC,
+      to: [applicantEmail],
+      cc: configCC,
+      subject: 'Confirmation of Submission', // eslint-disable-line quotes
+      bodyType: 'html',
+      body: body
+    };
+    await submissionService.emailConfirmation(emailData);
+  }
+}
+
 function getStatusBoxState(authStatus: string | undefined) {
   return authStatus && authStatus in statusBoxStates
     ? statusBoxStates[authStatus as keyof typeof statusBoxStates]
@@ -182,6 +221,10 @@ async function handleEnquirySubmit(enquiryDescription: string = '') {
   try {
     const response = await enquiryService.createEnquiry(enquiryData);
     enquiryConfirmationId.value = response?.data?.activityId ? response.data.activityId : '';
+
+    if (enquiryConfirmationId.value) {
+      emailConfirmation(response.data.activityId, response.data.enquiryId, enquiryDescription);
+    }
   } catch (e: any) {
     toast.error('Failed to submit enquiry', e);
   }
@@ -208,8 +251,14 @@ onBeforeMount(async () => {
       },
       { label: permit?.value?.name, class: 'font-bold' }
     ];
+    if (submission.value?.assignedUserId) {
+      assignedNavigator.value = (await userService.searchUsers({ userId: [submission.value.assignedUserId] })).data[0];
+    }
 
-    user.value = (await userService.searchUsers({ userId: [permitResponse.data.updatedBy] })).data[0];
+    if (permit.value?.updatedBy) {
+      const updatedByUser = (await userService.searchUsers({ userId: [permitResponse.data.updatedBy] })).data[0];
+      updatedBy.value = updatedByUser.firstName + ' ' + updatedByUser.lastName;
+    }
   } catch {
     toast.error('Unable to load permit or project, please try again later');
   }
@@ -222,104 +271,116 @@ onBeforeMount(async () => {
     :model="breadcrumbItems"
   />
   <div class="permit-status-view">
-    <h1 class="permit-name mb-4">
+    <h1 class="permit-name mt-7">
       {{ permit?.name }}
     </h1>
-    <p class="agency my-0">
-      <b>Agency:</b>
-      {{ permit?.agency }}
-    </p>
-    <Card>
-      <template #content>
-        <div class="permit-info">
-          <div class="info-item">
-            <b>Tracking ID:</b>
-            <span>
-              {{ permit?.trackingId }}
-            </span>
-          </div>
-          <div class="info-item">
-            <b>Submitted date:</b>
-            <span>
-              {{ formatDate(permit?.submittedDate) }}
-            </span>
-          </div>
-          <div class="info-item">
-            <b>Permit ID:</b>
-            <span>
-              {{ permit?.issuedPermitId }}
-            </span>
-          </div>
-          <div class="info-item">
-            <b>Adjudication date:</b>
-            <span>
-              {{ formatDate(permit?.adjudicationDate) }}
-            </span>
-          </div>
+    <div class="permit-info-block">
+      <div class="permit-info">
+        <div class="info-item">
+          <b>Tracking ID:</b>
+          <span>
+            {{ permit?.trackingId }}
+          </span>
         </div>
-      </template>
-    </Card>
-    <div class="status-header">
-      <h4 class="status-header-text">Application status and progress</h4>
+        <div class="info-item">
+          <b>Submitted date:</b>
+          <span>
+            {{ formatDate(permit?.submittedDate) }}
+          </span>
+        </div>
+        <div class="info-item">
+          <b>Permit ID:</b>
+          <span>
+            {{ permit?.issuedPermitId }}
+          </span>
+        </div>
+        <div class="info-item">
+          <b>Adjudication date:</b>
+          <span>
+            {{ formatDate(permit?.adjudicationDate) }}
+          </span>
+        </div>
+      </div>
+      <div class="info-item mt-4">
+        <b>Agency:</b>
+        <span>
+          {{ permit?.agency }}
+        </span>
+      </div>
+    </div>
+    <div class="status-help">
       <font-awesome-icon
         class="status-description-icon"
         icon="fa-circle-question"
         @click="descriptionModalVisible = true"
       />
-    </div>
-    <div class="status-verified-message">
-      <div v-if="permit?.statusLastVerified">
-        <p>This status was last verified on {{ formatDate(permit?.statusLastVerified) }} by {{ user?.fullName }}</p>
-      </div>
-      <div v-else>
-        <p>This status has not yet been verified.</p>
-      </div>
-    </div>
-    <div class="status-tracker">
-      <div
-        class="status-tracker-box py-3 px-4"
-        :class="[getStatusBoxState(permit?.authStatus).boxClass]"
+      <span
+        class="status-description"
+        @click="descriptionModalVisible = true"
       >
-        {{ getStatusBoxState(permit?.authStatus).message }}
-      </div>
-      <div class="status-tracker-pill-timeline mb-2">
-        <div class="status-pill">
-          <h6>Current status</h6>
-          <StatusPill :auth-status="permit?.authStatus" />
+        What does the status mean?
+      </span>
+    </div>
+    <Card>
+      <template #header>
+        <div
+          class="status-tracker-header py-3 px-4"
+          :class="[getStatusBoxState(permit?.authStatus).boxClass]"
+        >
+          <StatusPill
+            :auth-status="permit?.authStatus"
+            :enlarge="true"
+          />
+          {{ getStatusBoxState(permit?.authStatus).message }}
         </div>
-        <div class="status-timeline">
-          <h6>Application progress</h6>
-          <Timeline
-            :value="getTimelineStage(permit?.authStatus, permit?.status)"
-            layout="horizontal"
-          >
-            <template #marker="slotProps">
-              <font-awesome-icon
-                :class="slotProps.item.iconClass"
-                :icon="slotProps.item.iconString"
-              />
-            </template>
-            <template #content="slotProps">
-              <div
-                class="timeline-content"
-                :class="slotProps.item.class"
-              >
-                {{ slotProps.item.text }}
-              </div>
-            </template>
-          </Timeline>
+      </template>
+      <template #content>
+        <div class="application-progress-block">
+          <div class="status-timeline">
+            <h4>Application progress</h4>
+            <Timeline
+              :value="getTimelineStage(permit?.authStatus, permit?.status)"
+              layout="horizontal"
+            >
+              <template #marker="slotProps">
+                <font-awesome-icon
+                  :class="slotProps.item.iconClass"
+                  :icon="slotProps.item.iconString"
+                />
+              </template>
+              <template #content="slotProps">
+                <div
+                  class="timeline-content"
+                  :class="slotProps.item.class"
+                >
+                  {{ slotProps.item.text }}
+                </div>
+              </template>
+            </Timeline>
+          </div>
+          <div class="status-verified-message">
+            <div v-if="updatedBy">
+              <p class="verified-text my-0">
+                This status was last verified on {{ formatDate(permit?.statusLastVerified) }} by {{ updatedBy }}
+              </p>
+            </div>
+            <div v-else>
+              <p class="verified-text my-0">This status has not yet been verified.</p>
+            </div>
+          </div>
         </div>
+      </template>
+    </Card>
+    <div class="updates-section">
+      <h4 class="mb-4">Additional updates</h4>
+      <div class="ask-navigator mb-7">
+        <Button
+          outlined
+          label="Ask my Navigator"
+          @click="() => (enquiryModalVisible = true)"
+        />
+        <p>Contact your Navigator for this project for further updates on this application.</p>
       </div>
-    </div>
-    <div class="updates-section mt-8">
-      <h4 class="mb-4">Updates</h4>
-      <p>For further updates on this application, please contact your Navigator.</p>
-      <Button
-        class="mb-6"
-        outlined
-        label="Ask my Navigator"
-        @click="() => (enquiryModalVisible = true)"
-      />
       <div v-if="permit?.permitNote && permit.permitNote.length > 0">
         <div
           v-for="note in permit.permitNote"
@@ -339,7 +400,8 @@ onBeforeMount(async () => {
     v-model:visible="enquiryModalVisible"
     :permit="permit"
     :confirmation-id="enquiryConfirmationId"
-    :updated-by="user?.fullName"
+    :navigator="assignedNavigator"
+    :updated-by="updatedBy"
     @on-sumbit-enquiry="handleEnquirySubmit"
     @on-hide="handleModalClose"
   />
@@ -350,22 +412,25 @@ onBeforeMount(async () => {
 </template>
 
 <style scoped lang="scss">
-.circle {
+.complete {
   color: #1e5189;
+  font-size: 2.5rem;
   & + :deep(.p-timeline-event-connector) {
     background-color: #1e5189;
   }
 }
 
 .crossed-circle {
-  color: #9f9d9c;
+  color: #e0dedc;
+  font-size: 2.5rem;
   & + :deep(.p-timeline-event-connector) {
-    background-color: #9f9d9c;
+    background-color: #e0dedc;
   }
 }
 
-.half-circle {
+.current {
   color: #1e5189;
+  font-size: 2.5rem;
   & + :deep(.p-timeline-event-connector) {
     background-color: #e0dedc;
   }
@@ -373,25 +438,52 @@ onBeforeMount(async () => {
 
 .empty {
   color: transparent;
-  border: 1px dashed #9f9d9c;
+  border: 0.094rem dashed #9f9d9c;
   border-radius: 50%;
+  font-size: 2.5rem;
   & + :deep(.p-timeline-event-connector) {
     background-color: #e0dedc;
   }
 }
 
+.previous {
+  color: #1e5189;
+  font-size: 2.5rem;
+  opacity: 0.5;
+  & + :deep(.p-timeline-event-connector) {
+    background-color: #1e5189;
+    opacity: 0.5;
+  }
+}
+
 .stage-blue {
   color: #1e5189;
 }
 
+.stage-blue-opaque {
+  color: #1e5189;
+  opacity: 0.5;
+}
+
 .stage-grey {
   color: #9f9d9c;
 }
 
+.application-progress-block {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.ask-navigator {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}
+
 .permit-info {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  gap: 0.5rem;
   align-items: baseline;
 }
 
@@ -402,7 +494,7 @@ onBeforeMount(async () => {
 
 .info-item b {
   white-space: nowrap;
-  margin-right: 5px;
+  margin-right: 0.313rem;
 }
 
 .info-item span {
@@ -414,90 +506,71 @@ onBeforeMount(async () => {
   margin: 0;
 }
 
+.permit-name {
+  margin-bottom: 3.5rem;
+}
+
 .p-card {
   background: #fff;
-  border: 1px solid #efefef;
-  border-radius: 8px;
+  border: 0.063rem solid #efefef;
+  border-radius: 0.25rem;
+  box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.04);
+  position: relative;
+}
+
+.permit-info-block {
+  background: #fff;
+  border: 0.063rem solid #efefef;
+  border-radius: 0.25rem;
   box-shadow: none;
-  margin-top: 40px;
-  margin-bottom: 88px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 :deep(.p-timeline-event-opposite) {
   display: none;
 }
 
-.status-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
+.status-description {
+  color: $app-primary;
+  cursor: pointer;
 }
 
-.status-header-text {
-  margin: 0;
+.status-description:hover {
+  text-decoration: underline;
 }
 
 .status-description-icon {
   color: $app-primary;
-  font-size: 1rem;
   cursor: pointer;
 }
 
-.status-tracker-box {
-  border-radius: 4px;
-  border: 1px solid;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.status-tracker-box.green {
-  background: #f6fff8;
-  border-color: #42814a;
-}
-
-.status-tracker-box.yellow {
-  background: #fef1d8;
-  border-color: #f8bb47;
-}
-
-.status-tracker-box.red {
-  background: #f4e1e2;
-  border-color: #ce3e39;
-}
-
-.status-tracker-box.grey {
-  background: #f3f2f1;
-  border-color: #353433;
-}
-
-.status-tracker-pill-timeline {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  gap: 100px;
-}
-
-.status-pill {
+.status-help {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 5rem;
+  margin-bottom: 1rem;
+  align-items: center;
 }
 
 .status-timeline {
-  flex-grow: 1;
-  overflow-x: hidden;
+  margin-bottom: 3.5rem;
 }
 
-.status-pill h6,
-.status-timeline h6 {
-  margin-top: 40px;
+.status-tracker-header {
+  align-items: center;
+  border-radius: 0.25rem;
+  background: #fafafa;
+  box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.04);
+  display: flex;
+  gap: 0.5rem;
 }
 
-.status-verified-message {
-  margin-bottom: 56px;
+.text-current {
+  font-weight: 700;
 }
 
 .timeline-content {
@@ -505,9 +578,16 @@ onBeforeMount(async () => {
   word-break: keep-all;
 }
 
-h6 {
-  color: $app-primary;
-  font-size: 16px;
-  margin-bottom: 22px;
+.updates-section {
+  border-radius: 0.25rem;
+  background: #fafafa;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 3.5rem;
+  padding-bottom: 4rem;
+}
+
+.verified-text {
+  color: #606060;
 }
 </style>