@kenyaemr/esm-ward-app 8.0.1-pre.95 → 8.0.2

package/src/ward-view/ward-view.scss

@@ -1,15 +1,15 @@
 @use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wardView {
   background-color: #e4e4e4;
-  position: absolute;
-  top: var(--omrs-topnav-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   flex-direction: column;
   padding: 0 layout.$spacing-05;
+
+  &.verticalTiling {
+    height: calc(100vh - var(--omrs-topnav-height));
+  }
 }
 
 .wardViewMain {
@@ -17,5 +17,16 @@
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   display: grid;
   gap: layout.$spacing-05;
-  padding: layout.$spacing-05;
+
+  &.verticalTiling {
+    display: block;
+    column-width: 280px;
+    overflow-x: auto;
+    height: calc(100% - 4rem);
+
+    > div {
+      break-inside: avoid;
+      margin-bottom: 10px;
+    }
+  }
 }

package/src/ward-view/ward-view.test.tsx

@@ -1,13 +1,20 @@
-import React from 'react';
+import {
+  type ConfigSchema,
+  getDefaultsFromConfigSchema,
+  useAppContext,
+  useConfig,
+  useFeatureFlag,
+} from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { type ConfigSchema, getDefaultsFromConfigSchema, useConfig, useFeatureFlag } from '@openmrs/esm-framework';
+import React from 'react';
 import { useParams } from 'react-router-dom';
-import { mockAdmissionLocation, mockInpatientAdmissions } from '__mocks__';
 import { renderWithSwr } from 'tools';
+import { mockWardPatientGroupDetails, mockWardViewContext } from '../../mock';
 import { configSchema } from '../config-schema';
-import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
-import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
+import { useObs } from '../hooks/useObs';
 import useWardLocation from '../hooks/useWardLocation';
+import { type WardViewContext } from '../types';
+import DefaultWardView from './default-ward/default-ward-view.component';
 import WardView from './ward-view.component';
 
 jest.mocked(useConfig).mockReturnValue({
@@ -24,6 +31,9 @@ jest.mock('../hooks/useWardLocation', () =>
     invalidLocation: false,
   }),
 );
+jest.mock('../hooks/useObs', () => ({
+  useObs: jest.fn(),
+}));
 
 const mockUseWardLocation = jest.mocked(useWardLocation);
 
@@ -33,57 +43,48 @@ jest.mock('react-router-dom', () => ({
 }));
 const mockUseParams = useParams as jest.Mock;
 
-jest.mock('../hooks/useAdmissionLocation', () => ({
-  useAdmissionLocation: jest.fn(),
-}));
-jest.mock('../hooks/useInpatientAdmission', () => ({
-  useInpatientAdmission: jest.fn(),
-}));
-
-jest.mocked(useAdmissionLocation).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  admissionLocation: mockAdmissionLocation,
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
+//@ts-ignore
+jest.mocked(useObs).mockReturnValue({
+  data: [],
 });
-jest.mocked(useInpatientAdmission).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientAdmissions: mockInpatientAdmissions,
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
 });
+window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 
 describe('WardView', () => {
+  let replacedProperty: jest.ReplaceProperty<any> | null = null;
+
   it('renders the session location when no location provided in URL', () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the location provided in URL', () => {
     mockUseParams.mockReturnValueOnce({ locationUuid: 'abcd' });
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the correct number of occupied and empty beds', async () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const emptyBedCards = await screen.findAllByText(/empty bed/i);
     expect(emptyBedCards).toHaveLength(3);
   });
 
   it('renders admitted patient without bed', async () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
     expect(admittedPatientWithoutBed).toBeInTheDocument();
   });
 
   it('renders all admitted patients even if bed management module not installed', async () => {
     mockUseFeatureFlag.mockReturnValueOnce(false);
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
     expect(admittedPatientWithoutBed).toBeInTheDocument();
   });
@@ -103,35 +104,29 @@ describe('WardView', () => {
     expect(invalidText).toBeInTheDocument();
   });
 
