From 014b9109ee03f13a67d29583e3a24d64ef16afb8 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Wed, 27 Dec 2023 15:15:08 -0800
Subject: [PATCH 1/2] Align submission/activity view with new UX design

---
 .github/environments/values.pr.yaml           |   2 +-
 .github/workflows/unit-tests.yaml             |   2 +
 app/src/db/migrations/20231212000000_init.ts  |  31 ++-
 app/src/db/models/submission.ts               |  75 ++++--
 app/src/db/prisma/schema.prisma               |  65 +++--
 app/src/services/chefs.ts                     |  17 +-
 app/src/types/ChefsSubmissionForm.ts          |  38 +--
 frontend/src/assets/main.scss                 |   4 +
 frontend/src/components/demo/DemoButtons.vue  |  42 ---
 .../src/components/demo/DemoDataTable.vue     | 166 ------------
 frontend/src/components/demo/DemoHeadings.vue |  12 -
 frontend/src/components/demo/DemoModals.vue   | 123 ---------
 frontend/src/components/demo/DemoToasts.vue   |  40 ---
 frontend/src/components/demo/index.ts         |   5 -
 frontend/src/components/form/Calendar.vue     |  18 +-
 frontend/src/components/form/Checkbox.vue     |  51 ++++
 frontend/src/components/form/Dropdown.vue     |  20 +-
 .../src/components/form/EditableDropdown.vue  |  20 +-
 frontend/src/components/form/InputMask.vue    |  53 ++++
 frontend/src/components/form/InputNumber.vue  |  62 +++++
 .../form/{TextInput.vue => InputText.vue}     |  18 +-
 frontend/src/components/form/Password.vue     |  16 +-
 frontend/src/components/form/TextArea.vue     |  18 +-
 frontend/src/components/form/index.ts         |   5 +-
 .../components/submission/SubmissionForm.vue  | 249 +++++++++++++-----
 frontend/src/lib/primevue/index.ts            |   2 +
 frontend/src/router/index.ts                  |   6 -
 frontend/src/types/ChefsSubmissionForm.ts     |  37 ++-
 frontend/src/utils/constants.ts               |   2 +
 frontend/src/views/StylingsView.vue           |  27 --
 frontend/src/views/SubmissionView.vue         |   4 +-
 .../form/{TextInput.spec.ts => InputText.ts}  |  14 +-
 32 files changed, 611 insertions(+), 633 deletions(-)
 delete mode 100644 frontend/src/components/demo/DemoButtons.vue
 delete mode 100644 frontend/src/components/demo/DemoDataTable.vue
 delete mode 100644 frontend/src/components/demo/DemoHeadings.vue
 delete mode 100644 frontend/src/components/demo/DemoModals.vue
 delete mode 100644 frontend/src/components/demo/DemoToasts.vue
 delete mode 100644 frontend/src/components/demo/index.ts
 create mode 100644 frontend/src/components/form/Checkbox.vue
 create mode 100644 frontend/src/components/form/InputMask.vue
 create mode 100644 frontend/src/components/form/InputNumber.vue
 rename frontend/src/components/form/{TextInput.vue => InputText.vue} (73%)
 delete mode 100644 frontend/src/views/StylingsView.vue
 rename frontend/tests/unit/components/form/{TextInput.spec.ts => InputText.ts} (81%)

diff --git a/.github/environments/values.pr.yaml b/.github/environments/values.pr.yaml
index 778d397e..e29cf5ec 100644
--- a/.github/environments/values.pr.yaml
+++ b/.github/environments/values.pr.yaml
@@ -1,6 +1,6 @@
 ---
 patroni:
-  enabled: false
+  enabled: true
   replicaCount: 2
   resources:
     limits:
diff --git a/.github/workflows/unit-tests.yaml b/.github/workflows/unit-tests.yaml
index 6b0132f4..6e80a05f 100644
--- a/.github/workflows/unit-tests.yaml
+++ b/.github/workflows/unit-tests.yaml
@@ -48,6 +48,8 @@ jobs:
       - name: Install dependencies
         if: steps.cache-app.outputs.cache-hit != 'true'
         run: npm ci
+      - name: Generate Prisma Schema
+        run: npm run prisma:generate
       - name: Test
         run: npm run test
         env:
diff --git a/app/src/db/migrations/20231212000000_init.ts b/app/src/db/migrations/20231212000000_init.ts
index 20ddc91f..9a885893 100644
--- a/app/src/db/migrations/20231212000000_init.ts
+++ b/app/src/db/migrations/20231212000000_init.ts
@@ -37,26 +37,35 @@ export async function up(knex: Knex): Promise<void> {
           table.uuid('submissionId').primary();
           table.uuid('assignedToUserId').references('userId').inTable('user').onUpdate('CASCADE').onDelete('CASCADE');
           table.text('confirmationId').notNullable();
-          table.text('contactEmail');
+          table.timestamp('submittedAt', { useTz: true }).notNullable();
+          table.text('submittedBy').notNullable();
+          table.text('locationPIDs');
+          table.text('contactName');
           table.text('contactPhoneNumber');
-          table.text('contactFirstName');
-          table.text('contactLastName');
-          table.text('intakeStatus');
+          table.text('contactEmail');
           table.text('projectName');
-          table.integer('queuePriority');
           table.text('singleFamilyUnits');
           table.text('streetAddress');
-          table.text('atsClientNumber');
+          table.integer('latitude');
+          table.integer('longitude');
+          table.integer('queuePriority');
+          table.text('relatedPermits');
+          table.text('astNotes');
+          table.boolean('astUpdated');
           table.boolean('addedToATS');
+          table.text('atsClientNumber');
+          table.boolean('ltsaCompleted');
+          table.boolean('naturalDisaster');
           table.boolean('financiallySupported');
-          table.text('applicationStatus');
-          table.text('relatedPermits');
-          table.boolean('updatedAai');
+          table.boolean('financiallySupportedBC');
+          table.boolean('financiallySupportedIndigenous');
+          table.boolean('financiallySupportedNonProfit');
+          table.boolean('financiallySupportedHousingCoop');
           table.text('waitingOn');
-          table.timestamp('submittedAt', { useTz: true }).notNullable();
-          table.text('submittedBy').notNullable();
           table.timestamp('bringForwardDate', { useTz: true });
           table.text('notes');
+          table.text('intakeStatus');
+          table.text('applicationStatus');
           stamps(knex, table);
         })
       )
diff --git a/app/src/db/models/submission.ts b/app/src/db/models/submission.ts
index 3dcc44a1..32e399d3 100644
--- a/app/src/db/models/submission.ts
+++ b/app/src/db/models/submission.ts
@@ -1,7 +1,6 @@
 import { Prisma } from '@prisma/client';
 import { default as user } from './user';
 import disconnectRelation from '../utils/disconnectRelation';
-import { fromYrn, toYrn } from '../../components/utils';
 
 import type { IStamps } from '../../interfaces/IStamps';
 import type { ChefsSubmissionForm } from '../../types';
