@kenyaemr/esm-ward-app 8.5.1-pre.50 → 8.5.1-pre.61

package/src/in-patient/encounter-observations/visit.resource.tsx

@@ -0,0 +1,161 @@
+import type { OpenmrsResource, Privilege } from '@openmrs/esm-framework';
+
+export interface MappedEncounter {
+  id: string;
+  datetime: string;
+  encounterType: string;
+  editPrivilege: string;
+  form: OpenmrsResource;
+  obs: Array<Observation>;
+  provider: string;
+  visitUuid: string;
+  visitType: string;
+  visitTypeUuid?: string;
+  visitStartDatetime?: string;
+  visitStopDatetime?: string;
+}
+
+export interface Encounter {
+  uuid: string;
+  diagnoses: Array<Diagnosis>;
+  encounterDatetime: string;
+  encounterProviders: Array<EncounterProvider>;
+  encounterType: {
+    uuid: string;
+    display: string;
+    viewPrivilege: Privilege;
+    editPrivilege: Privilege;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+  form: OpenmrsResource;
+  patient: OpenmrsResource;
+}
+
+export interface EncounterProvider {
+  uuid: string;
+  display: string;
+  encounterRole: {
+    uuid: string;
+    display: string;
+  };
+  provider: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+    display: string;
+  }>;
+  value: any;
+  obsDatetime?: string;
+}
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dateStopped?: Date | null;
+  dose: number;
+  dosingInstructions: string | null;
+  dosingType?: 'org.openmrs.FreeTextDosingInstructions' | 'org.openmrs.SimpleDosingInstructions';
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+    display: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface Note {
+  concept: OpenmrsResource;
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+}
+
+export interface Diagnosis {
+  certainty: string;
+  display: string;
+  encounter: OpenmrsResource;
+  links: Array<any>;
+  patient: OpenmrsResource;
+  rank: number;
+  resourceVersion: string;
+  uuid: string;
+  voided: boolean;
+  diagnosis: {
+    coded: {
+      display: string;
+      links: Array<any>;
+    };
+  };
+}

package/src/in-patient/in-patient-table/in-patient-table.component.tsx

@@ -0,0 +1,155 @@
+import React, { useMemo } from 'react';
+import {
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableExpandHeader,
+  TableHeader,
+  TableBody,
+  TableExpandRow,
+  TableExpandedRow,
+  TableCell,
+  Button,
+} from '@carbon/react';
+import { Edit } from '@carbon/react/icons';
+import { type Encounter } from '../encounter-observations/visit.resource';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, launchWorkspace, usePagination, type Visit } from '@openmrs/esm-framework';
+import EncounterObservations from '../encounter-observations';
+import { EmptyState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import styles from './in-patient-table.scss';
+import { mutate } from 'swr';
+
+type InPatientTableProps = {
+  tableRows: Array<Encounter>;
+  currentVisit: Visit;
+};
+
+const InPatientTable: React.FC<InPatientTableProps> = ({ tableRows }) => {
+  const { t } = useTranslation();
+  const headers = [
+    { key: 'dateTime', header: t('dateDate', 'Date & time') },
+    { key: 'formName', header: t('formName', 'Form Name') },
+    { key: 'provider', header: t('provider', 'Provider') },
+    { key: 'encounterType', header: t('encounterType', 'Encounter Type') },
+  ];
+
+  const { results, goTo, currentPage } = usePagination(tableRows, 10);
+
+  const paginatedRows = useMemo(() => {
+    return results.map((row) => ({
+      id: row.uuid,
+      dateTime: formatDatetime(new Date(row.encounterDatetime), {
+        mode: 'standard',
+      }),
+      formName: row.form.display,
+      provider: row.encounterProviders[0]?.provider?.person?.display,
+      encounterType: row.encounterType.display,
+    }));
+  }, [results]);
+
+  const onEncounterEdit = (encounter: Encounter) => {
+    launchWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: encounter.form.display,
+      mutateForm: () => {
+        mutate((key) => typeof key === 'string' && key.startsWith(`/ws/rest/v1/encounter`), undefined, {
+          revalidate: true,
+        });
+      },
+      formInfo: {
+        encounterUuid: encounter.uuid,
+        formUuid: encounter?.form?.uuid,
+        additionalProps: {},
+      },
+    });
+  };
+
+  if (results.length === 0) {
+    return (
+      <EmptyState displayText={t('noEncounters', 'No encounters found')} headerTitle={t('encounters', 'Encounters')} />
+    );
+  }
+
+  return (
+    <>
+      <DataTable size="sm" useZebraStyles rows={paginatedRows} headers={headers}>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <TableContainer
+            title={t('encounters', 'Encounters')}
+            description={t('encountersDescription', 'List of encounters during the current visit')}
+            {...getTableContainerProps()}>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader aria-label="expand row" />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow
+                      {...getRowProps({
+                        row,
+                      })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded ? (
+                      <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 2}>
+                        <>
+                          <EncounterObservations observations={results[index].obs} />
+
+                          <>
+                            {results[index]?.form?.uuid && (
+                              <Button
+                                kind="ghost"
+                                onClick={() => onEncounterEdit(results[index])}
+                                renderIcon={(props) => <Edit size={16} {...props} />}>
+                                {t('editThisEncounter', 'Edit this encounter')}
+                              </Button>
+                            )}
+                          </>
+                        </>
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        currentItems={results.length}
+        totalItems={tableRows?.length}
+        pageNumber={currentPage}
+        pageSize={10}
+        onPageNumberChange={(page) => goTo(page)}
+      />
+    </>
+  );
+};
+
+export default InPatientTable;

