From bb5ffd4ec8b817277e4a2417e5e150b3d65bf83e Mon Sep 17 00:00:00 2001
From: qhanson55 <quinnhanson55@gmail.com>
Date: Thu, 28 Nov 2024 17:31:32 -0800
Subject: [PATCH] Created permit status view to replace the modal

---
 app/src/controllers/permit.ts                 |  14 +
 app/src/db/models/permit.ts                   |   4 +-
 app/src/docs/v1.api-spec.yaml                 |  29 +
 app/src/routes/v1/permit.ts                   |  12 +
 app/src/services/permit.ts                    |   7 +-
 app/src/types/Permit.ts                       |   2 +
 app/src/validators/permit.ts                  |   6 +
 frontend/src/components/common/Breadcrumb.vue |   5 +-
 .../housing/projects/ProjectStatus.vue        | 104 ----
 .../PermitEnquiryModal.vue}                   | 119 ++--
 .../src/components/permit/PermitModal.vue     |  18 +-
 frontend/src/router/index.ts                  |  10 +
 frontend/src/services/permitService.ts        |   8 +
 frontend/src/utils/enums/application.ts       |   1 +
 .../src/views/housing/project/ProjectView.vue | 124 ++---
 .../src/views/permit/PermitStatusView.vue     | 508 ++++++++++++++++++
 16 files changed, 713 insertions(+), 258 deletions(-)
 delete mode 100644 frontend/src/components/housing/projects/ProjectStatus.vue
 rename frontend/src/components/{housing/projects/ProjectPermitModal.vue => permit/PermitEnquiryModal.vue} (55%)
 create mode 100644 frontend/src/views/permit/PermitStatusView.vue

diff --git a/app/src/controllers/permit.ts b/app/src/controllers/permit.ts
index ca173d37..26e2b489 100644
--- a/app/src/controllers/permit.ts
+++ b/app/src/controllers/permit.ts
@@ -33,6 +33,20 @@ const controller = {
     }
   },
 
