@kenyaemr/esm-morgue-app 5.4.2-pre.2283 → 5.4.2-pre.2291

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"component":"morgueDashboardLink","name":"morgue-dashboard-link","slot":"homepage-dashboard-slot","featureFlag":"mortuaryFeatureFlag","meta":{"name":"morgue","title":"morgue","slot":"morgue-dashboard-slot","privileges":["o3 : View Mortuary Dashboard"]}},{"name":"action-buttons","component":"actionBarButtons","slot":"mortuary-action-buttons-slot","meta":{"fullWidth":false,"privileges":["o3 : View Mortuary Dashboard","o3 : Admit Body to Mortuary","o3 : Edit Mortuary Records","o3 : Discharge Body from Mortuary","o3 : View Mortuary Compartments","o3 : Swap Mortuary Compartments","o3 : View Mortuary Billing","o3 : Process Mortuary Payments","o3 : View Mortuary Reports","o3 : Generate Mortuary Reports"]}},{"name":"deceased-banner-info","component":"bannerInfo","slot":"deceased-banner-info-slot","meta":{"fullWidth":false}},{"component":"root","name":"morgue-dashboard-root","slot":"morgue-dashboard-slot","meta":{"privileges":["o3 : View Mortuary Dashboard"]}}],"workspaces":[{"name":"patient-additional-info-form","component":"patientAdditionalInfoForm","title":"add more details","type":"other-form"},{"name":"discharge-body-form","component":"dischargeBodyForm","title":"discharge body form","type":"other-form"},{"name":"admit-body-form","component":"admitBodyForm","title":"Admission form","type":"other-form"},{"name":"swap-unit-form","component":"swapForm","title":"Swap form","type":"other-form"}],"pages":[{"component":"root","route":"morgue"}],"version":"5.4.2-pre.2283"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"action-buttons","component":"actionBarButtons","slot":"mortuary-action-buttons-slot","meta":{"fullWidth":false,"privileges":["o3 : View Mortuary Dashboard","o3 : Admit Body to Mortuary","o3 : Edit Mortuary Records","o3 : Discharge Body from Mortuary","o3 : View Mortuary Compartments","o3 : Swap Mortuary Compartments","o3 : View Mortuary Billing","o3 : Process Mortuary Payments","o3 : View Mortuary Reports","o3 : Generate Mortuary Reports"]}},{"name":"deceased-banner-info","component":"bannerInfo","slot":"deceased-banner-info-slot","meta":{"fullWidth":false}},{"name":"mortuary-summary-info","component":"mortuarySummary","slot":"mortuary-summary-info-slot"},{"component":"root","name":"morgue-dashboard-root","slot":"morgue-dashboard-slot","meta":{"privileges":["o3 : View Mortuary Dashboard"]}}],"workspaces":[{"name":"patient-additional-info-form","component":"patientAdditionalInfoForm","title":"add more details","type":"other-form"},{"name":"discharge-body-form","component":"dischargeBodyForm","title":"discharge body form","type":"other-form"},{"name":"admit-body-form","component":"admitBodyForm","title":"Admission form","type":"other-form"},{"name":"swap-unit-form","component":"swapForm","title":"Swap form","type":"other-form"},{"name":"admit-deceased-person-form","component":"admitDeceasedPersonForm","title":"Admit Deceased Person","type":"other-form"},{"name":"mortuary-form-entry","component":"mortuaryFormEntry","title":"Mortuary Form Entry","type":"form","width":"extra-wide","canMaximize":true,"canHide":true},{"name":"dispose-deceased-person-form","component":"disposeDeceasedPersonForm","title":"Dispose Deceased Person","type":"other-form"}],"pages":[{"component":"root","route":"morgue"}],"version":"5.4.2-pre.2291"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-morgue-app",
-  "version": "5.4.2-pre.2283",
+  "version": "5.4.2-pre.2291",
   "description": "morgue app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-morgue-app.js",
   "main": "src/index.ts",

