Merge branch 'main' into O3-4065

packages/esm-appointments-app/src/routes.json

@@ -3,12 +3,6 @@
   "backendDependencies": {
     "webservices.rest": "^2.2.0"
   },
-  "modals": [
-    {
-      "name": "end-appointment-modal",
-      "component": "endAppointmentModal"
-    }
-  ],
   "extensions": [
     {
       "name": "home-appointments",
@@ -36,11 +30,7 @@
       "slot": "calendar-dashboard-slot",
       "component": "appointmentsCalendarDashboardLink"
     },
-    {
-      "name": "check-in-appointment-modal",
-      "slot": "todays-appointment-slot",
-      "component": "checkInModal"
-    },
+
     {
       "name": "todays-appointments-dashboard",
       "slot": "todays-appointment-slot",
@@ -111,10 +101,6 @@
       "component": "patientUpcomingAppointmentsWidget",
       "slot": "upcoming-appointment-slot"
     },
-    {
-      "name": "patient-appointment-cancel-confirmation-dialog",
-      "component": "patientAppointmentsCancelConfirmationDialog"
-    },
     {
       "name": "edit-appointments-form",
       "component": "appointmentsForm",
@@ -154,5 +140,15 @@
       "slot": "home-metrics-tiles-slot",
       "component": "homeAppointmentsTile"
     }
+  ],
+  "modals": [
+    {
+      "name": "end-appointment-modal",
+      "component": "endAppointmentModal"
+    },
+    {
+      "name": "patient-appointment-cancel-confirmation-dialog",
+      "component": "patientAppointmentsCancelConfirmationDialog"
+    }
   ]
 }

packages/esm-service-queues-app/src/routes.json

@@ -40,10 +40,6 @@
       "name": "service-queues-dashboard",
       "slot": "service-queues-dashboard-slot"
     },
-    {
-      "name": "edit-queue-entry-status-modal",
-      "component": "editQueueEntryStatusModal"
-    },
     {
       "name": "patient-info-banner-slot",
       "component": "patientInfoBannerSlot"
@@ -57,55 +53,62 @@
       "component": "clearAllQueueEntries"
     },
     {
-      "name": "add-visit-to-queue-modal",
-      "component": "addVisitToQueueModal"
+      "name": "previous-visit-summary-widget",
+      "component": "pastVisitSummary",
+      "slot": "previous-visit-summary-slot"
     },
+
     {
-      "name": "transition-queue-entry-status-modal",
-      "component": "transitionQueueEntryStatusModal"
+      "name": "active-visits-row-actions",
+      "component": "activeVisitsRowActions",
+      "slot": "queue-table-serve-patient-slot"
     },
     {
-      "name": "previous-visit-summary-widget",
-      "component": "pastVisitSummary",
-      "slot": "previous-visit-summary-slot"
+      "name": "visit-form-queue-fields",
+      "component": "visitFormQueueFields",
+      "slot":"visit-form-queue-slot"
+    }
+  ],
+  "modals": [
+    {
+      "name": "add-visit-to-queue-modal",
+      "component": "addVisitToQueueModal"
     },
     {
       "name": "add-provider-to-room-modal",
       "component": "addProviderToRoomModal"
     },
     {
-      "name": "transition-queue-entry-modal",
-      "component": "transitionQueueEntryModal"
+      "name": "edit-queue-entry-modal",
+      "component": "editQueueEntryModal"
     },
     {
-      "name": "transition-patient-to-latest-queue-modal",
-      "component": "transitionPatientToLatestQueue"
+      "name": "edit-queue-entry-status-modal",
+      "component": "editQueueEntryStatusModal"
     },
     {
-      "name": "edit-queue-entry-modal",
-      "component": "editQueueEntryModal"
+      "name": "end-queue-entry-modal",
+      "component": "endQueueEntryModal"
     },
     {
-      "name": "undo-transition-queue-entry-modal",
-      "component": "undoTransitionQueueEntryModal"
+      "name": "transition-patient-to-latest-queue-modal",
+      "component": "transitionPatientToLatestQueue"
     },
     {
-      "name": "void-queue-entry-modal",
-      "component": "voidQueueEntryModal"
+      "name": "transition-queue-entry-modal",
+      "component": "transitionQueueEntryModal"
     },
     {
-      "name": "end-queue-entry-modal",
-      "component": "endQueueEntryModal"
+      "name": "transition-queue-entry-status-modal",
+      "component": "transitionQueueEntryStatusModal"
     },
     {
-      "name": "active-visits-row-actions",
-      "component": "activeVisitsRowActions",
-      "slot": "queue-table-serve-patient-slot"
+      "name": "undo-transition-queue-entry-modal",
+      "component": "undoTransitionQueueEntryModal"
     },
     {
-      "name": "visit-form-queue-fields",
-      "component": "visitFormQueueFields",
-      "slot":"visit-form-queue-slot"
+      "name": "void-queue-entry-modal",
+      "component": "voidQueueEntryModal"
     }
   ],
   "workspaces": [

packages/esm-ward-app/mock.tsx

@@ -4,6 +4,8 @@ import { useInpatientAdmission } from './src/hooks/useInpatientAdmission';
 import { createAndGetWardPatientGrouping } from './src/ward-view/ward-view.resource';
 import { useInpatientRequest } from './src/hooks/useInpatientRequest';
 import { useWardPatientGrouping } from './src/hooks/useWardPatientGrouping';
+import { type WardViewContext } from './src/types';
+import DefaultWardPatientCardHeader from './src/ward-view/default-ward/default-ward-patient-card-header.component';
 
 jest.mock('./src/hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
@@ -51,4 +53,10 @@ export const mockWardPatientGroupDetails = jest.mocked(useWardPatientGrouping).m
   inpatientAdmissionResponse: mockInpatientAdmissionResponse(),
   inpatientRequestResponse: mockInpatientRequestResponse(),
   ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequest),
+  isLoading: false,
 });