package/src/in-patient/in-patient-table/in-patient-table.scss

@@ -0,0 +1,37 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-header) {
+    padding: 0;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    background: none;
+  }
+}
+
+.expandedRow {
+  padding-inline-start: layout.$spacing-05;
+
+  > td {
+    padding: inherit;
+
+    > div {
+      max-height: max-content;
+    }
+  }
+
+  > div {
+    background-color: $ui-02;
+  }
+}

package/src/in-patient/in-patient.component.tsx

@@ -0,0 +1,32 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import AdmissionRequest from './admission-request.component';
+import { useTranslation } from 'react-i18next';
+import InpatientDetailView from './inpatient-detail-view.component';
+
+type InPatientProps = {
+  patientUuid: string;
+  patient: fhir.Patient;
+};
+
+const InPatient: React.FC<InPatientProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <Tabs>
+      <TabList contained>
+        <Tab>{t('admissionRequests', 'Admission Requests')}</Tab>
+        <Tab>{t('inpatientDetails', 'Inpatient Detail')}</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <AdmissionRequest patientUuid={patientUuid} />;
+        </TabPanel>
+        <TabPanel>
+          <InpatientDetailView patientUuid={patientUuid} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default InPatient;

package/src/in-patient/in-patient.meta.tsx

@@ -0,0 +1,10 @@
+export const inPatientMeta = {
+  slot: 'patient-chart-in-patient-dashboard-slot',
+  path: 'in-patient',
+  title: 'In Patient',
+  moduleName: '@kenyaemr/esm-bed-management-app',
+  name: 'In Patient',
+  columns: 1,
+  config: {},
+  icon: 'omrs-icon-hospital-bed',
+};

package/src/in-patient/in-patient.resource.tsx

@@ -0,0 +1,56 @@
+import { type Encounter, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import type { InpatientRequest as AdmissionRequest } from '../types';
+import type { WardConfigObject } from '../config-schema';
+
+export const usePatientEncounters = (patientUuid: string) => {
+  const { inPatientForms } = useConfig<WardConfigObject>();
+  const { data, isLoading, error, mutate } = useSWR<{
+    data: { results: Array<Encounter> };
+  }>(
+    `${restBaseUrl}/encounter?patient=${patientUuid}&v=custom:(uuid,display,encounterDatetime,obs:full,form:(uuid,display),encounterType:(uuid,display),encounterProviders:(uuid,display,encounterRole:(uuid,display),provider:(uuid,person:(uuid,display))),orders:(uuid,display),diagnoses:(uuid,display)`,
+    openmrsFetch,
+  );
+
+  const encounters =
+    data?.data?.['results']?.filter((encounter) =>
+      inPatientForms?.find((form) => form.uuid === encounter?.form?.uuid),
+    ) ?? [];
+
+  return {
+    encounters: encounters,
+    isLoading,
+    error,
+    mutate,
+  };
+};
+
+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)';
+
+export const useAdmissionRequest = (patientUuid: string) => {
+  const patientUuids = [patientUuid];
+  const searchParams = new URLSearchParams();
+  searchParams.set('dispositionType', 'ADMIT');
+  searchParams.set('patients', patientUuids.join(','));
+  searchParams.set('v', defaultRep);
+
+  const url = `${restBaseUrl}/emrapi/inpatient/request?${searchParams.toString()}`;
+
+  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<AdmissionRequest> } }>(url, openmrsFetch);
+
+  return {
+    admissionRequest: data?.data?.results ?? [],
+    isLoading: isLoading,
+    error: error,
+    mutate: mutate,
+  };
+};