@@ -33,27 +32,36 @@ export default {
     return {
       submissionId: input.submissionId,
       confirmationId: input.confirmationId,
-      contactEmail: input.contactEmail,
+      submittedAt: new Date(input.submittedAt),
+      submittedBy: input.submittedBy,
+      locationPIDs: input.locationPIDs,
+      contactName: input.contactName,
       contactPhoneNumber: input.contactPhoneNumber,
-      contactFirstName: input.contactFirstName,
-      contactLastName: input.contactLastName,
-      intakeStatus: input.intakeStatus,
+      contactEmail: input.contactEmail,
       projectName: input.projectName,
-      queuePriority: input.queuePriority,
       singleFamilyUnits: input.singleFamilyUnits,
       streetAddress: input.streetAddress,
-      atsClientNumber: input.atsClientNumber,
-      addedToATS: fromYrn(input.addedToATS),
-      financiallySupported: fromYrn(input.financiallySupported),
-      applicationStatus: input.applicationStatus,
+      latitude: input.latitude,
+      longitude: input.longitude,
+      queuePriority: input.queuePriority,
       relatedPermits: input.relatedPermits,
-      updatedAai: fromYrn(input.updatedAai),
+      astNotes: input.astNotes,
+      astUpdated: input.astUpdated,
+      addedToATS: input.addedToATS,
+      atsClientNumber: input.atsClientNumber,
+      ltsaCompleted: input.ltsaCompleted,
+      naturalDisaster: input.naturalDisaster,
+      financiallySupported: input.financiallySupported,
+      financiallySupportedBC: input.financiallySupportedBC,
+      financiallySupportedIndigenous: input.financiallySupportedIndigenous,
+      financiallySupportedNonProfit: input.financiallySupportedNonProfit,
+      financiallySupportedHousingCoop: input.financiallySupportedHousingCoop,
       waitingOn: input.waitingOn,
-      submittedAt: new Date(input.submittedAt),
-      submittedBy: input.submittedBy,
       bringForwardDate: input.bringForwardDate ? new Date(input.bringForwardDate) : null,
       notes: input.notes,
-      user: input.user?.userId ? { connect: { userId: input.user.userId } } : disconnectRelation
+      user: input.user?.userId ? { connect: { userId: input.user.userId } } : disconnectRelation,
+      intakeStatus: input.intakeStatus,
+      applicationStatus: input.applicationStatus
     };
   },
 
