From 260c70a4f0154e08efc647a0a8c34c48983814df Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 12 Nov 2024 20:18:19 +0300
Subject: [PATCH] (refactor) Refactor bed management app to match conventions

This PR applies a set of changes to the bed management app to match the conventions of the other apps in the O3 ecosystem.
---
 .../src/form/appointments-form.resource.ts    |   8 +-
 .../src/admin-card-link.component.tsx         |   5 +-
 .../bed-administration-form.component.tsx     | 106 ++++----
 .../bed-administration-form.scss              |   0
 .../bed-administration-table.component.tsx    |  42 +--
 .../bed-administration-table.scss             |   2 +-
 .../bed-administration-types.ts               |  12 +-
 .../bed-administration.resource.ts            |  12 +-
 .../edit-bed-form.component.tsx               |  86 +++---
 .../new-bed-form.component.tsx                |  72 +++--
 ...bed-tag-administration-table.component.tsx |  38 +--
 .../bed-tag/bed-tags-admin-form.component.tsx |  20 +-
 .../src/bed-tag/edit-tag-form.component.tsx   |  56 ++--
 .../src/bed-tag/new-tag-form.component.tsx    |  63 ++---
 .../bed-type-admin-form.component.tsx         |  64 +++--
 ...ed-type-administration-table.component.tsx |  92 +++----
 .../src/bed-type/edit-bed-type.component.tsx  |  47 ++--
 .../bed-type/new-bed-type-form.component.tsx  |  69 +++--
 .../src/card-header/card-header.component.tsx |   4 +-
 .../src/header/header.component.tsx           |  16 +-
 .../src/header/header.scss                    |  14 +-
 .../src/header/illustration.component.tsx     |   2 +-
 packages/esm-bed-management-app/src/index.ts  |   3 +-
 .../src/left-panel/left-panel.component.tsx   |  18 +-
 .../src/root.component.tsx                    |   9 +-
 .../esm-bed-management-app/src/setup-tests.ts |   1 -
 .../src/summary/summary.resource.ts           | 254 +++++++++++-------
 packages/esm-bed-management-app/src/types.ts  |   4 +-
 .../ward-with-beds.component.tsx              |  13 +-
 .../translations/en.json                      |  49 ++--
 packages/esm-bed-management-app/tsconfig.json |   1 -
 ...-attribute-queue-number-cell.component.tsx |   1 +
 .../transition-latest-queue-entry.resource.ts |  12 +-
 33 files changed, 622 insertions(+), 573 deletions(-)
 delete mode 100644 packages/esm-bed-management-app/src/bed-administration/bed-administration-form.scss
 delete mode 100644 packages/esm-bed-management-app/src/setup-tests.ts

diff --git a/packages/esm-appointments-app/src/form/appointments-form.resource.ts b/packages/esm-appointments-app/src/form/appointments-form.resource.ts
index 434299dd0..37c5c1fb2 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.resource.ts
+++ b/packages/esm-appointments-app/src/form/appointments-form.resource.ts
@@ -1,4 +1,6 @@
+import { useCallback } from 'react';
 import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
 import useSWR, { useSWRConfig } from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import {
@@ -7,12 +9,10 @@ import {
   type AppointmentsFetchResponse,
   type RecurringAppointmentsPayload,
 } from '../types';
-import isToday from 'dayjs/plugin/isToday';
-import { useCallback } from 'react';
 dayjs.extend(isToday);
 
-const appointmentUrlMatcher = '/ws/rest/v1/appointment';
-const appointmentsSearchUrl = '/ws/rest/v1/appointments/search';
+const appointmentUrlMatcher = `${restBaseUrl}/appointment`;
+const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
 
 export function useMutateAppointments() {
   const { mutate } = useSWRConfig();
diff --git a/packages/esm-bed-management-app/src/admin-card-link.component.tsx b/packages/esm-bed-management-app/src/admin-card-link.component.tsx
index 97791f8d7..f3c7737ed 100644
--- a/packages/esm-bed-management-app/src/admin-card-link.component.tsx
+++ b/packages/esm-bed-management-app/src/admin-card-link.component.tsx
@@ -5,13 +5,14 @@ import { ArrowRight } from '@carbon/react/icons';
 
 const BedManagementAdminCardLink: React.FC = () => {
   const { t } = useTranslation();
-  const header = t('manageBeds', 'Manage Beds');
+  const header = t('manageBeds', 'Manage beds');
+
   return (
     <Layer>
       <ClickableTile href={window.getOpenmrsSpaBase() + 'bed-management'} rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t('bedManagement', 'Bed Management')}</div>
+          <div className="content">{t('bedManagement', 'Bed management')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx
index 6b2803106..6fb0fed9c 100644
--- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import capitalize from 'lodash-es/capitalize';
 import { z } from 'zod';
 import { useForm, Controller } from 'react-hook-form';
@@ -9,6 +9,7 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -18,18 +19,33 @@ import {
   Stack,
   TextArea,
   TextInput,
-  InlineNotification,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
-import type { BedType, BedFormData } from '../types';
 import { type BedAdministrationData } from './bed-administration-types';
+import { type BedType, type BedFormData } from '../types';
+
+interface BedAdministrationFormProps {
+  allLocations: Location[];
+  availableBedTypes: Array<BedType>;
+  handleCreateBed?: (formData: BedAdministrationData) => void;
+  headerTitle: string;
+  initialData: BedFormData;
+  occupancyStatuses: string[];
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
+}
+
+interface ErrorType {
+  message: string;
+}
 
 const numberInString = z.string().transform((val, ctx) => {
   const parsed = parseInt(val);
   if (isNaN(parsed) || parsed < 1) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
+      // TODO: Translate this message
       message: 'Please enter a valid number',
     });
     return z.NEVER;
@@ -38,41 +54,26 @@ const numberInString = z.string().transform((val, ctx) => {
 });
 
 const BedAdministrationSchema = z.object({
+  bedColumn: numberInString,
   bedId: z.string().max(255),
-  description: z.string().max(255),
   bedRow: numberInString,
-  bedColumn: numberInString,
+  bedType: z.string().refine((value) => value != '', 'Please select a valid bed type'),
+  description: z.string().max(255),
   location: z
     .object({ display: z.string(), uuid: z.string() })
     .refine((value) => value.display != '', 'Please select a valid location'),
   occupancyStatus: z.string().refine((value) => value != '', 'Please select a valid occupied status'),
-  bedType: z.string().refine((value) => value != '', 'Please select a valid bed type'),
 });
 
-interface BedAdministrationFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
-  availableBedTypes: Array<BedType>;
-  allLocations: Location[];
-  handleCreateQuestion?: (formData: BedAdministrationData) => void;
-  headerTitle: string;
-  occupancyStatuses: string[];
-  initialData: BedFormData;
-}
-
-interface ErrorType {
-  message: string;
-}
-
 const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
-  showModal,
-  onModalChange,
-  availableBedTypes,
   allLocations,
-  handleCreateQuestion,
+  availableBedTypes,
+  handleCreateBed,
   headerTitle,
-  occupancyStatuses,
   initialData,
+  occupancyStatuses,
+  onModalChange,
+  showModal,
 }) => {
   const { t } = useTranslation();
   const [occupancyStatus, setOccupancyStatus] = useState(capitalize(initialData.status));
@@ -80,10 +81,6 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [formStateError, setFormStateError] = useState('');
 
-  const filterLocationNames = (location) => {
-    return location.item.display?.toLowerCase().includes(location?.inputValue?.toLowerCase()) ?? [];
-  };
-
   const {
     handleSubmit,
     control,
@@ -92,13 +89,13 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     mode: 'all',
     resolver: zodResolver(BedAdministrationSchema),
     defaultValues: {
+      bedColumn: initialData.column.toString() ?? '0',
       bedId: initialData.bedNumber ?? '',
-      description: initialData.bedType?.description ?? '',
       bedRow: initialData.row.toString() ?? '0',
-      bedColumn: initialData.column.toString() ?? '0',
+      bedType: initialData.bedType?.name ?? '',
+      description: initialData.bedType?.description ?? '',
       location: initialData.location ?? {},
       occupancyStatus: capitalize(initialData.status) ?? occupancyStatus,
-      bedType: initialData.bedType?.name ?? '',
     },
   });
 
@@ -106,7 +103,7 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     const result = BedAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleCreateBed(formData);
     }
   };
 
@@ -116,6 +113,7 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   };
 
   return (
+    // TODO: Port this over to the modal system or create individual modals for each form
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
       <ModalHeader title={headerTitle} />
       <ModalBody hasScrollingContent>
@@ -129,9 +127,9 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedId"
-                      labelText={t('bedId', 'Bed number')}
-                      placeholder={t('bedIdPlaceholder', 'e.g. BMW-201')}
                       invalidText={fieldState.error?.message}
+                      labelText={t('bedNumber', 'Bed number')}
+                      placeholder={t('enterBedNumber', 'e.g. BMW-201')}
                       {...field}
                     />
                   </>
@@ -146,12 +144,12 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 render={({ field, fieldState }) => (
                   <>
                     <TextArea
-                      rows={2}
                       id="description"
                       invalidText={fieldState?.error?.message}
-                      labelText={t('description', 'Bed description')}
+                      labelText={t('bedDescription', 'Bed description')}
+                      placeholder={t('enterBedDescription', 'Enter the bed description')}
+                      rows={2}
                       {...field}
-                      placeholder={t('description', 'Enter the bed description')}
                     />
                   </>
                 )}
@@ -166,9 +164,9 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <NumberInput
                     hideSteppers
                     id="bedRow"
+                    invalidText={fieldState?.error?.message}
                     label="Bed row"
                     labelText="Bed row"
-                    invalidText={fieldState?.error?.message}
                     {...field}
                   />
                 )}