+
+export const mockWardViewContext: WardViewContext = {
+  wardPatientGroupDetails: mockWardPatientGroupDetails(),
+  WardPatientHeader: DefaultWardPatientCardHeader,
+};

packages/esm-ward-app/src/beds/empty-bed-skeleton.tsx

@@ -1,11 +1,11 @@
 import { SkeletonIcon } from '@carbon/react';
 import React from 'react';
-import styles from './empty-bed.scss';
-import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-pateint-skeleton-text';
+import styles from './ward-bed.scss';
+import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-patient-skeleton-text';
 
 const EmptyBedSkeleton = () => {
   return (
-    <div className={styles.container + ' ' + styles.skeleton}>
+    <div className={styles.emptyBed + ' ' + styles.skeleton}>
       <SkeletonIcon />
       <WardPatientSkeletonText />
     </div>

packages/esm-ward-app/src/beds/empty-bed.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './empty-bed.scss';
+import styles from './ward-bed.scss';
 import wardPatientCardStyles from '../ward-patient-card/ward-patient-card.scss';
 import { type Bed } from '../types';
 import { useTranslation } from 'react-i18next';
@@ -12,11 +12,11 @@ const EmptyBed: React.FC<EmptyBedProps> = ({ bed }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.container}>
+    <div className={styles.emptyBed}>
       <span className={`${wardPatientCardStyles.wardPatientBedNumber} ${wardPatientCardStyles.empty}`}>
         {bed.bedNumber}
       </span>
-      <p className={styles.emptyBed}>{t('emptyBed', 'Empty bed')}</p>
+      <p className={styles.emptyBedText}>{t('emptyBed', 'Empty bed')}</p>
     </div>
   );
 };

packages/esm-ward-app/src/beds/ward-bed.component.tsx

@@ -0,0 +1,41 @@
+import React, { type ReactNode } from 'react';
+import { type Bed } from '../types';
+import EmptyBed from './empty-bed.component';
+import styles from './ward-bed.scss';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@carbon/react';
+
+export interface WardBedProps {
+  patientCards: Array<ReactNode>;
+  bed: Bed;
+}
+
+const WardBed: React.FC<WardBedProps> = ({ bed, patientCards }) => {
+  return patientCards?.length > 0 ? <OccupiedBed bed={bed} patientCards={patientCards} /> : <EmptyBed bed={bed} />;
+};
+
+const OccupiedBed: React.FC<WardBedProps> = ({ patientCards }) => {
+  // interlace patient card with bed dividers between each of them
+  const patientCardsWithDividers = patientCards.flatMap((patientCard, index) => {
+    if (index == 0) {
+      return [patientCard];
+    } else {
+      return [<BedShareDivider key={'divider-' + index} />, patientCard];
+    }
+  });
+
+  return <div className={styles.occupiedBed}>{patientCardsWithDividers}</div>;
+};
+
+const BedShareDivider = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.bedDivider}>
+      <div className={styles.bedDividerLine}></div>
+      <Tag>{t('bedShare', 'Bed share')}</Tag>
+      <div className={styles.bedDividerLine}></div>
+    </div>
+  );
+};
+
+export default WardBed;