@kenyaemr/esm-ward-app 8.1.2-pre.214 → 8.5.1-pre.13

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

@@ -1,8 +1,8 @@
-import { getPatientName, useAppContext, launchWorkspaceGroup } from '@openmrs/esm-framework';
+import { getPatientName, launchWorkspaceGroup } from '@openmrs/esm-framework';
+import { getPatientChartStore } from '@openmrs/esm-patient-common-lib';
 import React, { type ReactNode } from 'react';
-import { type WardViewContext, type WardPatient } from '../types';
+import { type WardPatient } from '../types';
 import styles from './ward-patient-card.scss';
-import { getPatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 interface Props {
   children: ReactNode;
@@ -11,7 +11,6 @@ interface Props {
 
 const WardPatientCard: React.FC<Props> = ({ children, wardPatient }) => {
   const { patient } = wardPatient;
-  const { WardPatientHeader } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   return (
     <div className={styles.wardPatientCard}>
@@ -22,7 +21,8 @@ const WardPatientCard: React.FC<Props> = ({ children, wardPatient }) => {
           launchWorkspaceGroup('ward-patient', {
             state: {
               wardPatient,
-              WardPatientHeader,
+              patient,
+              patientUuid: patient.uuid,
             },
             onWorkspaceGroupLaunch: () => {
               const store = getPatientChartStore();

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

@@ -6,13 +6,10 @@
 .wardPatientCard {
   @include type.type-style('body-compact-01');
   color: $text-02;
-
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: layout.$spacing-02;
   background-color: $ui-02;
-
   position: relative; // this allows positioning the button correctly
 }
 
@@ -114,11 +111,10 @@
 
 .wardPatientBedNumber {
   @include type.type-style('heading-compact-01');
-  border-radius: 50%;
+  border-radius: 50vh;
   color: $ui-02;
   background-color: $color-blue-60-2;
-  padding: layout.$spacing-04;
-  width: layout.$spacing-04;
+  padding: layout.$spacing-04 layout.$spacing-03;
   height: layout.$spacing-04;
   display: flex;
   justify-content: center;

package/src/ward-patients/admitted-patients.tsx

@@ -0,0 +1,218 @@
+import {
+  DataTable,
+  DataTableSkeleton,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+} from '@carbon/react';
+import {
+  formatDatetime,
+  launchWorkspace,
+  type OpenmrsResource,
+  parseDate,
+  useAppContext,
+  useConfig,
+  usePagination,
+} from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatient, type WardViewContext } from '../types';
+import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
+import { EmptyState } from './table-state-components';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { type WardConfigObject } from '../config-schema';
+const AdmittedPatients = () => {
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
+  const { t } = useTranslation();
+  const config = useConfig<WardConfigObject>();
+  const headers = [
+    { key: 'admissionDate', header: t('admissionDate', 'Admission Date') },
+    { key: 'idNumber', header: t('idNumber', 'ID Number') },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'bedNumber', header: t('bedNumber', 'Bed Number') },
+    { key: 'daysAdmitted', header: t('daysInWard', 'Days In Ward') },
+    { key: 'action', header: t('action', 'Action') },
+  ];
+
+  const patients = useMemo(() => {
+    return (
+      bedLayouts
+        ?.map((bedLayout) => {
+          const { patients } = bedLayout;
+          const bed = bedLayoutToBed(bedLayout);
+          const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
+            const inpatientAdmission = wardAdmittedPatientsWithBed?.get(patient.uuid);
+            if (inpatientAdmission) {
+              const { patient, visit, currentInpatientRequest } = inpatientAdmission;
+              return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null };
+            } else {
+              // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
+              return {
+                patient: patient,
+                visit: null,
+                bed,
+                inpatientAdmission: null, // populate after BED-13
+                inpatientRequest: null,
+              };
+            }
+          });
+          return wardPatients;
+        })
+        ?.flat() ?? []
+    ).filter((pat) => {
+      const noteEncounter = pat?.visit?.encounters?.find(
+        (encounter) => encounter.encounterType?.uuid === config.doctorsnoteEncounterTypeUuid,
+      );
+      if (!noteEncounter) return true;
+      const obs = noteEncounter.obs.find((ob) => ob.concept.uuid === config.referralsConceptUuid);
+      if (!obs) return true;
+      const isDischargedIn = [config.referringToAnotherFacilityConceptUuid, config.dischargeHomeConceptUuid].includes(
+        (obs.value as OpenmrsResource).uuid,
+      );
+      return isDischargedIn === false;
+    });
+  }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
+
+  const [pageSize, setPageSize] = useState(5);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+  const tableRows = useMemo(() => {
+    return results.map((patient, index) => {
+      const { encounterAssigningToCurrentInpatientLocation } = patient.inpatientAdmission ?? {};
+
+      const admissionDate = encounterAssigningToCurrentInpatientLocation?.encounterDatetime
+        ? formatDatetime(parseDate(encounterAssigningToCurrentInpatientLocation!.encounterDatetime!))
+        : '--';
+      const encounterDate = encounterAssigningToCurrentInpatientLocation?.encounterDatetime;
+      const daysAdmitted =
+        encounterDate && dayjs(encounterDate).isValid()
+          ? Math.abs(dayjs().startOf('day').diff(dayjs(encounterDate).startOf('day'), 'days'))
+          : '--';
+
+      return {
+        id: patient.patient?.uuid ?? index,
+        admissionDate,
+        idNumber: getOpenmrsId(patient.patient?.identifiers ?? []) ?? '--',
+        name: patient.patient?.person?.display ?? '--',
+        gender: patient.patient?.person?.gender ?? '--',
+        age: patient.patient?.person?.age ?? '--',
+        bedNumber: patient.bed?.bedNumber ?? '--',
+        daysAdmitted,
+        action: (
+          <OverflowMenu size={'sm'} flipped>
+            <OverflowMenuItem
+              itemText={t('tranfer', 'Tranfer')}
+              onClick={() =>
+                launchWorkspace('patient-transfer-swap-workspace', {
+                  workspaceTitle: 'Trasfer',
+                  wardPatient: patient,
+                  withContentSwitcher: false,
+                  defaultTransfersection: 'transfer',
+                })
+              }
+            />
+            <OverflowMenuItem
+              itemText={t('bedSwap', 'Bed Swap')}
+              onClick={() =>
+                launchWorkspace('patient-transfer-swap-workspace', {
+                  workspaceTitle: 'Bed Swap',
+                  wardPatient: patient,
+                  withContentSwitcher: false,
+                  defaultTransfersection: 'bed-swap',
+                })
+              }
+            />
+            <OverflowMenuItem
+              itemText={t('dischargeIn', 'Discharge In')}
+              onClick={() => {
+                launchWorkspace('patient-discharge-workspace', {
+                  wardPatient: patient,
+                  patientUuid: patient.patient.uuid,
+                  formUuid: config.doctorsNoteFormUuid,
+                  workspaceTitle: t('doctorsNote', 'Doctors Note'),
+                  dischargePatientOnSuccesfullSubmission: false,
+                });
+              }}
+            />
+            <OverflowMenuItem
+              itemText={t('discharge', 'Discharge')}
+              onClick={() => {
+                launchWorkspace('patient-discharge-workspace', {
+                  wardPatient: patient,
+                  patientUuid: patient.patient.uuid,
+                  formUuid: config.inpatientDischargeFormUuid,
+                });
+              }}
+            />
+          </OverflowMenu>
+        ),
+      };
+    });
+  }, [results, config, t]);
+
+  if (isLoading) return <DataTableSkeleton />;
+  if (!patients.length)
+    return <EmptyState message={t('noAdmittedPatientsinCurrentward', 'No admitted patients in the current ward')} />;
+
+  return (
+    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+        <TableContainer>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    key={header.key}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => {
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} {...getCellProps({ cell })}>
+                        {cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {paginated && !isLoading && (
+            <Pagination
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={(patients ?? []).length}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default AdmittedPatients;

package/src/ward-patients/awaiting-admission-patients.tsx

@@ -0,0 +1,158 @@
+import {
+  DataTable,
+  DataTableSkeleton,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+} from '@carbon/react';
+import { formatDatetime, launchWorkspace, parseDate, useAppContext, usePagination } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatient, type WardPatientWorkspaceProps, type WardViewContext } from '../types';
+import { getOpenmrsId } from '../ward-view/ward-view.resource';
+import AdmitPatientButton from '../ward-workspace/admit-patient-button.component';
+import { EmptyState, ErrorState } from './table-state-components';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+const AwaitingAdmissionPatients = () => {
+  const { t } = useTranslation();
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
+  const [pageSize, setPageSize] = useState(5);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(inpatientRequests, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const headers = [
+    { key: 'admissionDate', header: t('dateQueued', 'Date Queued') },
+    { key: 'idNumber', header: t('idNumber', 'ID Number') },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'bedNumber', header: t('bedNumber', 'Bed Number') },
+    { key: 'daysAdmitted', header: t('durationOnWard', 'Days In Queue') },
+    { key: 'action', header: t('action', 'Action') },
+  ];
+
+  const launchPatientTransferForm = (wardPatient: WardPatient) => {
+    launchWorkspace<WardPatientWorkspaceProps>('patient-transfer-request-workspace', {
+      wardPatient,
+    });
+  };
+
+  const launchCancelAdmissionForm = (wardPatient: WardPatient) => {
+    launchWorkspace<WardPatientWorkspaceProps>('cancel-admission-request-workspace', {
+      wardPatient,
+    });
+  };
+  const tableRows = useMemo(() => {
+    return results?.map((request, index) => {
+      const admissionDate = request.dispositionEncounter?.encounterDatetime
+        ? formatDatetime(parseDate(request.dispositionEncounter?.encounterDatetime))
+        : '--';
+      const encounterDate = request.dispositionEncounter?.encounterDatetime;
+      const daysAdmitted =
+        encounterDate && dayjs(encounterDate).isValid()
+          ? Math.abs(dayjs().startOf('day').diff(dayjs(encounterDate).startOf('day'), 'days'))
+          : '--';
+      const wardPatient = {
+        patient: request.patient,
+        visit: request.visit,
+        bed: null,
+        inpatientRequest: request,
+        inpatientAdmission: null,
+      };
+      const isTransfer = wardPatient.inpatientRequest.dispositionType == 'TRANSFER';
+
+      return {
+        id: request?.patient?.uuid ?? index,
+        admissionDate,
+        idNumber: getOpenmrsId(request.patient?.identifiers ?? []) ?? '--',
+        name: request?.patient?.person?.display ?? '--',
+        gender: request?.patient?.person?.gender ?? '--',
+        age: request?.patient?.person?.age ?? '--',
+        bedNumber: '--',
+        daysAdmitted,
+        action: (
+          <OverflowMenu size={'sm'} flipped>
+            <OverflowMenuItem
+              itemText={
+                isTransfer ? t('transferElsewhere', 'Transfer elsewhere') : t('admitElsewhere', 'Admit elsewhere')
+              }
+              onClick={() => launchPatientTransferForm(wardPatient)}
+            />
+            <AdmitPatientButton
+              wardPatient={wardPatient}
+              dispositionType={wardPatient.inpatientRequest.dispositionType}
+              onAdmitPatientSuccess={() => {}}
+              component="menu"
+            />
+            <OverflowMenuItem itemText={t('cancel', 'Cancel')} onClick={() => launchCancelAdmissionForm(wardPatient)} />
+          </OverflowMenu>
+        ),
+      };
+    });
+  }, [results, t]);
+
+  if (isLoading) return <DataTableSkeleton />;
+  if (error) return <ErrorState error={error} />;
+  if (!inpatientRequests || !inpatientRequests.length)
+    return <EmptyState message={t('noPatientInAdmisionQueue', 'No patients in admission queue')} />;
+  return (
+    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+        <TableContainer>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    key={header.key}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => {
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} {...getCellProps({ cell })}>
+                        {cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {paginated && !isLoading && (
+            <Pagination
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={(inpatientRequests ?? []).length}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default AwaitingAdmissionPatients;

package/src/ward-patients/discharge-in-patients.tsx

@@ -0,0 +1,183 @@
+import {
+  OverflowMenu,
+  OverflowMenuItem,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from '@carbon/react';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from './table-state-components';
+import {
+  formatDatetime,
+  launchWorkspace,
+  type OpenmrsResource,
+  parseDate,
+  useAppContext,
+  useConfig,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { type WardPatient, type WardViewContext } from '../types';
+import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
+import dayjs from 'dayjs';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { type WardConfigObject } from '../config-schema';
+
+const DischargeInPatients = () => {
+  const { t } = useTranslation();
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
+  const config = useConfig<WardConfigObject>();
+  const headers = [
+    { key: 'admissionDate', header: t('admissionDate', 'Admission Date') },
+    { key: 'idNumber', header: t('idNumber', 'ID Number') },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'bedNumber', header: t('bedNumber', 'Bed Number') },
+    { key: 'daysAdmitted', header: t('durationOnWard', 'Duration on Ward') },
+    { key: 'action', header: t('action', 'Action') },
+  ];
+
+  const patients = useMemo(() => {
+    return (
+      bedLayouts
+        ?.map((bedLayout) => {
+          const { patients } = bedLayout;
+          const bed = bedLayoutToBed(bedLayout);
+          const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
+            const inpatientAdmission = wardAdmittedPatientsWithBed?.get(patient.uuid);
+            if (inpatientAdmission) {
+              const { patient, visit, currentInpatientRequest } = inpatientAdmission;
+              return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null };
+            } else {
+              // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
+              return {
+                patient: patient,
+                visit: null,
+                bed,
+                inpatientAdmission: null, // populate after BED-13
+                inpatientRequest: null,
+              };
+            }
+          });
+          return wardPatients;
+        })
+        ?.flat() ?? []
+    ).filter((pat) => {
+      const noteEncounter = pat?.visit?.encounters?.find(
+        (encounter) => encounter.encounterType?.uuid === config.doctorsnoteEncounterTypeUuid,
+      );
+      if (!noteEncounter) return false;
+      const obs = noteEncounter.obs.find((ob) => ob.concept.uuid === config.referralsConceptUuid);
+      if (!obs) return false;
+      const isDischargedIn = [config.referringToAnotherFacilityConceptUuid, config.dischargeHomeConceptUuid].includes(
+        (obs.value as OpenmrsResource).uuid,
+      );
+      return isDischargedIn === true;
+    });
+  }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
+
+  const [pageSize, setPageSize] = useState(5);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const tableRows = useMemo(() => {
+    return results.map((patient, index) => {
+      const { encounterAssigningToCurrentInpatientLocation } = patient.inpatientAdmission ?? {};
+
+      const admissionDate = encounterAssigningToCurrentInpatientLocation?.encounterDatetime
+        ? formatDatetime(parseDate(encounterAssigningToCurrentInpatientLocation!.encounterDatetime!))
+        : '--';
+      const daysAdmitted = encounterAssigningToCurrentInpatientLocation?.encounterDatetime
+        ? dayjs(encounterAssigningToCurrentInpatientLocation?.encounterDatetime).diff(dayjs(), 'days')
+        : '--';
+      return {
+        id: patient.patient?.uuid ?? index,
+        admissionDate,
+        idNumber: getOpenmrsId(patient.patient?.identifiers ?? []) ?? '--',
+        name: patient.patient?.person?.display ?? '--',
+        gender: patient.patient?.person?.gender ?? '--',
+        age: patient.patient?.person?.age ?? '--',
+        bedNumber: patient.bed?.bedNumber ?? '--',
+        daysAdmitted,
+        action: (
+          <OverflowMenu size={'sm'} flipped>
+            <OverflowMenuItem itemText={t('goToBilling', 'Go to Billing')} onClick={() => {}} />
+            <OverflowMenuItem itemText={t('waivePatient', 'Waive Patient')} onClick={() => {}} />
+            <OverflowMenuItem itemText={t('patientAbscondend', 'Patient Absconded')} onClick={() => {}} />
+            <OverflowMenuItem
+              itemText={t('discharge', 'Discharge')}
+              onClick={() => {
+                launchWorkspace('patient-discharge-workspace', {
+                  wardPatient: patient,
+                  patientUuid: patient.patient.uuid,
+                  formUuid: config.inpatientDischargeFormUuid,
+                });
+              }}
+            />
+          </OverflowMenu>
+        ),
+      };
+    });
+  }, [results, config, t]);
+
+  if (!patients.length) return <EmptyState message={t('noDischargeInpatients', 'No Discharge in patients')} />;
+
+  return (
+    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+        <TableContainer>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    key={header.key}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => {
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} {...getCellProps({ cell })}>
+                        {cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {paginated && !isLoading && (
+            <Pagination
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={(patients ?? []).length}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default DischargeInPatients;