package/src/bed/bed.component.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Layer, OverflowMenu, OverflowMenuItem, Tag, Tile } from '@carbon/react';
+import styles from './bed.scss';
+import { useTranslation } from 'react-i18next';
+import { Tag as TagIcon } from '@carbon/react/icons';
+import capitalize from 'lodash-es/capitalize';
+import startCase from 'lodash-es/startCase';
+import { formatDateTime, convertDateToDays } from '../utils/utils';
+import { useVisit } from '@openmrs/esm-framework';
+
+interface BedProps {
+  bedNumber?: string;
+  patientName: string;
+  gender: string;
+  age: number;
+  bedType?: string;
+  causeOfDeath: string;
+  dateOfDeath: string;
+  patientUuid: string;
+  onAdmit?: () => void;
+  onPostmortem?: () => void;
+  onDischarge?: () => void;
+  onSwapCompartment?: () => void;
+  onDispose?: () => void;
+  onPrintGatePass?: () => void;
+  onPrintPostmortem?: () => void;
+  onViewDetails?: () => void;
+  isDischarged?: boolean;
+}
+
+const BedCard: React.FC<BedProps> = ({
+  bedNumber,
+  patientName,
+  gender,
+  age,
+  causeOfDeath,
+  bedType,
+  dateOfDeath,
+  patientUuid,
+  onAdmit,
+  onPostmortem,
+  onDischarge,
+  onSwapCompartment,
+  onDispose,
+  onPrintGatePass,
+  onPrintPostmortem,
+  onViewDetails,
+  isDischarged = false,
+}) => {
+  const { t } = useTranslation();
+  const { activeVisit } = useVisit(patientUuid);
+
+  const lengthOfStay = activeVisit?.startDatetime
+    ? convertDateToDays(activeVisit.startDatetime)
+    : calculateDaysInMortuary(dateOfDeath);
+
+  const isAdmitted = !!activeVisit;
+  const timeSpentTagType = lengthOfStay > 7 ? 'red' : lengthOfStay > 3 ? 'magenta' : 'green';
+
+  function calculateDaysInMortuary(dateOfDeath: string): number {
+    if (!dateOfDeath) {
+      return 0;
+    }
+    const deathDate = new Date(dateOfDeath);
+    const currentDate = new Date();
+    const timeDiff = currentDate.getTime() - deathDate.getTime();
+    return Math.floor(timeDiff / (1000 * 3600 * 24));
+  }
+
+  return (
+    <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.tagContainer}>
+            <div className={styles.tagContainer}>
+              {bedNumber ? (
+                <Tag type="cool-gray" className={styles.bedNumberTag}>
+                  {bedNumber}
+                </Tag>
+              ) : (
+                !isDischarged && (
+                  <Tag type="cool-gray" className={styles.bedNumberTag}>
+                    {t('awaiting', 'Awaiting')}
+                  </Tag>
+                )
+              )}
+              {isDischarged && (
+                <Tag type="blue" className={styles.statusTag}>
+                  {t('discharged', 'Discharged')}
+                </Tag>
+              )}
+              <TagIcon className={styles.tagIcon} />
+            </div>
+          </div>
+          <div>
+            {bedType ? <Tag type="green">{startCase(bedType)}</Tag> : null}
+            <OverflowMenu flipped>
+              {onAdmit && <OverflowMenuItem onClick={onAdmit} itemText={t('admit', 'Admit')} />}
+              {onViewDetails && (
+                <OverflowMenuItem onClick={() => onViewDetails()} itemText={t('viewDetails', 'View details')} />
+              )}
+              {onPostmortem && <OverflowMenuItem onClick={onPostmortem} itemText={t('postmortem', 'Postmortem')} />}
+              {onDischarge && <OverflowMenuItem onClick={onDischarge} itemText={t('discharge', 'Discharge')} />}
+              {onSwapCompartment && (
+                <OverflowMenuItem onClick={onSwapCompartment} itemText={t('swapCompartment', 'Swap Compartment')} />
+              )}
+              {onDispose && <OverflowMenuItem onClick={onDispose} itemText={t('dispose', 'Dispose')} />}
+              {onPrintGatePass && (
+                <OverflowMenuItem onClick={onPrintGatePass} itemText={t('printGatePass', 'Gate Pass')} />
+              )}
+              {onPrintPostmortem && (
+                <OverflowMenuItem
+                  onClick={onPrintPostmortem}
+                  itemText={t('printPostmortemReport', 'Postmortem Report')}
+                />
+              )}
+            </OverflowMenu>
+          </div>
+        </div>
+
+        <div className={styles.patientInfoRow}>
+          <span className={styles.patientName}>{capitalize(patientName)}</span>
+          <span className={styles.middot}>•</span>
+          <span className={styles.gender}>{gender}</span>
+          <span className={styles.middot}>•</span>
+          <span className={styles.age}>{age}</span>
+          <span className={styles.ageUnit}>{t('yearsOld', 'Yrs old')}</span>
+        </div>
+
+        <div className={styles.causeOfDeathRow}>
+          <span className={styles.causeLabel}>{t('causeOfDeath', 'Cause of death')}</span>
+          <span className={styles.causeValue}>{startCase(causeOfDeath)}</span>
+        </div>
+        <div className={styles.patientInfoRow}>
+          <span className={styles.causeLabel}>{t('dateOfDeath', 'Date of death')}</span>
+          <span className={styles.causeValue}>{formatDateTime(dateOfDeath)}</span>
+        </div>
+        {isAdmitted && (
+          <div className={styles.patientInfoRow}>
+            <span className={styles.causeLabel}>{t('admissionDate', 'Admission Date')}</span>
+            <span className={styles.causeValue}>
+              {activeVisit?.startDatetime ? formatDateTime(activeVisit.startDatetime) : '-'}
+            </span>
+          </div>
+        )}
+        <div className={styles.borderLine}></div>
+        <div className={styles.cardRow}>
+          <span className={styles.causeLabel}>
+            {isAdmitted ? t('timeSpent', 'Time spent') : t('daysInMortuary', 'Days in mortuary')}
+          </span>
+          <div className={styles.tagsContainer}>
+            <Tag size="md" type={timeSpentTagType}>
+              <span className={styles.causeLabel}>{lengthOfStay}</span>{' '}
+              {lengthOfStay === 1 ? t('day', 'Day') : t('days', 'Days')}
+            </Tag>
+            {isAdmitted && !isDischarged && <Tag type="green">{t('admitted', 'Admitted')}</Tag>}
+          </div>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default BedCard;

package/src/bed/bed.scss

@@ -0,0 +1,192 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  border: 1px solid colors.$gray-20;
+  min-height: 2.875rem;
+  padding: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > :last-child {
+    display: flex;
+    align-items: center;
+    gap: layout.$spacing-03;
+  }
+}
+
+.tagContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.tagIcon {
+  width: 1rem;
+  height: 1rem;
+  color: colors.$gray-70;
+  margin-left: -#{layout.$spacing-02};
+}
+
+.patientInfoRow {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  flex-wrap: wrap;
+}
+
+.patientName {
+  @include type.type-style('body-01');
+  color: colors.$gray-100;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.middot {
+  color: colors.$gray-70;
+  font-weight: bold;
+}
+
+.gender {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  font-weight: 500;
+}
+
+.age {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  font-weight: 500;
+}
+
+.ageUnit {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin-left: layout.$spacing-01;
+}
+
+.causeOfDeathRow {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+}
+
+.causeLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  font-weight: 500;
+}
+
+.causeValue {
+  @include type.type-style('label-01');
+  color: colors.$gray-100;
+}
+
+.additionalContentRow {
+  border-top: 1px solid colors.$gray-20;
+  padding-top: layout.$spacing-03;
+  margin-top: layout.$spacing-02;
+}
+
+.cardWithChildren {
+  .tileContainer {
+    min-height: auto;
+  }
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: colors.$gray-100;
+}
+
+.headerLabelContainer {
+  margin-bottom: layout.$spacing-05;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: colors.$blue-60;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.emptyBedText {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-02;
+  text-align: center;
+  font-weight: 500;
+}
+
+.borderLine {
+  width: 100%;
+  height: 1px;
+  background-color: colors.$gray-30;
+  margin: layout.$spacing-01 0;
+}
+
+.cardRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+
+  .causeLabel {
+    margin-right: auto;
+  }
+
+  .tagsContainer {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+}
+
+.dividerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 layout.$spacing-03;
+  background-color: colors.$gray-80;
+}
+
+.dividerLine {
+  flex-grow: 1;
+  height: 1px;
+  background-color: colors.$gray-30;
+}
+
+.dividerText {
+  @include type.type-style('label-01');
+  color: colors.$white;
+  font-weight: 500;
+  padding: 0 layout.$spacing-03;
+  white-space: nowrap;
+}

