@kenyaemr/esm-ward-app 7.0.2-pre.65

package/src/hooks/useBeds.ts

@@ -0,0 +1,26 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type Bed, type BedStatus } from '../types/index';
+
+interface BedSearchCriteria {
+  locationUuid?: string;
+  status?: BedStatus;
+  bedType?: string;
+}
+
+export function useBeds(searchCriteria?: BedSearchCriteria) {
+  const searchParam = new URLSearchParams();
+  for (let [key, value] of Object.entries(searchCriteria)) {
+    if (value != null) {
+      searchParam.append(key, value?.toString());
+    }
+  }
+
+  const apiUrl = `${restBaseUrl}/bed?${searchParam}`;
+  const { data, ...rest } = useSWR<{ data: { results: Array<Bed> } }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    beds: data?.data?.results ?? [],
+    ...rest,
+  };
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs, registerFeatureFlag } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import rootComponent from './root.component';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const moduleName = '@kenyaemr/esm-ward-app';
+
+const options = {
+  featureName: 'ward',
+  moduleName,
+};
+
+export const root = getSyncLifecycle(rootComponent, options);
+
+export function startupApp() {
+  registerBreadcrumbs([]);
+  defineConfigSchema(moduleName, configSchema);
+  registerFeatureFlag(
+    'bedmanagement-module',
+    'Bed Management Module',
+    'Enables features related to bed management / assignment. Requires the backend bed management module to be installed.',
+  );
+}

package/src/root.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import WardView from './ward-view/ward-view.component';
+
+const Root: React.FC = () => {
+  const wardViewBasename = window.getOpenmrsSpaBase() + 'ward';
+
+  return (
+    <main>
+      <BrowserRouter basename={wardViewBasename}>
+        <Routes>
+          <Route path="/" element={<WardView />} />
+          <Route path="/:locationUuid" element={<WardView />} />
+        </Routes>
+      </BrowserRouter>
+    </main>
+  );
+};
+
+export default Root;

package/src/routes.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0"
+  },
+  "optionalBackendDependencies":{
+     "bedmanagement":{
+      "version": "^5.14.0 || 5.14.0-SNAPSHOT",
+      "feature": {
+        "flagName": "bedmanagement-module",
+        "label":"Ward App Patient Service",
+        "description": "This module, if installed, provides services for managing patients admitted to the ward."
+      }
+     }
+  },
+  "extensions": [
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "ward"
+    }
+  ]
+}

package/src/types/index.ts

@@ -0,0 +1,125 @@
+import {
+  type OpenmrsResource,
+  type OpenmrsResourceStrict,
+  type Person,
+  type Visit,
+  type Location,
+  type Patient,
+} from '@openmrs/esm-framework';
+import type React from 'react';
+
+export interface WardPatientCardProps {
+  patient: Patient;
+  bed: Bed;
+}
+
+export type WardPatientCardRow = React.FC<WardPatientCardProps>;
+export type WardPatientCardElement = React.FC<WardPatientCardProps>;
+
+export const patientCardElementTypes = [
+  'bed-number',
+  'patient-name',
+  'patient-age',
+  'patient-address',
+  'admission-time',
+] as const;
+export type PatientCardElementType = (typeof patientCardElementTypes)[number];
+
+// server-side types defined in openmrs-module-bedmanagement:
+
+export interface AdmissionLocation {
+  totalBeds: number;
+  occupiedBeds: number;
+  ward: Location;
+  bedLayouts: Array<BedLayout>;
+}
+export interface Bed {
+  id: number;
+  uuid: string;
+  bedNumber: string;
+  bedType: BedType;
+  row: number;
+  column: number;
+  status: BedStatus;
+}
+
+export interface BedLayout {
+  rowNumber: number;
+  columnNumber: number;
+  bedNumber: string;
+  bedId: number;
+  bedUuid: string;
+  status: BedStatus;
+  bedType: BedType;
+  location: string;
+  patient: Patient;
+  bedTagMaps: BedTagMap[];
+}
+
+export interface BedType {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+  resourceVersion: string;
+}
+
+interface BedTagMap {
+  uuid: string;
+  bedTag: {
+    id: number;
+    name: string;
+    uuid: string;
+    resourceVersion: string;
+  };
+}
+
+export type BedStatus = 'AVAILABLE' | 'OCCUPIED';
+
+// TODO: Move these types to esm-core
+export interface Observation extends OpenmrsResourceStrict {
+  concept: OpenmrsResource;
+  person: Person;
+  obsDatetime: string;
+  accessionNumber: string;
+  obsGroup: Observation;
+  valueCodedName: OpenmrsResource; // ConceptName
+  groupMembers: Array<Observation>;
+  comment: string;
+  location: Location;
+  order: OpenmrsResource; // Order
+  encounter: Encounter;
+  voided: boolean;
+}
+
+export interface Encounter extends OpenmrsResourceStrict {
+  encounterDatetime?: string;
+  patient?: Patient;
+  location?: Location;
+  form?: OpenmrsResource;
+  encounterType?: EncounterType;
+  obs?: Observation;
+  orders?: any;
+  voided?: boolean;
+  visit?: Visit;
+  encounterProviders?: Array<EncounterProvider>;
+  diagnoses?: any;
+}
+
+export interface EncounterProvider extends OpenmrsResourceStrict {
+  provider?: OpenmrsResource;
+  encounterRole?: EncounterRole;
+  voided?: boolean;
+}
+
+export interface EncounterType extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}
+
+export interface EncounterRole extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}