-  it('screen should render warning if backend module installed and no beds configured', () => {
+  it('should render warning if backend module installed and no beds configured', () => {
     // override the default response so that no beds are returned
-    jest.mocked(useAdmissionLocation).mockReturnValue({
-      error: undefined,
-      mutate: jest.fn(),
-      isValidating: false,
-      isLoading: false,
-      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
-    });
-    mockUseFeatureFlag.mockReturnValueOnce(true);
+    replacedProperty = jest.replaceProperty(mockWardPatientGroupDetails(), 'bedLayouts', []);
 
-    renderWithSwr(<WardView />);
+    mockUseFeatureFlag.mockReturnValue(true);
+
+    renderWithSwr(<DefaultWardView />);
     const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
     expect(noBedsConfiguredForThisLocation).toBeInTheDocument();
   });
 
-  it('screen not should render warning if backend module installed and no beds configured', () => {
+  it('should not render warning if backend module installed and no beds configured', () => {
     // override the default response so that no beds are returned
-    jest.mocked(useAdmissionLocation).mockReturnValue({
-      error: undefined,
-      mutate: jest.fn(),
-      isValidating: false,
-      isLoading: false,
-      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
-    });
-    mockUseFeatureFlag.mockReturnValueOnce(false);
+    replacedProperty = jest.replaceProperty(mockWardPatientGroupDetails(), 'bedLayouts', []);
+    mockUseFeatureFlag.mockReturnValue(false);
 
     renderWithSwr(<WardView />);
     const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
     expect(noBedsConfiguredForThisLocation).not.toBeInTheDocument();
   });
+
+  afterEach(() => {
+    replacedProperty?.restore();
+    replacedProperty = null;
+  });
 });

package/src/ward-view/ward.component.tsx

@@ -0,0 +1,106 @@
+import { InlineNotification } from '@carbon/react';
+import { useAppContext, useFeatureFlag } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useEffect, useRef, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
+import useWardLocation from '../hooks/useWardLocation';
+import { type WardViewContext } from '../types';
+import styles from './ward-view.scss';
+
+const Ward = ({ wardBeds, wardUnassignedPatients }: { wardBeds: ReactNode; wardUnassignedPatients: ReactNode }) => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
+  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
+
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts } = wardPatientGroupDetails ?? {};
+  const { isLoading: isLoadingAdmissionLocation, error: errorLoadingAdmissionLocation } =
+  wardPatientGroupDetails?.admissionLocationResponse ?? {};
+  const {
+    isLoading: isLoadingInpatientAdmissions,
+    error: errorLoadingInpatientAdmissions,
+    hasMore: hasMoreInpatientAdmissions,
+    loadMore: loadMoreInpatientAdmissions,
+  } = wardPatientGroupDetails?.inpatientAdmissionResponse ?? {};
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  const scrollToLoadMoreTrigger = useRef<HTMLDivElement>(null);
+  useEffect(
+    function scrollToLoadMore() {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              if (hasMoreInpatientAdmissions && !errorLoadingInpatientAdmissions && !isLoadingInpatientAdmissions) {
+                loadMoreInpatientAdmissions();
+              }
+            }
+          });
+        },
+        { threshold: 1 },
+      );
+
+      if (scrollToLoadMoreTrigger.current) {
+        observer.observe(scrollToLoadMoreTrigger.current);
+      }
+      return () => {
+        if (scrollToLoadMoreTrigger.current) {
+          observer.unobserve(scrollToLoadMoreTrigger.current);
+        }
+      };
+    },
+    [scrollToLoadMoreTrigger, hasMoreInpatientAdmissions, errorLoadingInpatientAdmissions, loadMoreInpatientAdmissions],
+  );
+
+  if (!wardPatientGroupDetails) return <></>;
+
+  return (
+    <div className={classNames(styles.wardViewMain, { [styles.verticalTiling]: isVertical })}>
+      {wardBeds}
+      {bedLayouts?.length == 0 && isBedManagementModuleInstalled && (
+        <InlineNotification
+          kind="warning"
+          lowContrast={true}
+          title={t('noBedsConfigured', 'No beds configured for this location')}
+        />
+      )}
+      {wardUnassignedPatients}
+      {(isLoadingAdmissionLocation || isLoadingInpatientAdmissions) && <EmptyBeds />}
+      {errorLoadingAdmissionLocation && (
+        <InlineNotification
+          kind="error"
+          lowContrast={true}
+          title={t('errorLoadingWardLocation', 'Error loading ward location')}
+          subtitle={
+            errorLoadingAdmissionLocation?.message ??
+            t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
+          }
+        />
+      )}
+      {errorLoadingInpatientAdmissions && (
+        <InlineNotification
+          kind="error"
+          lowContrast={true}
+          title={t('errorLoadingPatients', 'Error loading admitted patients')}
+          subtitle={errorLoadingInpatientAdmissions?.message}
+        />
+      )}
+      <div ref={scrollToLoadMoreTrigger}></div>
+    </div>
+  );
+};
+
+const EmptyBeds = () => {
+  return (
+    <>
+      {Array(20)
+        .fill(0)
+        .map((_, i) => (
+          <EmptyBedSkeleton key={i} />
+        ))}
+    </>
+  );
+};
+
+export default Ward;