package/src/bed/divider/divider.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, Tile } from '@carbon/react';
+import styles from '../bed.scss';
+
+const Divider: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.dividerContainer}>
+      <div className={styles.dividerLine}></div>
+      <span className={styles.dividerText}>{t('dividerText', 'Shared')}</span>
+      <div className={styles.dividerLine}></div>
+    </div>
+  );
+};
+
+export default Divider;

package/src/bed/empty-bed.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Layer, OverflowMenu, OverflowMenuItem, Tag, Tile } from '@carbon/react';
+import styles from './bed.scss';
+import { useTranslation } from 'react-i18next';
+import { Tag as TagIcon } from '@carbon/react/icons';
+import capitalize from 'lodash-es/capitalize';
+import startCase from 'lodash-es/startCase';
+import { formatDateTime } from '../utils/utils';
+
+interface EmptyBedProps {
+  bedNumber?: string;
+  bedType?: string;
+  onAdmit?: () => void;
+  isEmpty?: boolean;
+}
+
+const EmptyBedCard: React.FC<EmptyBedProps> = ({ bedNumber, onAdmit, bedType, isEmpty }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.tagContainer}>
+            <Tag type="cool-gray">{bedNumber}</Tag>
+            <TagIcon className={styles.tagIcon} />
+          </div>
+          <div>
+            {!isEmpty && (
+              <>
+                <Tag type="green">{startCase(bedType)}</Tag>
+                <OverflowMenu flipped>
+                  <OverflowMenuItem onClick={onAdmit} itemText={t('admitBody', 'Admit')} disabled={!onAdmit} />
+                </OverflowMenu>
+              </>
+            )}
+          </div>
+        </div>
+        <span>
+          <h4 className={styles.emptyBedText}>{t('emptyCompartment', 'Empty compartment')}</h4>
+        </span>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyBedCard;