+  getPermit: async (req: Request<{ permitId: string }>, res: Response, next: NextFunction) => {
+    try {
+      const response = await permitService.getPermit(req.params.permitId);
+
+      if (!response) {
+        return res.status(404).json({ message: 'Permit not found' });
+      }
+
+      res.status(200).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
+  },
+
   getPermitTypes: async (req: Request, res: Response, next: NextFunction) => {
     try {
       const response = await permitService.getPermitTypes();
diff --git a/app/src/db/models/permit.ts b/app/src/db/models/permit.ts
index b570844b..f015ed14 100644
--- a/app/src/db/models/permit.ts
+++ b/app/src/db/models/permit.ts
@@ -1,6 +1,7 @@
 import { Prisma } from '@prisma/client';
 
 import permit_note from './permit_note';
+import permit_type from './permit_type';
 
 import type { Stamps } from '../stamps';
 import type { Permit } from '../../types';
@@ -47,7 +48,8 @@ export default {
       adjudicationDate: input.adjudication_date?.toISOString() ?? null,
       statusLastVerified: input.status_last_verified?.toISOString() ?? null,
       updatedAt: input.updated_at?.toISOString() ?? null,
-      updatedBy: input.updated_by
+      updatedBy: input.updated_by,
+      permitType: permit_type.fromPrismaModel(input.permit_type)
     };
   },
 
diff --git a/app/src/docs/v1.api-spec.yaml b/app/src/docs/v1.api-spec.yaml
index 3df6f921..f9652225 100644
--- a/app/src/docs/v1.api-spec.yaml
+++ b/app/src/docs/v1.api-spec.yaml
@@ -491,6 +491,35 @@ paths:
         default:
           $ref: '#/components/responses/Error'
   /permit/{permitId}:
+    get:
+      summary: Get a permit
+      operationId: getPermit
+      tags:
+        - Permit
+      parameters:
+        - in: path
+          name: permitId
+          required: true
+          schema:
+            type: string
+            description: The ID of the permit to update
+      responses:
+        '200':
+          description: Permit updated successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DB-Permit'
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+        '403':
+          $ref: '#/components/responses/Forbidden'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        "422":
+          $ref: "#/components/responses/UnprocessableEntity"
+        default:
+          $ref: '#/components/responses/Error'
     put:
       summary: Update a permit
       operationId: updatePermit
diff --git a/app/src/routes/v1/permit.ts b/app/src/routes/v1/permit.ts
index a265c42e..2b464924 100644
--- a/app/src/routes/v1/permit.ts
+++ b/app/src/routes/v1/permit.ts
@@ -67,4 +67,16 @@ router.get(
   }
 );
 
+// This is placed at bottom as it conflicts with the /permit/types endpoint
+// Permit get endpoint
+router.get(
+  '/:permitId',
+  hasAuthorization(Resource.PERMIT, Action.READ),
+  hasAccess('permitId'),
+  permitValidator.getPermit,
+  (req: Request<{ permitId: string }>, res: Response, next: NextFunction): void => {
+    permitController.getPermit(req, res, next);
+  }
+);
+
 export default router;
diff --git a/app/src/services/permit.ts b/app/src/services/permit.ts
index 6c0d6612..bb33ba11 100644
--- a/app/src/services/permit.ts
+++ b/app/src/services/permit.ts
@@ -68,7 +68,7 @@ const service = {
    * @function getPermit
    * Get a permit
    * @param {string} permitId Permit ID
-   * @returns {Promise<PermitType[]>} The result of running the findFirst operation
+   * @returns {Promise<Permit>} The result of running the findFirst operation
    */
   getPermit: async (permitId: string) => {
     const result = await prisma.permit.findFirst({
@@ -76,11 +76,12 @@ const service = {
         permit_id: permitId
       },
       include: {
-        permit_type: true
+        permit_type: true,
+        permit_note: { orderBy: { created_at: 'desc' } }
       }
     });
 
-    return result ? permit.fromPrismaModel(result) : null;
+    return result ? permit.fromPrismaModelWithNotes(result) : null;
   },
 
   /**
diff --git a/app/src/types/Permit.ts b/app/src/types/Permit.ts
index 667cd2ee..0867f0a1 100644
--- a/app/src/types/Permit.ts
+++ b/app/src/types/Permit.ts
@@ -1,5 +1,6 @@
 import { IStamps } from '../interfaces/IStamps';
 import { PermitNote } from './PermitNote';
+import { PermitType } from './PermitType';
 
 export type Permit = {
   permitId: string; // Primary Key
@@ -14,4 +15,5 @@ export type Permit = {
   adjudicationDate: string | null;
   statusLastVerified: string | null;
   permitNote?: Array<PermitNote>;
+  permitType?: PermitType;
 } & Partial<IStamps>;
diff --git a/app/src/validators/permit.ts b/app/src/validators/permit.ts
index 861b0396..e87cb4d4 100644
--- a/app/src/validators/permit.ts
+++ b/app/src/validators/permit.ts
@@ -27,6 +27,11 @@ const schema = {
       permitId: uuidv4.required()
     })
   },
+  getPermit: {
+    params: Joi.object({
+      permitId: uuidv4.required()
+    })
+  },
   listPermits: {
     query: Joi.object({
       activityId: Joi.string().min(8).max(8).allow(null),
@@ -47,6 +52,7 @@ const schema = {
 export default {
   createPermit: validate(schema.createPermit),
   deletePermit: validate(schema.deletePermit),
+  getPermit: validate(schema.getPermit),
   listPermits: validate(schema.listPermits),
   updatePermit: validate(schema.updatePermit)
 };
diff --git a/frontend/src/components/common/Breadcrumb.vue b/frontend/src/components/common/Breadcrumb.vue
index 86f5db70..19daaad6 100644
--- a/frontend/src/components/common/Breadcrumb.vue
+++ b/frontend/src/components/common/Breadcrumb.vue
@@ -19,7 +19,10 @@ const { home, model } = defineProps<{
     <template #item="{ item }">
       <router-link
         v-if="item.route"
-        :to="{ name: item.route }"
+        :to="{
+          name: item.route,
+          params: item.params
+        }"
       >
         <span
           class="app-primary-color cursor-pointer hover-underline"
diff --git a/frontend/src/components/housing/projects/ProjectStatus.vue b/frontend/src/components/housing/projects/ProjectStatus.vue
deleted file mode 100644
index eaf1d0d6..00000000
--- a/frontend/src/components/housing/projects/ProjectStatus.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { PermitAuthorizationStatus, PermitTrackerStatus } from '@/utils/enums/housing';
-import { Timeline } from '@/lib/primevue';
-
-// Props
-const { authStatus = PermitAuthorizationStatus.NONE } = defineProps<{
-  authStatus?: string;
-}>();
-
-// Constants
-const checkmark = (trackerStatus: string) => ({
-  class: 'checkmark',
-  iconString: 'fas fa-circle-check',
-  text: trackerStatus
-});
-const exclamation = (trackerStatus: string) => ({
-  class: 'exclamation',
-  iconString: 'fa fa-exclamation-circle',
-  text: trackerStatus
-});
-const empty = (trackerStatus: string) => ({ class: 'empty', iconString: 'fa fa-circle', text: trackerStatus });
-const end = () => ({ class: '', iconString: '', text: '' });
-
-const iconStates = {
-  [PermitAuthorizationStatus.DENIED]: [
-    checkmark(PermitTrackerStatus.SUBMITTED),
-    checkmark(PermitTrackerStatus.IN_REVIEW),
-    exclamation(PermitAuthorizationStatus.DENIED),
-    end()
-  ],
-  [PermitAuthorizationStatus.IN_REVIEW]: [
-    checkmark(PermitTrackerStatus.SUBMITTED),
-    checkmark(PermitTrackerStatus.IN_REVIEW),
-    empty(PermitTrackerStatus.COMPLETED),
-    end()
-  ],
-  [PermitAuthorizationStatus.ISSUED]: [
-    checkmark(PermitTrackerStatus.SUBMITTED),
-    checkmark(PermitTrackerStatus.IN_REVIEW),
-    checkmark(PermitAuthorizationStatus.ISSUED),
-    end()
-  ],
-  [PermitAuthorizationStatus.NONE]: [
-    checkmark(PermitTrackerStatus.SUBMITTED),
-    empty(PermitTrackerStatus.IN_REVIEW),
-    empty(PermitTrackerStatus.COMPLETED),
-    end()
-  ],
-  [PermitAuthorizationStatus.PENDING]: [
-    checkmark(PermitTrackerStatus.SUBMITTED),
-    exclamation(PermitTrackerStatus.PENDING),
-    empty(PermitTrackerStatus.COMPLETED),
-    end()
-  ]
-};
-</script>
-
-<template>
-  <div class="grid m-0 flex flex-column gap-3">
-    <Timeline
-      :value="iconStates[authStatus as keyof typeof iconStates]"
-      layout="horizontal"
-    >
-      <template #marker="slotProps">
-        <font-awesome-icon
-          :class="slotProps.item.class"
-          :icon="slotProps.item.iconString"
-        />
-      </template>
-      <template #content="slotProps">
-        {{ slotProps.item.text }}
-      </template>
-    </Timeline>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.checkmark {
-  color: $app-green;
-  & + :deep(.p-timeline-event-connector) {
-    background-color: $app-green;
-  }
-}
-
-.empty {
-  color: transparent;
-  border: 1px dashed $app-proj-grey-two;
-  border-radius: 50%;
-  & + :deep(.p-timeline-event-connector) {
-    background-color: $app-proj-grey-two;
-  }
-}
-
-.exclamation {
-  color: $app-error;
-  & + :deep(.p-timeline-event-connector) {
-    background-color: $app-error;
-  }
-}
-
-:deep(.p-timeline-event-opposite) {
-  display: none;
-}
-</style>
diff --git a/frontend/src/components/housing/projects/ProjectPermitModal.vue b/frontend/src/components/permit/PermitEnquiryModal.vue
similarity index 55%
rename from frontend/src/components/housing/projects/ProjectPermitModal.vue
rename to frontend/src/components/permit/PermitEnquiryModal.vue
index 8d3de6f7..29a9cf2e 100644
--- a/frontend/src/components/housing/projects/ProjectPermitModal.vue
+++ b/frontend/src/components/permit/PermitEnquiryModal.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import SearchUserNameById from '@/components/common/SearchUserNameById.vue';
 import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntakeConfirmation.vue';
-import ProjectStatus from '@/components/housing/projects/ProjectStatus.vue';
 import { Button, Dialog, Textarea } from '@/lib/primevue';
-import { PermitAuthorizationStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
 
 import type { Permit, PermitType } from '@/types';
@@ -15,15 +12,19 @@ import type { Ref } from 'vue';
 type CombinedPermit = Permit & PermitType;
 
 // Props
-const { permit, confirmationId = '' } = defineProps<{
+const {
+  permit,
+  confirmationId = '',
+  updatedBy
+} = defineProps<{
   permit: CombinedPermit | undefined;
   confirmationId?: string;
+  updatedBy?: string;
 }>();
 
 // State
 const enquiryDescription: Ref<string> = ref('');
-const showEnquiryTextarea: Ref<boolean> = ref(false);
-const visible = defineModel<boolean | undefined>('visible');
+const visible = defineModel<boolean>('visible');
 
 // Actions
 const emits = defineEmits(['onHide', 'onSumbitEnquiry']);
@@ -31,19 +32,14 @@ const emits = defineEmits(['onHide', 'onSumbitEnquiry']);
 const handleCloseDialog = () => {
   emits('onHide');
   enquiryDescription.value = '';
-  showEnquiryTextarea.value = false;
-};
-
-const handleShowEnquiry = () => {
-  if (!enquiryDescription.value) {
-    enquiryDescription.value = `Re: ${permit?.name}\nTracking ID: ${permit?.trackingId}\n`;
-  }
-
-  showEnquiryTextarea.value = true;
+  visible.value = false;
 };
 
 const onSubmitEnquiry = () => {
-  if (enquiryDescription.value) emits('onSumbitEnquiry', enquiryDescription.value);
+  if (enquiryDescription.value) {
+    const enquiryMessage = enquiryDescription.value + `\n\nRe: ${permit?.name} \nTracking ID: ${permit?.trackingId}`;
+    emits('onSumbitEnquiry', enquiryMessage);
+  }
 };
 </script>
 
@@ -56,27 +52,11 @@ const onSubmitEnquiry = () => {
     @hide="handleCloseDialog"
   >
     <template #header>
-      <span class="p-dialog-title">{{ permit?.businessDomain }}: {{ permit?.name }}</span>
+      <span class="p-dialog-title">{{ permit?.name }}</span>
     </template>
     <template #default>
       <div v-if="!confirmationId">
-        <div class="status-card">
-          <ProjectStatus :auth-status="permit?.authStatus" />
-          <div class="mt-3">
-            <span class="mr-2">Status verified date:</span>
-            <span>{{ formatDate(permit?.statusLastVerified) }}</span>
-          </div>
-          <div
-            v-if="permit?.authStatus === PermitAuthorizationStatus.PENDING"
-            class="mt-6"
-          >
-            <div class="font-bold">Pending your action</div>
-            <div class="mt-2">
-              This application is pending your action. Please go to the application system for more details.
-            </div>
-          </div>
-        </div>
-        <div class="grid mt-4">
+        <div class="grid mb-3">
           <div class="col-6 flex">
             <div class="mr-1 permit-label">Tracking ID:</div>
             <div
@@ -114,18 +94,18 @@ const onSubmitEnquiry = () => {
             </div>
           </div>
           <div class="col-6 flex">
-            <div class="mr-1 permit-label">Uploaded by:</div>
-            <div class="font-bold permit-data">
-              <SearchUserNameById
-                :key="permit?.updatedBy"
-                :user-id="permit?.updatedBy"
-              />
+            <div class="mr-1 permit-label">Updated by:</div>
+            <div
+              v-tooltip="{ value: updatedBy }"
+              class="font-bold permit-data"
+            >
+              {{ updatedBy }}
             </div>
           </div>
           <div class="col-6 flex">
             <div class="mr-1 permit-label">Status verified date:</div>
             <div
-              v-tooltip="{ value: formatDate(permit?.adjudicationDate) }"
+              v-tooltip="{ value: formatDate(permit?.statusLastVerified) }"
               class="font-bold permit-data"
             >
               {{ formatDate(permit?.statusLastVerified) }}
@@ -136,40 +116,24 @@ const onSubmitEnquiry = () => {
             <div class="font-bold">{{ permit?.agency }}</div>
           </div>
         </div>
-        <div
-          v-if="showEnquiryTextarea"
-          class="field mt-3"
-        >
-          <Textarea
-            v-model="enquiryDescription"
-            aria-describedby="ask-navigator"
-            placeholder="Ask a navigator"
-            class="w-full"
-            maxlength="4000"
-            rows="5"
-          />
-          <div class="max-w-full text-center mt-5">
-            <Button
-              class="p-button-sm header-btn"
-              label="Submit Enquiry"
-              @click="onSubmitEnquiry"
-            />
-            <Button
-              class="p-button-sm ml-3"
-              outlined
-              label="Cancel"
-              @click="showEnquiryTextarea = !showEnquiryTextarea"
-            />
-          </div>
-        </div>
-        <div
-          v-if="!showEnquiryTextarea"
-          class="max-w-full text-center mt-5"
-        >
+        <Textarea
+          v-model="enquiryDescription"
+          aria-describedby="ask-navigator"
+          class="w-full"
+          maxlength="4000"
+          rows="5"
+        />
+        <div class="max-w-full text-center mt-5">
           <Button
             class="p-button-sm header-btn"
-            label="Ask a Navigator"
-            @click="handleShowEnquiry"
+            label="Submit Enquiry"
+            @click="onSubmitEnquiry"
+          />
+          <Button
+            class="p-button-sm ml-3"
+            outlined
+            label="Cancel"
+            @click="visible = false"
           />
         </div>
       </div>
@@ -202,17 +166,10 @@ const onSubmitEnquiry = () => {
 .permit-data {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .permit-label {
   white-space: pre;
 }
-
-.status-card {
-  padding: 2rem;
-  border-radius: 8px;
-  border: 1px solid $app-proj-white-one;
-  background: $app-proj-white-two;
-  box-shadow: 0px 4px 4px 0px $app-proj-black;
-}
 </style>
diff --git a/frontend/src/components/permit/PermitModal.vue b/frontend/src/components/permit/PermitModal.vue
index 3cfee971..c7656c3f 100644
--- a/frontend/src/components/permit/PermitModal.vue
+++ b/frontend/src/components/permit/PermitModal.vue
@@ -9,7 +9,7 @@ import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue';
 import { permitService } from '@/services';
 import { useSubmissionStore, useTypeStore } from '@/store';
 import { PERMIT_AUTHORIZATION_STATUS_LIST, PERMIT_NEEDED_LIST, PERMIT_STATUS_LIST } from '@/utils/constants/housing';
-import { PermitStatus } from '@/utils/enums/housing';
+import { PermitAuthorizationStatus, PermitStatus } from '@/utils/enums/housing';
 
 import type { DropdownChangeEvent } from 'primevue/dropdown';
 import type { Ref } from 'vue';
@@ -56,7 +56,21 @@ const formSchema = object({
   status: string().required().oneOf(PERMIT_STATUS_LIST).label('Permit state'),
   agency: string().required().label('Agency'),
   businessDomain: string().label('Business domain'),
-  authStatus: string().required().oneOf(PERMIT_AUTHORIZATION_STATUS_LIST).label('Authorization status'),
+  authStatus: string()
+    .required()
+    .oneOf(PERMIT_AUTHORIZATION_STATUS_LIST)
+    .label('Authorization status')
+    .test(
+      'valid-auth-status',
+      'Authorization status can only be "None" if the Permit state is "Pre-submission".',
+      function (value) {
+        const { status } = this.parent;
+        return (
+          (status === PermitStatus.NEW && value === PermitAuthorizationStatus.NONE) ||
+          (status !== PermitStatus.NEW && value !== PermitAuthorizationStatus.NONE)
+        );
+      }
+    ),
   statusLastVerified: date()
     .max(new Date(), 'Status verified date cannot be in the future')
     .nullable()
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index c19ad663..0abfe12b 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -187,6 +187,16 @@ const routes: Array<RouteRecordRaw> = [
                 },
                 name: RouteName.HOUSING_PROJECT,
                 props: createProps
+              },
+              {
+                path: 'permit/:permitId',
+                component: () => import('@/views/permit/PermitStatusView.vue'),
+                beforeEnter: accessHandler,
+                meta: {
+                  access: [NavigationPermission.HOUSING_STATUS_TRACKER]
+                },
+                name: RouteName.HOUSING_PROJECT_PERMIT,
+                props: createProps
               }
             ]
           },
diff --git a/frontend/src/services/permitService.ts b/frontend/src/services/permitService.ts
index d9523eec..5abb460a 100644
--- a/frontend/src/services/permitService.ts
+++ b/frontend/src/services/permitService.ts
@@ -19,6 +19,14 @@ export default {
     return appAxios().delete(`permit/${permitId}`);
   },
 
+  /**
+   * @function getPermit
+   * @returns {Promise} An axios response
+   */
+  getPermit(permitId: string) {
+    return appAxios().get(`permit/${permitId}`);
+  },
+
   /**
    * @function getPermitTypes
    * @returns {Promise} An axios response
diff --git a/frontend/src/utils/enums/application.ts b/frontend/src/utils/enums/application.ts
index 1aee68c9..ee592021 100644
--- a/frontend/src/utils/enums/application.ts
+++ b/frontend/src/utils/enums/application.ts
@@ -65,6 +65,7 @@ export enum RouteName {
   HOUSING_ENQUIRY_INTAKE = 'housing_enquiry_intake',
   HOUSING_GUIDE = 'housing_guide',
   HOUSING_PROJECT = 'housing_project',
+  HOUSING_PROJECT_PERMIT = 'housing_project_permit',
   HOUSING_PROJECTS_LIST = 'housing_project_list',
   HOUSING_SUBMISSION = 'housing_submission',
   HOUSING_SUBMISSION_CONFIRMATION = 'housing_submission_confirmation',
diff --git a/frontend/src/views/housing/project/ProjectView.vue b/frontend/src/views/housing/project/ProjectView.vue
index b5cc1227..d18d32e7 100644
--- a/frontend/src/views/housing/project/ProjectView.vue
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -5,7 +5,7 @@ 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 ProjectPermitModal from '@/components/housing/projects/ProjectPermitModal.vue';
 import { Accordion, AccordionTab, Button, Card, Divider, useToast } from '@/lib/primevue';
 import { BasicResponse, RouteName } from '@/utils/enums/application';
 import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/enums/housing';
@@ -25,6 +25,7 @@ type PermitFilterConfig = {
   permits: Array<Permit>;
   permitStatus?: string;
   permitTypes: Array<PermitType>;
+  submitted?: boolean;
 };
 
 type CombinedPermit = Permit & PermitType;
@@ -53,8 +54,6 @@ const breadcrumbItems: ComputedRef<Array<MenuItem>> = computed(() => [
 const enquiryConfirmationId: Ref<string | undefined> = ref(undefined);
 const enquiryModalVisible: Ref<boolean> = ref(false);
 const loading: Ref<boolean> = ref(true);
-const permitModalVisible: Ref<boolean> = ref(false);
-const selectedPermit: Ref<CombinedPermit | undefined> = ref(undefined);
 
 const permitsNeeded = computed(() => {
   return permitFilter({
@@ -77,18 +76,11 @@ const permitsNotNeeded = computed(() => {
 });
 const permitsSubmitted: ComputedRef<Array<CombinedPermit>> = computed(() => {
   let firstFilter = permitFilter({
-    permitNeeded: PermitNeeded.YES,
-    permitStatus: PermitStatus.APPLIED,
-    permits: getPermits.value,
-    permitTypes: getPermitTypes.value
-  });
-  let secondFilter = permitFilter({
-    permitNeeded: PermitNeeded.YES,
-    permitStatus: PermitStatus.COMPLETED,
+    submitted: true,
     permits: getPermits.value,
     permitTypes: getPermitTypes.value
   });
-  return firstFilter.concat(secondFilter).sort(permitNameSortFcn).sort(permitBusinessSortFcn);
+  return firstFilter.sort(permitNameSortFcn).sort(permitBusinessSortFcn);
 });
 
 // Actions
@@ -104,7 +96,7 @@ function permitNameSortFcn(a: CombinedPermit, b: CombinedPermit) {
 }
 
 function permitFilter(config: PermitFilterConfig) {
-  const { permitNeeded, permits, permitStatus, permitTypes } = config;
+  const { permitNeeded, permits, permitStatus, permitTypes, submitted } = config;
   let returnArray: Array<any> = permits;
 
   if (permitNeeded) {
@@ -121,6 +113,15 @@ function permitFilter(config: PermitFilterConfig) {
     });
   }
 
+  if (submitted) {
+    returnArray = returnArray
+      .filter((item) => item.authStatus !== PermitAuthorizationStatus.NONE && item.status !== PermitStatus.NEW)
+      .map((p) => {
+        const pType = permitTypes.find((pt) => pt.permitTypeId === p?.permitTypeId);
+        if (pType) return { ...p, ...pType };
+      });
+  }
+
   return returnArray.filter((pt) => !!pt) as Array<CombinedPermit>;
 }
 
@@ -178,7 +179,7 @@ onMounted(async () => {
 
   try {
     const activityId = submissionValue.activityId;
-    const permitsValue = (await permitService.listPermits({ activityId })).data;
+    const permitsValue = (await permitService.listPermits({ activityId, includeNotes: true })).data;
     submissionStore.setPermits(permitsValue);
   } catch {
     toast.error('Unable to load permits for this project, please try again later');
@@ -278,66 +279,57 @@ onMounted(async () => {
     >
       You will see your permit applications here once submitted.
     </div>
-    <Card
+    <router-link
       v-for="permit in permitsSubmitted"
       :key="permit.permitId"
-      class="permit-card"
-      @click="
-        () => {
-          permitModalVisible = true;
-          selectedPermit = permit;
-        }
-      "
+      :to="{
+        name: RouteName.HOUSING_PROJECT_PERMIT,
+        params: { permitId: permit.permitId }
+      }"
     >
-      <template #title>
-        <h5 class="m-0 app-primary-color cursor-pointer">{{ permit.businessDomain }}: {{ permit.name }}</h5>
-        <Divider />
-      </template>
-      <template #content>
-        <div class="grid">
-          <div class="col-2">
-            <div :class="['authIndicator', toKebabCase(displayTrackerStatus(permit.authStatus, permit.status))]">
-              {{ displayTrackerStatus(permit.authStatus, permit.status) }}
+      <Card class="permit-card">
+        <template #title>
+          <h5 class="m-0 app-primary-color cursor-pointer">{{ permit.businessDomain }}: {{ permit.name }}</h5>
+          <Divider />
+        </template>
+        <template #content>
+          <div class="grid">
+            <div class="col-2">
+              <div :class="['authIndicator', toKebabCase(displayTrackerStatus(permit.authStatus, permit.status))]">
+                {{ displayTrackerStatus(permit.authStatus, permit.status) }}
+              </div>
             </div>
-          </div>
-          <div
-            v-tooltip="{ value: permit?.statusLastVerified ? formatDate(permit.statusLastVerified) : '' }"
-            class="col-2"
-          >
-            <div class="permit-data">
-              {{ permit?.statusLastVerified ? formatDate(permit.statusLastVerified) : '' }}
+            <div
+              v-tooltip="{ value: permit?.statusLastVerified ? formatDate(permit.statusLastVerified) : '' }"
+              class="col-2"
+            >
+              <div class="permit-data">
+                {{ permit?.statusLastVerified ? formatDate(permit.statusLastVerified) : '' }}
+              </div>
+              <div :class="['sub-label', { 'm-0': permit?.statusLastVerified }]">Last verified date</div>
             </div>
-            <div :class="['sub-label', { 'm-0': permit?.statusLastVerified }]">Last verified date</div>
-          </div>
-          <div
-            v-tooltip="{ value: permit?.trackingId ? permit.trackingId : '' }"
-            class="col-2"
-          >
-            <div class="permit-data">
-              {{ permit?.trackingId ? permit.trackingId : '' }}
+            <div
+              v-tooltip="{ value: permit?.trackingId ? permit.trackingId : '' }"
+              class="col-2"
+            >
+              <div class="permit-data">
+                {{ permit?.trackingId ? permit.trackingId : '' }}
+              </div>
+              <div :class="['sub-label', { 'm-0': permit?.trackingId }]">Tracking ID</div>
             </div>
-            <div :class="['sub-label', { 'm-0': permit?.trackingId }]">Tracking ID</div>
-          </div>
-          <div
-            v-tooltip="{ value: permit?.issuedPermitId ? permit.issuedPermitId : '' }"
-            class="col-2"
-          >
-            <div class="permit-data">
-              {{ permit?.issuedPermitId ? permit.issuedPermitId : '' }}
+            <div
+              v-tooltip="{ value: permit?.issuedPermitId ? permit.issuedPermitId : '' }"
+              class="col-2"
+            >
+              <div class="permit-data">
+                {{ permit?.issuedPermitId ? permit.issuedPermitId : '' }}
+              </div>
+              <div :class="['sub-label', { 'm-0': permit?.issuedPermitId }]">Permit ID</div>
             </div>
-            <div :class="['sub-label', { 'm-0': permit?.issuedPermitId }]">Permit ID</div>
           </div>
-        </div>
-      </template>
-    </Card>
-    <ProjectPermitModal
-      v-model:visible="permitModalVisible"
-      dismissable-mask
-      :confirmation-id="enquiryConfirmationId"
-      :permit="selectedPermit"
-      @on-hide="handleDialogClose"
-      @on-sumbit-enquiry="handleEnquirySubmit"
-    />
+        </template>
+      </Card>
+    </router-link>
     <CreateEnquiryDialog
       v-model:visible="enquiryModalVisible"
       dismissable-mask
diff --git a/frontend/src/views/permit/PermitStatusView.vue b/frontend/src/views/permit/PermitStatusView.vue
new file mode 100644
index 00000000..305a62b6
--- /dev/null
+++ b/frontend/src/views/permit/PermitStatusView.vue
@@ -0,0 +1,508 @@
+<script setup lang="ts">
+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 { 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 { enquiryService, permitService, submissionService, userService } from '@/services';
+
+import type { Ref } from 'vue';
+import type { Permit, PermitType, Submission, User } from '@/types';
+import type { MenuItem } from 'primevue/menuitem';
+
+type CombinedPermit = Permit & PermitType;
+
+// Props
+const { permitId } = defineProps<{ permitId: string }>();
+
+// Constants
+const breadcrumbHome: MenuItem = { label: 'Housing', route: RouteName.HOUSING };
+const circle = (trackerStatus: string) => ({
+  class: 'stage-blue',
+  iconClass: 'circle',
+  iconString: 'fas fa-circle',
+  text: trackerStatus
+});
+const halfCircle = (trackerStatus: string) => ({
+  class: 'stage-blue',
+  iconClass: 'half-circle',
+  iconString: 'fa fa-circle-half-stroke',
+  text: trackerStatus
+});
+const empty = (trackerStatus: string) => ({
+  class: 'stage-grey',
+  iconClass: 'empty',
+  iconString: 'fa fa-circle',
+  text: trackerStatus
+});
+const crossedCirlce = (trackerStatus: string) => ({
+  class: 'stage-grey',
+  iconClass: 'crossed-circle',
+  iconString: 'fa-solid fa-ban',
+  text: trackerStatus
+});
+
+// State
+const breadcrumbItems: Ref<Array<MenuItem>> = ref([
+  { label: 'Applications and Permits', route: RouteName.HOUSING_PROJECTS_LIST },
+  { label: '...', route: undefined },
+  { label: '...', class: 'font-bold' }
+]);
+const descriptionModalVisible: Ref<boolean> = ref(false);
+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 statusBoxStates = {
+  [PermitAuthorizationStatus.ABANDONED]: {
+    boxClass: 'grey',
+    message: PermitAuthorizationStatusDescriptions.ABANDONED
+  },
+  [PermitAuthorizationStatus.CANCELLED]: {
+    boxClass: 'red',
+    message: PermitAuthorizationStatusDescriptions.CANCELLED
+  },
+  [PermitAuthorizationStatus.DENIED]: {
+    boxClass: 'red',
+    message: PermitAuthorizationStatusDescriptions.DENIED
+  },
+  [PermitAuthorizationStatus.ISSUED]: {
+    boxClass: 'green',
+    message: PermitAuthorizationStatusDescriptions.ISSUED
+  },
+  [PermitAuthorizationStatus.IN_REVIEW]: {
+    boxClass: 'green',
+    message: PermitAuthorizationStatusDescriptions.IN_REVIEW
+  },
+  [PermitAuthorizationStatus.NONE]: {
+    boxClass: 'grey',
+    message: PermitAuthorizationStatusDescriptions.NONE
+  },
+  [PermitAuthorizationStatus.PENDING]: {
+    boxClass: 'yellow',
+    message: PermitAuthorizationStatusDescriptions.PENDING
+  },
+  [PermitAuthorizationStatus.WITHDRAWN]: {
+    boxClass: 'grey',
+    message: PermitAuthorizationStatusDescriptions.WITHDRAWN
+  }
+};
+
+const timelineStages = {
+  [PermitStatus.APPLIED]: [
+    halfCircle(PermitStatus.APPLIED),
+    empty(PermitStatus.TECHNICAL_REVIEW),
+    empty(PermitStatus.PENDING),
+    empty(PermitStatus.COMPLETED)
+  ],
+  [PermitStatus.TECHNICAL_REVIEW]: [
+    circle(PermitStatus.APPLIED),
+    halfCircle(PermitStatus.TECHNICAL_REVIEW),
+    empty(PermitStatus.PENDING),
+    empty(PermitStatus.COMPLETED)
+  ],
+  [PermitStatus.PENDING]: [
+    circle(PermitStatus.APPLIED),
+    circle(PermitStatus.TECHNICAL_REVIEW),
+    halfCircle(PermitStatus.PENDING),
+    empty(PermitStatus.COMPLETED)
+  ],
+  [PermitStatus.COMPLETED]: [
+    circle(PermitStatus.APPLIED),
+    circle(PermitStatus.TECHNICAL_REVIEW),
+    circle(PermitStatus.PENDING),
+    circle(PermitStatus.COMPLETED)
+  ],
+  terminatedStatus: [
+    crossedCirlce(PermitStatus.APPLIED),
+    crossedCirlce(PermitStatus.TECHNICAL_REVIEW),
+    crossedCirlce(PermitStatus.PENDING),
+    crossedCirlce(PermitStatus.COMPLETED)
+  ],
+  emptyStatus: [
+    empty(PermitStatus.APPLIED),
+    empty(PermitStatus.TECHNICAL_REVIEW),
+    empty(PermitStatus.PENDING),
+    empty(PermitStatus.COMPLETED)
+  ]
+};
+
+// Actions
+const toast = useToast();
+
+function getStatusBoxState(authStatus: string | undefined) {
+  return authStatus && authStatus in statusBoxStates
+    ? statusBoxStates[authStatus as keyof typeof statusBoxStates]
+    : { boxClass: 'grey', message: 'Status not available.' };
+}
+
+function getTimelineStage(authStatus: string | undefined, status: string | undefined) {
+  if (
+    authStatus === PermitAuthorizationStatus.ABANDONED ||
+    authStatus === PermitAuthorizationStatus.CANCELLED ||
+    authStatus === PermitAuthorizationStatus.WITHDRAWN
+  ) {
+    return timelineStages.terminatedStatus;
+  }
+  return status && status in timelineStages
+    ? timelineStages[status as keyof typeof timelineStages]
+    : timelineStages.terminatedStatus;
+}
+
+async function handleEnquirySubmit(enquiryDescription: string = '') {
+  if (!submission.value) return;
+
+  const enquiryData = {
+    contacts: [
+      {
+        contactPreference: submission.value.contacts[0].contactPreference,
+        email: submission.value.contacts[0].email,
+        firstName: submission.value.contacts[0].firstName,
+        lastName: submission.value.contacts[0].lastName,
+        phoneNumber: submission.value.contacts[0].phoneNumber,
+        contactApplicantRelationship: submission.value.contacts[0].contactApplicantRelationship
+      }
+    ],
+    basic: {
+      isRelated: BasicResponse.YES,
+      applyForPermitConnect: BasicResponse.NO,
+      enquiryDescription: enquiryDescription?.trim(),
+      relatedActivityId: submission.value.activityId
+    }
+  };
+
+  try {
+    const response = await enquiryService.createEnquiry(enquiryData);
+    enquiryConfirmationId.value = response?.data?.activityId ? response.data.activityId : '';
+  } catch (e: any) {
+    toast.error('Failed to submit enquiry', e);
+  }
+}
+
+function handleModalClose() {
+  enquiryConfirmationId.value = undefined;
+}
+
+onBeforeMount(async () => {
+  try {
+    const permitResponse = await permitService.getPermit(permitId);
+    const { permitType, ...restOfPermit } = permitResponse.data;
+    permit.value = { ...restOfPermit, ...permitType };
+
+    submission.value = (await submissionService.searchSubmissions({ activityId: [permit.value?.activityId] })).data[0];
+
+    breadcrumbItems.value = [
+      { label: 'Applications and Permits', route: RouteName.HOUSING_PROJECTS_LIST },
+      {
+        label: submission.value?.projectName,
+        route: RouteName.HOUSING_PROJECT,
+        params: { submissionId: submission.value?.submissionId }
+      },
+      { label: permit?.value?.name, class: 'font-bold' }
+    ];
+
+    user.value = (await userService.searchUsers({ userId: [permitResponse.data.updatedBy] })).data[0];
+  } catch {
+    toast.error('Unable to load permit or project, please try again later');
+  }
+});
+</script>
+
+<template>
+  <Breadcrumb
+    :home="breadcrumbHome"
+    :model="breadcrumbItems"
+  />
+  <div class="permit-status-view">
+    <h1 class="permit-name mb-4">
+      {{ 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>
+      </template>
+    </Card>
+    <div class="status-header">
+      <h4 class="status-header-text">Application status and progress</h4>
+      <font-awesome-icon
+        class="status-description-icon"
+        icon="fa-circle-question"
+        :on-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]"
+      >
+        {{ getStatusBoxState(permit?.authStatus).message }}
+      </div>
+      <div class="status-tracker-pill-timeline">
+        <div class="status-pill">
+          <h6>Current status</h6>
+          <StatusPill :auth-status="permit?.authStatus" />
+        </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>
+        </div>
+      </div>
+    </div>
+    <div class="updates-section mt-5">
+      <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"
+          :key="note.permitNoteId"
+          class="mb-4"
+        >
+          <p class="mb-2 mt-0 font-bold">{{ formatDateLong(note.createdAt) }}</p>
+          <p class="mt-0">{{ note.note }}</p>
+        </div>
+      </div>
+      <div v-else>
+        <p class="text-gray-500">There are no updates.</p>
+      </div>
+    </div>
+  </div>
+  <PermitEnquiryModal
+    v-model:visible="enquiryModalVisible"
+    :permit="permit"
+    :confirmation-id="enquiryConfirmationId"
+    :updated-by="user?.fullName"
+    @on-sumbit-enquiry="handleEnquirySubmit"
+    @on-hide="handleModalClose"
+  />
+</template>
+
+<style scoped lang="scss">
+.circle {
+  color: #1e5189;
+  & + :deep(.p-timeline-event-connector) {
+    background-color: #1e5189;
+  }
+}
+
+.crossed-circle {
+  color: #9f9d9c;
+  & + :deep(.p-timeline-event-connector) {
+    background-color: #9f9d9c;
+  }
+}
+
+.half-circle {
+  color: #1e5189;
+  & + :deep(.p-timeline-event-connector) {
+    background-color: #e0dedc;
+  }
+}
+
+.empty {
+  color: transparent;
+  border: 1px dashed #9f9d9c;
+  border-radius: 50%;
+  & + :deep(.p-timeline-event-connector) {
+    background-color: #e0dedc;
+  }
+}
+
+.stage-blue {
+  color: #1e5189;
+}
+
+.stage-grey {
+  color: #9f9d9c;
+}
+
+.permit-info {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  align-items: baseline;
+}
+
+.info-item {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+.info-item b {
+  white-space: nowrap;
+  margin-right: 5px;
+}
+
+.info-item span {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.permit-info p {
+  margin: 0;
+}
+
+.p-card {
+  background: #fff;
+  border: 1px solid #efefef;
+  border-radius: 8px;
+  box-shadow: none;
+  margin-top: 40px;
+  margin-bottom: 88px;
+}
+
+:deep(.p-timeline-event-opposite) {
+  display: none;
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.status-header-text {
+  margin: 0;
+}
+
+.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 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.status-timeline {
+  flex-grow: 1;
+  overflow-x: hidden;
+}
+
+.status-pill h6,
+.status-timeline h6 {
+  margin-top: 40px;
+}
+
+.status-verified-message {
+  margin-bottom: 56px;
+}
+
+.timeline-content {
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+h6 {
+  color: $app-primary;
+  font-size: 16px;
+  margin-bottom: 22px;
+}
+</style>