package/src/ward-view-header/admission-requests-bar.component.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
-import { Movement } from '@carbon/react/icons';
 import { Button, InlineNotification } from '@carbon/react';
-import { ArrowRightIcon, isDesktop, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
-import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { Movement } from '@carbon/react/icons';
+import { ArrowRightIcon, isDesktop, launchWorkspace, useAppContext, useLayoutType } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { type WardViewContext } from '../types';
 import styles from './admission-requests.scss';
 
-const AdmissionRequestsBar = () => {
-  const { inpatientRequests, isLoading, error } = useInpatientRequest(['ADMIT', 'TRANSFER']);
+interface AdmissionRequestsBarProps {
+  wardPendingPatients: ReactNode;
+}
+
+const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ wardPendingPatients }) => {
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
   const { t } = useTranslation();
   const layout = useLayoutType();
 
@@ -20,7 +25,7 @@ const AdmissionRequestsBar = () => {
     return (
       <InlineNotification
         kind="error"
-        title={t('errorLoadingPatientAdmissionRequests', 'Error Loading patient admission requests')}
+        title={t('errorLoadingPatientAdmissionRequests', 'Error loading patient admission requests')}
       />
     );
   }
@@ -29,12 +34,12 @@ const AdmissionRequestsBar = () => {
     <div className={styles.admissionRequestsContainer}>
       <Movement className={styles.movementIcon} size="24" />
       <span className={styles.content}>
-        {t('admissionRequestsCount', '{{count}} admission request(s)', {
+        {t('admissionRequestsCount', '{{count}} admission request', {
           count: inpatientRequests.length,
         })}
       </span>
       <Button
-        onClick={() => launchWorkspace('admission-requests-workspace')}
+        onClick={() => launchWorkspace('admission-requests-workspace', { wardPendingPatients })}
         renderIcon={ArrowRightIcon}
         kind="ghost"
         size={isDesktop(layout) ? 'sm' : 'lg'}>

package/src/ward-view-header/admission-requests-bar.test.tsx

@@ -1,38 +1,26 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
+import { launchWorkspace, useAppContext } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 import { renderWithSwr } from 'tools';
-import { mockInpatientRequest } from '__mocks__';
-import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { mockWardViewContext } from '../../mock';
+import { type WardViewContext } from '../types';
 import AdmissionRequestsBar from './admission-requests-bar.component';
 
-jest.mock('../hooks/useInpatientRequest', () => ({
-  useInpatientRequest: jest.fn(),
-}));
-
-const mockInpatientRequestResponse = {
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientRequests: [mockInpatientRequest],
-};
-
-jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
 describe('Admission Requests Button', () => {
-  it('call launch workspace when clicked on manage button', async () => {
+  it('should launch workspace when clicked on manage button', async () => {
     const user = userEvent.setup();
-    renderWithSwr(<AdmissionRequestsBar />);
+    renderWithSwr(<AdmissionRequestsBar wardPendingPatients={[]} />);
 
     await user.click(screen.getByRole('button', { name: /manage/i }));
     expect(launchWorkspace).toHaveBeenCalled();
   });
 
-  it('there should be one admission request', () => {
-    renderWithSwr(<AdmissionRequestsBar />);
+  it('should have one admission request', () => {
+    renderWithSwr(<AdmissionRequestsBar wardPendingPatients={[<div>Dummy Patient</div>]} />);
 
-    expect(screen.getByText('1 admission request(s)')).toBeInTheDocument();
+    expect(screen.getByText('1 admission request')).toBeInTheDocument();
   });
 });

package/src/ward-view-header/admission-requests.scss

@@ -8,7 +8,7 @@
   align-items: center;
   padding: layout.$spacing-02 0 layout.$spacing-02 layout.$spacing-04;
   background-color: #393939;
-
+  margin-left: layout.$spacing-03;
   & > button {
     color: #78a9ff;
 

package/src/ward-view-header/ward-metric.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './ward-metric.scss';
+import { SkeletonPlaceholder } from '@carbon/react';
+
+interface WardMetricProps {
+  metricName: string;
+  metricValue: string;
+  isLoading: boolean;
+}
+const WardMetric: React.FC<WardMetricProps> = ({ metricName, metricValue, isLoading }) => {
+ 
+  return (
+    <div className={styles.metric}>
+     <span className={styles.metricName}>{metricName}</span>
+      {isLoading ? (
+        <SkeletonPlaceholder className={styles.skeleton} />
+      ) : (
+        <span className={styles.metricValue}>{metricValue}</span>
+      )}
+    </div>
+  );
+};
+
+export default WardMetric;

package/src/ward-view-header/ward-metric.scss

@@ -0,0 +1,25 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.metric {
+  margin-left: layout.$spacing-05;
+  display: flex;
+  align-items: end;
+  gap: 5px;
+}
+
+.metricName {
+  @include type.type-style('helper-text-01');
+  color: $color-gray-70;
+}
+
+.metricValue {
+  @include type.type-style('heading-03');
+  line-height: revert;
+}
+
+.skeleton {
+  height: layout.$spacing-05;
+  width: layout.$spacing-05;
+}

package/src/ward-view-header/ward-metrics.component.tsx

@@ -0,0 +1,78 @@
+import { showNotification, useAppContext, useFeatureFlag } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WardViewContext } from '../types';
+import {
+  getWardMetricNameTranslation,
+  getWardMetrics,
+  getWardMetricValueTranslation,
+} from '../ward-view/ward-view.resource';
+import WardMetric from './ward-metric.component';
+import styles from './ward-metrics.scss';
+
+const wardMetrics = [{ name: 'patients' }, { name: 'freeBeds' }, { name: 'capacity' }];
+
+const WardMetrics = () => {
+  const { t } = useTranslation();
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { admissionLocationResponse, inpatientAdmissionResponse, inpatientRequestResponse, bedLayouts } =
+    wardPatientGroupDetails || {};
+  const { isLoading, error } = admissionLocationResponse ?? {};
+  const isDataLoading =
+    admissionLocationResponse?.isLoading ||
+    inpatientAdmissionResponse?.isLoading ||
+    inpatientRequestResponse?.isLoading;
+  if (!wardPatientGroupDetails) return <></>;
+
+  if (error) {
+    showNotification({
+      kind: 'error',
+      title: t('errorLoadingBedDetails', 'Error loading bed details'),
+      description: error.message,
+    });
+  }
+
+  const wardMetricValues = getWardMetrics(bedLayouts, wardPatientGroupDetails);
+  return (
+    <div className={styles.metricsContainer}>
+      {isBedManagementModuleInstalled ? (
+        wardMetrics.map((wardMetric) => {
+          return (
+            <WardMetric
+              metricName={getWardMetricNameTranslation(wardMetric.name, t)}
+              metricValue={getWardMetricValueTranslation(wardMetric.name, t, wardMetricValues[wardMetric.name])}
+              isLoading={!!isLoading || !!isDataLoading}
+              key={wardMetric.name}
+            />
+          );
+        })
+      ) : (
+        <WardMetric
+          metricName={getWardMetricNameTranslation('patients', t)}
+          metricValue={'--'}
+          isLoading={false}
+          key={'patients'}
+        />
+      )}
+      {isBedManagementModuleInstalled && (
+        <WardMetric
+          metricName={getWardMetricNameTranslation('pendingOut', t)}
+          metricValue={
+            error
+              ? '--'
+              : getWardMetricValueTranslation(
+                  'pendingOut',
+                  t,
+                  wardPatientGroupDetails?.wardPatientPendingCount?.toString(),
+                )
+          }
+          isLoading={!!isDataLoading}
+          key="pending"
+        />
+      )}
+    </div>
+  );
+};
+
+export default WardMetrics;

package/src/ward-view-header/ward-metrics.scss

@@ -0,0 +1,7 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.metricsContainer {
+  display: flex;
+  align-items: end;
+  margin-left: auto;
+}

package/src/ward-view-header/ward-metrics.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import WardMetrics from './ward-metrics.component';
+import { renderWithSwr } from '../../../../tools/test-utils';
+import {
+  createAndGetWardPatientGrouping,
+  getInpatientAdmissionsUuidMap,
+  getWardMetrics,
+} from '../ward-view/ward-view.resource';
+import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import { mockAdmissionLocation, mockInpatientAdmissions, mockInpatientRequest } from '__mocks__';
+import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
+import useWardLocation from '../hooks/useWardLocation';
+import { screen } from '@testing-library/react';
+import { useAppContext } from '@openmrs/esm-framework';
+import { type WardViewContext } from '../types';
+import { mockWardViewContext } from '../../mock';
+
+const wardMetrics = [
+  { name: 'patients', key: 'patients', defaultTranslation: 'Patients' },
+  { name: 'freeBeds', key: 'freeBeds', defaultTranslation: 'Free beds' },
+  { name: 'capacity', key: 'capacity', defaultTranslation: 'Capacity' },
+];
+
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
+
+describe('Ward Metrics', () => {
+  it('Should display metrics of in the ward ', () => {
+    const mockWardPatientGroupDetails = mockWardViewContext.wardPatientGroupDetails;
+    const { bedLayouts } = mockWardPatientGroupDetails;
+    const bedMetrics = getWardMetrics(bedLayouts, mockWardPatientGroupDetails);
+    renderWithSwr(<WardMetrics />);
+    for (let [key, value] of Object.entries(bedMetrics)) {
+      const fieldName = wardMetrics.find((metric) => metric.name == key)?.defaultTranslation;
+      expect(screen.getByText(fieldName!)).toBeInTheDocument();
+    }
+  });
+});

package/src/ward-view-header/ward-view-header.component.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import styles from './ward-view-header.scss';
 import AdmissionRequestsBar from './admission-requests-bar.component';
 import useWardLocation from '../hooks/useWardLocation';
+import WardMetrics from './ward-metrics.component';
 
-interface WardViewHeaderProps {}
+interface WardViewHeaderProps {
+  wardPendingPatients: ReactNode;
+}
 
-const WardViewHeader: React.FC<WardViewHeaderProps> = () => {
+const WardViewHeader: React.FC<WardViewHeaderProps> = ({ wardPendingPatients }) => {
   const { location } = useWardLocation();
+
   return (
     <div className={styles.wardViewHeader}>
       <h4>{location?.display}</h4>
-      <AdmissionRequestsBar />
+      <WardMetrics />
+      <AdmissionRequestsBar {...{ wardPendingPatients }} />
     </div>
   );
 };

package/src/ward-view-header/ward-view-header.scss

@@ -4,5 +4,4 @@
   margin: layout.$spacing-05 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
 }