From 161606bf1d48a54a7ab3a82d6bebcf32e3f7c5b5 Mon Sep 17 00:00:00 2001
From: Le <vietdung.le@cgi.com>
Date: Fri, 11 Oct 2024 17:25:28 -0700
Subject: [PATCH 1/4] viet vue 3 upgrade fix - fix for ECEWEFacility and
 Supporting Document Upload

---
 .../components/SupportingDocumentUpload.vue   | 128 ++++++++----------
 .../eceweApplication/EceweFacilities.vue      |  15 +-
 2 files changed, 62 insertions(+), 81 deletions(-)

diff --git a/frontend/src/components/SupportingDocumentUpload.vue b/frontend/src/components/SupportingDocumentUpload.vue
index 5a0db35c3..b5e6248d9 100644
--- a/frontend/src/components/SupportingDocumentUpload.vue
+++ b/frontend/src/components/SupportingDocumentUpload.vue
@@ -23,47 +23,35 @@
           <v-data-table
             v-if="!isLoading"
             :headers="headers"
-            :items="uploadedDocuments"
+            :items="uploadedSupportingDocuments"
             class="elevation-1"
             hide-default-header
             hide-default-footer
             :items-per-page="-1"
           >
             <template #top>
-              <v-col flex>
-                <v-toolbar flat color="white">
-                  <div class="d-flex">
-                    <v-btn
-                      color="primary"
-                      class="ml-2 text-white v-skeleton-loader-small-button"
-                      :disabled="isLocked"
-                      @click="addNew"
-                    >
-                      <v-icon theme="dark"> mdi-plus </v-icon>
-                      Add
-                    </v-btn>
-                  </div>
-                </v-toolbar>
-              </v-col>
+              <div class="ma-4 d-flex">
+                <v-btn color="primary" class="ml-2" :disabled="isLocked" @click="addNew">
+                  <v-icon>mdi-plus</v-icon>
+                  Add
+                </v-btn>
+              </div>
             </template>
 
             <template #item.facilityName="{ item }">
-              <v-col flex>
-                <div v-if="item?.annotationid">
-                  <span> {{ item?.ccof_facility_name }} </span>
-                </div>
-                <v-select
-                  v-else
-                  v-model="item.selectFacility"
-                  :items="facilityNames"
-                  item-title="facilityName"
-                  placeholder="Select a facility"
-                  return-object
-                  class="drop-down-select"
-                  required
-                  :rules="selectRules"
-                />
-              </v-col>
+              <div v-if="item?.annotationid">
+                <span> {{ item?.ccof_facility_name }} </span>
+              </div>
+              <v-select
+                v-else
+                v-model="item.selectFacility"
+                :items="facilityNames"
+                item-title="facilityName"
+                placeholder="Select a facility"
+                return-object
+                class="drop-down-select"
+                :rules="selectRules"
+              />
             </template>
 
             <template #item.document="{ item }">
@@ -73,16 +61,11 @@
               <v-file-input
                 v-else
                 :id="String(item.id)"
-                color="#003366"
                 :rules="fileRules"
                 prepend-icon="mdi-file-upload"
                 :clearable="false"
-                class="pt-0"
                 :accept="fileAccept"
-                :disabled="false"
                 placeholder="Select your file"
-                :error-messages="fileInputError"
-                required
                 @click:clear="deleteItem(item)"
                 @change="selectFile"
               />