package/src/bed-layout/admitted/admitted-bed-layout.component.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import { launchWorkspace, navigate, useConfig } from '@openmrs/esm-framework';
+import styles from '../bed-layout.scss';
+import BedCard from '../../bed/bed.component';
+import { type MortuaryLocationResponse } from '../../types';
+import EmptyBedCard from '../../bed/empty-bed.component';
+import Divider from '../../bed/divider/divider.component';
+import { ConfigObject } from '../../config-schema';
+import { mutate as mutateSWR } from 'swr';
+
+interface BedLayoutProps {
+  AdmittedDeceasedPatient: MortuaryLocationResponse | null;
+  isLoading: boolean;
+  onAdmit?: (patientUuid: string) => void;
+  onPostmortem?: (patientUuid: string) => void;
+  onDischarge?: (patientUuid: string) => void;
+  onSwapCompartment?: (patientUuid: string, bedId: string) => void;
+  onDispose?: (patientUuid: string) => void;
+  mutate?: () => void;
+}
+
+const BedLayout: React.FC<BedLayoutProps> = ({
+  AdmittedDeceasedPatient,
+  isLoading,
+  onPostmortem,
+  onDischarge,
+  onSwapCompartment,
+  onDispose,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const { autopsyFormUuid } = useConfig<ConfigObject>();
+
+  const handlePostmortem = (patientUuid: string) => {
+    if (onPostmortem) {
+      onPostmortem(patientUuid);
+    } else {
+      launchWorkspace('mortuary-form-entry', {
+        formUuid: autopsyFormUuid,
+        workspaceTitle: t('postmortemForm', 'Postmortem form'),
+
+        patientUuid: patientUuid,
+        encounterUuid: '',
+        mutateForm: () => {
+          mutateSWR((key) => true, undefined, {
+            revalidate: true,
+          });
+        },
+      });
+    }
+  };
+
+  const handleDischarge = (patientUuid: string, bedId: number) => {
+    if (onDischarge) {
+      onDischarge(patientUuid);
+    } else {
+      launchWorkspace('discharge-body-form', {
+        workspaceTitle: t('dischargeForm', 'Discharge form'),
+        patientUuid: patientUuid,
+        bedId,
+        mutate,
+      });
+    }
+  };
+
+  const handleSwapCompartment = (patientUuid: string, bedId: number) => {
+    if (onSwapCompartment) {
+      onSwapCompartment(patientUuid, bedId.toString());
+    } else {
+      launchWorkspace('swap-unit-form', {
+        workspaceTitle: t('swapCompartment', 'Swap compartment'),
+        patientUuid: patientUuid,
+        bedId,
+        mortuaryLocation: AdmittedDeceasedPatient,
+        mutate,
+      });
+    }
+  };
+
+  const handleDispose = (patientUuid: string, bedId: number) => {
+    if (onDispose) {
+      onDispose(patientUuid);
+    } else {
+      launchWorkspace('dispose-deceased-person-form', {
+        workspaceTitle: t('disposeForm', 'Dispose form'),
+        patientUuid: patientUuid,
+        bedId,
+        mutate,
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <InlineLoading description={t('loadingPatients', 'Loading patients...')} />
+      </div>
+    );
+  }
+
+  const bedLayouts = AdmittedDeceasedPatient?.bedLayouts || [];
+
+  return (
+    <div className={styles.bedLayoutWrapper}>
+      <div className={styles.bedLayoutContainer}>
+        {bedLayouts.map((bedLayout, index) => {
+          const patients = bedLayout.patients || [];
+          const isEmpty = bedLayout.status === 'AVAILABLE' || patients.length === 0;
+
+          if (isEmpty) {
+            return (
+              <EmptyBedCard
+                key={bedLayout.bedUuid || `empty-bed-${bedLayout.bedId}-${index}`}
+                bedNumber={bedLayout.bedNumber}
+                bedType={bedLayout.bedType?.displayName}
+                isEmpty={isEmpty}
+              />
+            );
+          }
+
+          return (
+            <div
+              key={bedLayout.bedUuid}
+              className={`${styles.bedContainer} ${patients.length > 1 ? styles.sharedBedContainer : ''}`}>
+              {patients.length > 1 ? (
+                <div className={styles.horizontalLayout}>
+                  {patients.map((patient, patientIndex) => (
+                    <React.Fragment key={patient.uuid}>
+                      <BedCard
+                        patientUuid={patient.uuid}
+                        patientName={patient.person?.display}
+                        gender={patient.person?.gender}
+                        age={patient.person?.age}
+                        causeOfDeath={patient.person?.causeOfDeath?.display}
+                        dateOfDeath={patient.person?.deathDate}
+                        bedNumber={bedLayout.bedNumber}
+                        bedType={bedLayout.bedType?.displayName}
+                        onPostmortem={() => handlePostmortem(patient.uuid)}
+                        onDischarge={() => handleDischarge(patient.uuid, bedLayout.bedId)}
+                        onSwapCompartment={() => handleSwapCompartment(patient.uuid, bedLayout.bedId)}
+                        onDispose={() => handleDispose(patient.uuid, bedLayout.bedId)}
+                        onViewDetails={() => {
+                          const hasBedInfo = bedLayout.bedNumber && bedLayout.bedId;
+                          const base = `${window.getOpenmrsSpaBase()}home/morgue/patient/${patient.uuid}`;
+                          const to = hasBedInfo
+                            ? `${base}/compartment/${bedLayout.bedNumber}/${bedLayout.bedId}/mortuary-chart`
+                            : `${base}/mortuary-chart`;
+                          navigate({ to });
+                        }}
+                      />
+                      {patientIndex < patients.length - 1 && <Divider />}
+                    </React.Fragment>
+                  ))}
+                </div>
+              ) : (
+                <BedCard
+                  patientUuid={patients[0].uuid}
+                  patientName={patients[0].person?.display}
+                  gender={patients[0].person?.gender}
+                  age={patients[0].person?.age}
+                  causeOfDeath={patients[0].person?.causeOfDeath?.display}
+                  dateOfDeath={patients[0].person?.deathDate}
+                  bedNumber={bedLayout.bedNumber}
+                  bedType={bedLayout.bedType?.displayName}
+                  onPostmortem={() => handlePostmortem(patients[0].uuid)}
+                  onDischarge={() => handleDischarge(patients[0].uuid, bedLayout.bedId)}
+                  onSwapCompartment={() => handleSwapCompartment(patients[0].uuid, bedLayout.bedId)}
+                  onDispose={() => handleDispose(patients[0].uuid, bedLayout.bedId)}
+                  onViewDetails={() => {
+                    const hasBedInfo = bedLayout.bedNumber && bedLayout.bedId;
+                    const base = `${window.getOpenmrsSpaBase()}home/morgue/patient/${patients[0].uuid}`;
+                    const to = hasBedInfo
+                      ? `${base}/compartment/${bedLayout.bedNumber}/${bedLayout.bedId}/mortuary-chart`
+                      : `${base}/mortuary-chart`;
+                    navigate({ to });
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default BedLayout;