@@ -61,29 +69,38 @@ export default {
     if (!input) return null;
 
     return {
-      submissionId: input.submissionId as string,
-      confirmationId: input.confirmationId as string,
-      contactEmail: input.contactEmail,
+      submissionId: input.submissionId,
+      confirmationId: input.confirmationId,
+      submittedAt: input.submittedAt?.toISOString() as string,
+      submittedBy: input.submittedBy as string,
+      locationPIDs: input.locationPIDs,
+      contactName: input.contactName,
       contactPhoneNumber: input.contactPhoneNumber,
-      contactFirstName: input.contactFirstName,
-      contactLastName: input.contactLastName,
-      intakeStatus: input.intakeStatus,
+      contactEmail: input.contactEmail,
       projectName: input.projectName,
-      queuePriority: input.queuePriority,
       singleFamilyUnits: input.singleFamilyUnits,
       streetAddress: input.streetAddress,
-      atsClientNumber: input.atsClientNumber,
-      addedToATS: toYrn(input.addedToATS as boolean | null),
-      financiallySupported: toYrn(input.financiallySupported as boolean | null),
-      applicationStatus: input.applicationStatus,
+      latitude: input.latitude,
+      longitude: input.longitude,
+      queuePriority: input.queuePriority,
       relatedPermits: input.relatedPermits,
-      updatedAai: toYrn(input.updatedAai as boolean | null),
+      astNotes: input.astNotes,
+      astUpdated: input.astUpdated,
+      addedToATS: input.addedToATS,
+      atsClientNumber: input.atsClientNumber,
+      ltsaCompleted: input.ltsaCompleted,
+      naturalDisaster: input.naturalDisaster,
+      financiallySupported: input.financiallySupported,
+      financiallySupportedBC: input.financiallySupportedBC,
+      financiallySupportedIndigenous: input.financiallySupportedIndigenous,
+      financiallySupportedNonProfit: input.financiallySupportedNonProfit,
+      financiallySupportedHousingCoop: input.financiallySupportedHousingCoop,
       waitingOn: input.waitingOn,
-      submittedAt: input.submittedAt?.toISOString() as string,
-      submittedBy: input.submittedBy as string,
       bringForwardDate: input.bringForwardDate?.toISOString() ?? null,
       notes: input.notes,
-      user: user.fromDBModel(input.user)
+      user: user.fromDBModel(input.user),
+      intakeStatus: input.intakeStatus,
+      applicationStatus: input.applicationStatus
     };
   }
 };
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
index 738b3ddb..f2100484 100644
--- a/app/src/db/prisma/schema.prisma
+++ b/app/src/db/prisma/schema.prisma
@@ -30,34 +30,43 @@ model knex_migrations_lock {
 }
 
 model submission {
-  submissionId         String    @id @db.Uuid
-  assignedToUserId     String?   @db.Uuid
-  confirmationId       String
-  contactEmail         String?
-  contactPhoneNumber   String?
-  contactFirstName     String?
-  contactLastName      String?
-  intakeStatus         String?
-  projectName          String?
-  queuePriority        Int?
-  singleFamilyUnits    String?
-  streetAddress        String?
-  atsClientNumber      String?
-  addedToATS           Boolean?
-  financiallySupported Boolean?
-  applicationStatus    String?
-  relatedPermits       String?
-  updatedAai           Boolean?
-  waitingOn            String?
-  submittedAt          DateTime  @db.Timestamptz(6)
-  submittedBy          String
-  bringForwardDate     DateTime? @db.Timestamptz(6)
-  notes                String?
-  createdBy            String?   @default("00000000-0000-0000-0000-000000000000")
-  createdAt            DateTime? @default(now()) @db.Timestamptz(6)
-  updatedBy            String?
-  updatedAt            DateTime? @db.Timestamptz(6)
-  user                 user?     @relation(fields: [assignedToUserId], references: [userId], onDelete: Cascade, map: "submission_assignedtouserid_foreign")
+  submissionId                    String    @id @db.Uuid
+  assignedToUserId                String?   @db.Uuid
+  confirmationId                  String
+  submittedAt                     DateTime  @db.Timestamptz(6)
+  submittedBy                     String
+  locationPIDs                    String?
+  contactName                     String?
+  contactPhoneNumber              String?
+  contactEmail                    String?
+  projectName                     String?
+  singleFamilyUnits               String?
+  streetAddress                   String?
+  latitude                        Int?
+  longitude                       Int?
+  queuePriority                   Int?
+  relatedPermits                  String?
+  astNotes                        String?
+  astUpdated                      Boolean?
+  addedToATS                      Boolean?
+  atsClientNumber                 String?
+  ltsaCompleted                   Boolean?
+  naturalDisaster                 Boolean?
+  financiallySupported            Boolean?
+  financiallySupportedBC          Boolean?
+  financiallySupportedIndigenous  Boolean?
+  financiallySupportedNonProfit   Boolean?
+  financiallySupportedHousingCoop Boolean?
+  waitingOn                       String?
+  bringForwardDate                DateTime? @db.Timestamptz(6)
+  notes                           String?
+  intakeStatus                    String?
+  applicationStatus               String?
+  createdBy                       String?   @default("00000000-0000-0000-0000-000000000000")
+  createdAt                       DateTime? @default(now()) @db.Timestamptz(6)
+  updatedBy                       String?
+  updatedAt                       DateTime? @db.Timestamptz(6)
+  user                            user?     @relation(fields: [assignedToUserId], references: [userId], onDelete: Cascade, map: "submission_assignedtouserid_foreign")
 }
 
 model user {
diff --git a/app/src/services/chefs.ts b/app/src/services/chefs.ts
index 17358613..140fa33a 100644
--- a/app/src/services/chefs.ts
+++ b/app/src/services/chefs.ts
@@ -50,19 +50,20 @@ const service = {
         const response = (await chefsAxios(formId).get(`submissions/${submissionId}`)).data;
         const status = (await chefsAxios(formId).get(`submissions/${submissionId}/status`)).data;
 
+        const submission = response.submission.submission.data;
+
         await prisma.submission.create({
           data: {
             submissionId: response.submission.id,
             confirmationId: response.submission.confirmationId,
-            contactEmail: response.submission.submission.data.contactEmail,
-            contactPhoneNumber: response.submission.submission.data.contactPhoneNumber,
-            contactFirstName: response.submission.submission.data.contactFirstName,
-            contactLastName: response.submission.submission.data.contactLastName,
+            contactEmail: submission.contactEmail,
+            contactPhoneNumber: submission.contactPhoneNumber,
+            contactName: `${submission.contactFirstName} ${submission.contactLastName}`,
             intakeStatus: status[0].code,
-            projectName: response.submission.submission.data.projectName,
-            queuePriority: parseInt(response.submission.submission.data.queuePriority),
-            singleFamilyUnits: response.submission.submission.data.singleFamilyUnits,
-            streetAddress: response.submission.submission.data.streetAddress,
+            projectName: submission.projectName,
+            queuePriority: parseInt(submission.queuePriority),
+            singleFamilyUnits: submission.singleFamilyUnits,
+            streetAddress: submission.streetAddress,
             submittedAt: response.submission.createdAt,
             submittedBy: response.submission.createdBy
           }
diff --git a/app/src/types/ChefsSubmissionForm.ts b/app/src/types/ChefsSubmissionForm.ts
index f04f747d..2915c7fa 100644
--- a/app/src/types/ChefsSubmissionForm.ts
+++ b/app/src/types/ChefsSubmissionForm.ts
@@ -1,29 +1,37 @@
 import { User } from './User';
-import { YRN } from './YRN';
 import { IStamps } from '../interfaces/IStamps';
 
 export type ChefsSubmissionForm = {
-  submissionId: string; // Primary Key
+  submissionId: string;
   confirmationId: string;
-  contactEmail: string | null;
+  submittedAt: string;
+  submittedBy: string;
+  locationPIDs: string | null;
+  contactName: string | null;
   contactPhoneNumber: string | null;
-  contactFirstName: string | null;
-  contactLastName: string | null;
-  intakeStatus: string | null;
+  contactEmail: string | null;
   projectName: string | null;
-  queuePriority: number | null;
   singleFamilyUnits: string | null;
   streetAddress: string | null;
-  atsClientNumber: string | null;
-  addedToATS: YRN;
-  financiallySupported: YRN;
-  applicationStatus: string | null;
+  latitude: number | null;
+  longitude: number | null;
+  queuePriority: number | null;
   relatedPermits: string | null;
-  updatedAai: YRN;
+  astNotes: string | null;
+  astUpdated: boolean | null;
+  addedToATS: boolean | null;
+  atsClientNumber: string | null;
+  ltsaCompleted: boolean | null;
+  naturalDisaster: boolean | null;
+  financiallySupported: boolean | null;
+  financiallySupportedBC: boolean | null;
+  financiallySupportedIndigenous: boolean | null;
+  financiallySupportedNonProfit: boolean | null;
+  financiallySupportedHousingCoop: boolean | null;
   waitingOn: string | null;
-  submittedAt: string;
-  submittedBy: string;
   bringForwardDate: string | null;
   notes: string | null;
-  user: User | null;
+  user: User | null; // assigned to
+  intakeStatus: string | null;
+  applicationStatus: string | null;
 } & Partial<IStamps>;
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index a2a12c1f..24bf1c05 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -73,6 +73,10 @@ a:visited {
   }
 }
 
+label {
+  color: #38598a;
+}
+
 .wrap-block {
   display: inline-block;
   overflow-wrap: break-word;
diff --git a/frontend/src/components/demo/DemoButtons.vue b/frontend/src/components/demo/DemoButtons.vue
deleted file mode 100644
index 764c4088..00000000
--- a/frontend/src/components/demo/DemoButtons.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/lib/primevue';
-</script>
-
-<template>
-  <h3 class="pt-5 font-bold">Buttons</h3>
-  <h4 class="pt-2">No icons</h4>
-  <Button class="mr-1">Primary button</Button>
-  <Button class="p-button-outlined mr-1">Secondary button</Button>
-  <Button
-    severity="danger"
-    class="p-button-outlined mr-1"
-  >
-    Danger button
-  </Button>
-
-  <h4 class="pt-2">With icons</h4>
-  <Button class="mr-1">
-    <font-awesome-icon
-      icon="fa-solid fa-download"
-      class="pr-1"
-    />
-    Primary button
-  </Button>
-  <Button class="p-button-outlined mr-1">
-    <font-awesome-icon
-      icon="fa-solid fa-download"
-      class="pr-1"
-    />
-    Secondary button
-  </Button>
-  <Button
-    severity="danger"
-    class="p-button-outlined mr-1"
-  >
-    <font-awesome-icon
-      icon="fa-solid fa-trash"
-      class="pr-1"
-    />
-    Danger button
-  </Button>
-</template>
diff --git a/frontend/src/components/demo/DemoDataTable.vue b/frontend/src/components/demo/DemoDataTable.vue
deleted file mode 100644
index 9fb32667..00000000
--- a/frontend/src/components/demo/DemoDataTable.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { GridRow } from '@/components/form';
-import { Spinner } from '@/components/layout';
-import { Button, Column, DataTable, Divider, FilterMatchMode, InputSwitch, InputText } from '@/lib/primevue';
-
-import type { Ref } from 'vue';
-
-type DemoObject = {
-  name: string;
-  value: string;
-  toggle: boolean;
-};
-
-// State
-const initialDatatableValues: Ref<DemoObject[]> = ref([
-  { id: 0, name: 'Item 1', value: 'a', toggle: false },
-  { id: 1, name: 'Item 2', value: 'b', toggle: false },
-  { id: 2, name: 'Item 3', value: 'c', toggle: true },
-  { id: 3, name: 'Item 4', value: 'd', toggle: true }
-]);
-const panelObject: Ref<DemoObject | undefined> = ref(undefined);
-const selectedDatatableObjects: Ref<Array<DemoObject>> = ref([]);
-const showSidePanel: Ref<boolean> = ref(false);
-
-// Datatable filter(s)
-const filters = ref({
-  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-});
-</script>
-
-<template>
-  <h3 class="pt-5 font-bold">Datatable</h3>
-
-  <div class="flex">
-    <div class="flex-grow-1">
-      <DataTable
-        v-model:selection="selectedDatatableObjects"
-        v-model:filters="filters"
-        :loading="false"
-        :value="initialDatatableValues"
-        data-key="id"
-        class="p-datatable-sm"
-        responsive-layout="scroll"
-        :paginator="true"
-        :rows="10"
-        paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
-        current-page-report-template="{first}-{last} of {totalRecords}"
-        :rows-per-page-options="[10, 20, 50]"
-        :global-filter-fields="['name', 'value']"
-      >
-        <template #empty>
-          <div class="flex justify-content-center">
-            <h3>No items found.</h3>
-          </div>
-        </template>
-        <template #loading>
-          <Spinner />
-        </template>
-        <template #header>
-          <div class="flex justify-content-end">
-            <span class="p-input-icon-left ml-4">
-              <i class="pi pi-search" />
-              <InputText
-                v-model="filters['global'].value"
-                placeholder="Search"
-              />
-            </span>
-          </div>
-        </template>
-        <Column
-          selection-mode="multiple"
-          header-style="width: 3rem"
-        />
-        <Column
-          field="name"
-          header="Name"
-          :sortable="true"
-        />
-        <Column
-          field="value"
-          header="Value"
-          :sortable="true"
-        />
-        <Column header="Toggle">
-          <template #body="{ data }">
-            <InputSwitch v-model="data.toggle" />
-          </template>
-        </Column>
-        <Column
-          header="Actions"
-          header-style="width: 250px"
-          header-class="header-right"
-          body-class="content-right action-buttons"
-        >
-          <template #body="{ data }">
-            <Button
-              class="p-button-lg p-button-rounded p-button-text"
-              aria-label="Synchronize bucket"
-              @click="
-                () => {
-                  showSidePanel = true;
-                  panelObject = data;
-                }
-              "
-            >
-              <font-awesome-icon icon="fa-solid fa-circle-info" />
-            </Button>
-          </template>
-        </Column>
-      </DataTable>
-    </div>
-    <Divider
-      v-if="showSidePanel && panelObject"
-      layout="vertical"
-    />
-    <div
-      v-if="showSidePanel && panelObject"
-      class="flex-shrink-0"
-      style="max-width: 25%; min-width: 25%"
-    >
-      <div class="flex justify-content-start">
-        <div class="flex col align-items-center heading">
-          <font-awesome-icon
-            icon="fa-solid fa-circle-info"
-            style="font-size: 2rem"
-          />
-          <h1>Side panel</h1>
-        </div>
-        <div>
-          <Button
-            class="black"
-            icon="pi pi-times"
-            text
-            rounded
-            @click="showSidePanel = false"
-          />
-        </div>
-      </div>
-      <div class="pl-2 sidebar">
-        <GridRow
-          label="Name"
-          :value="panelObject.name"
-        />
-        <GridRow
-          label="Value"
-          :value="panelObject.value"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-h1 {
-  padding-left: 1rem;
-}
-
-.black {
-  color: black;
-}
-.heading svg {
-  color: $app-primary;
-}
-</style>
diff --git a/frontend/src/components/demo/DemoHeadings.vue b/frontend/src/components/demo/DemoHeadings.vue
deleted file mode 100644
index e76ab998..00000000
--- a/frontend/src/components/demo/DemoHeadings.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <h1>Heading 1</h1>
-  <h2>Heading 2</h2>
-  <h3>Heading 3</h3>
-  <h4>Heading 4</h4>
-  <p>This is a paragraph</p>
-  <ul>
-    <li>This is a bullet point</li>
-  </ul>
-</template>
diff --git a/frontend/src/components/demo/DemoModals.vue b/frontend/src/components/demo/DemoModals.vue
deleted file mode 100644
index 0ea7ac10..00000000
--- a/frontend/src/components/demo/DemoModals.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { Form } from 'vee-validate';
-import { ref } from 'vue';
-import { object, string } from 'yup';
-
-import { TextInput } from '@/components/form';
-import { useAlert } from '@/composables/useAlert';
-import { Button, Dialog, useConfirm } from '@/lib/primevue';
-
-import type { Ref } from 'vue';
-
-// State
-const modalOpen: Ref<boolean> = ref(false);
-
-// Default form values
-const initialDialogValues: any = {
-  field2: 'Default'
-};
-
-// Form validation schema
-const dialogSchema = object({
-  field1: string().max(255).required().label('Field 1'),
-  field2: string().max(255).required().label('Field 2')
-});
-
-// Actions
-const alert = useAlert('Alert header', 'This is the alert message');
-const confirm = useConfirm();
-
-const showConfirm = () => {
-  confirm.require({
-    message: 'This is a confirm modal.',
-    header: 'Confirm header',
-    acceptLabel: 'Confirm',
-    rejectLabel: 'Cancel',
-    accept: () => console.log('Confirm'), // eslint-disable-line no-console
-    reject: () => console.log('Reject') // eslint-disable-line no-console
-  });
-};
-
-const showAlert = () => {
-  alert.show();
-};
-
-const onModalSubmit = (values: any) => {
-  console.log(values); // eslint-disable-line no-console
-  modalOpen.value = false;
-};
-</script>
-
-<template>
-  <h3 class="font-bold">Modals</h3>
-
-  <Button
-    class="mr-1"
-    @click="showConfirm"
-  >
-    Show confirm
-  </Button>
-  <Button
-    class="mr-1"
-    @click="showAlert"
-  >
-    Show alert
-  </Button>
-  <Button
-    class="mr-1"
-    @click="modalOpen = true"
-  >
-    Open modal
-  </Button>
-
-  <!-- eslint-disable vue/no-v-model-argument -->
-  <Dialog
-    v-model:visible="modalOpen"
-    :draggable="false"
-    :modal="true"
-    class="app-info-dialog permissions-modal"
-  >
-    <!-- eslint-enable vue/no-v-model-argument -->
-    <template #header>
-      <font-awesome-icon
-        icon="fa-solid fa-circle-info"
-        fixed-width
-      />
-      <span class="p-dialog-title">Modal header</span>
-    </template>
-
-    <h3 class="pt-3 pb-3">Modal body</h3>
-    <Form
-      :initial-values="initialDialogValues"
-      :validation-schema="dialogSchema"
-      @submit="onModalSubmit"
-    >
-      <TextInput
-        name="field1"
-        label="Field 1 *"
-        placeholder="Placeholder text"
-        help-text="Help text for this field."
-        autofocus
-      />
-      <TextInput
-        name="field2"
-        label="Field 2 *"
-        placeholder="Placeholder text"
-        help-text="Help text for this field."
-        autofocus
-      />
-      <Button
-        class="mt-5"
-        label="Save"
-        type="submit"
-        icon="pi pi-check"
-      />
-      <Button
-        class="p-button-text mt-2"
-        label="Cancel"
-        icon="pi pi-times"
-        @click="modalOpen = false"
-      />
-    </Form>
-  </Dialog>
-</template>
diff --git a/frontend/src/components/demo/DemoToasts.vue b/frontend/src/components/demo/DemoToasts.vue
deleted file mode 100644
index e618e3ab..00000000
--- a/frontend/src/components/demo/DemoToasts.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { Button, useToast } from '@/lib/primevue';
-
-// Actions
-const toast = useToast();
-</script>
-
-<template>
-  <h3 class="pt-5 font-bold">Toasts</h3>
-  <Button
-    class="mr-1"
-    @click="toast.success('This is a success.')"
-  >
-    Success
-  </Button>
-
-  <Button
-    class="mr-1"
-    severity="danger"
-    @click="toast.error('This is an error.')"
-  >
-    Error
-  </Button>
-
-  <Button
-    class="mr-1"
-    severity="info"
-    @click="toast.info('This is some information.')"
-  >
-    Information
-  </Button>
-
-  <Button
-    class="mr-1"
-    severity="warning"
-    @click="toast.warn('This is a warning.')"
-  >
-    Warning
-  </Button>
-</template>
diff --git a/frontend/src/components/demo/index.ts b/frontend/src/components/demo/index.ts
deleted file mode 100644
index c445fed0..00000000
--- a/frontend/src/components/demo/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as DemoButtons } from './DemoButtons.vue';
-export { default as DemoDataTable } from './DemoDataTable.vue';
-export { default as DemoHeadings } from './DemoHeadings.vue';
-export { default as DemoModals } from './DemoModals.vue';
-export { default as DemoToasts } from './DemoToasts.vue';
diff --git a/frontend/src/components/form/Calendar.vue b/frontend/src/components/form/Calendar.vue
index e71b0251..318aa485 100644
--- a/frontend/src/components/form/Calendar.vue
+++ b/frontend/src/components/form/Calendar.vue
@@ -11,6 +11,7 @@ type Props = {
   name: string;
   disabled?: boolean;
   showTime?: boolean;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,7 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   label: '',
   disabled: false,
-  showTime: false
+  showTime: false,
+  bold: true
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -26,12 +28,18 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="name">{{ label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
     <Calendar
       v-model.trim="value"
       :aria-describedby="`${name}-help`"
       :name="name"
-      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
       :show-time="props.showTime"
       hour-format="24"
@@ -40,6 +48,8 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       date-format="yy/mm/dd"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <ErrorMessage :name="name" />
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/Checkbox.vue b/frontend/src/components/form/Checkbox.vue
new file mode 100644
index 00000000..1f78a83c
--- /dev/null
+++ b/frontend/src/components/form/Checkbox.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { Checkbox } from '@/lib/primevue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  disabled?: boolean;
+  bold?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  disabled: false,
+  bold: true
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field col">
+    <div class="flex align-items-center">
+      <Checkbox
+        v-model.trim="value"
+        binary
+        :aria-describedby="`${name}-help`"
+        :name="name"
+        :class="{ 'p-invalid': errorMessage }"
+        :disabled="disabled"
+      />
+      <label
+        class="pl-2"
+        :class="{ 'font-bold': bold }"
+        :for="name"
+      >
+        {{ label }}
+      </label>
+      <small :id="`${name}-help`">{{ helpText }}</small>
+      <div>
+        <ErrorMessage :name="name" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/form/Dropdown.vue b/frontend/src/components/form/Dropdown.vue
index 528de09d..a971d608 100644
--- a/frontend/src/components/form/Dropdown.vue
+++ b/frontend/src/components/form/Dropdown.vue
@@ -11,7 +11,8 @@ type Props = {
   name: string;
   placeholder?: string;
   disabled?: boolean;
-  options: Array<string>;
+  options: Array<unknown>;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,7 +20,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   label: '',
   placeholder: '',
-  disabled: false
+  disabled: false,
+  bold: true
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -27,17 +29,25 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="name">{{ label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
     <Dropdown
       v-model.trim="value"
       :aria-describedby="`${name}-help`"
       :name="name"
       :placeholder="placeholder"
-      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
       :options="props.options"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <ErrorMessage :name="name" />
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/EditableDropdown.vue b/frontend/src/components/form/EditableDropdown.vue
index d82976eb..cf69f877 100644
--- a/frontend/src/components/form/EditableDropdown.vue
+++ b/frontend/src/components/form/EditableDropdown.vue
@@ -14,8 +14,9 @@ type Props = {
   name: string;
   placeholder?: string;
   disabled?: boolean;
-  options: Array<any>;
+  options: Array<unknown>;
   getOptionLabel: Function;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,7 +24,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   label: '',
   placeholder: '',
-  disabled: false
+  disabled: false,
+  bold: true
 });
 
 // Emits
@@ -34,14 +36,20 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="name">{{ label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
     <Dropdown
       v-model.trim="value"
       editable
       :aria-describedby="`${name}-help`"
       :name="name"
       :placeholder="placeholder"
-      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
       :options="props.options"
       :option-label="(option) => props.getOptionLabel(option)"
@@ -49,6 +57,8 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       @change="(e: DropdownChangeEvent) => emit('onChange', e)"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <ErrorMessage :name="name" />
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/InputMask.vue b/frontend/src/components/form/InputMask.vue
new file mode 100644
index 00000000..3f635b23
--- /dev/null
+++ b/frontend/src/components/form/InputMask.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { InputMask } from '@/lib/primevue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  mask: string;
+  placeholder?: string;
+  disabled?: boolean;
+  bold?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false,
+  bold: true
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field col">
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
+    <InputMask
+      v-model.trim="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :mask="mask"
+      :placeholder="placeholder"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
+      :disabled="disabled"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/form/InputNumber.vue b/frontend/src/components/form/InputNumber.vue
new file mode 100644
index 00000000..027b2bd5
--- /dev/null
+++ b/frontend/src/components/form/InputNumber.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { toRef, ref } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { InputNumber } from '@/lib/primevue';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+  bold?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false,
+  bold: true
+});
+
+// State
+const { errorMessage, value } = useField<number>(toRef(props, 'name'));
+const fieldActive: Ref<boolean> = ref(false);
+</script>
+
+<template>
+  <div class="field col">
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
+    <InputNumber
+      v-model.trim="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :placeholder="placeholder"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
+      :disabled="disabled"
+      @focus="fieldActive = true"
+      @blur="fieldActive = false"
+    />
+    <small
+      v-if="fieldActive"
+      :id="`${name}-help`"
+    >
+      {{ helpText }}
+    </small>
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/form/TextInput.vue b/frontend/src/components/form/InputText.vue
similarity index 73%
rename from frontend/src/components/form/TextInput.vue
rename to frontend/src/components/form/InputText.vue
index 56d33582..e9e893d2 100644
--- a/frontend/src/components/form/TextInput.vue
+++ b/frontend/src/components/form/InputText.vue
@@ -11,6 +11,7 @@ type Props = {
   name: string;
   placeholder?: string;
   disabled?: boolean;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,7 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   label: '',
   placeholder: '',
-  disabled: false
+  disabled: false,
+  bold: true
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -26,16 +28,24 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="name">{{ label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
     <InputText
       v-model.trim="value"
       :aria-describedby="`${name}-help`"
       :name="name"
       :placeholder="placeholder"
-      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <ErrorMessage :name="name" />
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/Password.vue b/frontend/src/components/form/Password.vue
index e36cad18..0b9f4a25 100644
--- a/frontend/src/components/form/Password.vue
+++ b/frontend/src/components/form/Password.vue
@@ -10,13 +10,15 @@ type Props = {
   name: string;
   placeholder?: string;
   type?: string;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   helptext: '',
   type: 'text',
   label: '',
-  placeholder: ''
+  placeholder: '',
+  bold: true
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -24,18 +26,26 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="props.name">{{ props.label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="props.name"
+    >
+      {{ props.label }}
+    </label>
     <Password
       v-model.trim="value"
       :aria-describedby="`${props.name}-help`"
       :name="props.name"
       :type="props.type"
       :placeholder="props.placeholder"
+      class="w-full"
       :class="{ 'p-invalid': errorMessage }"
       :feedback="false"
       toggle-mask
     />
     <small :id="`${name}-help`">{{ helptext }}</small>
-    <ErrorMessage :name="props.name" />
+    <div>
+      <ErrorMessage :name="props.name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/TextArea.vue b/frontend/src/components/form/TextArea.vue
index 00bcbfa2..4095db5b 100644
--- a/frontend/src/components/form/TextArea.vue
+++ b/frontend/src/components/form/TextArea.vue
@@ -11,6 +11,7 @@ type Props = {
   name: string;
   placeholder?: string;
   disabled?: boolean;
+  bold?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,7 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   label: '',
   placeholder: '',
-  disabled: false
+  disabled: false,
+  bold: true
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -26,17 +28,25 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <div class="field col">
-    <label :for="name">{{ label }}</label>
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
     <Textarea
       v-model.trim="value"
       :aria-describedby="`${name}-help`"
       :name="name"
       :placeholder="placeholder"
-      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
       :rows="5"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <ErrorMessage :name="name" />
+    <div>
+      <ErrorMessage :name="name" />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/index.ts b/frontend/src/components/form/index.ts
index f7339d2f..4dc98818 100644
--- a/frontend/src/components/form/index.ts
+++ b/frontend/src/components/form/index.ts
@@ -1,8 +1,11 @@
 export { default as Calendar } from './Calendar.vue';
+export { default as Checkbox } from './Checkbox.vue';
 export { default as CopyToClipboard } from './CopyToClipboard.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as EditableDropdown } from './EditableDropdown.vue';
 export { default as GridRow } from './GridRow.vue';
+export { default as InputMask } from './InputMask.vue';
+export { default as InputNumber } from './InputNumber.vue';
+export { default as InputText } from './InputText.vue';
 export { default as Password } from './Password.vue';
 export { default as TextArea } from './TextArea.vue';
-export { default as TextInput } from './TextInput.vue';
diff --git a/frontend/src/components/submission/SubmissionForm.vue b/frontend/src/components/submission/SubmissionForm.vue
index b1c7f0e3..9f1dfaf1 100644
--- a/frontend/src/components/submission/SubmissionForm.vue
+++ b/frontend/src/components/submission/SubmissionForm.vue
@@ -3,10 +3,19 @@ import { Form } from 'vee-validate';
 import { ref } from 'vue';
 import { mixed, number, object, string } from 'yup';
 
-import { Calendar, Dropdown, EditableDropdown, TextArea, TextInput } from '@/components/form';
+import {
+  Calendar,
+  Checkbox,
+  Dropdown,
+  EditableDropdown,
+  InputMask,
+  InputNumber,
+  InputText,
+  TextArea
+} from '@/components/form';
 import { Button } from '@/lib/primevue';
 import { userService } from '@/services';
-import { ApplicationStatusList, IntakeStatusList, Regex } from '@/utils/constants';
+import { ApplicationStatusList, IntakeStatusList, QueuePriority, Regex } from '@/utils/constants';
 import { formatJwtUsername } from '@/utils/formatters';
 
 import type { IInputEvent } from '@/interfaces';
@@ -37,25 +46,25 @@ const initialFormValues: any = {
 
 // Form validation schema
 const formSchema = object({
-  addedToATS: string().oneOf(['Y', 'N']).required().label('Added to ATS'),
   applicationStatus: string().oneOf(ApplicationStatusList).label('Application Status'),
   atsClientNumber: string()
     .when('addedToATS', {
-      is: 'Y',
+      is: true,
       then: (schema) => schema.required(),
       otherwise: (schema) => schema.notRequired()
     })
     .label('ATS Client Number'),
   confirmationId: string().required().label('Confirmation ID'),
-  financiallySupported: string().oneOf(['Y', 'N']).required().label('Financially Supported'),
+  contactEmail: string().email().label('Contact Email'),
   intakeStatus: string().oneOf(IntakeStatusList).label('Intake Status'),
+  latitude: number().notRequired().min(48).max(60).label('Latitude'),
+  longitude: number().notRequired().min(-139).max(-114).label('Longitude'),
   queuePriority: number()
     .required()
     .min(0)
     .integer()
     .typeError('Queue Priority must be a number')
     .label('Queue Priority'),
-  updatedAai: string().oneOf(['Y', 'N']).required().label('Updated AAI Spreadsheet'),
   user: mixed()
     .when('intakeStatus', {
       is: (val: string) => val !== 'SUBMITTED',
@@ -87,131 +96,213 @@ const onCancel = () => {
 };
 
 const onSubmit = (values: any) => {
+  // Ensure child values are reset if parent not set
+  if (!values.addedToATS) {
+    values.atsClientNumber = null;
+  }
+  if (!values.financiallySupported) {
+    values.financiallySupportedBC = false;
+    values.financiallySupportedIndigenous = false;
+    values.financiallySupportedNonProfit = false;
+    values.financiallySupportedHousingCoop = false;
+  }
+
   emit('submit', values);
 };
 </script>
 
 <template>
   <Form
-    v-slot="{ handleReset }"
+    v-slot="{ handleReset, values }"
     :initial-values="initialFormValues"
     :validation-schema="formSchema"
     @submit="onSubmit"
   >
     <div class="formgrid grid">
-      <TextInput
+      <InputText
         class="col-4"
         name="confirmationId"
-        label="Confirmation ID"
-        :disabled="true"
-      />
-      <TextInput
-        class="col-4"
-        name="submittedBy"
-        label="Submitted By"
+        label="Activity"
         :disabled="true"
       />
       <Calendar
         class="col-4"
         name="submittedAt"
-        label="Submission Date"
+        label="Submission date"
         :disabled="true"
       />
-      <TextInput
-        name="projectName"
-        label="Project Name"
+      <InputText
+        class="col-4"
+        name="locationPIDs"
+        label="Location PID(s)"
         :disabled="!props.editable"
         autofocus
       />
-      <TextInput
-        class="col-2"
-        name="contactLastName"
-        label="Contact Last Name"
+      <InputText
+        class="col-4"
+        name="contactName"
+        label="Contact"
         :disabled="!props.editable"
       />
-      <TextInput
-        class="col-2"
-        name="contactFirstName"
-        label="Contact First Name"
+      <InputMask
+        class="col-4"
+        name="contactPhoneNumber"
+        mask="(999) 999-9999"
+        label="Contact phone"
         :disabled="!props.editable"
       />
-      <TextInput
+      <InputText
         class="col-4"
         name="contactEmail"
-        label="Contact Email"
+        label="Contact email"
         :disabled="!props.editable"
       />
-      <TextInput
+      <InputText
         class="col-4"
-        name="contactPhoneNumber"
-        label="Contact Phone"
+        name="projectName"
+        label="Company"
         :disabled="!props.editable"
       />
-      <TextInput
+      <InputText
         class="col-4"
-        name="streetAddress"
-        label="Address"
+        name="singleFamilyUnits"
+        label="Units"
         :disabled="!props.editable"
       />
-      <TextInput
+      <div class="col-4" />
+      <InputText
         class="col-4"
-        name="singleFamilyUnits"
-        label="# of Units"
+        name="streetAddress"
+        label="Location address"
         :disabled="!props.editable"
       />
-      <TextInput
+      <InputNumber
         class="col-4"
-        name="atsClientNumber"
-        label="ATS Client Number"
+        name="latitude"
+        label="Location latitude"
+        help-text="Optionally provide a number between 48 and 60"
         :disabled="!props.editable"
       />
-      <TextInput
+      <InputNumber
         class="col-4"
+        name="longitude"
+        label="Location longitude"
+        help-text="Optionally provide a number between -114 and -139"
+        :disabled="!props.editable"
+      />
+      <Dropdown
+        class="col-2"
+        name="queuePriority"
+        label="Priority"
+        :disabled="!props.editable"
+        :options="QueuePriority"
+      />
+      <div class="col" />
+      <InputText
+        class="col-12"
+        name="relatedPermits"
+        label="Related permits"
+        :disabled="!props.editable"
+      />
+      <TextArea
+        class="col-12"
+        name="astNotes"
+        label="AST notes"
+        :disabled="!props.editable"
+      />
+      <Checkbox
+        class="col-12"
+        name="astUpdated"
+        label="Automated Status Tool (AST) updated"
+        :disabled="!props.editable"
+      />
+      <Checkbox
+        class="col-12"
         name="addedToATS"
-        label="Added to ATS *"
+        label="Authorized Tracking System (ATS)"
         :disabled="!props.editable"
+        :bold="true"
       />
-      <TextInput
-        class="col-4"
+      <div
+        v-if="values.addedToATS"
+        class="pl-4 col-12 flex"
+      >
+        <div>
+          <p
+            class="clientNumber align-items-center"
+            style="color: #38598a"
+          >
+            ATS Client #
+          </p>
+        </div>
+        <div class="col">
+          <InputText
+            class="col-4 align-items-center"
+            name="atsClientNumber"
+            :disabled="!props.editable"
+          />
+        </div>
+      </div>
+      <Checkbox
+        class="col-12"
+        name="ltsaCompleted"
+        label="Land Title Survey Authority (LTSA) completed"
+        :disabled="!props.editable"
+      />
+      <Checkbox
+        class="col-12"
+        name="naturalDisaster"
+        label="Location affeced by natural disaster"
+        :disabled="!props.editable"
+      />
+      <Checkbox
+        class="col-12"
         name="financiallySupported"
-        label="Financially Supported *"
+        label="Financially supported"
         :disabled="!props.editable"
       />
-      <Dropdown
-        class="col-4"
-        name="applicationStatus"
-        label="Application Status"
+      <Checkbox
+        v-if="values.financiallySupported"
+        class="pl-4 col-12"
+        name="financiallySupportedBC"
+        label="BC Housing"
         :disabled="!props.editable"
-        :options="ApplicationStatusList"
+        :bold="false"
       />
-      <TextInput
-        class="col-4"
-        name="queuePriority"
-        label="Queue Priority"
+      <Checkbox
+        v-if="values.financiallySupported"
+        class="pl-4 col-12"
+        name="financiallySupportedIndigenous"
+        label="Indigenous Housing Provider"
         :disabled="!props.editable"
+        :bold="false"
       />
-      <TextInput
-        class="col-4"
-        name="relatedPermits"
-        label="Related Permits"
+      <Checkbox
+        v-if="values.financiallySupported"
+        class="pl-4 col-12"
+        name="financiallySupportedNonProfit"
+        label="Non-profit housing society"
         :disabled="!props.editable"
+        :bold="false"
       />
-      <TextInput
-        class="col-4"
-        name="updatedAai"
-        label="Updated AAI Spreadsheet *"
+      <Checkbox
+        v-if="values.financiallySupported"
+        class="pl-4 col-12"
+        name="financiallySupportedHousingCoop"
+        label="Housing co-operative"
         :disabled="!props.editable"
+        :bold="false"
       />
-      <TextInput
-        class="col-4"
+      <InputText
+        class="col-6"
         name="waitingOn"
-        label="Waiting On"
+        label="Waiting on"
         :disabled="!props.editable"
       />
       <Calendar
-        class="col-4"
+        class="col-6"
         name="bringForwardDate"
-        label="Bring Forward Date"
+        label="Bring forward date"
         :disabled="!props.editable"
       />
       <TextArea
@@ -223,7 +314,7 @@ const onSubmit = (values: any) => {
       <EditableDropdown
         class="col-4"
         name="user"
-        label="Assignee"
+        label="Assigned to"
         :disabled="!props.editable"
         :options="assigneeOptions"
         :get-option-label="getAssigneeOptionLabel"
@@ -232,11 +323,21 @@ const onSubmit = (values: any) => {
       <Dropdown
         class="col-4"
         name="intakeStatus"
-        label="Intake Status"
+        label="Intake status"
         :disabled="!props.editable"
         :options="IntakeStatusList"
       />
-      <div class="field col-12">
+      <Dropdown
+        class="col-4"
+        name="applicationStatus"
+        label="Status"
+        :disabled="!props.editable"
+        :options="ApplicationStatusList"
+      />
+      <div
+        v-if="props.editable"
+        class="field col-12"
+      >
         <Button
           label="Save"
           type="submit"
@@ -260,3 +361,9 @@ const onSubmit = (values: any) => {
     </div>
   </Form>
 </template>
+
+<style scoped lang="scss">
+.clientNumber {
+  margin-top: 8px;
+}
+</style>
diff --git a/frontend/src/lib/primevue/index.ts b/frontend/src/lib/primevue/index.ts
index 94a0bc16..9076b762 100644
--- a/frontend/src/lib/primevue/index.ts
+++ b/frontend/src/lib/primevue/index.ts
@@ -9,6 +9,8 @@ export { default as DataTable } from 'primevue/datatable';
 export { default as Dialog } from 'primevue/dialog';
 export { default as Divider } from 'primevue/divider';
 export { default as Dropdown } from 'primevue/dropdown';
+export { default as InputMask } from 'primevue/inputmask';
+export { default as InputNumber } from 'primevue/inputnumber';
 export { default as InputSwitch } from 'primevue/inputswitch';
 export { default as InputText } from 'primevue/inputtext';
 export { default as Message } from 'primevue/message';
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 27747d02..e0a1b0e8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -29,12 +29,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/InitiativesView.vue'),
     meta: { requiresAuth: true, title: 'Initiatives' }
   },
-  {
-    path: '/stylings',
-    name: RouteNames.STYLINGS,
-    component: () => import('@/views/StylingsView.vue'),
-    meta: { requiresAuth: false, title: 'Stylings' }
-  },
   {
     path: '/submission',
     name: RouteNames.SUBMISSION,
diff --git a/frontend/src/types/ChefsSubmissionForm.ts b/frontend/src/types/ChefsSubmissionForm.ts
index 627a816c..1776c3e1 100644
--- a/frontend/src/types/ChefsSubmissionForm.ts
+++ b/frontend/src/types/ChefsSubmissionForm.ts
@@ -1,27 +1,36 @@
-import type { User, YRN } from '.';
+import type { User } from './User';
 
 export type ChefsSubmissionForm = {
   submissionId: string;
   confirmationId: string;
-  contactEmail?: string;
+  submittedAt: string;
+  submittedBy: string;
+  locationPIDs?: string;
+  contactName?: string;
   contactPhoneNumber?: string;
-  contactFirstName?: string;
-  contactLastName?: string;
-  intakeStatus?: string;
+  contactEmail?: string;
   projectName?: string;
-  queuePriority?: string;
   singleFamilyUnits?: string;
   streetAddress?: string;
-  atsClientNumber?: string;
-  addedToATS: YRN;
-  financiallySupported: YRN;
-  applicationStatus?: string;
+  latitude?: number;
+  longitude?: number;
+  queuePriority?: string;
   relatedPermits?: string;
-  updatedAai: YRN;
+  astNotes?: string;
+  astUpdated?: boolean;
+  addedToATS?: boolean;
+  atsClientNumber?: string;
+  ltsaCompleted?: boolean;
+  naturalDisaster?: boolean;
+  financiallySupported?: boolean;
+  financiallySupportedBC?: boolean;
+  financiallySupportedIndigenous?: boolean;
+  financiallySupportedNonProfit?: boolean;
+  financiallySupportedHousingCoop?: boolean;
   waitingOn?: string;
-  submittedAt: string;
-  submittedBy: string;
   bringForwardDate?: string;
   notes?: string;
-  user?: User;
+  user?: User; // assigned to
+  intakeStatus?: string;
+  applicationStatus?: string;
 };
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 8dc12387..9aef4e73 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -60,6 +60,8 @@ export const IntakeStatusList = [
   INTAKE_STATUS_LIST.COMPLETED
 ];
 
+export const QueuePriority = [0, 1, 2, 3, 4, 5];
+
 /**
  * Default System User ID
  */
diff --git a/frontend/src/views/StylingsView.vue b/frontend/src/views/StylingsView.vue
deleted file mode 100644
index 77d7477c..00000000
--- a/frontend/src/views/StylingsView.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia';
-
-import { DemoButtons, DemoDataTable, DemoHeadings, DemoModals, DemoToasts } from '@/components/demo';
-import { Message } from '@/lib/primevue';
-import { useConfigStore } from '@/store';
-
-// Store
-const { getConfig } = storeToRefs(useConfigStore());
-</script>
-
-<template>
-  <Message
-    v-if="getConfig?.notificationBanner"
-    severity="warn"
-  >
-    {{ getConfig?.notificationBanner }}
-  </Message>
-
-  <DemoHeadings />
-  <DemoButtons />
-  <DemoDataTable />
-  <DemoModals />
-  <DemoToasts />
-
-  <div class="pb-5" />
-</template>
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 2e351f9c..b3f31239 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -41,13 +41,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <h1>Submission</h1>
+  <h1>Activity submission</h1>
 
   <Button
     class="mb-3"
     @click="editable = !editable"
   >
-    Edit mode
+    Edit
   </Button>
 
   <SubmissionForm
diff --git a/frontend/tests/unit/components/form/TextInput.spec.ts b/frontend/tests/unit/components/form/InputText.ts
similarity index 81%
rename from frontend/tests/unit/components/form/TextInput.spec.ts
rename to frontend/tests/unit/components/form/InputText.ts
index 5504f468..5f4b52aa 100644
--- a/frontend/tests/unit/components/form/TextInput.spec.ts
+++ b/frontend/tests/unit/components/form/InputText.ts
@@ -1,11 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 
 import PrimeVue from 'primevue/config';
-import TextInput from '@/components/form/TextInput.vue';
+import InputText from '@/components/form/InputText.vue';
 
-describe('TextInput.vue', () => {
+describe('InputText.vue', () => {
   it('renders', () => {
-    const wrapper = shallowMount(TextInput, {
+    const wrapper = shallowMount(InputText, {
       props: {
         name: 'test'
       },
@@ -18,7 +18,7 @@ describe('TextInput.vue', () => {
   });
 
   it('displays the label', () => {
-    const wrapper = shallowMount(TextInput, {
+    const wrapper = shallowMount(InputText, {
       props: {
         label: 'testlabel',
         name: 'test'
@@ -33,7 +33,7 @@ describe('TextInput.vue', () => {
   });
 
   it('displays the help text', () => {
-    const wrapper = shallowMount(TextInput, {
+    const wrapper = shallowMount(InputText, {
       props: {
         helpText: 'some help text',
         name: 'test'
@@ -48,7 +48,7 @@ describe('TextInput.vue', () => {
   });
 
   it('sets the placeholder text', () => {
-    const wrapper = shallowMount(TextInput, {
+    const wrapper = shallowMount(InputText, {
       props: {
         name: 'test',
         placeholder: 'some placeholder text'
@@ -63,7 +63,7 @@ describe('TextInput.vue', () => {
   });
 
   it('sets the disabled attribute', () => {
-    const wrapper = shallowMount(TextInput, {
+    const wrapper = shallowMount(InputText, {
       props: {
         disabled: true,
         name: 'test'

From 68083e581eb293340e579c5e5c5383ca2e22d443 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Fri, 29 Dec 2023 13:33:11 -0800
Subject: [PATCH 2/2] Pulling in additional form values from CHEFS

---
 app/src/db/models/submission.ts |  2 +-
 app/src/services/chefs.ts       | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/src/db/models/submission.ts b/app/src/db/models/submission.ts
index 32e399d3..d9a8453b 100644
--- a/app/src/db/models/submission.ts
+++ b/app/src/db/models/submission.ts
@@ -32,7 +32,7 @@ export default {
     return {
       submissionId: input.submissionId,
       confirmationId: input.confirmationId,
-      submittedAt: new Date(input.submittedAt),
+      submittedAt: new Date(input.submittedAt ?? Date.now()),
       submittedBy: input.submittedBy,
       locationPIDs: input.locationPIDs,
       contactName: input.contactName,
diff --git a/app/src/services/chefs.ts b/app/src/services/chefs.ts
index 140fa33a..9aef592a 100644
--- a/app/src/services/chefs.ts
+++ b/app/src/services/chefs.ts
@@ -2,7 +2,7 @@
 import axios from 'axios';
 import config from 'config';
 
-import { getChefsApiKey } from '../components/utils';
+import { getChefsApiKey, isTruthy } from '../components/utils';
 import prisma from '../db/dataConnection';
 import { submission } from '../db/models';
 
@@ -52,6 +52,13 @@ const service = {
 
         const submission = response.submission.submission.data;
 
+        const financiallySupportedValues = {
+          financiallySupportedBC: isTruthy(submission.isBCHousingSupported),
+          financiallySupportedIndigenous: isTruthy(submission.isIndigenousHousingProviderSupported),
+          financiallySupportedNonProfit: isTruthy(submission.isNonProfitSupported),
+          financiallySupportedHousingCoop: isTruthy(submission.isHousingCooperativeSupported)
+        };
+
         await prisma.submission.create({
           data: {
             submissionId: response.submission.id,
@@ -59,10 +66,15 @@ const service = {
             contactEmail: submission.contactEmail,
             contactPhoneNumber: submission.contactPhoneNumber,
             contactName: `${submission.contactFirstName} ${submission.contactLastName}`,
+            financiallySupported: Object.values(financiallySupportedValues).includes(true),
+            ...financiallySupportedValues,
             intakeStatus: status[0].code,
-            projectName: submission.projectName,
+            latitude: parseInt(submission.latitude),
+            longitude: parseInt(submission.longitude),
+            naturalDisaster: submission.naturalDisasterInd,
+            projectName: submission.companyNameRegistered,
             queuePriority: parseInt(submission.queuePriority),
-            singleFamilyUnits: submission.singleFamilyUnits,
+            singleFamilyUnits: submission.singleFamilyUnits ?? submission.multiFamilyUnits,
             streetAddress: submission.streetAddress,
             submittedAt: response.submission.createdAt,
             submittedBy: response.submission.createdBy