package/src/in-patient/inpatient-detail-view.component.tsx

@@ -0,0 +1,129 @@
+import { DataTableSkeleton, InlineLoading, Layer, Tile } from '@carbon/react';
+import {
+  ErrorState,
+  formatDatetime,
+  parseDate,
+  useEmrConfiguration,
+  usePatient,
+  useVisit,
+  type EmrApiConfigurationResponse,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib/src';
+import dayjs from 'dayjs';
+import React, { useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import InpatientForms from './inpatient-forms.component';
+import styles from './inpatient.scss';
+
+type InpatientDetailViewProps = {
+  patientUuid: string;
+};
+
+const InpatientDetailView: FC<InpatientDetailViewProps> = ({ patientUuid }) => {
+  const { isLoading: isLoadingPatient, patient, error } = usePatient(patientUuid);
+  const { isLoadingEmrConfiguration, emrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { isLoading: isLoadingActiveVisit, error: currVisistError } = useVisit(patientUuid);
+  const { t } = useTranslation();
+  if (isLoadingActiveVisit || isLoadingEmrConfiguration || isLoadingPatient) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error || errorFetchingEmrConfiguration || currVisistError) {
+    return (
+      <ErrorState
+        error={error ?? errorFetchingEmrConfiguration ?? currVisistError}
+        headerTitle={t('inpatientdetails', 'Inpatient Details')}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <PatientAdmitted patientUuid={patientUuid} patient={patient} emrConfiguration={emrConfiguration} />
+    </div>
+  );
+};
+
+export default InpatientDetailView;
+
+const PatientAdmitted: FC<{
+  patientUuid: string;
+  patient: fhir.Patient;
+  emrConfiguration: EmrApiConfigurationResponse;
+}> = ({ emrConfiguration, patient, patientUuid }) => {
+  const { currentVisit } = useVisit(patientUuid);
+  const { t } = useTranslation();
+
+  const { isPatientAdmitted, dateOfAdmission, dayasInWard, ward } = useMemo(() => {
+    const hasAdmissionEncounter = currentVisit.encounters.find(
+      (encounter) => encounter.encounterType.uuid === emrConfiguration?.admissionEncounterType?.uuid,
+    );
+    const hasDischargeEncounter = currentVisit.encounters.find(
+      (encounter) => encounter.encounterType.uuid === emrConfiguration?.exitFromInpatientEncounterType?.uuid,
+    );
+
+    const dateOfAdmission = hasAdmissionEncounter?.encounterDatetime
+      ? parseDate(hasAdmissionEncounter?.encounterDatetime)
+      : null;
+
+    const today = dayjs().startOf('day');
+    const dayasInWard = dateOfAdmission ? Math.abs(today.diff(dateOfAdmission, 'days')) : 0;
+
+    return {
+      isPatientAdmitted: hasAdmissionEncounter && !hasDischargeEncounter,
+      dateOfAdmission,
+      dayasInWard,
+      ward: hasAdmissionEncounter?.location,
+    };
+  }, [emrConfiguration, currentVisit]);
+  const { isLoading, admissionLocation, error } = useAdmissionLocation(undefined, ward?.uuid);
+  const bedLayout = useMemo(() => {
+    return admissionLocation?.bedLayouts?.find((layout) => layout.patients?.some((pat) => pat?.uuid === patientUuid));
+  }, [admissionLocation, patientUuid]);
+
+  if (!isPatientAdmitted) {
+    return (
+      <Layer>
+        <CardHeader title={t('admissionDetails', 'Admission Details')}>
+          <></>
+        </CardHeader>
+        <Tile className={styles.patientNotAdmitted}>
+          <EmptyDataIllustration />
+          <p>{t('patientNotAdmitted', 'This Patient Not currently admitted to ward')}</p>;
+        </Tile>
+      </Layer>
+    );
+  }
+  return (
+    <Layer>
+      <CardHeader title={t('admissionDetail', 'Admission Details')}>
+        <InpatientForms patientUuid={patientUuid} patient={patient} emrConfiguration={emrConfiguration} />
+      </CardHeader>
+      <div className={styles.detailsContainer}>
+        <Tile>
+          <strong>{t('dateOfAdmission', 'Date of Admission')}</strong>
+          <p>{formatDatetime(dateOfAdmission)}</p>
+        </Tile>
+        <Tile>
+          <strong>{t('daysInWard', 'Days in ward')}</strong>
+          <p>{dayasInWard}</p>
+        </Tile>
+        <Tile>
+          <strong>{t('ward', 'Ward')}</strong>
+          <p>{ward?.display}</p>
+        </Tile>
+        <Tile>
+          {isLoading ? (
+            <InlineLoading />
+          ) : (
+            <>
+              <strong>{t('bed', 'Bed')}</strong>
+              <p>{bedLayout?.bedNumber}</p>
+            </>
+          )}
+        </Tile>
+      </div>
+    </Layer>
+  );
+};

package/src/in-patient/inpatient-forms.component.tsx

@@ -0,0 +1,74 @@
+import { ComboButton, Dropdown, MenuItem } from '@carbon/react';
+import React, { type FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  type EmrApiConfigurationResponse,
+  evaluateAsBoolean,
+  launchWorkspace,
+  useConfig,
+  useVisit,
+} from '@openmrs/esm-framework';
+import { launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
+import dayjs from 'dayjs';
+import { type WardConfigObject } from '../config-schema';
+type InpatientFormsProps = {
+  patientUuid: string;
+  patient: fhir.Patient;
+  emrConfiguration: EmrApiConfigurationResponse;
+};
+const InpatientForms: FC<InpatientFormsProps> = ({ patientUuid, patient, emrConfiguration }) => {
+  const { t } = useTranslation();
+  const { inPatientForms } = useConfig<WardConfigObject>();
+  const { currentVisit } = useVisit(patientUuid);
+  const filteredForms = inPatientForms.filter((form) => {
+    if (!form.hideExpression) {
+      return true;
+    }
+    const age = dayjs().diff(dayjs(patient.birthDate), 'year');
+    const ageInDays = dayjs().diff(dayjs(patient.birthDate), 'day');
+    const ageInMonths = dayjs().diff(dayjs(patient.birthDate), 'month');
+    const gender = patient.gender;
+    const hide = form.hideExpression
+      ? evaluateAsBoolean(form.hideExpression, { age, gender, ageInDays, ageInMonths })
+      : false;
+    return hide;
+  });
+
+  const isPatientAdmitted = useMemo(() => {
+    const hasAdmissionEncounter = currentVisit.encounters.some(
+      (encounter) => encounter.encounterType.uuid === emrConfiguration?.admissionEncounterType?.uuid,
+    );
+    const hasDischargeEncounter = currentVisit.encounters.some(
+      (encounter) => encounter.encounterType.uuid === emrConfiguration?.exitFromInpatientEncounterType?.uuid,
+    );
+    return hasAdmissionEncounter && !hasDischargeEncounter;
+  }, [emrConfiguration, currentVisit]);
+
+  const handleLaunchForm = (form: { label: string; uuid: string }) => {
+    if (!currentVisit) {
+      return launchStartVisitPrompt();
+    }
+    launchWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: form.label,
+      mutateForm: () => {},
+      formInfo: {
+        encounterUuid: '',
+        formUuid: form.uuid,
+        additionalProps: {},
+      },
+    });
+  };
+
+  if (!isPatientAdmitted) {
+    return null;
+  }
+  return (
+    <ComboButton size="sm" label={t('inPatientForms', 'In-Patient Forms')}>
+      {filteredForms.map((form) => (
+        <MenuItem key={form.uuid} onClick={() => handleLaunchForm(form)} label={form.label} />
+      ))}
+    </ComboButton>
+  );
+};
+
+export default InpatientForms;

package/src/in-patient/inpatient.scss

@@ -0,0 +1,23 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.patientNotAdmitted {
+  margin-bottom: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.layoutContainer {
+  border: solid 1px colors.$gray-40;
+}
+
+.detailsContainer {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr;
+
+  gap: layout.$spacing-05;
+}