@kenyaemr/esm-bed-management-app 8.1.1-pre.124 → 8.1.2-pre.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-bed-management-app",
-  "version": "8.1.1-pre.124",
+  "version": "8.1.2-pre.152",
   "description": "Bed management app for OpenMRS 3",
   "browser": "dist/openmrs-esm-bed-management-app.js",
   "main": "src/index.ts",
@@ -37,11 +37,11 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
+    "@carbon/react": "^1.71.0",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-framework": "6.x",
     "dayjs": "1.x",
     "react": "18.x",
     "react-i18next": "11.x",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.1.0"
+  "stableVersion": "8.0.2"
 }

package/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} />

package/src/bed-administration/bed-administration-form.component.tsx

@@ -9,6 +9,7 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -18,18 +19,34 @@ 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';
+import styles from '../modals.scss';
+
+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 +55,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 +82,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 +90,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 +104,7 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     const result = BedAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleCreateBed(formData);
     }
   };
 
@@ -116,8 +114,9 @@ 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} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>
@@ -129,9 +128,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 +145,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 +165,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 +198,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 +221,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 +247,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('bedTypes', 'Bed types')}
                     {...field}>
                     <SelectItem text={t('chooseBedtype', 'Choose a bed type')} />
                     {availableBedTypes.map((bedType, index) => (
@@ -265,13 +264,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>

package/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,26 +21,26 @@ 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();
-  const headerTitle = t('wardAllocation', 'Ward Allocation');
+  const headerTitle = t('wardAllocation', 'Ward allocation');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   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.flat().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,10 +128,10 @@ const BedAdministrationTable: React.FC = () => {
     }));
   }, [responsiveSize, results, t]);
 
-  if (isLoadingBeds && !wardsGroupedByLocations.length) {
+  if (isLoadingBedsGroupedByLocation && !bedsGroupedByLocation.length) {
     return (
       <>
-        <Header route="Ward Allocation" />
+        <Header title={t('wardAllocation', 'Ward allocation')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -139,12 +139,12 @@ const BedAdministrationTable: React.FC = () => {
     );
   }
 
-  if (error) {
+  if (errorFetchingBedsGroupedByLocation) {
     return (
       <>
-        <Header route="Ward Allocation" />
+        <Header title={t('wardAllocation', 'Ward allocation')} />
         <div className={styles.widgetCard}>
-          <ErrorState error={error} headerTitle={headerTitle} />
+          <ErrorState error={errorFetchingBedsGroupedByLocation} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -152,7 +152,7 @@ const BedAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Ward Allocation" />
+      <Header title={t('wardAllocation', 'Ward allocation')} />
       <div className={styles.flexContainer}>
         {results?.length ? (
           <div className={styles.filterContainer}>
@@ -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) {

package/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 {

package/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;
 }

package/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;
 }

package/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}
+    />
   );
 };