package/src/ward-patient-card/row-elements/row-elements.scss

@@ -0,0 +1,16 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.bedNumber {
+  @include type.type-style('heading-compact-01');
+  border-radius: 50%;
+  background-color: $color-blue-10;
+  color: $color-blue-60-2;
+  padding: spacing.$spacing-04;
+  width: spacing.$spacing-03;
+  height: spacing.$spacing-03;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/ward-patient-card/row-elements/ward-patient-age.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatientCardElement } from '../../types';
+
+const WardPatientAge: WardPatientCardElement = ({ patient }) => {
+  const { t } = useTranslation();
+  // TODO: BED-10
+  // make the backend return patient.person.birthdate so we can use the age() function to calculate age
+  return (
+    <div>
+      {t('yearsOld', '{{age}} yrs', {
+        age: patient?.person?.age,
+      })}
+    </div>
+  );
+};
+
+export default WardPatientAge;

package/src/ward-patient-card/row-elements/ward-patient-bed-number.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from '../ward-patient-card.scss';
+import { type WardPatientCardElement } from '../../types';
+
+const WardPatientBedNumber: WardPatientCardElement = ({ bed }) => {
+  return (
+    <div className={styles.bedNumberBox}>
+      <span className={styles.wardPatientBedNumber}>{bed.bedNumber}</span>
+    </div>
+  );
+};
+
+export default WardPatientBedNumber;

package/src/ward-patient-card/row-elements/ward-patient-header-address.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { type PatientAddressElementConfig } from '../../config-schema';
+
+const wardPatientAddress = (config: PatientAddressElementConfig) => {
+  const wardPatientAddress: WardPatientCardElement = ({ patient }) => {
+    const { addressFields } = config;
+
+    const preferredAddress = patient?.person?.preferredAddress;
+
+    return (
+      <div className={styles.wardPatientAddress}>
+        {addressFields?.map((field, i) => <div key={i}>{preferredAddress?.[field] as string}</div>)}
+      </div>
+    );
+  };
+
+  return wardPatientAddress;
+};
+
+export default wardPatientAddress;

package/src/ward-patient-card/row-elements/ward-patient-name.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+
+const WardPatientName: WardPatientCardElement = ({ patient }) => {
+  // TODO: BED-10
+  // make server return patient.display and use that instead
+  const { givenName, familyName } = patient?.person?.preferredName;
+  const name = `${givenName} ${familyName}`;
+  return <div className={styles.wardPatientName}>{name}</div>;
+};
+
+export default WardPatientName;

package/src/ward-patient-card/ward-patient-card-row.resources.tsx