@@ -199,18 +197,18 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 render={({ fieldState, field: { onChange, onBlur, value, ref } }) => (
                   <ComboBox
                     aria-label={t('location', 'Location')}
-                    shouldFilterItem={filterLocationNames}
                     id="location"
-                    label={t('location', 'Location')}
                     invalidText={fieldState?.error?.message}
                     items={allLocations}
+                    itemToString={(location) => location?.display ?? ''}
+                    label={t('location', 'Location')}
                     onBlur={onBlur}
-                    ref={ref}
-                    selectedItem={value}
                     onChange={({ selectedItem }) => onChange(selectedItem)}
-                    itemToString={(location) => location?.display ?? ''}
                     placeholder={t('selectBedLocation', 'Select a bed location')}
+                    ref={ref}
+                    selectedItem={value}
                     titleText={t('bedLocation', 'Location')}
+                    typeahead
                   />
                 )}
               />
@@ -222,19 +220,19 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 control={control}
                 render={({ field, fieldState }) => (
                   <Select
+                    defaultValue={occupancyStatus}
                     id="occupancyStatus"
-                    labelText={t('occupancyStatus', 'Occupied Status')}
                     invalidText={fieldState.error?.message}
-                    defaultValue={occupancyStatus}
+                    labelText={t('occupancyStatus', 'Occupancy status')}
                     onChange={(event) => setOccupancyStatus(event.target.value)}
                     value={occupancyStatus}
                     {...field}>
                     <SelectItem text={t('chooseOccupiedStatus', 'Choose occupied status')} value="" />
                     {occupancyStatuses.map((occupancyStatus, index) => (
                       <SelectItem
+                        key={`occupancyStatus-${index}`}
                         text={t('occupancyStatus', `${occupancyStatus}`)}
                         value={t('occupancyStatus', `${occupancyStatus}`)}
-                        key={`occupancyStatus-${index}`}
                       />
                     ))}
                   </Select>
@@ -248,10 +246,10 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 control={control}
                 render={({ field }) => (
                   <Select
+                    defaultValue={selectedBedType}
                     id="bedType"
-                    labelText={t('bedType', 'Bed type')}
                     invalidText={t('required', 'Required')}
-                    defaultValue={selectedBedType}
+                    labelText={t('bedType', 'Bed type')}
                     {...field}>
                     <SelectItem text={t('chooseBedtype', 'Choose a bed type')} />
                     {availableBedTypes.map((bedType, index) => (
@@ -265,13 +263,13 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
             </FormGroup>
             {showErrorNotification && (
               <InlineNotification
+                kind="error"
                 lowContrast
-                title={t('error', 'Error')}
-                style={{ minWidth: '100%', margin: '0', padding: '0' }}
+                onClose={() => setShowErrorNotification(false)}
                 role="alert"
-                kind="error"
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 subtitle={t('pleaseFillField', formStateError) + '.'}
-                onClose={() => setShowErrorNotification(false)}
+                title={t('error', 'Error')}
               />
             )}
           </Stack>
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.scss b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx
index baaa3f33b..00649f232 100644
--- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -21,11 +21,11 @@ import { Add, Edit } from '@carbon/react/icons';
 import { ErrorState, isDesktop as desktopLayout, useLayoutType, usePagination } from '@openmrs/esm-framework';
 import type { BedFormData } from '../types';
 import { useBedsGroupedByLocation } from '../summary/summary.resource';
+import CardHeader from '../card-header/card-header.component';
 import EditBedForm from './edit-bed-form.component';
 import Header from '../header/header.component';
 import NewBedForm from './new-bed-form.component';
 import styles from './bed-administration-table.scss';
-import { CardHeader } from '../card-header/card-header.component';
 
 const BedAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
@@ -36,11 +36,11 @@ const BedAdministrationTable: React.FC = () => {
   const isDesktop = desktopLayout(layout);
 
   const {
-    data: wardsGroupedByLocations,
-    isLoading: isLoadingBeds,
-    isValidating,
-    mutate,
-    error,
+    bedsGroupedByLocation,
+    isLoadingBedsGroupedByLocation,
+    isValidatingBedsGroupedByLocation,
+    mutateBedsGroupedByLocation,
+    errorFetchingBedsGroupedByLocation,
   } = useBedsGroupedByLocation();
   const [showAddBedModal, setShowAddBedModal] = useState(false);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
@@ -71,8 +71,8 @@ const BedAdministrationTable: React.FC = () => {
   const [pageSize, setPageSize] = useState(10);
   const { results, currentPage, totalPages, goTo } = usePagination(
     filterOption === 'ALL'
-      ? wardsGroupedByLocations
-      : wardsGroupedByLocations.filter((bed) => bed.status === filterOption) ?? [],
+      ? bedsGroupedByLocation
+      : bedsGroupedByLocation.filter((bed) => bed.status === filterOption) ?? [],
     pageSize,
   );
 
@@ -87,7 +87,7 @@ const BedAdministrationTable: React.FC = () => {
     },
     {
       key: 'occupancyStatus',
-      header: t('occupancyStatus', 'Occupied'),
+      header: t('occupancyStatus', 'Occupancy status'),
     },
     {
       key: 'allocationStatus',
@@ -118,7 +118,7 @@ const BedAdministrationTable: React.FC = () => {
               setShowAddBedModal(false);
             }}
             kind={'ghost'}
-            iconDescription={t('editBed', 'Edit Bed')}
+            iconDescription={t('editBed', 'Edit bed')}
             hasIconOnly
             size={responsiveSize}
             tooltipAlignment="start"
@@ -128,7 +128,7 @@ const BedAdministrationTable: React.FC = () => {
     }));
   }, [responsiveSize, results, t]);
 
-  if (isLoadingBeds && !wardsGroupedByLocations.length) {
+  if (isLoadingBedsGroupedByLocation && !bedsGroupedByLocation.length) {
     return (
       <>
         <Header route="Ward Allocation" />
@@ -139,12 +139,12 @@ const BedAdministrationTable: React.FC = () => {
     );
   }
 
-  if (error) {
+  if (errorFetchingBedsGroupedByLocation) {
     return (
       <>
         <Header route="Ward Allocation" />
         <div className={styles.widgetCard}>
-          <ErrorState error={error} headerTitle={headerTitle} />
+          <ErrorState error={errorFetchingBedsGroupedByLocation} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -170,19 +170,23 @@ const BedAdministrationTable: React.FC = () => {
       </div>
       <div className={styles.widgetCard}>
         {showAddBedModal ? (
-          <NewBedForm onModalChange={setShowAddBedModal} showModal={showAddBedModal} mutate={mutate} />
+          <NewBedForm
+            mutate={mutateBedsGroupedByLocation}
+            onModalChange={setShowAddBedModal}
+            showModal={showAddBedModal}
+          />
         ) : null}
         {showEditBedModal ? (
           <EditBedForm
+            editData={editData}
+            mutate={mutateBedsGroupedByLocation}
             onModalChange={setShowEditBedModal}
             showModal={showEditBedModal}
-            editData={editData}
-            mutate={mutate}
           />
         ) : null}
         <CardHeader title={headerTitle}>
           <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{isValidating ? <InlineLoading /> : null}</span>
+            <span>{isValidatingBedsGroupedByLocation ? <InlineLoading /> : null}</span>
           </span>
           {results?.length ? (
             <Button
@@ -239,7 +243,7 @@ const BedAdministrationTable: React.FC = () => {
                 pageNumberText="Page Number"
                 pageSize={totalPages}
                 pageSizes={[10, 20, 30, 40, 50]}
-                totalItems={wardsGroupedByLocations.length}
+                totalItems={bedsGroupedByLocation.length}
                 onChange={({ pageSize, page }) => {
                   setPageSize(pageSize);
                   if (page !== currentPage) {
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.scss b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.scss
index b07e89456..a66c26833 100644
--- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.scss
+++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.scss
@@ -43,7 +43,7 @@
 .backgroundDataFetchingIndicator {
   align-items: center;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .tileContainer {
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-types.ts b/packages/esm-bed-management-app/src/bed-administration/bed-administration-types.ts
index e879ae7c1..15371317d 100644
--- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-types.ts
+++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-types.ts
@@ -1,20 +1,22 @@
 export interface BedAdministrationData {
+  bedColumn: string;
   bedId: string;
-  description: string;
   bedRow: string;
-  bedColumn: string;
+  bedType: string;
+  description: string;
   location: {
     display: string;
     uuid: string;
   };
   occupancyStatus: string;
-  bedType: string;
 }
+
 export interface BedTypeDataAdministration {
-  name: string;
-  displayName: string;
   description: string;
+  displayName: string;
+  name: string;
 }
+
 export interface BedTagDataAdministration {
   name: string;
 }
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration.resource.ts b/packages/esm-bed-management-app/src/bed-administration/bed-administration.resource.ts
index dcf239e5e..97205c4e5 100644
--- a/packages/esm-bed-management-app/src/bed-administration/bed-administration.resource.ts
+++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration.resource.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import useSWR from 'swr';
-import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type BedPostPayload } from '../types';
 
 interface BedForm {
@@ -13,16 +13,15 @@ interface BedForm {
 }
 
 export async function saveBed({ bedPayload }: { bedPayload: BedPostPayload }): Promise<FetchResponse<BedForm>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bed`, {
+  return await openmrsFetch(`${restBaseUrl}/bed`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedPayload,
   });
-  return response;
 }
 
 export function useBedType() {
-  const locationsUrl = `/ws/rest/v1/bedtype`;
+  const locationsUrl = `${restBaseUrl}/bedtype`;
   const { data, error, isLoading } = useSWR<{ data }>(locationsUrl, openmrsFetch);
 
   const bedTypes = useMemo(() => {
@@ -38,7 +37,7 @@ export function useBedType() {
     return uniqueBedTypes;
   }, [data?.data?.results]);
 
-  return { bedTypes: bedTypes ? bedTypes : [], isLoading, error };
+  return { bedTypes: bedTypes ?? [], isLoading, error };
 }
 
 export async function editBed({
@@ -48,10 +47,9 @@ export async function editBed({
   bedPayload: BedPostPayload;
   bedId: string;
 }): Promise<FetchResponse<BedForm>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bed/${bedId}`, {
+  return await openmrsFetch(`${restBaseUrl}/bed/${bedId}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedPayload,
   });
-  return response;
 }
diff --git a/packages/esm-bed-management-app/src/bed-administration/edit-bed-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/edit-bed-form.component.tsx
index 810750134..25c93105d 100644
--- a/packages/esm-bed-management-app/src/bed-administration/edit-bed-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-administration/edit-bed-form.component.tsx
@@ -1,88 +1,88 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification } from '@openmrs/esm-framework';
-
-import type { BedFormData } from '../types';
-import { useBedType, editBed } from './bed-administration.resource';
-import BedAdministrationForm from './bed-administration-form.component';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { type BedAdministrationData } from './bed-administration-types';
+import { type BedFormData } from '../types';
+import { editBed, useBedType } from './bed-administration.resource';
 import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedAdministrationForm from './bed-administration-form.component';
 
 interface EditBedFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedFormData;
-  mutate: () => any;
+  mutate: () => void;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 const EditBedForm: React.FC<EditBedFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-
-  const headerTitle = t('editBed', 'Edit bed');
-  const occupancyStatuses = ['Available', 'Occupied'];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
-  const handleCreateQuestion = useCallback(
+  const headerTitle = t('editBed', 'Edit bed');
+  const occupancyStatuses = ['Available', 'Occupied'];
+
+  const handleCreateBed = useCallback(
     (formData: BedAdministrationData) => {
       const bedUuid = editData.uuid;
+
       const {
+        bedColumn = editData.column.toString(),
         bedId = editData.bedNumber,
-        description = editData.description,
-        occupancyStatus = editData.status,
         bedRow = editData.row.toString(),
-        bedColumn = editData.column.toString(),
-        location: { uuid: bedLocation = editData.location.uuid },
         bedType = editData.bedType.name,
+        description = editData.description,
+        location: { uuid: bedLocation = editData.location.uuid },
+        occupancyStatus = editData.status,
       } = formData;
+
       const bedPayload = {
         bedNumber: bedId,
         bedType,
-        description,
-        status: occupancyStatus.toUpperCase(),
-        row: parseInt(bedRow),
         column: parseInt(bedColumn),
+        description,
         locationUuid: bedLocation,
+        row: parseInt(bedRow),
+        status: occupancyStatus.toUpperCase(),
       };
+
       editBed({ bedPayload, bedId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed saved'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: bedPayload.bedNumber + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
+            title: t('bedUpdated', 'Bed updated'),
+            subtitle: t('bedUpdatedSuccessfully', `${bedPayload.bedNumber} updated successfully`, {
+              bedNumber: bedPayload.bedNumber,
+            }),
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
-    [onModalChange, mutate, editData, t],
+    [editData, mutate, onModalChange, t],
   );
 
   return (
-    <>
-      <BedAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        occupancyStatuses={occupancyStatuses}
-        initialData={editData}
-      />
-    </>
+    <BedAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTypes={availableBedTypes}
+      handleCreateBed={handleCreateBed}
+      headerTitle={headerTitle}
+      initialData={editData}
+      occupancyStatuses={occupancyStatuses}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };
 
diff --git a/packages/esm-bed-management-app/src/bed-administration/new-bed-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/new-bed-form.component.tsx
index 6af09c100..eaad72773 100644
--- a/packages/esm-bed-management-app/src/bed-administration/new-bed-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-administration/new-bed-form.component.tsx
@@ -1,43 +1,43 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification } from '@openmrs/esm-framework';
-
-import type { BedFormData } from '../types';
-import { useBedType, saveBed } from './bed-administration.resource';
-import BedAdministrationForm from './bed-administration-form.component';
-import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { type BedFormData } from '../types';
 import { type BedAdministrationData } from './bed-administration-types';
+import { saveBed, useBedType } from './bed-administration.resource';
+import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedAdministrationForm from './bed-administration-form.component';
 
 interface NewBedFormProps {
-  showModal: boolean;
+  mutate: () => void;
   onModalChange: (showModal: boolean) => void;
-  mutate: () => any;
+  showModal: boolean;
 }
 
 const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const { bedTypes } = useBedType();
+
   const headerTitle = t('createNewBed', 'Create a new bed');
   const occupancyStatuses = ['Available', 'Occupied'];
-  const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
 
   const initialData: BedFormData = {
-    id: 0,
-    uuid: '',
     bedNumber: '',
-    status: null,
-    description: '',
-    row: 0,
+    bedType: null,
     column: 0,
+    description: '',
+    id: 0,
     location: {
       display: '',
       uuid: '',
     },
-    bedType: null,
+    row: 0,
+    status: null,
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBed = useCallback(
     (formData: BedAdministrationData) => {
       const { bedId, description, occupancyStatus, bedRow, bedColumn, location, bedType } = formData;
 
@@ -53,43 +53,39 @@ const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutat
 
       saveBed({ bedPayload: bedObject })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'New bed created'),
+          showSnackbar({
+            title: t('newBedCreated', 'New bed created'),
             kind: 'success',
-            critical: true,
-            description: `Bed ${bedId} was created successfully.`,
+            subtitle: `Bed ${bedId} created successfully`,
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
+          showSnackbar({
             title: t('errorCreatingForm', 'Error creating bed'),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        occupancyStatuses={occupancyStatuses}
-        initialData={initialData}
-      />
-    </>
+    <BedAdministrationForm
+      onModalChange={onModalChange}
+      allLocations={admissionLocations}
+      availableBedTypes={availableBedTypes}
+      showModal={showModal}
+      handleCreateBed={handleCreateBed}
+      headerTitle={headerTitle}
+      occupancyStatuses={occupancyStatuses}
+      initialData={initialData}
+    />
   );
 };
 
diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx
index 91779da90..4720d04e6 100644
--- a/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx
@@ -18,26 +18,27 @@ import {
 import { Add, Edit } from '@carbon/react/icons';
 import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
 import type { BedTagData } from '../types';
-import { useBedTag } from '../summary/summary.resource';
-import Header from '../header/header.component';
-import styles from '../bed-administration/bed-administration-table.scss';
-import { CardHeader } from '../card-header/card-header.component';
+import { useBedTags } from '../summary/summary.resource';
 import BedTagForm from './new-tag-form.component';
+import CardHeader from '../card-header/card-header.component';
 import EditBedTagForm from './edit-tag-form.component';
+import Header from '../header/header.component';
+import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTagAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedTag', 'Bed Tag');
+  const headerTitle = t('bedTag', 'Bed tag');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
+  const { bedTags, errorLoadingBedTags, isLoadingBedTags, isValidatingBedTags, mutateBedTags } = useBedTags();
+
   const [isBedDataLoading] = useState(false);
   const [showBedTagsModal, setAddBedTagsModal] = useState(false);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
   const [editData, setEditData] = useState<BedTagData>();
   const [currentPage, setCurrentPage] = useState(1);
-  const { bedTypeData, isError, loading, validate, mutate } = useBedTag();
   const [pageSize, setPageSize] = useState(10);
 
   const tableHeaders = [
@@ -56,9 +57,8 @@ const BedTagAdministrationTable: React.FC = () => {
   ];
 
   const tableRows = useMemo(() => {
-    return bedTypeData?.map((entry) => ({
+    return bedTags?.map((entry) => ({
       id: entry.uuid,
-      ids: entry.id,
       name: entry?.name,
       actions: (
         <>
@@ -80,9 +80,9 @@ const BedTagAdministrationTable: React.FC = () => {
         </>
       ),
     }));
-  }, [responsiveSize, bedTypeData, t]);
+  }, [responsiveSize, bedTags, t]);
 
-  if (isBedDataLoading || loading) {
+  if (isBedDataLoading || isLoadingBedTags) {
     return (
       <>
         <Header route="Bed Tag" />
@@ -93,12 +93,12 @@ const BedTagAdministrationTable: React.FC = () => {
     );
   }
 
-  if (isError) {
+  if (errorLoadingBedTags) {
     return (
       <>
         <Header route="Bed Tag" />
         <div className={styles.widgetCard}>
-          <ErrorState error={isError} headerTitle={headerTitle} />
+          <ErrorState error={errorLoadingBedTags} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -110,26 +110,26 @@ const BedTagAdministrationTable: React.FC = () => {
 
       <div className={styles.widgetCard}>
         {showBedTagsModal ? (
-          <BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutate} />
+          <BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutateBedTags} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTagForm
             onModalChange={setShowEditBedModal}
             showModal={showEditBedModal}
             editData={editData}
-            mutate={mutate}
+            mutate={mutateBedTags}
           />
         ) : null}
         <CardHeader title={headerTitle}>
           <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{validate ? <InlineLoading /> : null}</span>
+            <span>{isValidatingBedTags ? <InlineLoading /> : null}</span>
           </span>
-          {bedTypeData?.length ? (
+          {bedTags?.length ? (
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
               onClick={() => setAddBedTagsModal(true)}>
-              {t('addBedTag', 'Add Bed Tag')}
+              {t('addBedTag', 'Add bed tag')}
             </Button>
           ) : null}
         </CardHeader>
@@ -167,7 +167,7 @@ const BedTagAdministrationTable: React.FC = () => {
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
                       onClick={() => setAddBedTagsModal(true)}>
-                      {t('bedTag', 'Add Bed Tag')}
+                      {t('addBedTag', 'Add bed tag')}
                     </Button>
                   </Tile>
                 </div>
@@ -176,7 +176,7 @@ const BedTagAdministrationTable: React.FC = () => {
                 page={currentPage}
                 pageSize={pageSize}
                 pageSizes={[10, 20, 30, 40, 50]}
-                totalItems={bedTypeData.length}
+                totalItems={bedTags.length}
                 onChange={({ page, pageSize }) => {
                   setCurrentPage(page);
                   setPageSize(pageSize);
diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
index 9722c9a24..200a7ef76 100644
--- a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
@@ -7,12 +7,12 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextInput,
-  InlineNotification,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
@@ -23,14 +23,14 @@ const BedTagAdministrationSchema = z.object({
 });
 
 interface BedTagAdministrationFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
-  availableBedTypes: Array<BedTagData>;
   allLocations: Location[];
-  handleCreateQuestion?: (formData: BedTagData) => void;
+  availableBedTags: Array<BedTagData>;
+  handleCreateBedTag?: (formData: BedTagData) => void;
   handleDeleteBedTag?: () => void;
   headerTitle: string;
   initialData: BedTagData;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 interface ErrorType {
@@ -38,11 +38,11 @@ interface ErrorType {
 }
 
 const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
-  showModal,
-  onModalChange,
-  handleCreateQuestion,
+  handleCreateBedTag,
   headerTitle,
   initialData,
+  onModalChange,
+  showModal,
 }) => {
   const { t } = useTranslation();
 
@@ -65,7 +65,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
     const result = BedTagAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleCreateBedTag(formData);
     }
   };
 
@@ -88,7 +88,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedTag"
-                      labelText={t('bedTag', 'Bed Tag Name')}
+                      labelText={t('bedTag', 'Bed tag')}
                       placeholder={t('bedTagPlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}
diff --git a/packages/esm-bed-management-app/src/bed-tag/edit-tag-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/edit-tag-form.component.tsx
index a22ee25b6..70e02be91 100644
--- a/packages/esm-bed-management-app/src/bed-tag/edit-tag-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-tag/edit-tag-form.component.tsx
@@ -1,55 +1,53 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-
-import { editBedTag, useBedTag } from '../summary/summary.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { editBedTag, useBedTags } from '../summary/summary.resource';
+import { type BedTagData, type Mutator } from '../types';
 import { type BedTagDataAdministration } from '../bed-administration/bed-administration-types';
 import BedTagsAdministrationForm from './bed-tags-admin-form.component';
-import { type BedTagData, type Mutator } from '../types';
 
 interface EditBedTagFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedTagData;
-  mutate: Mutator;
+  mutate: Mutator<BedTagData>;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
-const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
+const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
+  const { bedTags } = useBedTags();
+  const headerTitle = t('editTag', 'Edit Tag');
 
-  const headerTitle = t('editBed', 'Edit Tag');
-  const { bedTypeData } = useBedTag();
-  const availableBedTypes = bedTypeData ? bedTypeData : [];
-
-  const handleCreateQuestion = useCallback(
+  const handleUpdateBedTag = useCallback(
     (formData: BedTagDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name } = formData;
+
       const bedTagPayload = {
         name,
       };
+
       editBedTag({ bedTagPayload, bedTagId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed Tag'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: bedTagPayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
+            title: t('bedTagUpdated', 'Bed tag updated'),
+            subtitle: t('bedTagUpdatedSuccessfully', `${bedTagPayload.name} updated successfully`, {
+              bedTag: bedTagPayload.name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingBedTag', 'Error creating bed tag'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, editData, t],
   );
@@ -57,13 +55,13 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ showModal, onModalChang
   return (
     <>
       <BedTagsAdministrationForm
-        onModalChange={onModalChange}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
+        allLocations={[]}
+        availableBedTags={bedTags}
+        handleCreateBedTag={handleUpdateBedTag}
         headerTitle={headerTitle}
         initialData={editData}
-        allLocations={[]}
+        onModalChange={onModalChange}
+        showModal={showModal}
       />
     </>
   );
diff --git a/packages/esm-bed-management-app/src/bed-tag/new-tag-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/new-tag-form.component.tsx
index bb2b94605..24494c288 100644
--- a/packages/esm-bed-management-app/src/bed-tag/new-tag-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-tag/new-tag-form.component.tsx
@@ -1,30 +1,28 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-import { useBedType } from '../bed-administration/bed-administration.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { saveBedTag, useBedTags, useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import { type BedTagData } from '../types';
 import BedTagsAdministrationForm from './bed-tags-admin-form.component';
-import { saveBedTag, useLocationsWithAdmissionTag } from '../summary/summary.resource';
-import { type BedTagData, type Mutator } from '../types';
 
 interface BedTagFormProps {
-  showModal: boolean;
+  mutate: () => void;
   onModalChange: (showModal: boolean) => void;
-  mutate: () => any;
+  showModal: boolean;
 }
 
 const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-  const headerTitle = t('addBedTag', 'Create Bed Tag');
-  const { bedTypes } = useBedType();
-  const availableBedTypes = bedTypes ? bedTypes : [];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const { bedTags } = useBedTags();
+  const headerTitle = t('createBedTag', 'Create bed tag');
 
   const initialData: BedTagData = {
-    uuid: '',
     name: '',
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBedTag = useCallback(
     (formData: BedTagData) => {
       const { name } = formData;
 
@@ -34,42 +32,39 @@ const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutat
 
       saveBedTag({ bedTagPayload })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'Add Bed Tag'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: `Tag ${name} was created successfully.`,
+            title: t('bedTagCreated', 'Bed tag created'),
+            subtitle: t('bedTagCreatedSuccessfully', `${name} created successfully`, {
+              bedTag: name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedTagsAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        initialData={initialData}
-      />
-    </>
+    <BedTagsAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTags={bedTags}
+      handleCreateBedTag={handleCreateBedTag}
+      headerTitle={headerTitle}
+      initialData={initialData}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };
 
diff --git a/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx
index 83e2b4a40..125d95d62 100644
--- a/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx
@@ -7,13 +7,13 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextArea,
   TextInput,
-  InlineNotification,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
@@ -26,13 +26,13 @@ const BedTypeAdministrationSchema = z.object({
 });
 
 interface BedAdministrationFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
-  availableBedTypes: Array<BedType>;
   allLocations: Location[];
-  handleCreateQuestion?: (formData: BedTypeData) => void;
+  availableBedTypes: Array<BedType>;
+  handleSubmission?: (formData: BedTypeData) => void;
   headerTitle: string;
   initialData: BedTypeData;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 interface ErrorType {
@@ -40,11 +40,11 @@ interface ErrorType {
 }
 
 const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
-  showModal,
-  onModalChange,
-  handleCreateQuestion,
+  handleSubmission,
   headerTitle,
   initialData,
+  onModalChange,
+  showModal,
 }) => {
   const { t } = useTranslation();
 
@@ -69,7 +69,7 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     const result = BedTypeAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleSubmission?.(formData);
     }
   };
 
@@ -92,9 +92,9 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedName"
-                      labelText={t('bedName', 'Bed Name')}
-                      placeholder={t('bedTypePlaceholder', '')}
                       invalidText={fieldState.error?.message}
+                      labelText={t('bedName', 'Bed name')}
+                      placeholder={t('bedTypePlaceholder', '')}
                       {...field}
                     />
                   </>
@@ -106,15 +106,13 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 name="displayName"
                 control={control}
                 render={({ field, fieldState }) => (
-                  <>
-                    <TextInput
-                      id="displayName"
-                      labelText={t('displayName', 'Display Name')}
-                      placeholder={t('displayNamePlaceholder', '')}
-                      invalidText={fieldState.error?.message}
-                      {...field}
-                    />
-                  </>
+                  <TextInput
+                    id="displayName"
+                    invalidText={fieldState.error?.message}
+                    labelText={t('displayName', 'Display name')}
+                    placeholder={t('displayNamePlaceholder', '')}
+                    {...field}
+                  />
                 )}
               />
             </FormGroup>
@@ -123,29 +121,27 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 name="description"
                 control={control}
                 render={({ field, fieldState }) => (
-                  <>
-                    <TextArea
-                      rows={2}
-                      id="description"
-                      invalidText={fieldState?.error?.message}
-                      labelText={t('description', 'Description')}
-                      {...field}
-                      placeholder={t('description', 'Enter the bed description')}
-                    />
-                  </>
+                  <TextArea
+                    rows={2}
+                    id="description"
+                    invalidText={fieldState?.error?.message}
+                    labelText={t('description', 'Description')}
+                    {...field}
+                    placeholder={t('enterBedDescription', 'Enter the bed description')}
+                  />
                 )}
               />
             </FormGroup>
 
             {showErrorNotification && (
               <InlineNotification
+                kind="error"
                 lowContrast
-                title={t('error', 'Error')}
-                style={{ minWidth: '100%', margin: '0', padding: '0' }}
+                onClose={() => setShowErrorNotification(false)}
                 role="alert"
-                kind="error"
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 subtitle={t('pleaseFillField', formStateError) + '.'}
-                onClose={() => setShowErrorNotification(false)}
+                title={t('error', 'Error')}
               />
             )}
           </Stack>
diff --git a/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx
index 9aba047c1..d11549d16 100644
--- a/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
   DataTableSkeleton,
+  IconButton,
   InlineLoading,
   Pagination,
   Table,
@@ -18,36 +19,36 @@ import {
 import { Add, Edit } from '@carbon/react/icons';
 import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
 import type { BedTypeData } from '../types';
-import { useBedType } from '../summary/summary.resource';
-import Header from '../header/header.component';
+import { useBedTypes } from '../summary/summary.resource';
+import CardHeader from '../card-header/card-header.component';
 import BedTypeForm from './new-bed-type-form.component';
-import styles from '../bed-administration/bed-administration-table.scss';
-import { CardHeader } from '../card-header/card-header.component';
 import EditBedTypeForm from './edit-bed-type.component';
+import Header from '../header/header.component';
+import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTypeAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedType', 'Bed Type');
+  const headerTitle = t('bedType', 'Bed type');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
-  const [showEditBedModal, setShowEditBedModal] = useState(false);
-  const [isBedDataLoading, setIsBedDataLoading] = useState(false);
-  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const { bedTypes, errorLoadingBedTypes, isLoadingBedTypes, isValidatingBedTypes, mutateBedTypes } = useBedTypes();
+
   const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setPageSize] = useState(10);
   const [editData, setEditData] = useState<BedTypeData>();
   const [pageSize] = useState(10);
-  const { bedTypeData, isError, loading, validate, mutate } = useBedType();
-  const [currentPageSize, setPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
+  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+
   const tableHeaders = [
     {
       header: t('name', 'Name'),
       key: 'name',
     },
     {
-      header: t('displayName', 'Display Name'),
+      header: t('displayName', 'Display name'),
       key: 'displayName',
     },
     {
@@ -60,35 +61,34 @@ const BedTypeAdministrationTable: React.FC = () => {
     },
   ];
 
-  const tableRows = useMemo(() => {
-    return bedTypeData?.map((entry) => ({
-      id: entry.uuid,
-      name: entry?.name,
-      displayName: entry?.displayName,
-      description: entry?.description,
-      actions: (
-        <>
-          <Button
+  const tableRows = useMemo(
+    () =>
+      bedTypes?.map((entry) => ({
+        id: entry.uuid,
+        name: entry?.name,
+        displayName: entry?.displayName,
+        description: entry?.description,
+        actions: (
+          <IconButton
+            align="top-start"
             enterDelayMs={300}
-            renderIcon={Edit}
+            kind="ghost"
+            label={t('editBedType', 'Edit bed type')}
             onClick={(e) => {
               e.preventDefault();
               setEditData(entry);
               setShowEditBedModal(true);
               setAddBedTypeModal(false);
             }}
-            kind={'ghost'}
-            iconDescription={t('editBedType', 'Edit Bed Type')}
-            hasIconOnly
-            size={responsiveSize}
-            tooltipAlignment="start"
-          />
-        </>
-      ),
-    }));
-  }, [responsiveSize, bedTypeData, t]);
+            size={responsiveSize}>
+            <Edit />
+          </IconButton>
+        ),
+      })),
+    [responsiveSize, bedTypes, t],
+  );
 
-  if (isBedDataLoading || loading) {
+  if (isLoadingBedTypes) {
     return (
       <>
         <Header route="Bed Type" />
@@ -99,12 +99,12 @@ const BedTypeAdministrationTable: React.FC = () => {
     );
   }
 
-  if (isError) {
+  if (errorLoadingBedTypes) {
     return (
       <>
         <Header route="Bed Type" />
         <div className={styles.widgetCard}>
-          <ErrorState error={isError} headerTitle={headerTitle} />
+          <ErrorState error={errorLoadingBedTypes} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -116,26 +116,26 @@ const BedTypeAdministrationTable: React.FC = () => {
 
       <div className={styles.widgetCard}>
         {showBedTypeModal ? (
-          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutate} />
+          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutateBedTypes} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTypeForm
+            editData={editData}
+            mutate={mutateBedTypes}
             onModalChange={setShowEditBedModal}
             showModal={showEditBedModal}
-            editData={editData}
-            mutate={mutate}
           />
         ) : null}
         <CardHeader title={headerTitle}>
           <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{validate ? <InlineLoading /> : null}</span>
+            <span>{isValidatingBedTypes ? <InlineLoading /> : null}</span>
           </span>
-          {bedTypeData?.length ? (
+          {bedTypes?.length ? (
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
               onClick={() => setAddBedTypeModal(true)}>
-              {t('addBedtype', 'Add Bed Type')}
+              {t('addBedType', 'Add bed type')}
             </Button>
           ) : null}
         </CardHeader>
@@ -146,7 +146,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
-                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
+                      <TableHeader key={header.key}>{header.header?.content ?? header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>
@@ -164,7 +164,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 <div className={styles.tileContainer}>
                   <Tile className={styles.tile}>
                     <div className={styles.tileContent}>
-                      <p className={styles.content}>{t('No data', 'No data to display')}</p>
+                      <p className={styles.content}>{t('noDataToDisplay', 'No data to display')}</p>
                       <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                     </div>
                     <p className={styles.separator}>{t('or', 'or')}</p>
@@ -173,7 +173,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
                       onClick={() => setAddBedTypeModal(true)}>
-                      {t('bedType', 'Add Bed Type')}
+                      {t('addBedType', 'Add bed type')}
                     </Button>
                   </Tile>
                 </div>
@@ -182,7 +182,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 page={currentPage}
                 pageSize={pageSize}
                 pageSizes={[10, 20, 30, 40, 50]}
-                totalItems={bedTypeData.length}
+                totalItems={bedTypes.length}
                 onChange={({ page, pageSize }) => {
                   setCurrentPage(page);
                   setPageSize(pageSize);
diff --git a/packages/esm-bed-management-app/src/bed-type/edit-bed-type.component.tsx b/packages/esm-bed-management-app/src/bed-type/edit-bed-type.component.tsx
index fd5c8c81f..5b157ba08 100644
--- a/packages/esm-bed-management-app/src/bed-type/edit-bed-type.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-type/edit-bed-type.component.tsx
@@ -1,55 +1,56 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-
-import { editBedType, useBedType } from '../summary/summary.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { editBedType, useBedTypes } from '../summary/summary.resource';
 import { type BedTypeDataAdministration } from '../bed-administration/bed-administration-types';
-import { type BedTypeData, type Mutator } from '../types';
+import { type BedType, type BedTypeData, type Mutator } from '../types';
 import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface EditBedTypeFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedTypeData;
-  mutate: Mutator;
+  mutate: Mutator<BedType>;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
-const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
+const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ editData, mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
-  const headerTitle = t('editBedType', 'Edit Bed Type');
-  const { bedTypeData } = useBedType();
-  const availableBedTypes = bedTypeData ? bedTypeData : [];
-  const handleCreateQuestion = useCallback(
+  const { bedTypes } = useBedTypes();
+  const headerTitle = t('editBedType', 'Edit bed type');
+
+  const handleUpdateBedType = useCallback(
     (formData: BedTypeDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name, displayName, description } = formData;
+
       const bedTypePayload = {
         name,
         displayName,
         description,
       };
+
       editBedType({ bedTypePayload, bedTypeId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed Type'),
+          showSnackbar({
+            title: t('bedTypeUpdated', 'Bed type updated'),
+            subtitle: t('bedTypeUpdatedSuccessfully', `${bedTypePayload.name} updated successfully`, {
+              bedType: bedTypePayload.name,
+            }),
             kind: 'success',
-            critical: true,
-            description: bedTypePayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
+          showSnackbar({
             title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
             kind: 'error',
-            critical: true,
-            description: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, editData, t],
   );
@@ -58,9 +59,9 @@ const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalCha
     <>
       <BedTypeAdministrationForm
         onModalChange={onModalChange}
-        availableBedTypes={availableBedTypes}
+        availableBedTypes={bedTypes}
         showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
+        handleSubmission={handleUpdateBedType}
         headerTitle={headerTitle}
         initialData={editData}
         allLocations={[]}
diff --git a/packages/esm-bed-management-app/src/bed-type/new-bed-type-form.component.tsx b/packages/esm-bed-management-app/src/bed-type/new-bed-type-form.component.tsx
index 19d034485..a7ab934bd 100644
--- a/packages/esm-bed-management-app/src/bed-type/new-bed-type-form.component.tsx
+++ b/packages/esm-bed-management-app/src/bed-type/new-bed-type-form.component.tsx
@@ -1,32 +1,30 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-import type { BedTypeData, Mutator } from '../types';
-import { useBedType } from '../bed-administration/bed-administration.resource';
-import { saveBedType, useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import type { BedType, BedTypeData, Mutator } from '../types';
+import { saveBedType, useBedTypes, useLocationsWithAdmissionTag } from '../summary/summary.resource';
 import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface BedTypeFormProps {
-  showModal: boolean;
+  mutate: Mutator<BedType>;
   onModalChange: (showModal: boolean) => void;
-  mutate: Mutator;
+  showModal: boolean;
 }
 
-const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange, mutate }) => {
+const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-  const headerTitle = t('addBedType', 'Create Bed type');
-  const { bedTypes } = useBedType();
-  const availableBedTypes = bedTypes ? bedTypes : [];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('createBedType', 'Create bed type');
+  const { bedTypes } = useBedTypes();
 
   const initialData: BedTypeData = {
-    uuid: '',
-    name: '',
-    displayName: '',
     description: '',
+    displayName: '',
+    name: '',
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBedType = useCallback(
     (formData: BedTypeData) => {
       const { name, displayName, description } = formData;
 
@@ -38,42 +36,39 @@ const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange,
 
       saveBedType({ bedTypePayload })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'Add bed Type'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: `Bed ${name} was created successfully.`,
+            title: t('bedTypeCreated', 'Bed type created'),
+            subtitle: t('bedTypeCreatedSuccessfully', `${name} created successfully`, {
+              bedType: name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedTypeAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        initialData={initialData}
-      />
-    </>
+    <BedTypeAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTypes={bedTypes}
+      handleSubmission={handleCreateBedType}
+      headerTitle={headerTitle}
+      initialData={initialData}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };
 
diff --git a/packages/esm-bed-management-app/src/card-header/card-header.component.tsx b/packages/esm-bed-management-app/src/card-header/card-header.component.tsx
index 07302e6bd..4776b7ed0 100644
--- a/packages/esm-bed-management-app/src/card-header/card-header.component.tsx
+++ b/packages/esm-bed-management-app/src/card-header/card-header.component.tsx
@@ -8,7 +8,7 @@ interface CardHeaderProps {
   children: React.ReactNode;
 }
 
-export function CardHeader({ title, children }: CardHeaderProps) {
+function CardHeader({ title, children }: CardHeaderProps) {
   const isTablet = useLayoutType() === 'tablet';
 
   return (
@@ -18,3 +18,5 @@ export function CardHeader({ title, children }: CardHeaderProps) {
     </div>
   );
 }
+
+export default CardHeader;
diff --git a/packages/esm-bed-management-app/src/header/header.component.tsx b/packages/esm-bed-management-app/src/header/header.component.tsx
index f257ff1c0..1f0ba249f 100644
--- a/packages/esm-bed-management-app/src/header/header.component.tsx
+++ b/packages/esm-bed-management-app/src/header/header.component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ConfigurableLink, formatDate, useSession } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
+import { ConfigurableLink, formatDate, useSession } from '@openmrs/esm-framework';
 import Illustration from './illustration.component';
 import styles from './header.scss';
 
@@ -10,24 +10,24 @@ type HeaderProps = {
   headerTitle?: string;
 };
 
-const Header: React.FC<HeaderProps> = ({ route, headerTitle = 'Bed Management' }) => {
+const Header: React.FC<HeaderProps> = ({ route, headerTitle }) => {
   const { t } = useTranslation();
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
     <div className={styles.header}>
-      <div className={styles['left-justified-items']}>
+      <div className={styles.leftJustifiedItems}>
         <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
           <Illustration />
         </ConfigurableLink>
-        <div className={styles['page-labels']}>
-          <p>{t('headerTitle', headerTitle)}</p>
-          <p className={styles['page-name']}>{route}</p>
+        <div className={styles.pageLabels}>
+          <p>{t(headerTitle ?? 'bedManagement', headerTitle ?? 'Bed management')}</p>
+          <p className={styles.pageName}>{route}</p>
         </div>
       </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
           <Location size={16} />
           <span className={styles.value}>{userLocation}</span>
           <span className={styles.middot}>&middot;</span>
diff --git a/packages/esm-bed-management-app/src/header/header.scss b/packages/esm-bed-management-app/src/header/header.scss
index c76db2c18..a06b94ffc 100644
--- a/packages/esm-bed-management-app/src/header/header.scss
+++ b/packages/esm-bed-management-app/src/header/header.scss
@@ -13,26 +13,26 @@
   border-bottom: 1px solid colors.$gray-20;
 }
 
-.left-justified-items {
+.leftJustifiedItems {
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor: pointer;
 }
 
-.right-justified-items {
+.rightJustifiedItems {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
   margin: layout.$spacing-03;
   padding-top: layout.$spacing-04;
 }
 
-.page-name {
+.pageName {
   white-space: nowrap;
   @include type.type-style('heading-04');
 }
 
-.page-labels {
+.pageLabels {
   margin: layout.$spacing-05;
 }
 
@@ -40,7 +40,7 @@
   margin: 0 layout.$spacing-03;
 }
 
-.date-and-location {
+.dateAndLocation {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -60,8 +60,8 @@
 }
 
 svg.iconOverrides {
-  width: 72 !important;
-  height: 72 !important;
+  width: 4.5rem !important;
+  height: 4.5rem !important;
   fill: var(--brand-03);
 }
 
diff --git a/packages/esm-bed-management-app/src/header/illustration.component.tsx b/packages/esm-bed-management-app/src/header/illustration.component.tsx
index 4d9739030..210ae6a59 100644
--- a/packages/esm-bed-management-app/src/header/illustration.component.tsx
+++ b/packages/esm-bed-management-app/src/header/illustration.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from './header.scss';
 import { Stethoscope } from '@carbon/react/icons';
+import styles from './header.scss';
 
 const Illustration: React.FC = () => {
   return (
diff --git a/packages/esm-bed-management-app/src/index.ts b/packages/esm-bed-management-app/src/index.ts
index 7ad07e2d6..a42726af6 100644
--- a/packages/esm-bed-management-app/src/index.ts
+++ b/packages/esm-bed-management-app/src/index.ts
@@ -2,7 +2,7 @@ import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmr
 import { configSchema } from './config-schema';
 import { createLeftPanelLink } from './left-panel-link.component';
 
-const moduleName = '@ugandaemr/esm-bed-management-app';
+const moduleName = '@openmrs/esm-bed-management-app';
 
 const options = {
   featureName: 'bed-management',
@@ -42,6 +42,7 @@ export const bedTypeLeftPanelLink = getSyncLifecycle(
   }),
   options,
 );
+
 export const bedTagLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'bed-tag',
diff --git a/packages/esm-bed-management-app/src/left-panel/left-panel.component.tsx b/packages/esm-bed-management-app/src/left-panel/left-panel.component.tsx
index 0094178eb..d83bed966 100644
--- a/packages/esm-bed-management-app/src/left-panel/left-panel.component.tsx
+++ b/packages/esm-bed-management-app/src/left-panel/left-panel.component.tsx
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react';
-import { attach, detach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import styles from './left-panel.scss';
 
+attach('nav-menu-slot', 'bed-management-left-panel');
+
 const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
   const layout = useLayoutType();
 
-  useEffect(() => {
-    attach('nav-menu-slot', 'bed-management-left-panel');
-    return () => detach('nav-menu-slot', 'bed-management-left-panel');
-  }, []);
-
   return (
     isDesktop(layout) && (
-      <SideNav aria-label="Bed management left panel" className={styles.leftPanel} expanded>
+      <SideNav
+        aria-label={t('bedManagementLeftPanel', 'Bed management left panel')}
+        className={styles.leftPanel}
+        expanded>
         <ExtensionSlot name="bed-management-left-panel-slot" />
       </SideNav>
     )
diff --git a/packages/esm-bed-management-app/src/root.component.tsx b/packages/esm-bed-management-app/src/root.component.tsx
index 37b8ddaa3..993eeb2ea 100644
--- a/packages/esm-bed-management-app/src/root.component.tsx
+++ b/packages/esm-bed-management-app/src/root.component.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
-import Home from './home.component';
-import LeftPanel from './left-panel/left-panel.component';
-import WardWithBeds from './ward-with-beds/ward-with-beds.component';
 import BedAdministrationTable from './bed-administration/bed-administration-table.component';
 import BedTagAdministrationTable from './bed-tag/bed-tag-administration-table.component';
 import BedTypeAdministrationTable from './bed-type/bed-type-administration-table.component';
+import Home from './home.component';
+import LeftPanel from './left-panel/left-panel.component';
+import WardWithBeds from './ward-with-beds/ward-with-beds.component';
 import styles from './root.scss';
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
+  const bedManagementBasename = window.getOpenmrsSpaBase() + 'bed-management';
 
   useEffect(() => {
     setLeftNav({
@@ -21,7 +22,7 @@ const Root: React.FC = () => {
   }, [spaBasePath]);
 
   return (
-    <BrowserRouter basename={`${window.getOpenmrsSpaBase()}bed-management`}>
+    <BrowserRouter basename={bedManagementBasename}>
       <LeftPanel />
       <main className={styles.container}>
         <Routes>
diff --git a/packages/esm-bed-management-app/src/setup-tests.ts b/packages/esm-bed-management-app/src/setup-tests.ts
deleted file mode 100644
index 666127af3..000000000
--- a/packages/esm-bed-management-app/src/setup-tests.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
diff --git a/packages/esm-bed-management-app/src/summary/summary.resource.ts b/packages/esm-bed-management-app/src/summary/summary.resource.ts
index 9463271ee..48e8e1e97 100644
--- a/packages/esm-bed-management-app/src/summary/summary.resource.ts
+++ b/packages/esm-bed-management-app/src/summary/summary.resource.ts
@@ -1,38 +1,44 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
 import type {
   AdmissionLocation,
   Bed,
   BedFetchResponse,
+  BedTagData,
   BedTagPayload,
+  BedType,
   BedTypePayload,
   LocationFetchResponse,
   MappedBedData,
-  Mutator,
 } from '../types';
 import { type BedManagementConfig } from '../config-schema';
-import { useCallback, useEffect, useState } from 'react';
 
 export const useLocationsWithAdmissionTag = () => {
   const { admissionLocationTagName } = useConfig<BedManagementConfig>();
-  const locationsUrl = `/ws/rest/v1/location?tag=${admissionLocationTagName}&v=full`;
+  const locationsUrl = `${restBaseUrl}/location?tag=${admissionLocationTagName}&v=full`;
 
   const { data, error, isLoading, isValidating, mutate } = useSWR<LocationFetchResponse, Error>(
     admissionLocationTagName ? locationsUrl : null,
     openmrsFetch,
   );
 
-  return {
-    data: data?.data?.results ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      admissionLocations: data?.data?.results ?? [],
+      errorLoadingAdmissionLocations: error,
+      isLoadingAdmissionLocations: isLoading,
+      isValidatingAdmissionLocations: isValidating,
+      mutateAdmissionLocations: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
 export const useBedsForLocation = (locationUuid: string) => {
-  const apiUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}&v=full`;
+  const apiUrl = `${restBaseUrl}/bed?locationUuid=${locationUuid}&v=full`;
 
   const { data, isLoading, error } = useSWR<{ data: { results: Array<Bed> } }, Error>(
     locationUuid ? apiUrl : null,
@@ -40,43 +46,55 @@ export const useBedsForLocation = (locationUuid: string) => {
   );
 
   const mappedBedData: MappedBedData = (data?.data?.results ?? []).map((bed) => ({
+    description: bed.bedType?.description,
     id: bed.id,
-    number: bed.bedNumber,
     name: bed.bedType?.displayName,
-    description: bed.bedType?.description,
+    number: bed.bedNumber,
     status: bed.status,
     uuid: bed.uuid,
   }));
 
-  return {
-    bedData: mappedBedData,
-    isLoading,
-    error,
-  };
+  const results = useMemo(
+    () => ({
+      bedsData: mappedBedData,
+      errorLoadingBeds: error,
+      isLoadingBeds: isLoading,
+    }),
+    [mappedBedData, isLoading, error],
+  );
+
+  return results;
 };
 
 export const useLocationName = (locationUuid: string) => {
-  const { data: allLocations, isLoading } = useLocationsWithAdmissionTag();
+  const { admissionLocations, isLoadingAdmissionLocations } = useLocationsWithAdmissionTag();
+  const matchingLocation = admissionLocations.find((location) => location.uuid === locationUuid);
+
+  const results = useMemo(
+    () => ({
+      name: matchingLocation?.display ?? null,
+      isLoadingLocationData: isLoadingAdmissionLocations,
+    }),
+    [matchingLocation, isLoadingAdmissionLocations],
+  );
 
-  const location = allLocations.find((loc) => loc.uuid == locationUuid);
-  return {
-    name: location?.display ?? null,
-    isLoadingLocationData: isLoading,
-  };
+  return results;
 };
 
 export function useBedsGroupedByLocation() {
-  const { data: locations, isLoading: isLoadingLocations } = useLocationsWithAdmissionTag();
+  const { admissionLocations, isLoadingAdmissionLocations } = useLocationsWithAdmissionTag();
+
+  const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isValidating, setIsValidating] = useState(true);
-  const [error, setError] = useState(null);
   const [result, setResult] = useState([]);
 
   useEffect(() => {
-    if (!isLoadingLocations && locations && isValidating) {
+    let isSubscribed = true;
+    if (!isLoadingAdmissionLocations && admissionLocations && isValidating) {
       const fetchData = async () => {
-        const promises = locations.map(async (location) => {
-          const bedsUrl = `/ws/rest/v1/bed?locationUuid=${location.uuid}`;
+        const promises = admissionLocations.map(async (location) => {
+          const bedsUrl = `${restBaseUrl}/bed?locationUuid=${location.uuid}`;
           const bedsFetchResult = await openmrsFetch<BedFetchResponse>(bedsUrl, {
             method: 'GET',
           });
@@ -90,103 +108,136 @@ export function useBedsGroupedByLocation() {
         });
 
         const updatedWards = (await Promise.all(promises)).filter(Boolean);
-        setResult(updatedWards);
+        if (isSubscribed) {
+          setResult(updatedWards);
+        }
       };
       fetchData()
-        .catch((e) => {
-          setError(e);
+        .catch((error) => {
+          if (isSubscribed) {
+            setError(error);
+          }
         })
         .finally(() => {
-          setIsLoading(false);
-          setIsValidating(false);
+          if (isSubscribed) {
+            setIsLoading(false);
+            setIsValidating(false);
+          }
         });
     }
-  }, [locations, isLoading]);
+    return () => {
+      isSubscribed = false;
+    };
+  }, [admissionLocations, isLoadingAdmissionLocations, isValidating]);
 
   const mutate = useCallback(() => {
     setIsValidating(true);
   }, []);
 
-  return {
-    data: result,
-    error,
-    isLoading: isLoading || isLoadingLocations,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      bedsGroupedByLocation: result,
+      errorFetchingBedsGroupedByLocation: error,
+      isLoadingBedsGroupedByLocation: isLoading || isLoadingAdmissionLocations,
+      isValidatingBedsGroupedByLocation: isValidating,
+      mutateBedsGroupedByLocation: mutate,
+    }),
+    [result, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 }
 
 export const useAdmissionLocations = () => {
-  const locationsUrl = `/ws/rest/v1/admissionLocation?v=full`;
+  const locationsUrl = `${restBaseUrl}/admissionLocation?v=full`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<
     { data: { results: Array<AdmissionLocation> } },
     Error
   >(locationsUrl, openmrsFetch);
 
-  return {
-    data: data?.data?.results ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      data: data?.data?.results ?? [],
+      error,
+      isLoading,
+      isValidating,
+      mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
 export const useAdmissionLocationBedLayout = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/admissionLocation/${locationUuid}?v=full`;
+  const locationsUrl = `${restBaseUrl}/admissionLocation/${locationUuid}?v=full`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: AdmissionLocation }, Error>(
     locationsUrl,
     openmrsFetch,
   );
 
-  return {
-    data: data?.data?.bedLayouts ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      data: data?.data?.bedLayouts ?? [],
+      error,
+      isLoading,
+      isValidating,
+      mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
-export const useBedType = () => {
-  const url = `/ws/rest/v1/bedtype/`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
-  const results = data?.data?.results ? data?.data?.results : [];
-  return {
-    bedTypeData: results,
-    isError: error,
-    loading: isLoading,
-    validate: isValidating,
-    mutate,
-  };
+export const useBedTypes = () => {
+  const url = `${restBaseUrl}/bedtype/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<BedType> } }, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      bedTypes: data?.data?.results ?? [],
+      errorLoadingBedTypes: error,
+      isLoadingBedTypes: isLoading,
+      isValidatingBedTypes: isValidating,
+      mutateBedTypes: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
-export const useBedTag = () => {
-  const url = `/ws/rest/v1/bedTag/`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
-  const results = data?.data?.results ? data?.data?.results : [];
-  return {
-    bedTypeData: results,
-    isError: error,
-    loading: isLoading,
-    validate: isValidating,
-    mutate,
-  };
+export const useBedTags = () => {
+  const url = `${restBaseUrl}/bedTag/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<BedTagData> } }, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      bedTags: data?.data?.results ?? [],
+      errorLoadingBedTags: error,
+      isLoadingBedTags: isLoading,
+      isValidatingBedTags: isValidating,
+      mutateBedTags: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
-interface BedType {
-  name: string;
-  displayName: string;
-  description: string;
-}
-interface BedTag {
-  name: string;
-}
+
 export async function saveBedType({
   bedTypePayload,
 }: {
   bedTypePayload: BedTypePayload;
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
+  const response: FetchResponse = await openmrsFetch(`${restBaseUrl}/bedtype`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTypePayload,
@@ -194,39 +245,42 @@ export async function saveBedType({
   return response;
 }
 
-export async function saveBedTag({ bedTagPayload }: { bedTagPayload: BedTagPayload }): Promise<FetchResponse<BedTag>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+export async function saveBedTag({
+  bedTagPayload,
+}: {
+  bedTagPayload: BedTagPayload;
+}): Promise<FetchResponse<BedTagData>> {
+  return await openmrsFetch(`${restBaseUrl}/bedTag/`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTagPayload,
   });
-  return response;
 }
+
 export async function editBedType({
   bedTypePayload,
   bedTypeId,
 }: {
-  bedTypePayload: BedTypePayload;
   bedTypeId: string;
+  bedTypePayload: BedTypePayload;
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype/${bedTypeId}`, {
+  return await openmrsFetch(`${restBaseUrl}/bedtype/${bedTypeId}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTypePayload,
   });
-  return response;
 }
+
 export async function editBedTag({
   bedTagPayload,
   bedTagId,
 }: {
-  bedTagPayload: BedTagPayload;
   bedTagId: string;
-}): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/${bedTagId}`, {
+  bedTagPayload: BedTagPayload;
+}): Promise<FetchResponse<BedTagData>> {
+  return await openmrsFetch(`${restBaseUrl}/bedTag/${bedTagId}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTagPayload,
   });
-  return response;
 }
diff --git a/packages/esm-bed-management-app/src/types.ts b/packages/esm-bed-management-app/src/types.ts
index b7d4a6d34..3a6525d2e 100644
--- a/packages/esm-bed-management-app/src/types.ts
+++ b/packages/esm-bed-management-app/src/types.ts
@@ -138,9 +138,9 @@ export interface BedTypePayload {
   description: string;
 }
 
-export type Mutator = KeyedMutator<{
+export type Mutator<T> = KeyedMutator<{
   data: {
-    results: Array<Location>;
+    results: Array<T>;
   };
 }>;
 
diff --git a/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx b/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx
index 8053481cb..10bb2b380 100644
--- a/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx
+++ b/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx
@@ -17,22 +17,21 @@ import {
 } from '@carbon/react';
 import { ArrowLeft } from '@carbon/react/icons';
 import { navigate, usePagination } from '@openmrs/esm-framework';
-import Header from '../header/header.component';
 import { useBedsForLocation, useLocationName } from '../summary/summary.resource';
+import Header from '../header/header.component';
 import styles from './ward-with-beds.scss';
 
 type RouteParams = { location: string };
 
 const WardWithBeds: React.FC = () => {
   const { location } = useParams<RouteParams>();
-  const { isLoading, bedData } = useBedsForLocation(location);
-
+  const { bedsData, isLoadingBeds } = useBedsForLocation(location);
   const { name } = useLocationName(location);
 
   const [pageSize, setPageSize] = useState(10);
-  const { results: paginatedData, goTo, currentPage } = usePagination(bedData, pageSize);
+  const { results: paginatedData, goTo, currentPage } = usePagination(bedsData, pageSize);
 
-  if (isLoading) {
+  if (isLoadingBeds) {
     <p>Loading...</p>;
   }
 
@@ -95,13 +94,13 @@ const WardWithBeds: React.FC = () => {
   return (
     <>
       <Header route={name ? name : '--'} />
-      {isLoading && (
+      {isLoadingBeds && (
         <div className={styles.container}>
           <DataTableSkeleton role="progressbar" zebra />
         </div>
       )}
 
-      {bedData?.length ? (
+      {bedsData?.length ? (
         <>
           <div className={styles.backButton}>
             <Button
diff --git a/packages/esm-bed-management-app/translations/en.json b/packages/esm-bed-management-app/translations/en.json
index dba1d2c0e..ac668f7d9 100644
--- a/packages/esm-bed-management-app/translations/en.json
+++ b/packages/esm-bed-management-app/translations/en.json
@@ -1,49 +1,64 @@
 {
   "actions": "Actions",
   "addBed": "Add bed",
-  "addBedTag": "Create Bed Tag",
-  "addBedtype": "Add Bed Type",
-  "addBedType": "Create Bed type",
+  "addBedTag": "Create bed tag",
+  "addBedType": "Add bed type",
   "allocationStatus": "Allocated",
+  "bedDescription": "Bed description",
   "bedId": "Bed ID",
-  "bedIdPlaceholder": "e.g. BMW-201",
   "bedLocation": "Location",
-  "bedManagement": "Bed Management",
-  "bedName": "Bed Name",
+  "bedManagement": "Bed management",
+  "bedManagementLeftPanel": "Bed management left panel",
+  "bedName": "Bed name",
+  "bedNumber": "Bed number",
   "beds": "Beds",
-  "bedTag": "Bed Tag Name",
+  "bedTag": "Bed tag",
+  "bedTagCreated": "Bed tag created",
+  "bedTagCreatedSuccessfully": "",
   "bedTagPlaceholder": "",
-  "bedType": "Add Bed Type",
+  "bedTagUpdated": "Bed tag updated",
+  "bedTagUpdatedSuccessfully": "",
+  "bedType": "Bed type",
+  "bedTypeCreated": "Bed type created",
+  "bedTypeCreatedSuccessfully": "",
   "bedTypePlaceholder": "",
+  "bedTypeUpdated": "Bed type updated",
+  "bedTypeUpdatedSuccessfully": "",
+  "bedUpdated": "Bed updated",
+  "bedUpdatedSuccessfully": "",
   "checkFilters": "Check the filters above",
   "chooseBedtype": "Choose a bed type",
   "chooseOccupiedStatus": "Choose occupied status",
+  "createBedTag": "Create bed tag",
+  "createBedType": "Create bed type",
   "createNewBed": "Create a new bed",
   "description": "Description",
-  "displayName": "Display Name",
+  "displayName": "Display name",
   "displayNamePlaceholder": "",
-  "editBed": "Edit Tag",
+  "editBed": "Edit bed",
   "editBedTag": "Edit Bed Tag",
-  "editBedType": "Edit Bed Type",
+  "editBedType": "Edit bed type",
+  "editTag": "Edit Tag",
+  "enterBedDescription": "Enter the bed description",
+  "enterBedNumber": "e.g. BMW-201",
   "error": "Error",
+  "errorCreatingBedTag": "Error creating bed tag",
   "errorCreatingForm": "Error creating bed",
   "errorFetchingbedInformation": "Error fetching bed information",
   "filterByOccupancyStatus": "Filter by occupancy status",
-  "formCreated": "Add bed Type",
-  "formSaved": "Bed Type",
-  "headerTitle": "",
   "ids": "Id",
-  "location": "Locations",
-  "manageBeds": "Manage Beds",
+  "location": "Location",
+  "manageBeds": "Manage beds",
   "name": "Name",
+  "newBedCreated": "New bed created",
   "no": "No",
   "No data": "No data to display",
+  "noDataToDisplay": "No data to display",
   "occupancyStatus": "Occupied",
   "or": "or",
   "pleaseFillField": "",
   "required": "Required",
   "save": "Save",
-  "saveSuccessMessage": "was saved successfully.",
   "selectBedLocation": "Select a bed location",
   "viewBeds": "View beds",
   "wardAllocation": "Ward Allocation",
diff --git a/packages/esm-bed-management-app/tsconfig.json b/packages/esm-bed-management-app/tsconfig.json
index 54ce28cfa..1bfe3eae1 100644
--- a/packages/esm-bed-management-app/tsconfig.json
+++ b/packages/esm-bed-management-app/tsconfig.json
@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.tsx"]
 }
diff --git a/packages/esm-service-queues-app/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx b/packages/esm-service-queues-app/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx
index 9c8d8b4ff..5f79cb355 100644
--- a/packages/esm-service-queues-app/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx
+++ b/packages/esm-service-queues-app/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx
@@ -15,6 +15,7 @@ export const queueTableVisitAttributeQueueNumberColumn: QueueTableColumnFunction
 
   const QueueTableVisitAttributeQueueNumberCell = ({ queueEntry }: QueueTableCellComponentProps) => {
     const { t } = useTranslation();
+
     return (
       <>
         {visitQueueNumberAttributeUuid ? (
diff --git a/packages/esm-service-queues-app/src/transition-latest-queue-entry/transition-latest-queue-entry.resource.ts b/packages/esm-service-queues-app/src/transition-latest-queue-entry/transition-latest-queue-entry.resource.ts
index ee4d804f7..8ecc9df52 100644
--- a/packages/esm-service-queues-app/src/transition-latest-queue-entry/transition-latest-queue-entry.resource.ts
+++ b/packages/esm-service-queues-app/src/transition-latest-queue-entry/transition-latest-queue-entry.resource.ts
@@ -1,21 +1,13 @@
-import {
-  type FetchResponse,
-  openmrsFetch,
-  type OpenmrsResource,
-  type Patient,
-  type Visit,
-} from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
-import useSWRImmutable from 'swr/immutable';
 import { type QueueEntry } from '../types';
-import { FetcherResponse } from 'swr/_internal';
 
 export function useLatestQueueEntry(patientUuid: string) {
   const customRepresentation =
     'custom:(uuid,display,queue:(uuid,display,name,location:(uuid,display),service:(uuid,display),allowedPriorities:(uuid,display),allowedStatuses:(uuid,display)),status,patient:(uuid,display),visit:(uuid,display,startDatetime),priority,priorityComment,sortWeight,startedAt,endedAt,locationWaitingFor,queueComingFrom,providerWaitingFor,previousQueueEntry)';
 
   const encodedRepresentation = encodeURIComponent(customRepresentation);
-  const url = `/ws/rest/v1/queue-entry?v=${encodedRepresentation}&patient=${patientUuid}&isEnded=false`;
+  const url = `${restBaseUrl}/queue-entry?v=${encodedRepresentation}&patient=${patientUuid}&isEnded=false`;
   const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: QueueEntry[] }>>(url, openmrsFetch);
 
   const queueEntry =