@kenyaemr/esm-ward-app 7.0.3-pre.88 → 7.0.3-pre.94

package/src/hooks/useInpatientAdmission.ts

@@ -0,0 +1,28 @@
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type InpatientAdmissionFetchResponse } from '../types';
+import useWardLocation from './useWardLocation';
+
+export function useInpatientAdmission() {
+  const { location } = useWardLocation();
+
+  // prettier-ignore
+  const customRepresentation =
+    'custom:(visit,' +
+      'patient:(uuid,identifiers,voided,' +
+        'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' + 
+      'encounterAssigningToCurrentInpatientLocation:(encounterDatetime),' +
+      'firstAdmissionOrTransferEncounter:(encounterDatetime),' +
+    ')';
+  const { data, ...rest } = useSWR<FetchResponse<InpatientAdmissionFetchResponse>, Error>(
+    location
+      ? `${restBaseUrl}/emrapi/inpatient/admission?currentInpatientLocation=${location.uuid}&v=${customRepresentation}`
+      : null,
+    openmrsFetch,
+  );
+
+  return {
+    inpatientAdmissions: data?.data?.results,
+    ...rest,
+  };
+}

package/src/hooks/useInpatientRequest.ts

@@ -1,13 +1,43 @@
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import type { DispositionType, InpatientRequestFetchResponse } from '../types';
 import useSWR from 'swr';
-import type { InpatientRequest } from '../types';
+import useWardLocation from './useWardLocation';
+import { useMemo } from 'react';
 
-export function useInpatientRequest(locationUuid: string) {
-  const apiUrl = `/ws/rest/emrapi/inpatient/admissionRequests?admissionLocation=${locationUuid}`;
-  const { data, ...rest } = useSWR<{ data: Array<InpatientRequest> }, Error>(apiUrl, openmrsFetch);
+// prettier-ignore
+const defaultRep =
+  'custom:(' +
+    'dispositionLocation,' +
+    'dispositionType,' +
+    'disposition,' +
+    'dispositionEncounter:full,' +
+    'patient:(uuid,identifiers,voided,' +
+      'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' + 
+    'dispositionObsGroup,' +
+    'visit)';
 
-  return {
-    inpatientRequests: data?.data || null,
-    ...rest,
-  };
+export function useInpatientRequest(
+  dispositionType: Array<DispositionType> = ['ADMIT', 'TRANSFER'],
+  rep: string = defaultRep,
+) {
+  const { location } = useWardLocation();
+  const searchParams = new URLSearchParams();
+  searchParams.set('dispositionType', dispositionType.join(','));
+  searchParams.set('dispositionLocation', location?.uuid);
+  searchParams.set('v', rep);
+
+  const { data, ...rest } = useSWR<FetchResponse<InpatientRequestFetchResponse>, Error>(
+    location?.uuid ? `${restBaseUrl}/emrapi/inpatient/request?${searchParams.toString()}` : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      inpatientRequests: data?.data?.results,
+      ...rest,
+    }),
+    [data, rest],
+  );
+
+  return results;
 }

package/src/hooks/useLocation.test.ts