@@ -0,0 +1,85 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import {
+  builtInPatientCardElements,
+  defaultPatientCardElementConfig,
+  type PatientCardElementDefinition,
+  type WardConfigObject,
+} from '../config-schema';
+import type { WardPatientCardElement, WardPatientCardProps } from '../types';
+import WardPatientAge from './row-elements/ward-patient-age';
+import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
+import wardPatientAddress from './row-elements/ward-patient-header-address';
+import WardPatientName from './row-elements/ward-patient-name';
+import React from 'react';
+import styles from './ward-patient-card.scss';
+
+export function usePatientCardRows(location: string) {
+  const { wardPatientCards } = useConfig<WardConfigObject>();
+  const patientCardRows = useMemo(() => {
+    const { cardDefinitions, patientCardElementDefinitions } = wardPatientCards;
+
+    // map of patientCardElementId to its corresponding React component
+    const patientCardElementsMap = new Map<string, WardPatientCardElement>();
+    for (const elementType of builtInPatientCardElements) {
+      patientCardElementsMap.set(
+        elementType,
+        getPatientCardElementFromDefinition({
+          id: elementType,
+          elementType,
+          config: defaultPatientCardElementConfig,
+        }),
+      );
+    }
+    for (const patientCardElementDef of patientCardElementDefinitions) {
+      patientCardElementsMap.set(patientCardElementDef.id, getPatientCardElementFromDefinition(patientCardElementDef));
+    }
+
+    const cardDefinition = cardDefinitions.find((cardDef) => {
+      const appliedTo = cardDef.appliedTo;
+
+      return appliedTo == null || appliedTo.some((criteria) => criteria.location == location);
+    });
+
+    const ret = cardDefinition.rows.map((row) => {
+      const { rowType, elements } = row;
+      const patientCardElements = elements.map((patientCardElementId) => {
+        const slot = patientCardElementsMap.get(patientCardElementId);
+        return slot;
+      });
+
+      const WardPatientCardRow: React.FC<WardPatientCardProps> = ({ patient, bed }) => {
+        return (
+          <div className={rowType == 'header' ? styles.wardPatientCardHeader : ''}>
+            {patientCardElements.map((PatientCardElement, i) => (
+              <PatientCardElement patient={patient} bed={bed} key={i} />
+            ))}
+          </div>
+        );
+      };
+
+      return WardPatientCardRow;
+    });
+    return ret;
+  }, [location, wardPatientCards]);
+
+  return patientCardRows;
+}
+
+function getPatientCardElementFromDefinition(
+  patientCardElementDef: PatientCardElementDefinition,
+): WardPatientCardElement {
+  const { elementType, config } = patientCardElementDef;
+  switch (elementType) {
+    case 'bed-number':
+      return WardPatientBedNumber;
+    case 'patient-name':
+      return WardPatientName;
+    case 'patient-age':
+      return WardPatientAge;
+    case 'patient-address': {
+      // TODO: configure address fields to pass in
+      return wardPatientAddress(config);
+    }
+  }
+}

package/src/ward-patient-card/ward-patient-card.scss

@@ -0,0 +1,71 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wardPatientCard {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: spacing.$spacing-02;
+  background-color: $ui-02;
+  padding: spacing.$spacing-04;
+}
+
+.wardPatientCardHeader {
+  @extend .dotSeparatedChildren;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wardPatientName {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  &::before {
+    content: '' !important;
+  }
+}
+
+.wardPatientBedNumber {
+  @include type.type-style('heading-compact-01');
+  border-radius: 50%;
+  color: $ui-02;
+  background-color: $color-blue-60-2;
+  padding: spacing.$spacing-04;
+  width: spacing.$spacing-04;
+  height: spacing.$spacing-04;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &.empty {
+    background-color: $color-blue-10;
+    color: $color-blue-60-2;
+  }
+}
+
+.bedNumberBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wardPatientAddress {
+  @extend .dotSeparatedChildren;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: spacing.$spacing-02;
+}
+
+.dotSeparatedChildren {
+  > div:not(div:first-of-type) {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '·';
+      padding: 0 spacing.$spacing-02;
+    }
+  }
+}

package/src/ward-patient-card/ward-patient-card.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { type WardPatientCardProps } from '../types';
+import { usePatientCardRows } from './ward-patient-card-row.resources';
+import styles from './ward-patient-card.scss';
+
+const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
+  const { locationUuid } = useParams();
+  const patientCardRows = usePatientCardRows(locationUuid);
+
+  return (
+    <div className={styles.wardPatientCard}>
+      {patientCardRows.map((WardPatientCardRow) => (
+        <WardPatientCardRow {...props} />
+      ))}
+    </div>
+  );
+};
+
+export default WardPatientCard;

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

@@ -0,0 +1,18 @@
+import { type Patient } from '@openmrs/esm-framework';
+import React from 'react';
+import EmptyBed from '../beds/empty-bed.component';
+import { type Bed } from '../types';
+import OccupiedBed from '../beds/occupied-bed.component';
+
+interface WardBedProps {
+  bed: Bed;
+  patients: Patient[];
+}
+
+const WardBed: React.FC<WardBedProps> = ({ bed, patients }) => {
+  return patients?.length > 0 ? 
+    <OccupiedBed bed={bed} patients={patients} />
+    : <EmptyBed bed={bed} />;
+};
+
+export default WardBed;

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

