From cb2bdc558c6b7fe72a5dc7332a2a90f9c348e9e5 Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Wed, 22 Mar 2023 17:10:58 -0700
Subject: [PATCH] #1757 - Create common container for content in tab
 (Institution) - Part 2 (#1826)

* Updated the Institution tabs in the Ministry portal to use the common TabContainer and the BodyHeaderContainer

* Code updated with review comments
---
 .../common/InstitutionUserSummary.vue         | 332 +++++++++---------
 .../src/components/common/LocationSummary.vue | 194 +++++-----
 .../views/aest/institution/Designation.vue    |  29 +-
 .../aest/institution/InstitutionNotes.vue     |  80 +++--
 .../src/views/aest/institution/Locations.vue  |  14 +-
 .../src/views/aest/institution/Profile.vue    |  44 +--
 .../src/views/aest/institution/Programs.vue   | 172 ++++-----
 .../views/aest/institution/Restrictions.vue   | 170 ++++-----
 .../web/src/views/aest/institution/Users.vue  |  16 +-
 9 files changed, 537 insertions(+), 514 deletions(-)

diff --git a/sources/packages/web/src/components/common/InstitutionUserSummary.vue b/sources/packages/web/src/components/common/InstitutionUserSummary.vue
index e2670fcba5..8e78204276 100644
--- a/sources/packages/web/src/components/common/InstitutionUserSummary.vue
+++ b/sources/packages/web/src/components/common/InstitutionUserSummary.vue
@@ -1,176 +1,180 @@
 <!-- This component is shared between ministry and student users -->
 <template>
-  <body-header title="All users" :recordsCount="usersListAndCount.count">
-    <template #subtitle>
-      <ul>
-        <li>
-          Admin roles can access <strong>all features</strong
-          ><tooltip-icon
-            >Admin's can setup and manage your users, institution profile,
-            locations, designation, and offering uploads including performing
-            user role duties.</tooltip-icon
-          >
-        </li>
-        <li>
-          User roles can access <strong>some features</strong
-          ><tooltip-icon
-            >Users can only manage programs and offerings within their
-            locations, program information requests, confirming enrolment, and
-            reporting on scholastic standings.</tooltip-icon
-          >
-        </li>
-        <li>
-          Legal Signing Authority role is an admin with
-          <strong>an additional feature</strong
-          ><tooltip-icon
-            >This role is only to request a designation for your institution.
-            The user must be an admin first to get assigned this
-            role.</tooltip-icon
-          >
-        </li>
-      </ul>
-    </template>
+  <body-header-container>
+    <template #header>
+      <body-header title="All users" :recordsCount="usersListAndCount.count">
+        <template #subtitle>
+          <ul>
+            <li>
+              Admin roles can access <strong>all features</strong
+              ><tooltip-icon
+                >Admin's can setup and manage your users, institution profile,
+                locations, designation, and offering uploads including
+                performing user role duties.</tooltip-icon
+              >
+            </li>
+            <li>
+              User roles can access <strong>some features</strong
+              ><tooltip-icon
+                >Users can only manage programs and offerings within their
+                locations, program information requests, confirming enrolment,
+                and reporting on scholastic standings.</tooltip-icon
+              >
+            </li>
+            <li>
+              Legal Signing Authority role is an admin with
+              <strong>an additional feature</strong
+              ><tooltip-icon
+                >This role is only to request a designation for your
+                institution. The user must be an admin first to get assigned
+                this role.</tooltip-icon
+              >
+            </li>
+          </ul>
+        </template>
 
-    <template #actions>
-      <v-row class="m-0 p-0">
-        <v-text-field
-          density="compact"
-          label="Search name"
-          variant="outlined"
-          v-model="searchBox"
-          data-cy="searchBox"
-          @keyup.enter="searchUserTable"
-          prepend-inner-icon="mdi-magnify"
-          hide-details="auto"
-        >
-        </v-text-field>
-        <check-permission-role :role="Role.InstitutionAddNewUser">
-          <template #="{ notAllowed }">
-            <v-btn
-              v-if="hasBusinessGuid || allowBasicBCeIDCreation"
-              class="ml-2"
-              color="primary"
-              :disabled="notAllowed"
-              data-cy="addNewUser"
-              @click="openNewUserModal"
-              prepend-icon="fa:fa fa-plus-circle"
+        <template #actions>
+          <v-row class="m-0 p-0">
+            <v-text-field
+              density="compact"
+              label="Search name"
+              variant="outlined"
+              v-model="searchBox"
+              data-cy="searchBox"
+              @keyup.enter="searchUserTable"
+              prepend-inner-icon="mdi-magnify"
+              hide-details="auto"
             >
-              Add new user
-            </v-btn>
-          </template>
-        </check-permission-role>
-      </v-row>
+            </v-text-field>
+            <check-permission-role :role="Role.InstitutionAddNewUser">
+              <template #="{ notAllowed }">
+                <v-btn
+                  v-if="hasBusinessGuid || allowBasicBCeIDCreation"
+                  class="ml-2"
+                  color="primary"
+                  :disabled="notAllowed"
+                  data-cy="addNewUser"
+                  @click="openNewUserModal"
+                  prepend-icon="fa:fa fa-plus-circle"
+                >
+                  Add new user
+                </v-btn>
+              </template>
+            </check-permission-role>
+          </v-row>
+        </template>
+      </body-header>
     </template>
-  </body-header>
-  <content-group>
-    <DataTable
-      :value="usersListAndCount.results"
-      :lazy="true"
-      :paginator="true"
-      :rows="DEFAULT_PAGE_LIMIT"
-      :rowsPerPageOptions="PAGINATION_LIST"
-      :totalRecords="usersListAndCount.count"
-      @page="paginationAndSortEvent($event)"
-      @sort="paginationAndSortEvent($event)"
-      :loading="loading"
-      breakpoint="1250px"
-      data-cy="usersList"
-    >
-      <template #empty>
-        <p class="text-center font-weight-bold">No records found.</p>
-      </template>
-      <Column
-        :field="UserFields.DisplayName"
-        header="Name"
-        :sortable="true"
-      ></Column>
-      <Column
-        :field="UserFields.Email"
-        header="Email"
-        :sortable="true"
-        data-cy="userEmail"
-      ></Column>
-      <Column :field="UserFields.UserType" header="User Type">
-        <template #body="slotProps">
-          <span data-cy="userType" class="text-capitalize">{{
-            slotProps.data.userType
-          }}</span>
-        </template></Column
+    <content-group>
+      <DataTable
+        :value="usersListAndCount.results"
+        :lazy="true"
+        :paginator="true"
+        :rows="DEFAULT_PAGE_LIMIT"
+        :rowsPerPageOptions="PAGINATION_LIST"
+        :totalRecords="usersListAndCount.count"
+        @page="paginationAndSortEvent($event)"
+        @sort="paginationAndSortEvent($event)"
+        :loading="loading"
+        breakpoint="1250px"
+        data-cy="usersList"
       >
-      <Column :field="UserFields.Roles" header="Role">
-        <template #body="slotProps">
-          <span class="text-capitalize"
-            >{{ institutionUserRoleToDisplay(slotProps.data.roles[0]) }}
-          </span>
+        <template #empty>
+          <p class="text-center font-weight-bold">No records found.</p>
         </template>
-      </Column>
-      <Column :field="UserFields.Locations" header="Locations"
-        ><template #body="slotProps">
-          <ul v-for="location in slotProps.data.locations" :key="location">
-            <li>{{ location }}</li>
-          </ul></template
-        ></Column
-      >
-      <Column :field="UserFields.IsActive" header="Status"
-        ><template #body="slotProps">
-          <status-chip-active-user
-            :is-active="slotProps.data.isActive"
-            data-cy="userStatus"
-          /> </template
-      ></Column>
-      <Column header="Action"
-        ><template #body="slotProps">
-          <check-permission-role :role="Role.InstitutionEditUser">
-            <template #="{ notAllowed }">
-              <v-btn
-                :disabled="!slotProps.data.isActive || notAllowed"
-                @click="openEditUserModal(slotProps.data)"
-                variant="text"
-                color="primary"
-                append-icon="mdi-pencil-outline"
-                data-cy="editUser"
-              >
-                <span class="text-decoration-underline"
-                  ><strong>Edit</strong></span
+        <Column
+          :field="UserFields.DisplayName"
+          header="Name"
+          :sortable="true"
+        ></Column>
+        <Column
+          :field="UserFields.Email"
+          header="Email"
+          :sortable="true"
+          data-cy="userEmail"
+        ></Column>
+        <Column :field="UserFields.UserType" header="User Type">
+          <template #body="slotProps">
+            <span data-cy="userType" class="text-capitalize">{{
+              slotProps.data.userType
+            }}</span>
+          </template></Column
+        >
+        <Column :field="UserFields.Roles" header="Role">
+          <template #body="slotProps">
+            <span class="text-capitalize"
+              >{{ institutionUserRoleToDisplay(slotProps.data.roles[0]) }}
+            </span>
+          </template>
+        </Column>
+        <Column :field="UserFields.Locations" header="Locations"
+          ><template #body="slotProps">
+            <ul v-for="location in slotProps.data.locations" :key="location">
+              <li>{{ location }}</li>
+            </ul></template
+          ></Column
+        >
+        <Column :field="UserFields.IsActive" header="Status"
+          ><template #body="slotProps">
+            <status-chip-active-user
+              :is-active="slotProps.data.isActive"
+              data-cy="userStatus"
+            /> </template
+        ></Column>
+        <Column header="Action"
+          ><template #body="slotProps">
+            <check-permission-role :role="Role.InstitutionEditUser">
+              <template #="{ notAllowed }">
+                <v-btn
+                  :disabled="!slotProps.data.isActive || notAllowed"
+                  @click="openEditUserModal(slotProps.data)"
+                  variant="text"
+                  color="primary"
+                  append-icon="mdi-pencil-outline"
+                  data-cy="editUser"
                 >
-              </v-btn>
-            </template>
-          </check-permission-role>
-          <check-permission-role :role="Role.InstitutionEnableDisableUser">
-            <template #="{ notAllowed }">
-              <v-btn
-                :disabled="slotProps.data.disableRemove || notAllowed"
-                @click="updateUserStatus(slotProps.data)"
-                variant="text"
-                color="primary"
-                append-icon="fa:far fa-user"
-                data-cy="disableUser"
-              >
-                <span class="text-decoration-underline"
-                  ><strong>{{
-                    slotProps.data.isActive ? "Disable" : "Enable"
-                  }}</strong></span
+                  <span class="text-decoration-underline"
+                    ><strong>Edit</strong></span
+                  >
+                </v-btn>
+              </template>
+            </check-permission-role>
+            <check-permission-role :role="Role.InstitutionEnableDisableUser">
+              <template #="{ notAllowed }">
+                <v-btn
+                  :disabled="slotProps.data.disableRemove || notAllowed"
+                  @click="updateUserStatus(slotProps.data)"
+                  variant="text"
+                  color="primary"
+                  append-icon="fa:far fa-user"
+                  data-cy="disableUser"
                 >
-              </v-btn>
-            </template>
-          </check-permission-role>
-        </template>
-      </Column>
-    </DataTable>
-  </content-group>
-  <!-- Add user. -->
-  <add-institution-user
-    ref="addInstitutionUserModal"
-    :institutionId="institutionId"
-    :hasBusinessGuid="hasBusinessGuid"
-    :canSearchBCeIDUsers="canSearchBCeIDUsers"
-  />
-  <!-- Edit user. -->
-  <edit-institution-user
-    ref="editInstitutionUserModal"
-    :institutionId="institutionId"
-    :hasBusinessGuid="hasBusinessGuid"
-  />
+                  <span class="text-decoration-underline"
+                    ><strong>{{
+                      slotProps.data.isActive ? "Disable" : "Enable"
+                    }}</strong></span
+                  >
+                </v-btn>
+              </template>
+            </check-permission-role>
+          </template>
+        </Column>
+      </DataTable>
+    </content-group>
+    <!-- Add user. -->
+    <add-institution-user
+      ref="addInstitutionUserModal"
+      :institutionId="institutionId"
+      :hasBusinessGuid="hasBusinessGuid"
+      :canSearchBCeIDUsers="canSearchBCeIDUsers"
+    />
+    <!-- Edit user. -->
+    <edit-institution-user
+      ref="editInstitutionUserModal"
+      :institutionId="institutionId"
+      :hasBusinessGuid="hasBusinessGuid"
+    />
+  </body-header-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/components/common/LocationSummary.vue b/sources/packages/web/src/components/common/LocationSummary.vue
index 8f45f98236..600b1860fd 100644
--- a/sources/packages/web/src/components/common/LocationSummary.vue
+++ b/sources/packages/web/src/components/common/LocationSummary.vue
@@ -1,105 +1,107 @@
 <template>
   <!-- This component is shared between ministry and student users -->
-  <body-header
-    title="All locations"
-    class="m-1"
-    :recordsCount="institutionLocationList.length"
-    ><template #actions>
-      <!-- Todo: We to eventually eliminate the logic which is based
+  <body-header-container>
+    <template #header>
+      <body-header
+        title="All locations"
+        :recordsCount="institutionLocationList.length"
+        ><template #actions>
+          <!-- Todo: We to eventually eliminate the logic which is based
       on the client type on the vue components.-->
-      <v-btn
-        v-if="clientType === ClientIdType.Institution"
-        class="float-right"
-        color="primary"
-        @click="goToAddNewLocation()"
-        prepend-icon="fa:fa fa-plus-circle"
-        data-cy="addLocation"
-      >
-        Add location
-      </v-btn>
+          <v-btn
+            v-if="clientType === ClientIdType.Institution"
+            class="float-right"
+            color="primary"
+            @click="goToAddNewLocation()"
+            prepend-icon="fa:fa fa-plus-circle"
+            data-cy="addLocation"
+          >
+            Add location
+          </v-btn>
+        </template>
+      </body-header>
     </template>
-  </body-header>
-  <content-group
-    v-for="item in institutionLocationList"
-    :key="item"
-    class="ma-2"
-    data-cy="institutionLocation"
-  >
-    <v-row>
-      <v-col md="10">
-        <div>
-          <v-icon icon="mdi-map-marker-outline"></v-icon>
-          <span data-cy="locationName" class="category-header-medium mx-1">{{
-            item.name
-          }}</span>
-          <status-chip-designation-agreement
-            data-cy="institutionDesignationStatus"
-            :status="item.designationStatus"
-          />
-        </div>
-      </v-col>
-      <v-col>
-        <check-permission-role :role="Role.InstitutionEditLocationDetails">
-          <template #="{ notAllowed }">
-            <v-btn
-              color="primary"
-              class="float-right"
-              variant="text"
-              :disabled="notAllowed"
-              @click="$emit('editLocation', item.id)"
-              prepend-icon="fa:fa fa-gear"
-              data-cy="editLocation"
-            >
-              Edit
-            </v-btn>
-          </template>
-        </check-permission-role>
-      </v-col>
-    </v-row>
-    <v-row>
-      <!-- Address 1 -->
-      <v-col>
-        <title-value propertyTitle="Address line 1" />
-        <span
-          class="label-value muted-content clearfix"
-          v-for="addressLine in addressList1(item)"
-          :key="addressLine"
-          data-cy="institutionAddress1"
-        >
-          {{ addressLine }}
-        </span>
-      </v-col>
+    <content-group
+      v-for="item in institutionLocationList"
+      :key="item"
+      data-cy="institutionLocation"
+    >
+      <v-row>
+        <v-col md="10">
+          <div>
+            <v-icon icon="mdi-map-marker-outline"></v-icon>
+            <span data-cy="locationName" class="category-header-medium mx-1">{{
+              item.name
+            }}</span>
+            <status-chip-designation-agreement
+              data-cy="institutionDesignationStatus"
+              :status="item.designationStatus"
+            />
+          </div>
+        </v-col>
+        <v-col>
+          <check-permission-role :role="Role.InstitutionEditLocationDetails">
+            <template #="{ notAllowed }">
+              <v-btn
+                color="primary"
+                class="float-right"
+                variant="text"
+                :disabled="notAllowed"
+                @click="$emit('editLocation', item.id)"
+                prepend-icon="fa:fa fa-gear"
+                data-cy="editLocation"
+              >
+                Edit
+              </v-btn>
+            </template>
+          </check-permission-role>
+        </v-col>
+      </v-row>
+      <v-row>
+        <!-- Address 1 -->
+        <v-col>
+          <title-value propertyTitle="Address line 1" />
+          <span
+            class="label-value muted-content clearfix"
+            v-for="addressLine in addressList1(item)"
+            :key="addressLine"
+            data-cy="institutionAddress1"
+          >
+            {{ addressLine }}
+          </span>
+        </v-col>
 
-      <!-- Address 2 -->
-      <v-col>
-        <title-value propertyTitle="Address line 2" />
-        <span data-cy="institutionAddress2">---</span>
-      </v-col>
+        <!-- Address 2 -->
+        <v-col>
+          <title-value propertyTitle="Address line 2" />
+          <span data-cy="institutionAddress2">---</span>
+        </v-col>
 
-      <!-- Primary contact -->
-      <v-col>
-        <title-value propertyTitle=" Primary contact" />
-        <span
-          class="label-value muted-content clearfix"
-          v-for="contactLine in primaryContactList(item)"
-          :key="contactLine"
-          data-cy="institutionPrimaryContact"
-        >
-          {{ contactLine }}
-        </span>
-      </v-col>
-      <!-- Institution code -->
-      <v-col>
-        <title-value propertyTitle="Institution code" />
-        <span
-          data-cy="institutionCode"
-          class="label-value muted-content clearfix"
-        >
-          {{ item.institutionCode }}
-        </span>
-      </v-col>
-    </v-row>
-  </content-group>
+        <!-- Primary contact -->
+        <v-col>
+          <title-value propertyTitle=" Primary contact" />
+          <span
+            class="label-value muted-content clearfix"
+            v-for="contactLine in primaryContactList(item)"
+            :key="contactLine"
+            data-cy="institutionPrimaryContact"
+          >
+            {{ contactLine }}
+          </span>
+        </v-col>
+        <!-- Institution code -->
+        <v-col>
+          <title-value propertyTitle="Institution code" />
+          <span
+            data-cy="institutionCode"
+            class="label-value muted-content clearfix"
+          >
+            {{ item.institutionCode }}
+          </span>
+        </v-col>
+      </v-row>
+    </content-group>
+  </body-header-container>
 </template>
 <script lang="ts">
 import { useRouter } from "vue-router";
diff --git a/sources/packages/web/src/views/aest/institution/Designation.vue b/sources/packages/web/src/views/aest/institution/Designation.vue
index b74a2f2396..b8955026ae 100644
--- a/sources/packages/web/src/views/aest/institution/Designation.vue
+++ b/sources/packages/web/src/views/aest/institution/Designation.vue
@@ -1,17 +1,20 @@
 <template>
-  <full-page-container :full-width="true">
-    <body-header
-      title="Designation agreements"
-      :recordsCount="designations?.length"
-      class="m-1"
-    >
-    </body-header>
-    <designation-agreement-summary
-      :designations="designations"
-      toggleMessage="No designation agreements found"
-      @viewDesignation="goToViewDesignation"
-    />
-  </full-page-container>
+  <tab-container>
+    <body-header-container>
+      <template #header>
+        <body-header
+          title="Designation agreements"
+          :recordsCount="designations?.length"
+        >
+        </body-header>
+      </template>
+      <designation-agreement-summary
+        :designations="designations"
+        toggleMessage="No designation agreements found"
+        @viewDesignation="goToViewDesignation"
+      />
+    </body-header-container>
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/InstitutionNotes.vue b/sources/packages/web/src/views/aest/institution/InstitutionNotes.vue
index 658ac378c9..970c457b09 100644
--- a/sources/packages/web/src/views/aest/institution/InstitutionNotes.vue
+++ b/sources/packages/web/src/views/aest/institution/InstitutionNotes.vue
@@ -1,43 +1,47 @@
 <template>
-  <div class="mt-9">
-    <body-header title="Notes">
-      <template #actions>
-        <v-btn-toggle
-          v-model="toggleNotes"
-          mandatory
-          class="float-right btn-toggle"
-          selected-class="selected-btn-toggle"
-        >
-          <v-btn
-            rounded="xl"
-            color="primary"
-            data-cy="allNotesButton"
-            @click="filterNotes()"
-            value="allNotes"
-            >All Notes</v-btn
+  <tab-container>
+    <body-header-container>
+      <template #header>
+        <body-header title="Notes">
+          <template #actions>
+            <v-btn-toggle
+              v-model="toggleNotes"
+              mandatory
+              class="float-right btn-toggle"
+              selected-class="selected-btn-toggle"
+            >
+              <v-btn
+                rounded="xl"
+                color="primary"
+                data-cy="allNotesButton"
+                @click="filterNotes()"
+                value="allNotes"
+                >All Notes</v-btn
+              >
+              <v-btn
+                rounded="xl"
+                v-for="item in InstitutionNoteType"
+                :key="item"
+                color="primary"
+                :value="item"
+                :data-cy="item"
+                class="ml-2"
+                @click="filterNotes(item)"
+                >{{ item }}</v-btn
+              >
+            </v-btn-toggle></template
           >
-          <v-btn
-            rounded="xl"
-            v-for="item in InstitutionNoteType"
-            :key="item"
-            color="primary"
-            :value="item"
-            :data-cy="item"
-            class="ml-2"
-            @click="filterNotes(item)"
-            >{{ item }}</v-btn
-          >
-        </v-btn-toggle></template
-      >
-    </body-header>
-    <notes
-      title="Past Notes"
-      :entityType="NoteEntityType.Institution"
-      :notes="notes"
-      @submitData="addNote"
-      :allowedRole="Role.InstitutionCreateNote"
-    ></notes>
-  </div>
+        </body-header>
+      </template>
+      <notes
+        title="Past Notes"
+        :entityType="NoteEntityType.Institution"
+        :notes="notes"
+        @submitData="addNote"
+        :allowedRole="Role.InstitutionCreateNote"
+      ></notes>
+    </body-header-container>
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/Locations.vue b/sources/packages/web/src/views/aest/institution/Locations.vue
index bd41785445..c0e7322b9c 100644
--- a/sources/packages/web/src/views/aest/institution/Locations.vue
+++ b/sources/packages/web/src/views/aest/institution/Locations.vue
@@ -1,12 +1,10 @@
 <template>
-  <v-card class="mt-4">
-    <div class="mx-5 py-4">
-      <LocationSummary
-        :institutionId="institutionId"
-        @editLocation="gotToEditLocation"
-      />
-    </div>
-  </v-card>
+  <tab-container>
+    <location-summary
+      :institutionId="institutionId"
+      @editLocation="gotToEditLocation"
+    />
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/Profile.vue b/sources/packages/web/src/views/aest/institution/Profile.vue
index 81a798a5ab..81c5e14808 100644
--- a/sources/packages/web/src/views/aest/institution/Profile.vue
+++ b/sources/packages/web/src/views/aest/institution/Profile.vue
@@ -1,23 +1,25 @@
 <template>
-  <v-card class="mt-4">
-    <div class="mx-5 py-4">
-      <body-header title="Profile">
-        <template #actions>
-          <check-permission-role :role="Role.InstitutionEditProfile">
-            <template #="{ notAllowed }">
-              <v-btn
-                class="float-right"
-                @click="editProfile"
-                variant="text"
-                color="primary"
-                prepend-icon="fa:fa fa-gear"
-                :disabled="notAllowed"
-                >Edit
-              </v-btn>
-            </template>
-          </check-permission-role>
-        </template>
-      </body-header>
+  <tab-container>
+    <body-header-container>
+      <template #header>
+        <body-header title="Profile">
+          <template #actions>
+            <check-permission-role :role="Role.InstitutionEditProfile">
+              <template #="{ notAllowed }">
+                <v-btn
+                  class="float-right"
+                  @click="editProfile"
+                  variant="text"
+                  color="primary"
+                  prepend-icon="fa:fa fa-gear"
+                  :disabled="notAllowed"
+                  >Edit
+                </v-btn>
+              </template>
+            </check-permission-role>
+          </template>
+        </body-header>
+      </template>
       <p class="category-header-medium">Institution profile</p>
       <content-group>
         <v-row>
@@ -116,8 +118,8 @@
           :propertyValue="institutionProfileDetail.mailingAddress?.country"
         />
       </content-group>
-    </div>
-  </v-card>
+    </body-header-container>
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index fb4a8755f6..518df75aa5 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -1,91 +1,97 @@
 <template>
-  <full-page-container :full-width="true">
-    <body-header
-      title="All Programs"
-      :recordsCount="institutionProgramsSummary.count"
-      class="m-1"
-    >
-      <template #actions>
-        <v-text-field
-          density="compact"
-          v-model="searchProgramName"
-          label="Search Program Name"
-          data-cy="searchProgramName"
-          variant="outlined"
-          @keyup.enter="goToSearchProgramName()"
-          prepend-inner-icon="mdi-magnify"
-          hide-details="auto"
-        />
-      </template>
-    </body-header>
-    <content-group>
-      <DataTable
-        :value="institutionProgramsSummary.results"
-        :lazy="true"
-        :paginator="true"
-        :rows="DEFAULT_PAGE_LIMIT"
-        :rowsPerPageOptions="PAGINATION_LIST"
-        :totalRecords="institutionProgramsSummary.count"
-        @page="pageSortEvent($event)"
-        @sort="pageSortEvent($event)"
-        :loading="loading"
-      >
-        <template #empty>
-          <p class="text-center font-weight-bold">No records found.</p>
-        </template>
-        <Column
-          :field="ProgramSummaryFields.SubmittedDate"
-          header="Date Submitted"
-          :sortable="true"
+  <tab-container>
+    <body-header-container>
+      <template #header>
+        <body-header
+          title="All Programs"
+          :recordsCount="institutionProgramsSummary.count"
         >
-          <template #body="slotProps">
-            <div class="p-text-capitalize">
-              {{ slotProps.data.submittedDateFormatted }}
-            </div>
-          </template>
-        </Column>
-        <Column :field="ProgramSummaryFields.ProgramName" header="Program Name">
-          <template #body="slotProps">
-            <div class="p-text-capitalize">
-              {{ slotProps.data.programName }}
-            </div>
-          </template>
-        </Column>
-        <Column :field="ProgramSummaryFields.LocationName" header="Location">
-          <template #body="slotProps">
-            <div class="p-text-capitalize">
-              {{ slotProps.data.locationName }}
-            </div>
+          <template #actions>
+            <v-text-field
+              density="compact"
+              v-model="searchProgramName"
+              label="Search Program Name"
+              data-cy="searchProgramName"
+              variant="outlined"
+              @keyup.enter="goToSearchProgramName()"
+              prepend-inner-icon="mdi-magnify"
+              hide-details="auto"
+            />
           </template>
-        </Column>
-        <Column
-          :field="ProgramSummaryFields.TotalOfferings"
-          header="Study periods"
+        </body-header>
+      </template>
+      <content-group>
+        <DataTable
+          :value="institutionProgramsSummary.results"
+          :lazy="true"
+          :paginator="true"
+          :rows="DEFAULT_PAGE_LIMIT"
+          :rowsPerPageOptions="PAGINATION_LIST"
+          :totalRecords="institutionProgramsSummary.count"
+          @page="pageSortEvent($event)"
+          @sort="pageSortEvent($event)"
+          :loading="loading"
         >
-        </Column>
-        <Column :field="ProgramSummaryFields.ProgramStatus" header="Status"
-          ><template #body="slotProps">
-            <status-chip-program
-              :status="slotProps.data.programStatus"
-            ></status-chip-program> </template
-        ></Column>
-        <Column header="Action">
-          <template #body="slotProps">
-            <v-btn
-              variant="outlined"
-              @click="
-                goToViewProgramDetail(
-                  slotProps.data.programId,
-                  slotProps.data.locationId,
-                )
-              "
-              >View</v-btn
-            >
+          <template #empty>
+            <p class="text-center font-weight-bold">No records found.</p>
           </template>
-        </Column>
-      </DataTable>
-    </content-group>
-  </full-page-container>
+          <Column
+            :field="ProgramSummaryFields.SubmittedDate"
+            header="Date Submitted"
+            :sortable="true"
+          >
+            <template #body="slotProps">
+              <div class="p-text-capitalize">
+                {{ slotProps.data.submittedDateFormatted }}
+              </div>
+            </template>
+          </Column>
+          <Column
+            :field="ProgramSummaryFields.ProgramName"
+            header="Program Name"
+          >
+            <template #body="slotProps">
+              <div class="p-text-capitalize">
+                {{ slotProps.data.programName }}
+              </div>
+            </template>
+          </Column>
+          <Column :field="ProgramSummaryFields.LocationName" header="Location">
+            <template #body="slotProps">
+              <div class="p-text-capitalize">
+                {{ slotProps.data.locationName }}
+              </div>
+            </template>
+          </Column>
+          <Column
+            :field="ProgramSummaryFields.TotalOfferings"
+            header="Study periods"
+          >
+          </Column>
+          <Column :field="ProgramSummaryFields.ProgramStatus" header="Status"
+            ><template #body="slotProps">
+              <status-chip-program
+                :status="slotProps.data.programStatus"
+              ></status-chip-program> </template
+          ></Column>
+          <Column header="Action">
+            <template #body="slotProps">
+              <v-btn
+                variant="outlined"
+                @click="
+                  goToViewProgramDetail(
+                    slotProps.data.programId,
+                    slotProps.data.locationId,
+                  )
+                "
+                >View</v-btn
+              >
+            </template>
+          </Column>
+        </DataTable>
+      </content-group>
+    </body-header-container>
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/Restrictions.vue b/sources/packages/web/src/views/aest/institution/Restrictions.vue
index ef272017bf..419eb80fbf 100644
--- a/sources/packages/web/src/views/aest/institution/Restrictions.vue
+++ b/sources/packages/web/src/views/aest/institution/Restrictions.vue
@@ -1,89 +1,95 @@
 <template>
-  <full-page-container :full-width="true">
-    <body-header title="All Restrictions" class="m-1">
-      <template #actions>
-        <check-permission-role :role="Role.InstitutionAddRestriction">
-          <template #="{ notAllowed }">
-            <v-btn
-              @click="addInstitutionRestriction"
-              class="float-right"
-              color="primary"
-              prepend-icon="fa:fa fa-plus-circle"
-              :disabled="notAllowed"
-              >Add restriction</v-btn
-            ></template
-          >
-        </check-permission-role>
+  <tab-container>
+    <body-header-container>
+      <template #header>
+        <body-header title="All Restrictions">
+          <template #actions>
+            <check-permission-role :role="Role.InstitutionAddRestriction">
+              <template #="{ notAllowed }">
+                <v-btn
+                  @click="addInstitutionRestriction"
+                  class="float-right"
+                  color="primary"
+                  prepend-icon="fa:fa fa-plus-circle"
+                  :disabled="notAllowed"
+                  >Add restriction</v-btn
+                ></template
+              >
+            </check-permission-role>
+          </template>
+        </body-header>
       </template>
-    </body-header>
-    <content-group>
-      <DataTable
-        :value="institutionRestrictions"
-        :paginator="true"
-        :rows="DEFAULT_PAGE_LIMIT"
-        :rowsPerPageOptions="PAGINATION_LIST"
-      >
-        <template #empty>
-          <p class="text-center font-weight-bold">No records found.</p>
-        </template>
-        <Column
-          field="restrictionCategory"
-          header="Category"
-          :sortable="true"
-        ></Column>
-        <Column field="description" header="Reason">
-          <template #body="slotProps">{{
-            `${slotProps.data.restrictionCode} - ${slotProps.data.description}`
-          }}</template></Column
-        >
-        <Column field="createdAt" header="Added"
-          ><template #body="slotProps">{{
-            dateOnlyLongString(slotProps.data.createdAt)
-          }}</template></Column
+      <content-group>
+        <DataTable
+          :value="institutionRestrictions"
+          :paginator="true"
+          :rows="DEFAULT_PAGE_LIMIT"
+          :rowsPerPageOptions="PAGINATION_LIST"
         >