@@ -0,0 +1,38 @@
+import useSWRImmutable from 'swr/immutable';
+import { renderHook } from '@testing-library/react';
+import { restBaseUrl } from '@openmrs/esm-framework';
+import useLocation from './useLocation';
+
+jest.mock('swr/immutable', () =>
+  jest.fn().mockReturnValue({
+    data: {},
+    error: null,
+    isValidating: false,
+    mutate: jest.fn(),
+  }),
+);
+
+const useSWRImmutableMock = useSWRImmutable as jest.Mock;
+
+describe('useLocation hook', () => {
+  it('should call useLocation', () => {
+    const { result } = renderHook(() => useLocation('testUUID'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(
+      `${restBaseUrl}/location/testUUID?v=custom:(display,uuid)`,
+      expect.any(Function),
+    );
+  });
+
+  it('should call useLocation with the given custom representation', () => {
+    const { result } = renderHook(() => useLocation('testUUID', 'custom:(display,uuid,links)'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(
+      `${restBaseUrl}/location/testUUID?v=custom:(display,uuid,links)`,
+      expect.any(Function),
+    );
+  });
+
+  it('should call useSWR with key=null', () => {
+    const { result } = renderHook(() => useLocation(null, 'custom:(display,uuid,links)'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(null, expect.any(Function));
+  });
+});

package/src/hooks/useLocation.ts

@@ -0,0 +1,9 @@
+import { type Location, openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export default function useLocation(locationUuid: string, rep: string = 'custom:(display,uuid)') {
+  return useSWRImmutable<FetchResponse<Location>>(
+    locationUuid ? `${restBaseUrl}/location/${locationUuid}?v=${rep}` : null,
+    openmrsFetch,
+  );
+}

package/src/hooks/useLocations.ts

@@ -0,0 +1,54 @@
+import { type FetchResponse, fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { useEffect, useMemo, useState } from 'react';
+import useSWRImmutable from 'swr/immutable';
+
+interface FhirLocation {
+  fullUrl: string;
+  resource: {
+    resourceType: 'Location';
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
+interface FhirResponse {
+  resourceType: 'Bundle';
+  id: '6a107c31-d760-4df0-bb70-89ad742225ca';
+  meta: {
+    lastUpdated: '2024-08-08T06:28:01.495+00:00';
+  };
+  type: 'searchset';
+  total: number;
+  link: Array<{
+    relation: 'self' | 'prev' | 'next';
+    url: string;
+  }>;
+  entry: Array<FhirLocation>;
+}
+
+export default function useLocations(filterCriteria: Array<Array<string>> = [], skip: boolean = false) {
+  const [totalLocations, setTotalLocations] = useState(0);
+  const [url, setUrl] = useState(`${fhirBaseUrl}/Location`);
+  const searchParams = new URLSearchParams(filterCriteria);
+  const urlWithSearchParams = `${url}?${searchParams.toString()}`;
+  const { data, ...rest } = useSWRImmutable<FetchResponse<FhirResponse>>(
+    !skip ? urlWithSearchParams : null,
+    openmrsFetch,
+  );
+
+  useEffect(() => {
+    if (data?.data) {
+      setTotalLocations(data.data.total);
+    }
+  }, [data]);
+
+  const results = useMemo(() => {
+    return {
+      locations: data?.data?.entry?.map((entry) => entry.resource),
+      totalLocations,
+      ...rest,
+    };
+  }, [data, rest, totalLocations]);
+  return results;
+}

package/src/hooks/useMostRecentObs.ts

@@ -0,0 +1,27 @@
+import useSWR from 'swr';
+import { type Observation } from '../types';
+import { type Link, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+interface ObsSearchCriteria {
+  patient: string;
+  concept: string;
+}
+
+export function useMostRecentObs(criteria?: ObsSearchCriteria, representation = 'default') {
+  const params = new URLSearchParams({
+    ...criteria,
+    v: representation,
+    limit: '1',
+  });
+
+  const apiUrl = `${restBaseUrl}/obs?${params}`;
+
+  const { data, ...rest } = useSWR<
+    { data: { results: Array<Observation>; totalCount: number; links: Array<Link> } },
+    Error
+  >(apiUrl, openmrsFetch);
+
+  const obs = data?.data?.results?.[0];
+
+  return { data: obs, ...rest };
+}

package/src/hooks/useRestPatient.ts

@@ -0,0 +1,18 @@
+import { openmrsFetch, restBaseUrl, type FetchResponse, type Patient } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+
+export default function useRestPatient(patientUuid: string) {
+  const { data, ...rest } = useSWRImmutable<FetchResponse<Patient>>(
+    patientUuid ? `${restBaseUrl}/patient/${patientUuid}` : null,
+    openmrsFetch,
+  );
+  const results = useMemo(
+    () => ({
+      patient: data?.data,
+      ...rest,
+    }),
+    [data, rest],
+  );
+  return results;
+}

package/src/hooks/useWardLocation.test.ts

@@ -0,0 +1,108 @@
+import { renderHook } from '@testing-library/react';
+import { type FetchResponse, useSession } from '@openmrs/esm-framework';
+import { mockSession } from '__mocks__';
+import { useParams } from 'react-router-dom';
+import useWardLocation from './useWardLocation';
+import useLocation from './useLocation';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useSession: jest.fn(),
+}));
+jest.mock('react-router-dom', () => ({
+  useParams: jest.fn(),
+}));
+jest.mock('./useLocation', () => jest.fn());
+
+const mockUseParams = jest.mocked(useParams);
+const mockUseSession = jest.mocked(useSession);
+const mockUseLocation = useLocation as jest.Mock;
+
+describe('useWardLocation', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession.data);
+  });
+
+  it('returns session location when locationUuidFromUrl is not provided', async () => {
+    mockUseParams.mockReturnValue({});
+    mockUseLocation.mockReturnValue({
+      data: null,
+      error: null,
+      isLoading: null,
+      isValidating: null,
+      mutate: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+    expect(result.current.location).toBe(mockSession.data.sessionLocation);
+  });
+
+  it('returns location from useLocation when locationUuidFromUrl is provided', async () => {
+    mockUseParams.mockReturnValue({ locationUuid: 'some-location-uuid' });
+    mockUseLocation.mockReturnValue({
+      data: {
+        data: {
+          display: 'Test Location',
+          name: 'Test Location',
+          uuid: 'test-location-uuid',
+        },
+      },
+      error: null,
+      isLoading: false,
+      isValidating: null,
+      mutate: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.location).toEqual({
+      display: 'Test Location',
+      name: 'Test Location',
+      uuid: 'test-location-uuid',
+    });
+    expect(result.current.invalidLocation).toBeFalsy();
+  });
+
+  it('handles loading state correctly', async () => {
+    mockUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockUseLocation.mockReturnValue({
+      data: null,
+      error: null,
+      isLoading: true,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+    expect(result.current.isLoadingLocation).toBe(true);
+  });
+
+  it('handles error state correctly when fetching location fails', async () => {
+    const error = new Error('Error fetching location');
+    mockUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockUseLocation.mockReturnValue({
+      data: null,
+      error,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+    expect(result.current.errorFetchingLocation).toBe(error);
+  });
+
+  it('identifies invalid location correctly', async () => {
+    const error = new Error('Error fetching location');
+    mockUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockUseLocation.mockReturnValue({
+      data: null,
+      error,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+    expect(result.current.invalidLocation).toBeTruthy();
+  });
+});

package/src/hooks/useWardLocation.ts

@@ -0,0 +1,26 @@
+import { type Location, useSession } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import useLocation from './useLocation';
+
+export default function useWardLocation(): {
+  location: Location;
+  isLoadingLocation: boolean;
+  errorFetchingLocation: Error | undefined;
+  invalidLocation: boolean;
+} {
+  const { locationUuid: locationUuidFromUrl } = useParams();
+  const { sessionLocation } = useSession();
+  const {
+    data: locationResponse,
+    isLoading: isLoadingLocation,
+    error: errorFetchingLocation,
+  } = useLocation(locationUuidFromUrl ? locationUuidFromUrl : null);
+  const invalidLocation = locationUuidFromUrl && errorFetchingLocation;
+
+  return {
+    location: locationUuidFromUrl ? locationResponse?.data : sessionLocation,
+    isLoadingLocation,
+    errorFetchingLocation,
+    invalidLocation,
+  };
+}

package/src/index.ts

@@ -1,11 +1,20 @@
-import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs, registerFeatureFlag } from '@openmrs/esm-framework';
+import {
+  defineConfigSchema,
+  defineExtensionConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  registerBreadcrumbs,
+  registerFeatureFlag,
+} from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
+import { admissionRequestNoteRowConfigSchema } from './config-schema-admission-request-note';
+import { coloredObsTagsCardRowConfigSchema } from './config-schema-extension-colored-obs-tags';
+import { moduleName } from './constant';
+import { createDashboardLink } from './createDashboardLink.component';
 import rootComponent from './root.component';
-import admissionRequestsWorkspace from "./ward-workspace/admission-requests-workspace.component"
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-const moduleName = '@kenyaemr/esm-ward-app';
 
 const options = {
   featureName: 'ward',
@@ -14,10 +23,68 @@ const options = {
 
 export const root = getSyncLifecycle(rootComponent, options);
 
-export const admissionRequestWorkspace = getSyncLifecycle(admissionRequestsWorkspace, options);
+export const wardDashboardLink = getSyncLifecycle(createDashboardLink({ name: 'ward', title: 'wards' }), options);
+
+// t('admissionRequests', 'Admission Requests')
+export const admissionRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/admission-request-workspace/admission-requests.workspace'),
+  options,
+);
+
+export const admitPatientFormWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace'),
+  options,
+);
+
+// Title for this workspace is set dynamically
+export const wardPatientWorkspace = getAsyncLifecycle(
+  () => import('./ward-patient-workspace/ward-patient.workspace'),
+  options,
+);
+
+// t("inpatientNotesWorkspaceTitle", "In-patient notes")
+export const wardPatientNotesWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/ward-patient-notes/notes.workspace'),
+  options,
+);
+
+export const wardPatientActionButtonExtension = getAsyncLifecycle(
+  () => import('./ward-patient-workspace/ward-patient-action-button.extension'),
+  options,
+);
+
+export const wardPatientNotesActionButtonExtension = getAsyncLifecycle(
+  () => import('./ward-workspace/ward-patient-notes/notes-action-button.extension'),
+  options,
+);
+
+export const coloredObsTagCardRowExtension = getAsyncLifecycle(
+  () => import('./ward-patient-card/card-rows/colored-obs-tags-card-row.extension'),
+  options,
+);
+
+export const admissionRequestNoteRowExtension = getAsyncLifecycle(
+  () => import('./ward-patient-card/card-rows/admission-request-note.extension'),
+  options,
+);
+
+// t('transfers', 'Transfers')
+export const patientTransferAndSwapWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace'),
+  options,
+);
+
+export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/transfer-workspace-siderail.component'),
+  options,
+);
+
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);
+  defineExtensionConfigSchema('colored-obs-tags-card-row', coloredObsTagsCardRowConfigSchema);
+  defineExtensionConfigSchema('admission-request-note-card-row', admissionRequestNoteRowConfigSchema);
+
   registerFeatureFlag(
     'bedmanagement-module',
     'Bed Management Module',

package/src/location-selector/location-selector.component.tsx

@@ -0,0 +1,118 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { IconButton, RadioButton, RadioButtonGroup, RadioButtonSkeleton, Search } from '@carbon/react';
+import { type RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  isDesktop,
+  ResponsiveWrapper,
+  useDebounce,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import useEmrConfiguration from '../hooks/useEmrConfiguration';
+import useLocations from '../hooks/useLocations';
+import styles from './location-selector.scss';
+
+interface LocationSelectorProps extends RadioButtonGroupProps {}
+
+export default function LocationSelector(props: LocationSelectorProps) {
+  const size = 5;
+  const { t } = useTranslation();
+  const { emrConfiguration, isLoadingEmrConfiguration } = useEmrConfiguration();
+  const isTablet = !isDesktop(useLayoutType());
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const [page, setPage] = useState(1);
+  const filterCriteria: Array<Array<string>> = useMemo(() => {
+    const criteria = [];
+    if (debouncedSearchTerm) {
+      criteria.push(['name:contains', debouncedSearchTerm]);
+    }
+    criteria.push(['_count', size.toString()]);
+    if (emrConfiguration) {
+      criteria.push(['_tag', emrConfiguration.supportsTransferLocationTag.name]);
+    }
+    if (page > 1) {
+      criteria.push(['_getpagesoffset', ((page - 1) * size).toString()]);
+    }
+    return criteria;
+  }, [debouncedSearchTerm, page, emrConfiguration]);
+  const { locations, isLoading, totalLocations } = useLocations(filterCriteria, !emrConfiguration);
+
+  const handlePageChange = useCallback(
+    ({ page: newPage }) => {
+      setPage(newPage);
+    },
+    [setPage, page],
+  );
+  const handleSearch = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(event.target.value);
+    },
+    [setSearchTerm],
+  );
+  return (
+    <div className={styles.locationSelector}>
+      <ResponsiveWrapper>
+        <Search
+          onChange={handleSearch}
+          value={searchTerm}
+          placeholder={t('searchLocations', 'Search locations')}
+          size={isTablet ? 'lg' : 'md'}
+        />
+      </ResponsiveWrapper>
+      {isLoading || isLoadingEmrConfiguration ? (
+        <div className={styles.radioButtonGroup}>
+          <RadioButtonSkeleton />
+          <RadioButtonSkeleton />
+          <RadioButtonSkeleton />
+          <RadioButtonSkeleton />
+          <RadioButtonSkeleton />
+        </div>
+      ) : (
+        <ResponsiveWrapper>
+          <RadioButtonGroup {...props} className={styles.radioButtonGroup} orientation="vertical">
+            {locations?.length > 0 ? (
+              locations?.map((location) => (
+                <RadioButton key={location.id} labelText={location.name} value={location.id} />
+              ))
+            ) : (
+              <span className={styles.bodyShort01}>{t('noLocationsFound', 'No locations found')}</span>
+            )}
+          </RadioButtonGroup>
+        </ResponsiveWrapper>
+      )}
+      {totalLocations > 5 && (
+        <div className={styles.pagination}>
+          <span className={styles.bodyShort01}>
+            {t('showingLocations', '{{start}}-{{end}} of {{count}} locations', {
+              start: (page - 1) * size + 1,
+              end: Math.min(page * size, totalLocations),
+              count: totalLocations,
+            })}
+          </span>
+          <div>
+            <IconButton
+              className={classNames(styles.button, styles.buttonLeft)}
+              disabled={page === 1}
+              kind="ghost"
+              label={t('previousPage', 'Previous page')}
+              onClick={() => handlePageChange({ page: page - 1 })}>
+              <ChevronLeftIcon />
+            </IconButton>
+            <IconButton
+              className={styles.button}
+              disabled={page * size >= totalLocations}
+              kind="ghost"
+              label={t('nextPage', 'Next page')}
+              onClick={() => handlePageChange({ page: page + 1 })}>
+              <ChevronRightIcon />
+            </IconButton>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/location-selector/location-selector.scss

@@ -0,0 +1,48 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.locationSelector {
+  border: 1px solid $ui-03;
+  background-color: $ui-01;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .locationSelector {
+  background-color: $ui-02;
+}
+
+.radioButtonGroup {
+  padding: layout.$spacing-03 layout.$spacing-05;
+  width: 100%;
+
+  :global(.cds--radio-button-wrapper) {
+    padding: layout.$spacing-02;
+
+    :global(.cds--radio-button__label) {
+      align-items: center;
+    }
+  }
+}
+
+.pagination {
+  display: flex;
+  padding-left: layout.$spacing-05;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid $ui-03;
+}
+
+.button {
+  svg {
+    fill: $ui-05 !important;
+  }
+}
+
+.buttonLeft {
+  border-right: 1px solid $ui-03 !important;
+  border-left: 1px solid $ui-03 !important;
+}
+
+.borderedButton {
+  border-left: 1px solid $ui-03;
+  border-right: 1px solid $ui-03;
+}

package/src/root.component.tsx

@@ -3,7 +3,8 @@ 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';
+  // t('wards', 'Wards')
+  const wardViewBasename = window.getOpenmrsSpaBase() + 'home/ward';
 
   return (
     <main>