From f7140fb098b09ef5a6dfb42421fa96b3a0248ced Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Thu, 25 Jul 2024 11:47:33 -0700
Subject: [PATCH] Implement project detail view, updates to project list view

---
 app/src/controllers/submission.ts             |   1 +
 frontend/src/assets/variables.scss            |   2 +
 .../housing/enquiry/EnquiryIntakeForm.vue     |  11 +-
 .../housing/projects/ProjectsList.vue         |  26 +-
 frontend/src/components/roadmap/Roadmap.vue   |  51 ++-
 frontend/src/router/index.ts                  |  11 +-
 frontend/src/utils/enums/application.ts       |   1 +
 frontend/src/utils/utils.ts                   |  31 ++
 .../housing/enquiry/EnquiryIntakeView.vue     |   3 +
 .../ProjectListView.vue}                      |  23 +-
 .../src/views/housing/project/ProjectView.vue | 384 ++++++++++++++++++
 .../housing/submission/SubmissionView.vue     |   4 +-
 12 files changed, 492 insertions(+), 56 deletions(-)
 rename frontend/src/views/housing/{ProjectsView.vue => project/ProjectListView.vue} (85%)
 create mode 100644 frontend/src/views/housing/project/ProjectView.vue

diff --git a/app/src/controllers/submission.ts b/app/src/controllers/submission.ts
index bfcb262c..c837c6ae 100644
--- a/app/src/controllers/submission.ts
+++ b/app/src/controllers/submission.ts
@@ -400,6 +400,7 @@ const controller = {
     next: NextFunction
   ) => {
     try {
+      // TBD: Implement filtering so proponents can only search for their own submissions
       const response = await submissionService.searchSubmissions({
         ...req.query,
         includeUser: isTruthy(req.query.includeUser)
diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
index de1bbfaa..59140a82 100644
--- a/frontend/src/assets/variables.scss
+++ b/frontend/src/assets/variables.scss
@@ -14,6 +14,8 @@ $app-hover: #4696EC;
 $app-outline-on-primary: #fff;
 $app-out-of-focus: #ccc;
 $app-error: #D8292F;
+$app-green: #2e8540;
+$app-grey: #868585;
 
 // highlighted sections, table rows
 $app-highlight-background: #d9e1e8;
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
index 85ce7498..daadd566 100644
--- a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
+++ b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { Form } from 'vee-validate';
-import { onBeforeMount, ref, toRaw } from 'vue';
+import { onBeforeMount, onMounted, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
 import { object, string } from 'yup';
 
@@ -22,11 +22,13 @@ import type { Ref } from 'vue';
 // Props
 type Props = {
   activityId?: string;
+  confirmationId?: string;
   enquiryId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
+  confirmationId: undefined,
   enquiryId: undefined
 });
 
@@ -194,6 +196,11 @@ onBeforeMount(async () => {
   if (props.enquiryId) {
     response = (await enquiryService.getEnquiry(props.enquiryId)).data;
     editable.value = response.intakeStatus === IntakeStatus.DRAFT;
+  } else if (props.confirmationId) {
+    response = {
+      isRelated: BasicResponse.YES,
+      relatedActivityId: props.confirmationId
+    };
   }
 
   // Default form values
@@ -217,6 +224,8 @@ onBeforeMount(async () => {
   };
 });
 
+onMounted(() => {});
+
 async function emailConfirmation(activityId: string) {
   const configCC = getConfig.value.ches?.submission?.cc;
   const body = confirmationTemplate({
diff --git a/frontend/src/components/housing/projects/ProjectsList.vue b/frontend/src/components/housing/projects/ProjectsList.vue
index 0152c78f..f572e5e3 100644
--- a/frontend/src/components/housing/projects/ProjectsList.vue
+++ b/frontend/src/components/housing/projects/ProjectsList.vue
@@ -2,14 +2,11 @@
 import { ref } from 'vue';
 
 import { Spinner } from '@/components/layout';
-import { Button, Column, DataTable, useConfirm, useToast } from '@/lib/primevue';
-import { submissionService } from '@/services';
+import { Column, DataTable } from '@/lib/primevue';
 import { RouteName } from '@/utils/enums/application';
-import { IntakeStatus } from '@/utils/enums/housing';
-import { formatDate } from '@/utils/formatters';
 
-import type { Ref } from 'vue';
 import type { Submission } from '@/types';
+import type { Ref } from 'vue';
 
 // Props
 type Props = {
@@ -23,13 +20,6 @@ const props = withDefaults(defineProps<Props>(), {});
 const selection: Ref<Submission | undefined> = ref(undefined);
 
 // Actions
-// const confirm = useConfirm();
-// const toast = useToast();
-
-const sortTest = (e = 'meh') => {
-  console.log('sorttest', e);
-  return -1;
-};
 </script>
 
 <template>
@@ -44,9 +34,7 @@ const sortTest = (e = 'meh') => {
     :rows="10"
   >
     <template #empty>
-      <div class="flex justify-content-center">
-        <h3>No active projects</h3>
-      </div>
+      <div>No active projects at the moment.</div>
     </template>
     <template #loading>
       <Spinner />
@@ -61,7 +49,7 @@ const sortTest = (e = 'meh') => {
         <div :data-activityId="data.activityId">
           <router-link
             :to="{
-              name: RouteName.HOUSING_SUBMISSION_INTAKE,
+              name: RouteName.HOUSING_PROJECT,
               query: { activityId: data.activityId, submissionId: data.submissionId }
             }"
           >
@@ -88,11 +76,5 @@ const sortTest = (e = 'meh') => {
         <div>{{ data?.user?.firstName }} {{ data?.user?.lastName }}</div>
       </template>
     </Column>
-    <Column
-      field="submittedAt"
-      header="date"
-      :sortable="true"
-      style="min-width: 150px"
-    />
   </DataTable>
 </template>
diff --git a/frontend/src/components/roadmap/Roadmap.vue b/frontend/src/components/roadmap/Roadmap.vue
index 4f87c1ba..9b03fbc6 100644
--- a/frontend/src/components/roadmap/Roadmap.vue
+++ b/frontend/src/components/roadmap/Roadmap.vue
@@ -11,7 +11,12 @@ import { roadmapService, userService } from '@/services';
 import { useConfigStore, useSubmissionStore, useTypeStore } from '@/store';
 import { PermitNeeded, PermitStatus } from '@/utils/enums/housing';
 import { roadmapTemplate } from '@/utils/templates';
-import { delimitEmails, setEmptyStringsToNull } from '@/utils/utils';
+import {
+  delimitEmails,
+  getPermitTypeNamesByNeeded,
+  getPermitTypeNamesByStatus,
+  setEmptyStringsToNull
+} from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { Document } from '@/types';
@@ -85,19 +90,19 @@ const confirmSubmit = (data: any) => {
   });
 };
 
-function getPermitTypeNamesByStatus(status: string) {
-  return getPermits.value
-    .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.status === status)?.name)
-    .filter((pt) => !!pt)
-    .map((name) => name as string);
-}
+// function getPermitTypeNamesByStatus(status: string) {
+//   return getPermits.value
+//     .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.status === status)?.name)
+//     .filter((pt) => !!pt)
+//     .map((name) => name as string);
+// }
 
-function getPermitTypeNamesByNeeded(needed: string) {
-  return getPermits.value
-    .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.needed === needed)?.name)
-    .filter((pt) => !!pt)
-    .map((name) => name as string);
-}
+// function getPermitTypeNamesByNeeded(needed: string) {
+//   return getPermits.value
+//     .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.needed === needed)?.name)
+//     .filter((pt) => !!pt)
+//     .map((name) => name as string);
+// }
 
 function onFileRemove(document: Document) {
   selectedFiles.value = selectedFiles.value.filter((x) => x.documentId !== document.documentId);
@@ -132,14 +137,22 @@ watchEffect(async () => {
   }
 
   // Permits
-  const permitStateNew = getPermitTypeNamesByStatus(PermitStatus.NEW).filter((value) =>
-    getPermitTypeNamesByNeeded(PermitNeeded.YES).includes(value)
+  const permitStateNew = getPermitTypeNamesByStatus(PermitStatus.NEW, getPermits.value, getPermitTypes.value).filter(
+    (value) => getPermitTypeNamesByNeeded(PermitNeeded.YES, getPermits.value, getPermitTypes.value).includes(value)
+  );
+  const permitPossiblyNeeded = getPermitTypeNamesByStatus(
+    PermitStatus.NEW,
+    getPermits.value,
+    getPermitTypes.value
+  ).filter((value) =>
+    getPermitTypeNamesByNeeded(PermitNeeded.UNDER_INVESTIGATION, getPermits.value, getPermitTypes.value).includes(value)
   );
-  const permitPossiblyNeeded = getPermitTypeNamesByStatus(PermitStatus.NEW).filter((value) =>
-    getPermitTypeNamesByNeeded(PermitNeeded.UNDER_INVESTIGATION).includes(value)
+  const permitStateApplied = getPermitTypeNamesByStatus(PermitStatus.APPLIED, getPermits.value, getPermitTypes.value);
+  const permitStateCompleted = getPermitTypeNamesByStatus(
+    PermitStatus.COMPLETED,
+    getPermits.value,
+    getPermitTypes.value
   );
-  const permitStateApplied = getPermitTypeNamesByStatus(PermitStatus.APPLIED);
-  const permitStateCompleted = getPermitTypeNamesByStatus(PermitStatus.COMPLETED);
 
   const body = roadmapTemplate({
     '{{ contactName }}':
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index a1d5c619..4d04dedf 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -101,7 +101,16 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'projects',
         name: RouteName.HOUSING_PROJECTS,
-        component: () => import('@/views/housing/ProjectsView.vue'),
+        component: () => import('@/views/housing/project/ProjectListView.vue'),
+        meta: {
+          access: [Permissions.NAVIGATION_HOUSING]
+        }
+      },
+      {
+        path: 'project',
+        name: RouteName.HOUSING_PROJECT,
+        component: () => import('@/views/housing/project/ProjectView.vue'),
+        props: createProps,
         meta: {
           access: [Permissions.NAVIGATION_HOUSING]
         }
diff --git a/frontend/src/utils/enums/application.ts b/frontend/src/utils/enums/application.ts
index 031282cd..114b4a66 100644
--- a/frontend/src/utils/enums/application.ts
+++ b/frontend/src/utils/enums/application.ts
@@ -44,6 +44,7 @@ export enum RouteName {
   HOUSING_ENQUIRY = 'housing_enquiry',
   HOUSING_ENQUIRY_INTAKE = 'housing_enquiry_intake',
   HOUSING_GUIDE = 'housing_guide',
+  HOUSING_PROJECT = 'housing_project',
   HOUSING_PROJECTS = 'housing_projects',
   HOUSING_SUBMISSION = 'housing_submission',
   HOUSING_SUBMISSION_INTAKE = 'housing_submission_intake',
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 7c131d10..a8ae9a77 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -113,6 +113,37 @@ export function getFilenameAndExtension(filename: string): { filename: string; e
     return { filename, extension: undefined };
   }
 }
+import type { Permit, PermitType } from '@/types';
+
+/**
+ * @function getPermitTypeNamesByStatus
+ * Returns an array of permits joined by permit types, filters by status, and returns the names
+ * @param {string} status permit status to be filtered for
+ * @param {Array<Permit>} permits array of permits needing filtering for name
+ * @param {Array<PermitType>} permitTypes arry of permit types with names
+ * @returns {filename: string, extension: string} An object containing filename and extension
+ */
+export function getPermitTypeNamesByStatus(status: string, permits: Array<Permit>, permitTypes: Array<PermitType>) {
+  return permits
+    .map((p) => permitTypes.find((pt) => pt.permitTypeId === p.permitTypeId && p.status === status)?.name)
+    .filter((pt) => !!pt)
+    .map((name) => name as string);
+}
+
+/**
+ * @function getPermitTypeNamesByStatus
+ * Returns an array of permits joined by permit types, filters by needed, and returns the names
+ * @param {string} status permit status to be filtered for
+ * @param {Array<Permit>} permits array of permits needing filtering for name
+ * @param {Array<PermitType>} permitTypes arry of permit types with names
+ * @returns {filename: string, extension: string} An object containing filename and extension
+ */
+export function getPermitTypeNamesByNeeded(needed: string, permits: Array<Permit>, permitTypes: Array<PermitType>) {
+  return permits
+    .map((p) => permitTypes.find((pt) => pt.permitTypeId === p.permitTypeId && p.needed === needed)?.name)
+    .filter((pt) => !!pt)
+    .map((name) => name as string);
+}
 
 /**
  * @function isDebugMode
diff --git a/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue b/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue
index 83d499f3..64233b84 100644
--- a/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue
+++ b/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue
@@ -8,11 +8,13 @@ import type { Ref } from 'vue';
 // Props
 type Props = {
   activityId?: string;
+  confirmationId?: string;
   enquiryId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
+  confirmationId: undefined,
   enquiryId: undefined
 });
 
@@ -29,6 +31,7 @@ onMounted(async () => {
   <EnquiryIntakeForm
     v-if="!loading"
     :activity-id="props.activityId"
+    :confirmation-id="props.confirmationId"
     :enquiry-id="props.enquiryId"
   />
 </template>
diff --git a/frontend/src/views/housing/ProjectsView.vue b/frontend/src/views/housing/project/ProjectListView.vue
similarity index 85%
rename from frontend/src/views/housing/ProjectsView.vue
rename to frontend/src/views/housing/project/ProjectListView.vue
index a2b3268d..c468db21 100644
--- a/frontend/src/views/housing/ProjectsView.vue
+++ b/frontend/src/views/housing/project/ProjectListView.vue
@@ -2,10 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import ProjectsList from '@/components/housing/projects/ProjectsList.vue';
 import { Button } from '@/lib/primevue';
 import { RouteName } from '@/utils/enums/application';
 import { ApplicationStatus, IntakeStatus, SubmissionType } from '@/utils/enums/housing';
-import ProjectsList from '@/components/housing/projects/ProjectsList.vue';
 import { submissionService } from '@/services';
 
 import type { Ref } from 'vue';
@@ -70,21 +70,22 @@ onMounted(async () => {
     /
     <span class="font-bold">Applications and Permits</span>
   </div>
-  <h1>Application and Permits</h1>
-  <div class="mt-1 mb-3 flex justify-content-between">
-    <h3 class="mb-0">My Projects</h3>
-    <Button
-      class="p-button-sm"
-      outlined
-      label="+ New project investigation"
-      @click="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
-    />
+  <div class="app-primary-color">
+    <h1>Application and Permits</h1>
+    <div class="mt-1 mb-3 flex justify-content-between">
+      <h3 class="mb-0">My Projects</h3>
+      <Button
+        class="p-button-sm"
+        outlined
+        label="+ New project investigation"
+        @click="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
+      />
+    </div>
   </div>
   <ProjectsList
     :loading="loading"
     :submissions="submissions"
   />
-  <div>{{ submissions.map((x) => x.submittedAt) }}</div>
 </template>
 
 <style scoped lang="scss">
diff --git a/frontend/src/views/housing/project/ProjectView.vue b/frontend/src/views/housing/project/ProjectView.vue
new file mode 100644
index 00000000..0342b620
--- /dev/null
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Accordion, AccordionTab, Button, Card, Divider } from '@/lib/primevue';
+import { RouteName } from '@/utils/enums/application';
+import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/enums/housing';
+import { formatDate } from '@/utils/formatters';
+
+import { permitService, submissionService, userService } from '@/services';
+import { useSubmissionStore, useTypeStore } from '@/store';
+
+import type { ComputedRef, Ref } from 'vue';
+import type { Permit, PermitType, User } from '@/types';
+
+const router = useRouter();
+
+type PermitFilterConfig = {
+  permitNeeded?: string;
+  permits: Array<Permit>;
+  permitStatus?: string;
+  permitTypes: Array<PermitType>;
+};
+
+type CombinedPermit = Permit & PermitType;
+
+// Props
+type Props = {
+  activityId: string;
+  submissionId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// State
+const submissionStore = useSubmissionStore();
+const { getPermits, getSubmission } = storeToRefs(submissionStore);
+
+const typeStore = useTypeStore();
+const { getPermitTypes } = storeToRefs(typeStore);
+
+const assignee: Ref<User | undefined> = ref(undefined);
+const loading: Ref<boolean> = ref(true);
+const permitsNeeded = computed(() => {
+  return permitFilter({
+    permitNeeded: PermitNeeded.YES,
+    permitStatus: PermitStatus.NEW,
+    permits: getPermits.value,
+    permitTypes: getPermitTypes.value
+  })
+    .sort(permitNameSortFcn)
+    .sort(permitBusinessSortFcn);
+});
+const permitsNotNeeded = computed(() => {
+  return permitFilter({
+    permitNeeded: PermitNeeded.NO,
+    permits: getPermits.value,
+    permitTypes: getPermitTypes.value
+  })
+    .sort(permitNameSortFcn)
+    .sort(permitBusinessSortFcn);
+});
+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,
+    permits: getPermits.value,
+    permitTypes: getPermitTypes.value
+  });
+  return firstFilter.concat(secondFilter).sort(permitNameSortFcn).sort(permitBusinessSortFcn);
+});
+
+// Actions
+function permitBusinessSortFcn(a: CombinedPermit, b: CombinedPermit) {
+  return a.businessDomain > b.businessDomain ? 1 : -1;
+}
+function permitNameSortFcn(a: CombinedPermit, b: CombinedPermit) {
+  return a.name > b.name ? 1 : -1;
+}
+function permitFilter(config: PermitFilterConfig) {
+  const { permitNeeded, permits, permitStatus, permitTypes } = config;
+  let returnArray: Array<any> = permits;
+
+  if (permitNeeded) {
+    returnArray = returnArray.map((p) => {
+      const pType = permitTypes.find((pt) => pt.permitTypeId === p?.permitTypeId && p.needed === permitNeeded);
+      if (pType) return { ...p, ...pType };
+    });
+  }
+
+  if (permitStatus) {
+    returnArray = returnArray.map((p) => {
+      const pType = permitTypes.find((pt) => pt.permitTypeId === p?.permitTypeId && p.status === permitStatus);
+      if (pType) return { ...p, ...pType };
+    });
+  }
+
+  return returnArray.filter((pt) => !!pt) as Array<CombinedPermit>;
+}
+
+function authStatusClass(authStat: string | undefined) {
+  if (!authStat) return '';
+  if (authStat === PermitAuthorizationStatus.IN_REVIEW) {
+    return 'in-review';
+  } else {
+    return authStat?.toLowerCase();
+  }
+}
+
+onMounted(async () => {
+  const [submissionValue, permitsValue, permitTypesValue] = (
+    await Promise.all([
+      submissionService.getSubmission(props.submissionId),
+      permitService.listPermits(props.activityId),
+      permitService.getPermitTypes()
+    ])
+  ).map((r) => r.data);
+
+  submissionStore.setSubmission(submissionValue);
+  submissionStore.setPermits(permitsValue);
+  typeStore.setPermitTypes(permitTypesValue);
+
+  if (submissionValue?.assignedUserId) {
+    assignee.value = (await userService.searchUsers({ userId: [submissionValue.assignedUserId] })).data[0];
+  }
+
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div>
+    <Button
+      class="p-0"
+      text
+    >
+      <router-link :to="{ name: RouteName.HOUSING }">
+        <span class="app-primary-color">Housing</span>
+      </router-link>
+    </Button>
+    /
+    <Button
+      class="p-0"
+      text
+    >
+      <router-link :to="{ name: RouteName.HOUSING_PROJECTS }">
+        <span class="app-primary-color">Applications and Permits</span>
+      </router-link>
+    </Button>
+    /
+    <span
+      v-if="!loading"
+      class="font-bold"
+    >
+      {{ getSubmission?.projectName }}
+    </span>
+    <span
+      v-else
+      class="font-bold"
+    >
+      ...loading
+    </span>
+  </div>
+  <div
+    v-if="!loading && getSubmission"
+    class="app-primary-color"
+  >
+    <div class="mt-3 flex justify-content-between align-items-center">
+      <h1
+        class="m-0 cursor-pointer hover:underline"
+        @click="
+          router.push({
+            name: RouteName.HOUSING_SUBMISSION,
+            query: { activityId: getSubmission?.activityId, submissionId: getSubmission?.submissionId }
+          })
+        "
+      >
+        {{ getSubmission.projectName }}
+        <font-awesome-icon
+          class="text-sm"
+          icon="fa fa-external-link"
+        />
+      </h1>
+      <Button
+        class="p-button-sm header-btn"
+        label="Ask a Navigator"
+        @click="
+          router.push({ name: RouteName.HOUSING_ENQUIRY_INTAKE, query: { confirmationId: getSubmission.activityId } })
+        "
+      />
+    </div>
+    <div class="mb-6">
+      <span class="mr-3">
+        Confirmation ID:
+        <span class="font-bold">{{ getSubmission.activityId }}</span>
+      </span>
+      <span v-if="assignee">
+        Navigator:
+        <span class="font-bold">{{ assignee?.firstName }} {{ assignee?.lastName }}</span>
+      </span>
+      <span v-else>Navigator: -</span>
+    </div>
+    <div><h3 class="mb-3">Required permits</h3></div>
+    <div
+      v-if="!permitsNeeded?.length"
+      class="empty-block p-5"
+    >
+      We are investigating the permits required for this project.
+    </div>
+
+    <Card
+      v-for="permit in permitsNeeded"
+      :key="permit.permitId"
+      class="app-primary-color mt-2 mb-2 hover-underline cursor-pointer"
+    >
+      <template #content>
+        <h5 class="mt-0 mb-0 mr-0 ml-2 p-3">{{ permit.businessDomain }}: {{ permit.name }}</h5>
+      </template>
+    </Card>
+    <Accordion
+      v-if="permitsNotNeeded?.length"
+      class="app-primary-color"
+    >
+      <AccordionTab header="Not needed">
+        <div>
+          We have also investigated the following permits as requested. These permits are not required for this project.
+        </div>
+        <ul>
+          <li
+            v-for="permit in permitsNotNeeded"
+            :key="permit.permitId"
+            class="m-0"
+          >
+            {{ permit.name }}
+          </li>
+        </ul>
+      </AccordionTab>
+    </Accordion>
+    <h3 class="mt-6 mb-3">Submitted applications</h3>
+    <div
+      v-if="!(permitsSubmitted.length || permitsNotNeeded.length)"
+      class="empty-block p-5"
+    >
+      You will see your permit applications here once submitted.
+    </div>
+    <Card
+      v-for="permit in permitsNeeded"
+      :key="permit.permitId"
+      class="pl-4 pr-4 pt-3 pb-3 mt-2 mb-2 permit-card"
+    >
+      <template #title>
+        <h5 class="m-0 app-primary-color">{{ permit.businessDomain }}: {{ permit.name }}</h5>
+        <Divider />
+      </template>
+      <template #content>
+        <div class="grid">
+          <div class="col-2">
+            <div
+              v-if="permit.authStatus !== PermitAuthorizationStatus.NONE"
+              :class="['authIndicator', authStatusClass(permit?.authStatus)]"
+            >
+              {{ permit.authStatus }}
+            </div>
+          </div>
+          <div class="col-2">
+            <div>{{ permit?.statusLastVerified ? formatDate(permit.statusLastVerified) : '' }}</div>
+            <div :class="['sub-label', { 'm-0': permit?.statusLastVerified }]">Last verified date</div>
+          </div>
+          <div class="col-2">
+            <div>{{ permit?.trackingId ? permit.trackingId : '' }}</div>
+            <div :class="['sub-label', { 'm-0': permit?.trackingId }]">Tracking ID</div>
+          </div>
+          <div class="col-2">
+            <div>{{ permit?.issuedPermitId ? permit.issuedPermitId : '' }}</div>
+            <div :class="['sub-label', { 'm-0': permit?.issuedPermitId }]">Permit ID</div>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+  <!-- <div>{{ getSubmission }}</div> -->
+</template>
+
+<style scoped lang="scss">
+a {
+  text-decoration: none;
+}
+
+.hover-underline:hover {
+  text-decoration: underline;
+}
+
+.empty-block {
+  background-color: white;
+}
+.header-btn {
+  max-height: 2rem;
+}
+
+.authIndicator {
+  height: 30px;
+  width: 100px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 0.9rem;
+}
+
+.in-review,
+.submitted {
+  background-color: none;
+  color: $app-green;
+  border-radius: 1rem;
+  border-color: $app-green;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.issued {
+  background-color: $app-green;
+  color: white;
+  border-radius: 1rem;
+  border-color: $app-green;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.denied {
+  background-color: $app-error;
+  color: white;
+  border-radius: 1rem;
+  border-color: $app-error;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.pending {
+  background-color: none;
+  color: $app-error;
+  border-radius: 1rem;
+  border-color: $app-error;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.permit-card {
+  box-shadow: 0px 4px 4px 0px #0000000a;
+  &:hover {
+    background-color: rgb(233, 236, 239);
+  }
+}
+
+.sub-label {
+  color: $app-grey;
+  font-size: 0.8rem;
+  margin-top: 1rem;
+}
+
+// Overriding default Accordion CSS to match h5
+:deep(.p-accordion-header > a) {
+  color: inherit;
+  font-size: 1.1rem;
+  text-decoration: none;
+}
+
+:deep(.p-card-body) {
+  padding-top: 0rem;
+  padding-bottom: 0rem;
+}
+
+:deep(.p-card-content) {
+  padding: 0rem;
+}
+
+:deep(.p-card:hover .p-card-title) {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend/src/views/housing/submission/SubmissionView.vue b/frontend/src/views/housing/submission/SubmissionView.vue
index f69fc594..61a2c65e 100644
--- a/frontend/src/views/housing/submission/SubmissionView.vue
+++ b/frontend/src/views/housing/submission/SubmissionView.vue
@@ -204,8 +204,8 @@ const onDeleteNote = (note: Note) => {
           :sort-field="SORT_TYPES.CREATED_AT"
           :sort-order="SORT_ORDER.DESCENDING"
           @update:sort-order="
-            (order: number) => {
-              sortOrder = order;
+            (order: number | undefined) => {
+              sortOrder = order ?? SORT_ORDER.DESCENDING;
             }
           "
           @update:sort-field="