@@ -0,0 +1,100 @@
+import { InlineNotification } from '@carbon/react';
+import { useFeatureFlag, useLocations, useSession, type Location } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
+import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import WardBed from './ward-bed.component';
+import { bedLayoutToBed, filterBeds } from './ward-view.resource';
+import styles from './ward-view.scss';
+
+const WardView = () => {
+  const { locationUuid: locationUuidFromUrl } = useParams();
+  const { sessionLocation } = useSession();
+  const allLocations = useLocations();
+  const { t } = useTranslation();
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+  const locationFromUrl = allLocations.find((l) => l.uuid === locationUuidFromUrl);
+  const invalidLocation = Boolean(locationUuidFromUrl && !locationFromUrl);
+  const location = (locationFromUrl ?? sessionLocation) as any as Location;
+  //TODO:Display patients with admitted status (based on their observations) that have no beds assigned
+  if (!isBedManagementModuleInstalled) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.wardView}>
+      <div className={styles.wardViewHeader}>
+        <div className={styles.wardViewHeaderLocationDisplay}>
+          <h4>{location?.display}</h4>
+        </div>
+        <div className={styles.wardViewHeaderAdmissionRequestMenuBar}>{/* TODO: Admission Request bar */}</div>
+      </div>
+      <div className={styles.wardViewMain}>
+        {invalidLocation ? (
+          <InlineNotification
+            kind="error"
+            lowContrast={true}
+            title={t('invalidLocationSpecified', 'Invalid location specified')}
+            subtitle={t('unknownLocationUuid', 'Unknown location uuid: {{locationUuidFromUrl}}', {
+              locationUuidFromUrl,
+            })}
+          />
+        ) : (
+          <WardViewByLocation location={location} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const WardViewByLocation = ({ location }: { location: Location }) => {
+  const { admissionLocation, isLoading, error } = useAdmissionLocation(location.uuid);
+  const { t } = useTranslation();
+
+  if (admissionLocation) {
+    const bedLayouts = filterBeds(admissionLocation);
+
+    return (
+      <>
+        {bedLayouts.map((bedLayout, i) => {
+          const { patient } = bedLayout;
+          const bed = bedLayoutToBed(bedLayout);
+          return <WardBed key={bed.uuid} bed={bed} patients={patient ? [patient] : null} />;
+        })}
+        {bedLayouts.length == 0 && (
+          <InlineNotification
+            kind="warning"
+            lowContrast={true}
+            title={t('noBedsConfigured', 'No beds configured for this location')}
+          />
+        )}
+      </>
+    );
+  } else if (isLoading) {
+    return (
+      <>
+        {Array(20)
+          .fill(0)
+          .map((_, i) => (
+            <EmptyBedSkeleton key={i} />
+          ))}
+      </>
+    );
+  } else {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast={true}
+        title={t('errorLoadingWardLocation', 'Error loading ward location')}
+        subtitle={
+          error?.message ??
+          t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
+        }
+      />
+    );
+  }
+};
+
+export default WardView;

package/src/ward-view/ward-view.resource.ts

@@ -0,0 +1,24 @@
+import type { AdmissionLocation, Bed, BedLayout } from '../types';
+
+// the server side has 2 slightly incompatible types for Bed
+export function bedLayoutToBed(bedLayout: BedLayout): Bed {
+  return {
+    id: bedLayout.bedId,
+    uuid: bedLayout.bedUuid,
+    bedNumber: bedLayout.bedNumber,
+    bedType: bedLayout.bedType,
+    row: bedLayout.rowNumber,
+    column: bedLayout.columnNumber,
+    status: bedLayout.status,
+  };
+}
+
+export function filterBeds(admissionLocation: AdmissionLocation): BedLayout[] {
+  // admissionLocation.bedLayouts can contain row+column positions with no bed,
+  // filter out layout positions with no real bed
+  let collator = new Intl.Collator([], { numeric: true });
+  const bedLayouts = admissionLocation.bedLayouts
+    .filter((bl) => bl.bedId)
+    .sort((bedA, bedB) => collator.compare(bedA.bedNumber, bedB.bedNumber));
+  return bedLayouts;
+}

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

@@ -0,0 +1,36 @@
+@use '@carbon/styles/scss/spacing';
+
+.wardView {
+  background-color: #e4e4e4;
+  position: absolute;
+  top: var(--omrs-topnav-height);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 spacing.$spacing-05;
+}
+
+.wardViewHeader {
+  display: flex;
+  margin: spacing.$spacing-05 0;
+}
+
+.wardViewHeaderLocationDisplay {
+  flex: 1;
+}
+
+.wardViewHeaderAdmissionRequestMenuBar {
+  background-color: black;
+  color: white;
+  padding: 4px 0 4px 12px;
+}
+
+.wardViewMain {
+  background-color: #e4e4e4;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  display: grid;
+  gap: spacing.$spacing-05;
+  padding: spacing.$spacing-05;
+}