Fix: Add null checks for facility group IDs and names during filtering.

src/components/AddFacilityGroupModal.vue

@@ -8,10 +8,12 @@
       </ion-buttons>
       <ion-title>{{ translate("Add Group") }}</ion-title>
     </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findGroups()" @ionClear="queryString = ''; findGroups()"/>
+    </ion-toolbar>
   </ion-header>
 
   <ion-content>
-    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findGroups()"/>
     <div class="empty-state" v-if="!Object.keys(filteredFacilityGroupsByType).length || isSearching">
       <p>{{ translate("No facility groups found") }}</p>
     </div>
@@ -252,11 +254,15 @@ export default defineComponent({
 
       this.filteredFacilityGroupsByType = Object.values(this.facilityGroupsByType).reduce((filteredGroups: any, groups: any) => {
         groups.map((group: any) => {
-          if(group.facilityGroupId.toLowerCase().includes(keyword) || group.facilityGroupName.toLowerCase().includes(keyword)) {
-            if(filteredGroups[group.facilityGroupTypeId]) {
-              filteredGroups[group.facilityGroupTypeId].push(group)
+          const groupId = group.facilityGroupId ? group.facilityGroupId.toLowerCase() : '';
+          const groupName = group.facilityGroupName ? group.facilityGroupName.toLowerCase() : '';
+
+          if (groupId.includes(keyword) || groupName.includes(keyword)) {
+            const groupTypeId = group?.facilityGroupTypeId;
+            if (filteredGroups[groupTypeId]) {
+              filteredGroups[groupTypeId].push(group)
             } else {
-              filteredGroups[group.facilityGroupTypeId] = [group]
+              filteredGroups[groupTypeId] = [group]
             }
           }
         })

src/components/AddStaffMemberModal.vue

@@ -8,10 +8,12 @@
       </ion-buttons>
       <ion-title>{{ translate("Staff") }}</ion-title>
     </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findParties()"/>
+    </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
-    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findParties()"/>
 
     <div class="ion-padding" v-if="!parties.length">
       {{ translate("No party found") }}

src/views/FindFacilities.vue

@@ -15,39 +15,41 @@
 
     <ion-content ref="contentRef" id="filter-content">
       <div class="find">
-        <section class="search">
-          <ion-searchbar :placeholder="translate('Search facilities')" v-model="query.queryString" @keyup.enter="updateQuery()" />
-        </section>
-
-        <aside class="filters">
-          <ion-list>
-            <ion-item lines="none">
-              <ion-icon :icon="globeOutline" slot="start" />
-              <ion-select :label="translate('Product Store')" interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
-                <ion-select-option value="">{{ translate("All") }}</ion-select-option>
-                <ion-select-option :value="productStore.productStoreId" :key="index" v-for="(productStore, index) in productStores">{{ productStore.storeName ? productStore.storeName : productStore.productStoreId }}</ion-select-option>
-              </ion-select>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-icon :icon="businessOutline" slot="start" />
-              <ion-select :label="translate('Type')" interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
-                <ion-select-option value="">{{ translate("All") }}</ion-select-option>
-                <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
-                  {{ type.description }}
-                </ion-select-option>
-              </ion-select>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-icon :icon="albumsOutline" slot="start" />
-              <ion-select :label="translate('Group')" interface="popover" v-model="query.facilityGroupId" @ionChange="updateQuery()">
-                <ion-select-option value="">{{ translate("All") }}</ion-select-option>
-                <ion-select-option :value="group.facilityGroupId" :key="group.facilityGroupId" v-for="group in facilityGroups">
-                  {{ group.facilityGroupName }}
-                </ion-select-option>
-              </ion-select>
-            </ion-item>
-          </ion-list>
-        </aside>
+        <div class="sidebar">
+          <section class="search">
+            <ion-searchbar :placeholder="translate('Search facilities')" v-model="query.queryString" @keyup.enter="updateQuery()" />
+          </section>
+
+          <aside class="filters">
+            <ion-list>
+              <ion-item lines="none">
+                <ion-icon :icon="globeOutline" slot="start" />
+                <ion-select :label="translate('Product Store')" interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
+                  <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+                  <ion-select-option :value="productStore.productStoreId" :key="index" v-for="(productStore, index) in productStores">{{ productStore.storeName ? productStore.storeName : productStore.productStoreId }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-icon :icon="businessOutline" slot="start" />
+                <ion-select :label="translate('Type')" interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
+                  <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+                  <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
+                    {{ type.description }}
+                  </ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-icon :icon="albumsOutline" slot="start" />
+                <ion-select :label="translate('Group')" interface="popover" v-model="query.facilityGroupId" @ionChange="updateQuery()">
+                  <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+                  <ion-select-option :value="group.facilityGroupId" :key="group.facilityGroupId" v-for="group in facilityGroups">
+                    {{ group.facilityGroupName }}
+                  </ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </aside>
+        </div>
 
         <main v-if="facilities?.length">
           <div class="list-item" v-for="(facility, index) in facilities" :key="index" @click="viewFacilityDetails(facility.facilityId)">
@@ -371,6 +373,14 @@ config-note {
   text-align: center;
 }
 
+.sidebar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--ion-background-color, #fff);
+  border-bottom: 1px solid var(--ion-color-light-shade, #f4f5f8);
+}
+
 @media screen and (min-width: 991px) {
   ion-content {
     --padding-bottom: 80px;