@@ -218,37 +201,33 @@ export default {
       facilityNames: [],
       model: {},
       tempFacilityId: null,
-      isValidForm: false,
+      isValidForm: true,
       currentrow: null,
       otherChanges: null,
       headers: [
         {
-          text: 'Facility Name',
-          align: 'left',
-          sortable: false,
+          title: 'Facility Name',
           value: 'facilityName',
-          class: 'table-header',
+          width: '35%',
+          sortable: false,
         },
         {
-          text: 'Document',
-          align: 'left',
-          sortable: false,
+          title: 'Document',
           value: 'document',
-          class: 'table-header',
+          width: '25%',
+          sortable: false,
         },
         {
-          text: 'Description',
-          align: 'left',
-          sortable: false,
+          title: 'Description',
           value: 'description',
-          class: 'table-header',
+          width: '35%',
+          sortable: false,
         },
         {
-          text: 'Actions',
-          align: 'left',
+          title: 'Actions',
           sortable: false,
+          width: '5%',
           value: 'actions',
-          class: 'table-header',
         },
       ],
       fileAccept: [
@@ -267,10 +246,9 @@ export default {
       ],
       fileExtensionAccept: ['pdf', 'png', 'jpg', 'jpeg', 'heic', 'doc', 'docx', 'xls', 'xlsx'],
       fileFormats: 'PDF, JPEG, JPG, PNG, HEIC, DOC, DOCX, XLS and XLSX',
-      fileInputError: [],
       fileMap: new Map(),
       fileRules: [],
-      uploadedDocuments: [],
+      uploadedSupportingDocuments: [],
       editedIndex: -1,
       editedItem: {
         selectFacility: '',
@@ -323,8 +301,10 @@ export default {
       return false;
     },
     isSaveDisabled() {
-      const newFilesAdded = this.uploadedDocuments.filter((el) => !!el.id);
-      return this.isValidForm && (newFilesAdded.length > 0 || this.uploadedDocuments?.deletedItems?.length > 0);
+      const newFilesAdded = this.uploadedSupportingDocuments.filter((el) => !!el.id);
+      return (
+        this.isValidForm && (newFilesAdded.length > 0 || this.uploadedSupportingDocuments?.deletedItems?.length > 0)
+      );
     },
     isNextEnabled() {
       if (this.isChangeRequest) return this.isValidForm;
@@ -444,7 +424,7 @@ export default {
       this.isProcessing = true;
       try {
         await this.processDocumentFileDelete();
-        const newFilesAdded = this.uploadedDocuments.filter((el) => !!el.id);
+        const newFilesAdded = this.uploadedSupportingDocuments.filter((el) => !!el.id);
         if (newFilesAdded.length > 0) {
           await this.processDocumentFilesSave(newFilesAdded);
           this.fileMap?.clear();
@@ -480,8 +460,8 @@ export default {
       }
     },
     async processDocumentFileDelete() {
-      if (this.uploadedDocuments?.deletedItems?.length > 0) {
-        await this.deleteDocuments(this.uploadedDocuments.deletedItems);
+      if (this.uploadedSupportingDocuments?.deletedItems?.length > 0) {
+        await this.deleteDocuments(this.uploadedSupportingDocuments.deletedItems);
       }
     },
     async selectFile(event) {
@@ -495,7 +475,7 @@ export default {
     readFile(file) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
-        reader.readAsBinaryString(file);
+        reader.readAsArrayBuffer(file);
         reader.onload = () => {
           const doc = {
             filename: getFileNameWithMaxNameLength(file.name),
@@ -521,7 +501,7 @@ export default {
       this.isLoading = true;
       try {
         await this.getDocuments(this.applicationId);
-        this.uploadedDocuments = this.uploadedDocuments.filter(
+        this.uploadedSupportingDocuments = this.uploadedDocuments.filter(
           (document) => this.navBarList.findIndex((item) => item.facilityId == document.ccof_facility) > -1,
         );
       } catch (e) {
@@ -532,35 +512,35 @@ export default {
       }
     },
     editItem(item) {
-      this.editedIndex = this.uploadedDocuments.indexOf(item);
+      this.editedIndex = this.uploadedSupportingDocuments.indexOf(item);
       this.editedItem = Object.assign({}, item);
     },
 
     deleteItem(item) {
-      const index = this.uploadedDocuments.indexOf(item);
+      const index = this.uploadedSupportingDocuments.indexOf(item);
       if (item.annotationid) {
-        let deletedItems = this.uploadedDocuments['deletedItems'];
+        let deletedItems = this.uploadedSupportingDocuments['deletedItems'];
         if (deletedItems?.length > 0) {
           deletedItems.push(item.annotationid);
-          this.uploadedDocuments['deletedItems'] = deletedItems;
+          this.uploadedSupportingDocuments['deletedItems'] = deletedItems;
         } else {
           deletedItems = [];
           deletedItems.push(item.annotationid);
-          this.uploadedDocuments['deletedItems'] = deletedItems;
+          this.uploadedSupportingDocuments['deletedItems'] = deletedItems;
         }
       }
-      this.uploadedDocuments.splice(index, 1);
+      this.uploadedSupportingDocuments.splice(index, 1);
     },
     addNew() {
       const addObj = Object.assign({}, this.defaultItem);
       addObj.id = Math.random() * 10;
-      //addObj.id = this.uploadedDocuments.length + 1;
-      this.uploadedDocuments.unshift(addObj);
+      //addObj.id = this.uploadedSupportingDocuments.length + 1;
+      this.uploadedSupportingDocuments.unshift(addObj);
       this.editItem(addObj);
     },
     updateDescription(item) {
-      const index = this.uploadedDocuments.indexOf(item);
-      this.uploadedDocuments[index].description = item.description;
+      const index = this.uploadedSupportingDocuments.indexOf(item);
+      this.uploadedSupportingDocuments[index].description = item.description;
     },
     async mapFacilityData() {
       for (let facilityInfo of this.navBarList) {
@@ -584,4 +564,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+:deep(.v-field__input) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/frontend/src/components/eceweApplication/EceweFacilities.vue b/frontend/src/components/eceweApplication/EceweFacilities.vue
index 45df89793..189736c9f 100644
--- a/frontend/src/components/eceweApplication/EceweFacilities.vue
+++ b/frontend/src/components/eceweApplication/EceweFacilities.vue
@@ -35,16 +35,12 @@
                 <v-card elevation="4" class="py-2 px-5 mx-2 rounded-lg col-9" width="75%">
                   <v-row>
                     <v-col cols="12" class="d-flex">
-                      <span
-                        ><strong> Facility ID: {{ navBarList[index].facilityAccountNumber }}</strong></span
-                      >
+                      <strong>Facility ID: {{ navBarList[index].facilityAccountNumber }}</strong>
                     </v-col>
                   </v-row>
                   <v-row>
                     <v-col cols="5" class="flex-column">
-                      <span
-                        ><strong> Facility Name: {{ navBarList[index].facilityName }}</strong></span
-                      >
+                      <strong>Facility Name: {{ navBarList[index].facilityName }}</strong>
                     </v-col>
                     <v-col v-if="!uiFacilities[index].update" cols="4" class="flex-column text-center">
                       <strong> Status: Opt-{{ uiFacilities[index].optInOrOut == 1 ? 'In' : 'Out' }} </strong>
@@ -60,9 +56,10 @@
                         inline
                         :disabled="isReadOnly"
                         :rules="rules.required"
+                        @update:modelValue="toggleRadio(index)"
                       >
-                        <v-radio label="Opt-In" :value="1" @click="toggleRadio(index)" />
-                        <v-radio label="Opt-Out" :value="0" @click="toggleRadio(index)" />
+                        <v-radio label="Opt-In" :value="1" />
+                        <v-radio label="Opt-Out" :value="0" />
                       </v-radio-group>
                     </v-col>
                     <v-col cols="3">
@@ -211,7 +208,7 @@ export default {
       this.setFacilities([...this.facilities]);
     },
     toggleRadio(index) {
-      this.uiFacilities[index].update = this.uiFacilities[index].update == true ? false : true;
+      this.uiFacilities[index].update = !this.uiFacilities[index].update;
     },
     toggleAll() {
       this.uiFacilities.forEach((_fac, index) => {

From a47a9f302e25c7633016a96300a27eee98e30bc2 Mon Sep 17 00:00:00 2001
From: Le <vietdung.le@cgi.com>
Date: Mon, 14 Oct 2024 13:59:45 -0700
Subject: [PATCH 2/4] ccfri-3644 - update ELCCA language

---
 frontend/src/components/Login.vue                  | 14 +++++++-------
 frontend/src/components/SummaryDeclaration.vue     | 12 ++++++------
 .../src/components/SupportingDocumentUpload.vue    |  3 +++
 .../SummaryDeclarationChangeRequest.vue            | 12 ++++++------
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 5c74d0492..78168d308 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -39,13 +39,13 @@
         <p class="pt-4">
           <strong>NOTE:</strong> The information collected through My ChildCareBC Services is collected under the
           authority of the <i>Freedom of Information and Protection of Privacy Act</i> (FOIPPA) and the
-          <i>Child Care BC Act</i> (SBC 2001, c. 4) and will be used for the purpose of administering the Child Care
-          Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early Childhood
-          Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is protected from
-          unauthorized use and disclosure in accordance with FOIPPA. Any questions or concerns about the collection of
-          this information can be directed to the Director, Child Care Operating Funding Program, PO Box 9965 Stn Prov
-          Govt, Victoria BC V8W 9R4, Phone: in Greater Victoria: 250 356-6501, outside of Greater Victoria, Toll Free: 1
-          888 338-6622 (option 2).
+          <i>Early Learning and Child Care Act</i> (SBC 2001, c. 4) and will be used for the purpose of administering
+          the Child Care Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early
+          Childhood Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is
+          protected from unauthorized use and disclosure in accordance with FOIPPA. Any questions or concerns about the
+          collection of this information can be directed to the Director, Child Care Operating Funding Program, PO Box
+          9965 Stn Prov Govt, Victoria BC V8W 9R4, Phone: in Greater Victoria: 250 356-6501, outside of Greater
+          Victoria, Toll Free: 1 888 338-6622 (option 2).
         </p>
         <v-row>
           <v-col class="xs-12 lg-4 xl-2">
diff --git a/frontend/src/components/SummaryDeclaration.vue b/frontend/src/components/SummaryDeclaration.vue
index 85ada24af..83008f211 100644
--- a/frontend/src/components/SummaryDeclaration.vue
+++ b/frontend/src/components/SummaryDeclaration.vue
@@ -283,10 +283,10 @@
                 </ul>
                 <p style="padding-top: 10px">
                   Intentionally supplying information that is false or misleading with respect to a material fact in
-                  order to obtain a child care grant may lead to action being taken under Section 9 of the Child Care BC
-                  Act. If you are convicted of an offence under section 9, a court may order you imprisoned for up to
-                  six months, fine you not more than $2,000.00, or order you to pay the government all or part of any
-                  amount received under the child care grant.
+                  order to obtain a child care grant may lead to action being taken under Section 9 of the Early
+                  Learning and Child Care Act. If you are convicted of an offence under section 9, a court may order you
+                  imprisoned for up to six months, fine you not more than $2,000.00, or order you to pay the government
+                  all or part of any amount received under the child care grant.
                 </p>
               </div>
               <!-- show for new org after ministry unlocks -->
@@ -335,8 +335,8 @@
                     understand and acknowledge that providing false or misleading information either on the Form or
                     otherwise to the Province to obtain any funding under the Funding Agreement or otherwise failing to
                     comply with the Funding Agreement could result in certain penalties or repayment obligations, or
-                    both, under any or all of the Child Care BC Act, any successor legislation, or the Funding
-                    Agreement;
+                    both, under any or all of the Early Learning and Child Care Act, any successor legislation, or the
+                    Funding Agreement;
                   </li>
                   <li>
                     If I have applied for and been approved by the Province to enroll in the ECE Wage Enhancement, the
diff --git a/frontend/src/components/SupportingDocumentUpload.vue b/frontend/src/components/SupportingDocumentUpload.vue
index b5e6248d9..9c4f231a9 100644
--- a/frontend/src/components/SupportingDocumentUpload.vue
+++ b/frontend/src/components/SupportingDocumentUpload.vue
@@ -568,4 +568,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+:deep(.v-select__selection) {
+  padding-left: 12px;
+}
 </style>
diff --git a/frontend/src/components/requestChanges/SummaryDeclarationChangeRequest.vue b/frontend/src/components/requestChanges/SummaryDeclarationChangeRequest.vue
index 17e467903..a56b1a98f 100644
--- a/frontend/src/components/requestChanges/SummaryDeclarationChangeRequest.vue
+++ b/frontend/src/components/requestChanges/SummaryDeclarationChangeRequest.vue
@@ -186,10 +186,10 @@
                 </ul>
                 <p style="padding-top: 10px">
                   Intentionally supplying information that is false or misleading with respect to a material fact in
-                  order to obtain a child care grant may lead to action being taken under Section 9 of the Child Care BC
-                  Act. If you are convicted of an offence under section 9, a court may order you imprisoned for up to
-                  six months, fine you not more than $2,000.00, or order you to pay the government all or part of any
-                  amount received under the child care grant.
+                  order to obtain a child care grant may lead to action being taken under Section 9 of the Early
+                  Learning and Child Care Act. If you are convicted of an offence under section 9, a court may order you
+                  imprisoned for up to six months, fine you not more than $2,000.00, or order you to pay the government
+                  all or part of any amount received under the child care grant.
                 </p>
               </div>
 
@@ -238,8 +238,8 @@
                     understand and acknowledge that providing false or misleading information either on the Form or
                     otherwise to the Province to obtain any funding under the Funding Agreement or otherwise failing to
                     comply with the Funding Agreement could result in certain penalties or repayment obligations, or
-                    both, under any or all of the Child Care BC Act, any successor legislation, or the Funding
-                    Agreement;
+                    both, under any or all of the Early Learning and Child Care Act, any successor legislation, or the
+                    Funding Agreement;
                   </li>
                   <li>
                     If I have applied for and been approved by the Province to enroll in the ECE Wage Enhancement, the

From f748aee4a1a25f92640ac7772ebf1e309fba4fef Mon Sep 17 00:00:00 2001
From: Le <vietdung.le@cgi.com>
Date: Tue, 15 Oct 2024 11:01:53 -0700
Subject: [PATCH 3/4] ccfri-3670 - Add Province field to Org and Facility
 Information

---
 backend/src/components/facility.js            |  2 +-
 backend/src/util/mapping/Mappings.js          |  3 +
 .../family/FamilyOrganization.vue             | 32 +++++++++--
 .../group/FacilityInformation.vue             |  7 ++-
 .../group/OrganizationInformation.vue         | 57 +++++++++++++------
 frontend/src/mixins/facilityMixin.js          | 11 +++-
 frontend/src/mixins/organizationMixin.js      |  4 +-
 frontend/src/utils/constants.js               | 55 ++++++++++++++++++
 8 files changed, 142 insertions(+), 29 deletions(-)

diff --git a/backend/src/components/facility.js b/backend/src/components/facility.js
index 46844ba8c..924e828dd 100644
--- a/backend/src/components/facility.js
+++ b/backend/src/components/facility.js
@@ -86,7 +86,7 @@ function mapCCFRIObjectForFront(data) {
 async function getFacility(req, res) {
   try {
     //,_ccof_change_request_value
-    let operation = 'accounts('+req.params.facilityId+')?$select=ccof_accounttype,name,ccof_facilitystartdate,address1_line1,address1_city,address1_postalcode,ccof_position,emailaddress1,address1_primarycontactname,telephone1,ccof_facilitylicencenumber,ccof_licensestartdate,ccof_formcomplete,ccof_everreceivedfundingundertheccofprogram,ccof_facilityreceived_ccof_funding,accountnumber,ccof_facilitystatus'; //+ getMappingString(FacilityMappings);
+    let operation = 'accounts('+req.params.facilityId+')?$select=ccof_accounttype,name,ccof_facilitystartdate,address1_line1,address1_city,address1_stateorprovince,address1_postalcode,ccof_position,emailaddress1,address1_primarycontactname,telephone1,ccof_facilitylicencenumber,ccof_licensestartdate,ccof_formcomplete,ccof_everreceivedfundingundertheccofprogram,ccof_facilityreceived_ccof_funding,accountnumber,ccof_facilitystatus'; //+ getMappingString(FacilityMappings);
     log.info('operation: ', operation);
     let facility = await getOperation(operation);
 
diff --git a/backend/src/util/mapping/Mappings.js b/backend/src/util/mapping/Mappings.js
index c9810d2fa..b5fb82315 100644
--- a/backend/src/util/mapping/Mappings.js
+++ b/backend/src/util/mapping/Mappings.js
@@ -3,9 +3,11 @@ const OrganizationMappings = [
   { back: 'name', front: 'legalName' },
   { back: 'address1_name', front: 'address1' }, //Address
   { back: 'address1_city', front: 'city1' },
+  { back: 'address1_stateorprovince', front: 'province1' },
   { back: 'address1_postalcode', front: 'postalCode1' },
   { back: 'address2_name', front: 'address2' }, //Mailing Address
   { back: 'address2_city', front: 'city2' },
+  { back: 'address2_stateorprovince', front: 'province2' },
   { back: 'address2_postalcode', front: 'postalCode2' },
   { back: 'address1_primarycontactname', front: 'contactName' },
   { back: 'ccof_position', front: 'position' },
@@ -28,6 +30,7 @@ const FacilityMappings = [
   { back: 'ccof_facilitystartdate', front: 'yearBeganOperation' },
   { back: 'address1_line1', front: 'facilityAddress' },
   { back: 'address1_city', front: 'city' },
+  { back: 'address1_stateorprovince', front: 'province' },
   { back: 'address1_postalcode', front: 'postalCode' },
   { back: 'ccof_position', front: 'position' },
   { back: 'emailaddress1', front: 'email' },
diff --git a/frontend/src/components/ccofApplication/family/FamilyOrganization.vue b/frontend/src/components/ccofApplication/family/FamilyOrganization.vue
index 90490f01d..9444c42b3 100644
--- a/frontend/src/components/ccofApplication/family/FamilyOrganization.vue
+++ b/frontend/src/components/ccofApplication/family/FamilyOrganization.vue
@@ -56,22 +56,31 @@
             </v-row>
 
             <v-row>
-              <v-col cols="12" md="6">
+              <v-col cols="12" sm="6" md="4">
                 <v-text-field
                   v-model="model.city1"
                   :disabled="isLocked"
                   variant="outlined"
-                  required
                   :rules="rules.required"
                   label="City/Town"
                 />
               </v-col>
-              <v-col cols="12" md="6">
+              <v-col cols="12" sm="6" md="4">
+                <v-select
+                  v-model="model.province1"
+                  :items="PROVINCES"
+                  item-value="value"
+                  :rules="rules.required"
+                  :disabled="isLocked"
+                  label="Province"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
                 <v-text-field
                   v-model="model.postalCode1"
                   :disabled="isLocked"
                   variant="outlined"
-                  required
                   :rules="[...rules.required, ...rules.postalCode]"
                   label="Postal Code"
                 />
@@ -102,7 +111,7 @@
               </v-row>
 
               <v-row>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
                   <v-text-field
                     v-model="model.city2"
                     :disabled="isLocked"
@@ -111,7 +120,18 @@
                     label="City/Town"
                   />
                 </v-col>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
+                  <v-select
+                    v-model="model.province2"
+                    :items="PROVINCES"
+                    item-value="value"
+                    :rules="rules.required"
+                    :disabled="isLocked"
+                    label="Province"
+                    variant="outlined"
+                  />
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
                   <v-text-field
                     v-model="model.postalCode2"
                     :disabled="isLocked"
diff --git a/frontend/src/components/ccofApplication/group/FacilityInformation.vue b/frontend/src/components/ccofApplication/group/FacilityInformation.vue
index 57a0c5ee4..7740e4242 100644
--- a/frontend/src/components/ccofApplication/group/FacilityInformation.vue
+++ b/frontend/src/components/ccofApplication/group/FacilityInformation.vue
@@ -43,7 +43,7 @@
               </v-row>
 
               <v-row>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
                   <v-text-field
                     v-model="model.city"
                     :disabled="isLocked"
@@ -53,7 +53,10 @@
                     label="City/Town"
                   />
                 </v-col>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field v-model="model.province" variant="outlined" :disabled="true" label="Province" />
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
                   <v-text-field
                     v-model="model.postalCode"
                     :disabled="isLocked"
diff --git a/frontend/src/components/ccofApplication/group/OrganizationInformation.vue b/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
index 298911feb..e5a645350 100644
--- a/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
+++ b/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
@@ -52,7 +52,7 @@
               </v-row>
               <v-divider />
 
-              <v-card-subtitle> Organization Mailing Address </v-card-subtitle>
+              <v-card-subtitle class="my-2">Organization Mailing Address</v-card-subtitle>
 
               <v-row>
                 <v-col>
@@ -66,24 +66,32 @@
                   />
                 </v-col>
               </v-row>
-
               <v-row>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
                   <v-text-field
                     v-model="model.city1"
                     :disabled="isLocked"
                     variant="outlined"
-                    required
                     :rules="rules.required"
                     label="City/Town"
                   />
                 </v-col>
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6" md="4">
+                  <v-select
+                    v-model="model.province1"
+                    :items="PROVINCES"
+                    item-value="value"
+                    :rules="rules.required"
+                    :disabled="isLocked"
+                    label="Province"
+                    variant="outlined"
+                  />
+                </v-col>
+                <v-col cols="12" md="4">
                   <v-text-field
                     v-model="model.postalCode1"
                     :disabled="isLocked"
                     variant="outlined"
-                    required
                     :rules="[...rules.required, ...rules.postalCode]"
                     label="Postal Code"
                   />
@@ -113,7 +121,7 @@
                 </v-row>
 
                 <v-row>
-                  <v-col cols="12" md="6">
+                  <v-col cols="12" sm="6" md="4">
                     <v-text-field
                       v-model="model.city2"
                       :disabled="isLocked"
@@ -122,7 +130,18 @@
                       label="City/Town"
                     />
                   </v-col>
-                  <v-col cols="12" md="6">
+                  <v-col cols="12" sm="6" md="4">
+                    <v-select
+                      v-model="model.province2"
+                      :items="PROVINCES"
+                      item-value="value"
+                      :rules="rules.required"
+                      :disabled="isLocked"
+                      label="Province"
+                      variant="outlined"
+                    />
+                  </v-col>
+                  <v-col cols="12" sm="6" md="4">
                     <v-text-field
                       v-model="model.postalCode2"
                       :disabled="isLocked"
@@ -136,7 +155,7 @@
 
               <v-divider />
 
-              <v-card-subtitle> Contact Information </v-card-subtitle>
+              <v-card-subtitle class="my-2">Contact Information</v-card-subtitle>
               <v-row>
                 <v-col cols="12" md="6">
                   <v-text-field
@@ -201,14 +220,12 @@
 
               <v-divider />
 
-              <v-row>
-                <v-col>
-                  <v-card-subtitle> Type of Organization </v-card-subtitle>
-                  <v-radio-group v-model="model.organizationType" :disabled="isLocked" :rules="rules.required" label="">
-                    <v-radio v-for="item in organizationTypeList" :key="item.id" :label="item.name" :value="item.id" />
-                  </v-radio-group>
-                </v-col>
-              </v-row>
+              <div>
+                <v-card-subtitle class="my-2">Type of Organization</v-card-subtitle>
+                <v-radio-group v-model="model.organizationType" :disabled="isLocked" :rules="rules.required" label="">
+                  <v-radio v-for="item in organizationTypeList" :key="item.id" :label="item.name" :value="item.id" />
+                </v-radio-group>
+              </div>
             </v-container>
           </v-card>
         </v-row>
@@ -234,7 +251,7 @@ import { useAppStore } from '@/store/app.js';
 import { useReportChangesStore } from '@/store/reportChanges.js';
 
 import organizationMixin from '@/mixins/organizationMixin.js';
-import { ORGANIZATION_PROVIDER_TYPES } from '@/utils/constants.js';
+import { ORGANIZATION_PROVIDER_TYPES, PROVINCES } from '@/utils/constants.js';
 import { isAnyChangeRequestActive } from '@/utils/common.js';
 
 export default {
@@ -252,6 +269,10 @@ export default {
     ...mapState(useAppStore, ['renewalYearLabel', 'currentYearLabel']),
     ...mapState(useReportChangesStore, ['changeRequestStore']),
   },
+  created() {
+    this.PROVINCES = PROVINCES;
+    this.model.province = this.model.province ?? PROVINCES.BC;
+  },
   methods: {
     isSomeChangeRequestActive() {
       //Status of : "Submitted" "Action Required";
diff --git a/frontend/src/mixins/facilityMixin.js b/frontend/src/mixins/facilityMixin.js
index 1e80f8df6..6fb861a5e 100644
--- a/frontend/src/mixins/facilityMixin.js
+++ b/frontend/src/mixins/facilityMixin.js
@@ -10,7 +10,15 @@ import { useOrganizationStore } from '@/store/ccof/organization.js';
 import { useNavBarStore } from '@/store/navBar.js';
 import { useReportChangesStore } from '@/store/reportChanges.js';
 import { isChangeRequest } from '@/utils/common.js';
-import { ORGANIZATION_PROVIDER_TYPES, PATHS, changeUrl, changeUrlGuid, pcfUrl, pcfUrlGuid } from '@/utils/constants.js';
+import {
+  ORGANIZATION_PROVIDER_TYPES,
+  PATHS,
+  PROVINCES,
+  changeUrl,
+  changeUrlGuid,
+  pcfUrl,
+  pcfUrlGuid,
+} from '@/utils/constants.js';
 import rules from '@/utils/rules.js';
 
 export default {
@@ -71,6 +79,7 @@ export default {
     facilityModel: {
       handler() {
         this.model = { ...this.facilityModel };
+        this.model.province = this.model.province ?? PROVINCES.find((province) => province.value === 'BC')?.value;
         this.$refs.form?.resetValidation();
       },
       immediate: true,
diff --git a/frontend/src/mixins/organizationMixin.js b/frontend/src/mixins/organizationMixin.js
index bb7f46bcf..010e1c71f 100644
--- a/frontend/src/mixins/organizationMixin.js
+++ b/frontend/src/mixins/organizationMixin.js
@@ -8,7 +8,7 @@ import { useAuthStore } from '@/store/auth.js';
 import { useFacilityStore } from '@/store/ccof/facility.js';
 import { useOrganizationStore } from '@/store/ccof/organization.js';
 import { useNavBarStore } from '@/store/navBar.js';
-import { ORGANIZATION_PROVIDER_TYPES } from '@/utils/constants.js';
+import { ORGANIZATION_PROVIDER_TYPES, PROVINCES } from '@/utils/constants.js';
 import rules from '@/utils/rules.js';
 
 export default {
@@ -55,6 +55,8 @@ export default {
       try {
         await this.loadOrganization(this.organizationId);
         this.model = { ...this.organizationModel };
+        this.model.province1 = this.model.province1 ?? PROVINCES.find((province) => province.value === 'BC')?.value;
+        this.model.province2 = this.model.province2 ?? PROVINCES.find((province) => province.value === 'BC')?.value;
       } catch (error) {
         console.log('Error loading organization.', error);
         this.setFailureAlert('An error occurred while saving. Please try again later.');
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index a8b79806d..be4eb43b4 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -214,3 +214,58 @@ export const PROGRAM_YEAR_LANGUAGE_TYPES = {
   FY2024_25: 'FY2024_25',
   FY2025_26: 'FY2025_26',
 };
+
+export const PROVINCES = Object.freeze([
+  {
+    title: 'AB',
+    value: 'AB',
+  },
+  {
+    title: 'BC',
+    value: 'BC',
+  },
+  {
+    title: 'MB',
+    value: 'MB',
+  },
+  {
+    title: 'NB',
+    value: 'NB',
+  },
+  {
+    title: 'NL',
+    value: 'NL',
+  },
+  {
+    title: 'NT',
+    value: 'NT',
+  },
+  {
+    title: 'NS',
+    value: 'NS',
+  },
+  {
+    title: 'NU',
+    value: 'NU',
+  },
+  {
+    title: 'ON',
+    value: 'ON',
+  },
+  {
+    title: 'PE',
+    value: 'PE',
+  },
+  {
+    title: 'QC',
+    value: 'QC',
+  },
+  {
+    title: 'SK',
+    value: 'SK',
+  },
+  {
+    title: 'YT',
+    value: 'YT',
+  },
+]);

From 19cc046dd234079e68ed7a76e031922e61558cfd Mon Sep 17 00:00:00 2001
From: Le <vietdung.le@cgi.com>
Date: Tue, 15 Oct 2024 15:17:30 -0700
Subject: [PATCH 4/4] ccfri-3670 - layout fix and add province to Facility and
 Org Infor summary

---
 .../src/components/SummaryDeclaration.vue     |  78 +-
 .../components/summary/group/CCOFSummary.vue  |   2 +-
 .../components/summary/group/ECEWESummary.vue |  18 +-
 .../group/FacilityInformationSummary.vue      | 669 ++++++++----------
 .../summary/group/OrganizationSummary.vue     | 580 +++++++--------
 5 files changed, 597 insertions(+), 750 deletions(-)

diff --git a/frontend/src/components/SummaryDeclaration.vue b/frontend/src/components/SummaryDeclaration.vue
index 98ce680e2..50570da58 100644
--- a/frontend/src/components/SummaryDeclaration.vue
+++ b/frontend/src/components/SummaryDeclaration.vue
@@ -64,28 +64,16 @@
       <v-row v-if="!isSomeChangeRequestActive()" class="d-flex justify-center text-h5" style="color: #003466">
         To submit your application, review this summary of your information and scroll down to sign the declaration.
       </v-row>
-      <v-row v-if="!isSummaryComplete && !isProcessing" justify="center">
-        <v-card class="py-0 px-3 mx-0 mt-10 rounded-lg col-11" elevation="4">
-          <v-container class="pa-0 col-12">
-            <v-row>
-              <v-col class="pa-0">
-                <v-card-title class="rounded-t-lg pt-3 pb-3 noticeAlert">
-                  <v-icon size="x-large" class="py-1 px-3 noticeAlertIcon"> mdi-alert-octagon </v-icon>
-                  Incomplete Form
-                </v-card-title>
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col class="pb-0 pr-3 justify-center">
-                <div>
-                  <p>You will not be able to submit your application until it is complete.</p>
-                  <p>Incomplete sections are marked with a red exclamation point.</p>
-                </div>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card>
-      </v-row>
+      <v-card v-if="!isSummaryComplete && !isProcessing" elevation="4">
+        <v-card-title class="rounded-t-lg pt-3 pb-3 noticeAlert">
+          <v-icon size="x-large" class="py-1 px-3 noticeAlertIcon"> mdi-alert-octagon </v-icon>
+          Incomplete Form
+        </v-card-title>
+        <div class="pa-4">
+          <p>You will not be able to submit your application until it is complete.</p>
+          <p>Incomplete sections are marked with a red exclamation point.</p>
+        </div>
+      </v-card>
       <div>
         <v-row class="d-flex justify-center">
           <v-card class="py-0 px-3 mx-0 mt-10 rounded-lg col-11" elevation="4">
@@ -238,7 +226,7 @@
       >
         Funding Agreement Number: {{ getFundingAgreementNumber }}
       </v-row>
-      <v-row justify="center">
+      <v-row justify="center" class="ma-8 pb-12">
         <v-card class="py-0 px-3 mx-0 mt-10 rounded-lg col-11" elevation="4">
           <v-row>
             <v-col class="pa-0">
@@ -254,7 +242,7 @@
               />
             </v-col>
           </v-row>
-          <v-row v-if="!isProcessing">
+          <v-row v-if="!isProcessing" class="px-8">
             <v-col class="pb-0">
               <div v-show="!isRenewal && !organizationAccountNumber && !isChangeRequest">
                 <p>
@@ -443,28 +431,28 @@
 </template>
 <script>
 import { mapActions, mapState } from 'pinia';
-import { useAuthStore } from '../store/auth.js';
-import { useNavBarStore } from '../store/navBar.js';
-import { useAppStore } from '../store/app.js';
-import { useOrganizationStore } from '../store/ccof/organization.js';
-import { useSummaryDeclarationStore } from '../store/summaryDeclaration.js';
-import { useApplicationStore } from '../store/application.js';
-import { useReportChangesStore } from '../store/reportChanges.js';
+import { useAuthStore } from '@/store/auth.js';
+import { useNavBarStore } from '@/store/navBar.js';
+import { useAppStore } from '@/store/app.js';
+import { useOrganizationStore } from '@/store/ccof/organization.js';
+import { useSummaryDeclarationStore } from '@/store/summaryDeclaration.js';
+import { useApplicationStore } from '@/store/application.js';
+import { useReportChangesStore } from '@/store/reportChanges.js';
 
-import { PATHS, CHANGE_REQUEST_TYPES, PROGRAM_YEAR_LANGUAGE_TYPES } from '../utils/constants.js';
-import alertMixin from '../mixins/alertMixin.js';
-import NavButton from './util/NavButton.vue';
-import FacilityInformationSummary from './summary/group/FacilityInformationSummary.vue';
-import CCOFSummary from './summary/group/CCOFSummary.vue';
-import ECEWESummary from './summary/group/ECEWESummary.vue';
-import CCFRISummary from './summary/group/CCFRISummary.vue';
-import RFISummary from './summary/group/RFISummary.vue';
-import NMFSummary from './summary/group/NMFSummary.vue';
-import OrganizationSummary from './summary/group/OrganizationSummary.vue';
-import UploadedDocumentsSummary from './summary/group/UploadedDocumentsSummary.vue';
-import CCOFSummaryFamily from './summary/group/CCOFSummaryFamily.vue';
-import ChangeNotificationFormSummary from './summary/changeRequest/ChangeNotificationFormSummary.vue';
-import { isAnyApplicationUnlocked, isAnyChangeRequestActive } from '../utils/common.js';
+import { PATHS, CHANGE_REQUEST_TYPES, PROGRAM_YEAR_LANGUAGE_TYPES } from '@/utils/constants.js';
+import alertMixin from '@/mixins/alertMixin.js';
+import NavButton from '@/components/util/NavButton.vue';
+import FacilityInformationSummary from '@/components/summary/group/FacilityInformationSummary.vue';
+import CCOFSummary from '@/components/summary/group/CCOFSummary.vue';
+import ECEWESummary from '@/components/summary/group/ECEWESummary.vue';
+import CCFRISummary from '@/components/summary/group/CCFRISummary.vue';
+import RFISummary from '@/components/summary/group/RFISummary.vue';
+import NMFSummary from '@/components/summary/group/NMFSummary.vue';
+import OrganizationSummary from '@/components/summary/group/OrganizationSummary.vue';
+import UploadedDocumentsSummary from '@/components/summary/group/UploadedDocumentsSummary.vue';
+import CCOFSummaryFamily from '@/components/summary/group/CCOFSummaryFamily.vue';
+import ChangeNotificationFormSummary from '@/components/summary/changeRequest/ChangeNotificationFormSummary.vue';
+import { isAnyApplicationUnlocked, isAnyChangeRequestActive } from '@/utils/common.js';
 
 let model = {
   agreeConsentCertify: undefined,
diff --git a/frontend/src/components/summary/group/CCOFSummary.vue b/frontend/src/components/summary/group/CCOFSummary.vue
index 645cc711c..c8f54b3be 100644
--- a/frontend/src/components/summary/group/CCOFSummary.vue
+++ b/frontend/src/components/summary/group/CCOFSummary.vue
@@ -804,7 +804,7 @@ export default {
   },
   computed: {
     ...mapState(useNavBarStore, ['navBarList']),
-    ...mapState(useSummaryDeclarationStore, ['summaryModel, isLoadingComplete']),
+    ...mapState(useSummaryDeclarationStore, ['summaryModel', 'isLoadingComplete']),
     schoolPropertyLabel() {
       const arr = [];
       if (this.funding?.beforeSchool) {
diff --git a/frontend/src/components/summary/group/ECEWESummary.vue b/frontend/src/components/summary/group/ECEWESummary.vue
index 312e83266..1d1f8851c 100644
--- a/frontend/src/components/summary/group/ECEWESummary.vue
+++ b/frontend/src/components/summary/group/ECEWESummary.vue
@@ -232,13 +232,13 @@
 </template>
 <script>
 import { mapState } from 'pinia';
-import { useApplicationStore } from '../../../store/application.js';
-import { useSummaryDeclarationStore } from '../../../store/summaryDeclaration.js';
-import { useAppStore } from '../../../store/app.js';
+import { useApplicationStore } from '@/store/application.js';
+import { useSummaryDeclarationStore } from '@/store/summaryDeclaration.js';
+import { useAppStore } from '@/store/app.js';
 
-import { isChangeRequest } from '../../../utils/common.js';
-import { PATHS, pcfUrl, changeUrl, PROGRAM_YEAR_LANGUAGE_TYPES } from '../../../utils/constants.js';
-import rules from '../../../utils/rules.js';
+import { isChangeRequest } from '@/utils/common.js';
+import { PATHS, pcfUrl, changeUrl, PROGRAM_YEAR_LANGUAGE_TYPES } from '@/utils/constants.js';
+import rules from '@/utils/rules.js';
 
 export default {
   props: {
@@ -292,9 +292,9 @@ export default {
     },
   },
   watch: {
-    isLoadingComplete: {
-      handler: function (val) {
-        if (val && !this.facilityInformationExists()) {
+    isValidForm: {
+      handler() {
+        if (!this.isProcessing && this.isLoadingComplete && !this.facilityInformationExists()) {
           this.$emit('isSummaryValid', this.formObj, this.isValidForm);
         }
       },
diff --git a/frontend/src/components/summary/group/FacilityInformationSummary.vue b/frontend/src/components/summary/group/FacilityInformationSummary.vue
index 75a50954b..46d3d2426 100644
--- a/frontend/src/components/summary/group/FacilityInformationSummary.vue
+++ b/frontend/src/components/summary/group/FacilityInformationSummary.vue
@@ -1,21 +1,203 @@
 <template>
   <v-row no-gutters class="d-flex flex-column">
-    <v-card class="px-0">
-      <v-system-bar color="grey" dark />
-      <v-row no-gutters class="d-flex flex-column">
-        <v-row class="d-flex justify-start">
-          <v-col cols="12" lg="6" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">Facility Name</span>
-              </v-col>
-              <v-col class="d-flex justify-start">
-                <v-textarea
+    <v-card class="facility-info pa-4 pb-2">
+      <v-row no-gutters>
+        <v-col cols="12" md="6">
+          <div class="summary-label">Facility Name</div>
+          <v-textarea
+            placeholder="Required"
+            :model-value="facilityInfo.facilityName"
+            class="summary-value"
+            auto-grow
+            rows="2"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+            :rules="rules.required"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <div class="summary-label">Facility ID</div>
+          <!-- Facility ID is assigned in dynamics, and may not exist as far as I know, so no required is implemented here -- JB -->
+          <v-text-field
+            label="--"
+            :model-value="facilityInfo?.facilityAccountNumber"
+            class="summary-value"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <div class="summary-label">Licence Number</div>
+          <v-text-field
+            placeholder="Required"
+            :model-value="facilityInfo?.licenseNumber"
+            class="summary-value"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+            :rules="rules.required"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col cols="12" md="6">
+          <div class="summary-label">Licence Categories</div>
+          <!-- change below value to :value -->
+          <v-textarea
+            :model-value="licenseCategories"
+            class="summary-value"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+            no-resize
+            rows="3"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <div class="summary-label">CCFRI</div>
+          <v-text-field
+            placeholder="Required"
+            :model-value="getOptInOptOut(ccfriStatus)"
+            class="summary-value"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+            :rules="rules.required"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <div class="summary-label">ECE-WE</div>
+          <v-text-field
+            placeholder="Required"
+            :model-value="getOptInOptOut(eceweStatus)"
+            class="summary-value"
+            density="compact"
+            flat
+            variant="solo"
+            hide-details
+            readonly
+            :rules="rules.required"
+          />
+        </v-col>
+      </v-row>
+    </v-card>
+
+    <!-- JB here to make this work with renewels-->
+    <v-form
+      v-if="(!isRenewal && providerType == 'GROUP') || isChangeRequest"
+      ref="informationSummaryForm"
+      v-model="isValidForm"
+    >
+      <v-expansion-panel-title>
+        <h4 style="color: #003466">
+          Facility Information
+          <v-icon v-if="isValidForm" color="green" size="large"> mdi-check-circle-outline </v-icon>
+          <v-icon v-if="!isValidForm" color="#ff5252" size="large"> mdi-alert-circle-outline </v-icon>
+          <span v-if="!isValidForm" style="color: #ff5252"
+            >Your form is missing required information. Click here to view.</span
+          >
+        </h4>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text eager class="exp-style">
+        <v-row no-gutters>
+          <v-col cols="12" md="4" class="pr-2">
+            <div class="summary-label">
+              Facility Name (as it appears on the Community Care Assisted Living Act Licence)
+            </div>
+            <v-textarea
+              placeholder="Required"
+              :model-value="facilityInfo.facilityName"
+              class="summary-value"
+              auto-grow
+              rows="2"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <div class="summary-label">Year Facility Began Operation (YYYY)</div>
+            <v-text-field
+              placeholder="Required"
+              :model-value="facilityInfo?.yearBeganOperation"
+              class="summary-value"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col cols="12" md="4">
+            <div class="summary-label">Facility Street Address</div>
+            <v-text-field
+              placeholder="Required"
+              :model-value="facilityInfo?.facilityAddress"
+              class="summary-value"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <div class="summary-label">Facility Contact Name</div>
+            <v-text-field
+              placeholder="Required"
+              :model-value="facilityInfo?.contactName"
+              class="summary-value"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <div class="summary-label">Position</div>
+            <v-text-field
+              placeholder="Required"
+              :model-value="facilityInfo?.position"
+              class="summary-value"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" md="4">
+                <div class="summary-label">City/Town</div>
+                <v-text-field
                   placeholder="Required"
-                  :model-value="facilityInfo.facilityName"
+                  :model-value="facilityInfo?.city"
                   class="summary-value"
-                  auto-grow
-                  rows="2"
                   density="compact"
                   flat
                   variant="solo"
@@ -24,37 +206,25 @@
                   :rules="rules.required"
                 />
               </v-col>
-            </v-row>
-          </v-col>
-          <v-col cols="4" lg="2" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">Facility ID</span>
-              </v-col>
-              <v-col class="d-flex justify-start">
-                <!-- Facility ID is assigned in dynamics, and may not exist as far as I know, so no required is implemented here -- JB -->
+              <v-col cols="12" md="4">
+                <div class="summary-label">Province</div>
                 <v-text-field
-                  label="--"
-                  :model-value="facilityInfo?.facilityAccountNumber"
+                  placeholder="Required"
+                  :model-value="facilityInfo?.province"
                   class="summary-value"
                   density="compact"
                   flat
                   variant="solo"
                   hide-details
                   readonly
+                  :rules="rules.required"
                 />
               </v-col>
-            </v-row>
-          </v-col>
-          <v-col cols="4" lg="2" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">Licence Number</span>
-              </v-col>
-              <v-col class="d-flex justify-start">
+              <v-col cols="12" md="4">
+                <div class="summary-label">Postal Code</div>
                 <v-text-field
                   placeholder="Required"
-                  :model-value="facilityInfo?.licenseNumber"
+                  :model-value="facilityInfo?.postalCode"
                   class="summary-value"
                   density="compact"
                   flat
@@ -66,36 +236,27 @@
               </v-col>
             </v-row>
           </v-col>
-          <v-col cols="3" lg="6" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">Licence Categories</span>
-              </v-col>
-              <v-col class="d-flex justify-start">
-                <!-- change below value to :value -->
-                <v-textarea
-                  :model-value="licenseCategories"
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" md="4">
+                <div class="summary-label">Business phone</div>
+                <v-text-field
+                  placeholder="Required"
+                  :model-value="facilityInfo?.phone"
                   class="summary-value"
                   density="compact"
                   flat
                   variant="solo"
                   hide-details
                   readonly
-                  no-resize
-                  rows="3"
+                  :rules="rules.required"
                 />
               </v-col>
-            </v-row>
-          </v-col>
-          <v-col cols="3" lg="2" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">CCFRI</span>
-              </v-col>
-              <v-col class="d-flex justify-start">
+              <v-col cols="12" md="4">
+                <div class="summary-label">Facility E-mail Address</div>
                 <v-text-field
                   placeholder="Required"
-                  :model-value="getOptInOptOut(ccfriStatus)"
+                  :model-value="facilityInfo?.email"
                   class="summary-value"
                   density="compact"
                   flat
@@ -107,16 +268,30 @@
               </v-col>
             </v-row>
           </v-col>
-          <v-col cols="3" lg="2" class="pb-1 pt-1 ml-5">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start ml-3">
-                <span class="summary-label">ECE-WE</span>
+        </v-row>
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" md="4">
+                <div class="summary-label">Facility Licence Number</div>
+                <v-text-field
+                  placeholder="Required"
+                  :model-value="facilityInfo?.licenseNumber"
+                  class="summary-value"
+                  density="compact"
+                  flat
+                  variant="solo"
+                  hide-details
+                  readonly
+                  :rules="rules.required"
+                />
               </v-col>
-              <v-col class="d-flex justify-start">
+              <v-col cols="12" md="4">
+                <div class="summary-label">Effective Date of Current Licence (YYYY-MM-DD)</div>
                 <v-text-field
                   placeholder="Required"
-                  :model-value="getOptInOptOut(eceweStatus)"
                   class="summary-value"
+                  :model-value="facilityInfo?.licenseEffectiveDate"
                   density="compact"
                   flat
                   variant="solo"
@@ -128,308 +303,53 @@
             </v-row>
           </v-col>
         </v-row>
-      </v-row>
-    </v-card>
-
-    <!-- JB here to make this work with renewels-->
-    <v-form
-      v-if="(!isRenewal && providerType == 'GROUP') || isChangeRequest"
-      ref="informationSummaryForm"
-      v-model="isValidForm"
-    >
-      <v-expansion-panel-title>
-        <h4 style="color: #003466">
-          Facility Information
-          <v-icon v-if="isValidForm" color="green" size="large"> mdi-check-circle-outline </v-icon>
-          <v-icon v-if="!isValidForm" color="#ff5252" size="large"> mdi-alert-circle-outline </v-icon>
-          <span v-if="!isValidForm" style="color: #ff5252"
-            >Your form is missing required information. Click here to view.</span
+        <v-row no-gutters>
+          <v-col cols="12">
+            <div class="summary-label">
+              Has this facility or you as the applicant ever received funding under the Child Care Operating Funding Program?
+            </div>
+            <v-text-field
+              placeholder="Required"
+              :model-value="yesNoFacilityLabel"
+              class="summary-value"
+              density="compact"
+              flat
+              variant="solo"
+              hide-details
+              readonly
+              :rules="rules.required"
+            />
+          </v-col>
+          <v-row
+            v-if="facilityInfo?.hasReceivedFunding?.toUpperCase() === 'YESFACILITY'"
+            no-gutters
+            class="d-flex justify-start pt-2"
           >
-        </h4>
-      </v-expansion-panel-title>
-      <v-expansion-panel-text eager class="exp-style">
-        <v-row no-gutters class="d-flex flex-column">
-          <v-row class="d-flex justify-start">
-            <v-col cols="12" lg="6" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label"
-                    >Facility Name (as it appears on the Community Care Assisted Living Act Licence)</span
-                  >
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-textarea
-                    placeholder="Required"
-                    :model-value="facilityInfo.facilityName"
-                    class="summary-value"
-                    auto-grow
-                    rows="2"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col cols="10" class="d-flex justify-start ml-3">
+              <span class="summary-label">Facility Name</span>
             </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Year Facility Began Operation (YYYY)</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.yearBeganOperation"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="8" lg="6" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Facility Street Address</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.facilityAddress"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start ml-3">
-                <v-col cols="6" class="d-flex justify-start">
-                  <span class="summary-label">Facility Contact Name</span>
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start">
-                  <span class="summary-label">Position</span>
-                </v-col>
-                <v-col class="d-flex justify-start ml-n3">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.contactName"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.position"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="8" lg="6" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="4" class="d-flex justify-start ml-3">
-                  <span class="summary-label">City/Town</span>
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start">
-                  <span class="summary-label">Postal Code</span>
-                </v-col>
-                <v-col cols="4" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.city"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.postalCode"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start ml-3">
-                <v-col cols="6" class="d-flex justify-start">
-                  <span class="summary-label">Business phone</span>
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start">
-                  <span class="summary-label">Facility E-mail Address</span>
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start ml-n3">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.phone"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-                <v-col cols="6" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.email"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="8" lg="6" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start pt-2">
-                <v-col cols="10" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Facility Licence Number</span>
-                </v-col>
-                <v-col cols="10" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.licenseNumber"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start pt-2 flex-column">
-                <v-col cols="10" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Effective Date of Current Licence (YYYY-MM-DD)</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="facilityInfo?.licenseEffectiveDate"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="12" lg="12" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start pt-2">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label"
-                    >Has this facility or you as the applicant ever received funding under the Child Care Operating
-                    Funding Program?</span
-                  >
-                </v-col>
-                <v-col cols="12" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="yesNoFacilityLabel"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
-              <v-row
-                v-if="facilityInfo?.hasReceivedFunding?.toUpperCase() === 'YESFACILITY'"
-                no-gutters
-                class="d-flex justify-start pt-2"
-              >
-                <v-col cols="10" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Facility Name</span>
-                </v-col>
-                <v-col cols="10" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="facilityInfo?.fundingFacility"
-                    class="summary-value"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col cols="10" class="d-flex justify-start">
+              <v-text-field
+                placeholder="Required"
+                :model-value="facilityInfo?.fundingFacility"
+                class="summary-value"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
           </v-row>
         </v-row>
-        <v-row v-if="!isValidForm" class="d-flex justify-start">
-          <v-col cols="6" lg="4" class="pb-0 pt-0">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start">
-                <!-- ccof base funding CAN be undefined if new app, so send them to page before if that is the case.  -->
-                <router-link :to="getRoutingPathGroup()">
-                  <span style="color: #ff5252; text-underline: black"
-                    ><u>To add this information, click here. This will bring you to a different page.</u></span
-                  >
-                </router-link>
-              </v-col>
-            </v-row>
-          </v-col>
+        <v-row v-if="!isValidForm" no-gutters>
+          <!-- ccof base funding CAN be undefined if new app, so send them to page before if that is the case.  -->
+          <router-link :to="getRoutingPathGroup()">
+            <span style="color: #ff5252; text-underline: black">
+              <u>To add this information, click here. This will bring you to a different page.</u>
+            </span>
+          </router-link>
         </v-row>
       </v-expansion-panel-text>
     </v-form>
@@ -603,12 +523,12 @@
 
 <script>
 import { mapState, mapActions } from 'pinia';
-import { useSummaryDeclarationStore } from '../../../store/summaryDeclaration.js';
-import { useApplicationStore } from '../../../store/application.js';
-import { useNavBarStore } from '../../../store/navBar.js';
-import { isChangeRequest } from '../../../utils/common.js';
-import { PATHS, changeUrlGuid, pcfUrl, pcfUrlGuid } from '../../../utils/constants.js';
-import rules from '../../../utils/rules.js';
+import { useSummaryDeclarationStore } from '@/store/summaryDeclaration.js';
+import { useApplicationStore } from '@/store/application.js';
+import { useNavBarStore } from '@/store/navBar.js';
+import { isChangeRequest } from '@/utils/common.js';
+import { PATHS, changeUrlGuid, pcfUrl, pcfUrlGuid } from '@/utils/constants.js';
+import rules from '@/utils/rules.js';
 
 export default {
   props: {
@@ -673,10 +593,7 @@ export default {
   computed: {
     ...mapState(useApplicationStore, ['isRenewal']),
     ...mapState(useNavBarStore, ['navBarList']),
-    ...mapState(useSummaryDeclarationStore, [
-      'summaryModel',
-      'isLoadingComplete'
-    ]),
+    ...mapState(useSummaryDeclarationStore, ['summaryModel', 'isLoadingComplete']),
     yesNoFacilityLabel() {
       if (this.facilityInfo?.hasReceivedFunding?.toUpperCase() === 'YESFACILITY') {
         return 'YES AS FACILITY';
@@ -718,7 +635,7 @@ export default {
       if (isChangeRequest(this)) {
         return changeUrlGuid(PATHS.CCOF_GROUP_FACILITY, this.changeRecGuid, this.facilityId);
       } else {
-        pcfUrlGuid(PATHS.CCOF_GROUP_FACILITY, this.programYearId, this.facilityId);
+        return pcfUrlGuid(PATHS.CCOF_GROUP_FACILITY, this.programYearId, this.facilityId);
       }
     },
     getRoutingPathFamily() {
@@ -740,12 +657,22 @@ export default {
   font-size: medium;
   color: black;
 }
->>> ::placeholder {
-  color: #ff5252 !important;
-  opacity: 1;
+
+:deep(::placeholder) {
+  color: red !important;
+  opacity: 1 !important;
 }
+
 .summary-label-smaller {
   color: grey;
   font-size: x-small;
 }
+
+.facility-info {
+  border-top: 5px solid grey !important;
+}
+
+:deep(.v-field__input) {
+  padding-left: 0px;
+}
 </style>
diff --git a/frontend/src/components/summary/group/OrganizationSummary.vue b/frontend/src/components/summary/group/OrganizationSummary.vue
index 586fb9714..da104cd04 100644
--- a/frontend/src/components/summary/group/OrganizationSummary.vue
+++ b/frontend/src/components/summary/group/OrganizationSummary.vue
@@ -12,348 +12,281 @@
         </h4>
       </v-expansion-panel-title>
       <v-expansion-panel-text eager>
-        <v-row no-gutters class="d-flex flex-column">
-          <v-row class="d-flex justify-start">
-            <v-col cols="8" lg="6" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3 pt-2">
-                  <span class="summary-label"
-                    >Legal Name (first, middle and last) or Organization (As it appears in BC Corporate Registry)</span
-                  >
-                </v-col>
-                <v-col cols="12" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    :model-value="summaryModel?.organization?.legalName"
-                    class=""
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+        <div>
+          <v-row no-gutters>
+            <v-col cols="12">
+              <div class="summary-label">
+                Legal Name (first, middle and last) or Organization (As it appears in BC Corporate Registry)
+              </div>
+              <v-text-field
+                placeholder="Required"
+                :model-value="summaryModel?.organization?.legalName"
+                class=""
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
           </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Organization Mailing Address</span>
-                </v-col>
-                <v-col cols="12" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.address1"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+          <v-row no-gutters>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Organization Mailing Address</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.address1"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col
-              v-if="summaryModel.application.organizationProviderType == 'GROUP'"
-              cols="6"
-              lg="4"
-              class="pb-0 pt-0"
-            >
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Organization Contact Name</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class=""
-                    :model-value="summaryModel?.organization?.contactName"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col v-if="summaryModel.application.organizationProviderType == 'GROUP'" cols="12" md="4">
+              <div class="summary-label">Organization Contact Name</div>
+              <v-text-field
+                placeholder="Required"
+                :model-value="summaryModel?.organization?.contactName"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col
-              v-if="summaryModel.application.organizationProviderType == 'GROUP'"
-              cols="6"
-              lg="4"
-              class="pb-0 pt-0"
-            >
-              <v-row no-gutters class="d-flex justify-start flex-column">
-                <v-col cols="10" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Position</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.position"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col v-if="summaryModel.application.organizationProviderType == 'GROUP'" cols="12" md="4">
+              <div class="summary-label">Position</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.position"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
           </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="5" class="d-flex justify-start ml-3">
-                  <span class="summary-label">City/Town</span>
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <span class="summary-label">Postal Code</span>
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.city1"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.postalCode1"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+          <v-row no-gutters>
+            <v-col cols="12" md="4">
+              <div class="summary-label">City/Town</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.city1"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Business phone</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.phone"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Province</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.province1"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">E-mail Address of Signing Authority</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.email"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Postal Code</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.postalCode1"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
           </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start">
-                  <span class="summary-label ml-3">Provider Type</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.application?.organizationProviderType"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+          <v-row no-gutters>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Business phone</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.phone"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start">
-                  <span class="summary-label ml-3">Type of Organization</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="getOrgTypeString()"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+            <v-col cols="12" md="4">
+              <div class="summary-label">E-mail Address of Signing Authority</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.email"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Business BCeID</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="userInfo.userName"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+          </v-row>
+          <v-row no-gutters>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Provider Type</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.application?.organizationProviderType"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Type of Organization</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="getOrgTypeString()"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Business BCeID</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="userInfo.userName"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
             </v-col>
             <v-col
               v-if="
                 summaryModel?.organization?.organizationType == 100000000 ||
                 summaryModel?.organization?.organizationType == 100000002
               "
-              cols="4"
-              lg="3"
-              class="pb-0 pt-0"
+              cols="12"
+              md="4"
             >
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Incorporation Number</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    placeholder="Required"
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.incNumber"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                    :rules="rules.required"
-                  />
-                </v-col>
-              </v-row>
+              <div class="summary-label">Incorporation Number</div>
+              <v-text-field
+                placeholder="Required"
+                class="summary-value"
+                :model-value="summaryModel?.organization?.incNumber"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+                :rules="rules.required"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12">
+              <div class="summary-label">Organization Street Address</div>
+              <v-text-field
+                class="summary-value"
+                :model-value="summaryModel?.organization?.address2"
+                :rules="rules.required"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+              />
             </v-col>
           </v-row>
-          <v-row class="d-flex justify-start">
-            <v-col cols="6" lg="4" class="pb-0 pt-0">
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="12" class="d-flex justify-start ml-3">
-                  <span class="summary-label">Organization Street Address</span>
-                </v-col>
-                <v-col class="d-flex justify-start">
-                  <v-text-field
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.address2"
-                    :rules="rules.required"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                  />
-                </v-col>
-              </v-row>
-              <v-row no-gutters class="d-flex justify-start">
-                <v-col cols="5" class="d-flex justify-start ml-3">
-                  <span class="summary-label">City/Town</span>
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <span class="summary-label">Postal Code</span>
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <v-text-field
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.city2"
-                    :rules="rules.required"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                  />
-                </v-col>
-                <v-col cols="5" class="d-flex justify-start">
-                  <v-text-field
-                    class="summary-value"
-                    :model-value="summaryModel?.organization?.postalCode2"
-                    :rules="rules.required"
-                    density="compact"
-                    flat
-                    variant="solo"
-                    hide-details
-                    readonly
-                  />
-                </v-col>
-              </v-row>
+          <v-row no-gutters>
+            <v-col cols="12" md="4">
+              <div class="summary-label">City/Town</div>
+              <v-text-field
+                class="summary-value"
+                :model-value="summaryModel?.organization?.city2"
+                :rules="rules.required"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Province</div>
+              <v-text-field
+                class="summary-value"
+                :model-value="summaryModel?.organization?.province2"
+                :rules="rules.required"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <div class="summary-label">Postal Code</div>
+              <v-text-field
+                class="summary-value"
+                :model-value="summaryModel?.organization?.postalCode2"
+                :rules="rules.required"
+                density="compact"
+                flat
+                variant="solo"
+                hide-details
+                readonly
+              />
             </v-col>
           </v-row>
-        </v-row>
-        <v-row v-if="!isValidForm" class="d-flex justify-start">
-          <v-col cols="6" lg="4" class="pb-0 pt-0">
-            <v-row no-gutters class="d-flex justify-start">
-              <v-col cols="12" class="d-flex justify-start">
-                <router-link :to="getRoutingPath()">
-                  <span style="color: #ff5252; text-underline: black"
-                    ><u>To add this information, click here. This will bring you to a different page.</u></span
-                  >
-                </router-link>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
+        </div>
+        <div v-if="!isValidForm">
+          <router-link :to="getRoutingPath()">
+            <span style="color: #ff5252; text-underline: black">
+              <u>To add this information, click here. This will bring you to a different page.</u>
+            </span>
+          </router-link>
+        </div>
       </v-expansion-panel-text>
     </v-form>
   </v-row>
 </template>
 <script>
-import { mapState, mapActions } from 'pinia';
-import { useAuthStore } from '../../../store/auth';
-import { useSummaryDeclarationStore } from '../../../store/summaryDeclaration';
-import rules from '../../../utils/rules.js';
-import { PATHS, pcfUrl } from '../../../utils/constants.js';
+import { mapState } from 'pinia';
+import { useAuthStore } from '@/store/auth';
+import { useSummaryDeclarationStore } from '@/store/summaryDeclaration';
+import rules from '@/utils/rules.js';
+import { PATHS, pcfUrl } from '@/utils/constants.js';
 
 export default {
   name: 'OrganizationSummary',
@@ -394,16 +327,15 @@ export default {
     ...mapState(useSummaryDeclarationStore, ['isLoadingComplete']),
   },
   watch: {
-    isLoadingComplete: {
-      handler: function (val) {
-        if (val) {
+    isValidForm: {
+      handler() {
+        if (!this.isProcessing && this.isLoadingComplete) {
           this.$emit('isSummaryValid', this.formObj, this.isValidForm);
         }
       },
     },
   },
   methods: {
-    ...mapActions(useSummaryDeclarationStore, ['loadSummary', 'setIsMainLoading', 'setSummaryModel']),
     getRoutingPath() {
       if (this.summaryModel.application.organizationProviderType == 'FAMILY') {
         return pcfUrl(PATHS.CCOF_FAMILY_ORG, this.programYearId);
@@ -451,13 +383,9 @@ export default {
   opacity: 1 !important;
 }
 
->>> .summary-value .v-label {
-  color: #ff5252;
-  opacity: 1;
-}
-
->>> ::placeholder {
+:deep(::placeholder) {
   color: red !important;
+  opacity: 1 !important;
 }
 
 .summary-label-smaller {
@@ -476,4 +404,8 @@ export default {
   font-size: small;
   font-weight: bold;
 }
+
+:deep(.v-field__input) {
+  padding-left: 0px;
+}
 </style>