-        <Column field="updatedAt" header="Resolved">
-          <template #body="slotProps">{{
-            slotProps.data.isActive
-              ? "-"
-              : dateOnlyLongString(slotProps.data.updatedAt)
-          }}</template></Column
-        >
-        <Column field="isActive" header="Status">
-          <template #body="slotProps">
-            <status-chip-restriction
-              :status="
-                slotProps.data.isActive
-                  ? RestrictionStatus.Active
-                  : RestrictionStatus.Resolved
-              "
-            />
+          <template #empty>
+            <p class="text-center font-weight-bold">No records found.</p>
           </template>
-        </Column>
-        <Column field="restrictionId" header="">
-          <template #body="slotProps">
-            <v-btn
-              color="primary"
-              variant="outlined"
-              @click="viewIInstitutionRestriction(slotProps.data.restrictionId)"
-              >View</v-btn
-            >
-          </template></Column
-        >
-      </DataTable>
-    </content-group>
-  </full-page-container>
-  <ViewRestrictionModal
-    ref="viewRestriction"
-    :restrictionData="institutionRestriction"
-    @submitResolutionData="resolveRestriction"
-    :allowedRole="Role.InstitutionResolveRestriction"
-  />
-  <AddInstitutionRestrictionModal
-    ref="addRestriction"
-    :entityType="RestrictionEntityType.Institution"
-    @submitRestrictionData="createNewRestriction"
-    :allowedRole="Role.InstitutionAddRestriction"
-  />
+          <Column
+            field="restrictionCategory"
+            header="Category"
+            :sortable="true"
+          ></Column>
+          <Column field="description" header="Reason">
+            <template #body="slotProps">{{
+              `${slotProps.data.restrictionCode} - ${slotProps.data.description}`
+            }}</template></Column
+          >
+          <Column field="createdAt" header="Added"
+            ><template #body="slotProps">{{
+              dateOnlyLongString(slotProps.data.createdAt)
+            }}</template></Column
+          >
+          <Column field="updatedAt" header="Resolved">
+            <template #body="slotProps">{{
+              slotProps.data.isActive
+                ? "-"
+                : dateOnlyLongString(slotProps.data.updatedAt)
+            }}</template></Column
+          >
+          <Column field="isActive" header="Status">
+            <template #body="slotProps">
+              <status-chip-restriction
+                :status="
+                  slotProps.data.isActive
+                    ? RestrictionStatus.Active
+                    : RestrictionStatus.Resolved
+                "
+              />
+            </template>
+          </Column>
+          <Column field="restrictionId" header="">
+            <template #body="slotProps">
+              <v-btn
+                color="primary"
+                variant="outlined"
+                @click="
+                  viewIInstitutionRestriction(slotProps.data.restrictionId)
+                "
+                >View</v-btn
+              >
+            </template></Column
+          >
+        </DataTable>
+      </content-group>
+      <ViewRestrictionModal
+        ref="viewRestriction"
+        :restrictionData="institutionRestriction"
+        @submitResolutionData="resolveRestriction"
+        :allowedRole="Role.InstitutionResolveRestriction"
+      />
+      <AddInstitutionRestrictionModal
+        ref="addRestriction"
+        :entityType="RestrictionEntityType.Institution"
+        @submitRestrictionData="createNewRestriction"
+        :allowedRole="Role.InstitutionAddRestriction"
+      />
+    </body-header-container>
+  </tab-container>
 </template>
 
 <script lang="ts">
diff --git a/sources/packages/web/src/views/aest/institution/Users.vue b/sources/packages/web/src/views/aest/institution/Users.vue
index bc7f174543..48641aea3c 100644
--- a/sources/packages/web/src/views/aest/institution/Users.vue
+++ b/sources/packages/web/src/views/aest/institution/Users.vue
@@ -1,13 +1,11 @@
 <template>
-  <v-card class="mt-4">
-    <div class="mx-5 py-4">
-      <institution-user-summary
-        :institutionId="institutionId"
-        :hasBusinessGuid="hasBusinessGuid"
-        :allowBasicBCeIDCreation="true"
-      />
-    </div>
-  </v-card>
+  <tab-container>
+    <institution-user-summary
+      :institutionId="institutionId"
+      :hasBusinessGuid="hasBusinessGuid"
+      :allowBasicBCeIDCreation="true"
+    />
+  </tab-container>
 </template>
 
 <script lang="ts">