@kenyaemr/esm-morgue-app 5.4.2-pre.2283 → 5.4.2-pre.2288

package/src/utils/utils.ts

@@ -59,8 +59,13 @@ export const formatDateTime = (date) => {
   return dayjs(date).format('DD-MMM-YYYY, hh:mm A');
 };
 
-// Utility functions to get the current date and time
-
+/**
+ * Returns the current time in 12-hour format as an object with `time` and `period` properties.
+ *
+ * @returns {Object} - An object with `time` and `period` properties.
+ * @property {string} time - The current time in HH:MM format, e.g. "12:34".
+ * @property {string} period - The period of the day, either "AM" or "PM".
+ */
 export const getCurrentTime = () => {
   const now = new Date();
   const hours = now.getHours() % 12 || 12;
@@ -69,6 +74,19 @@ export const getCurrentTime = () => {
   return { time: `${hours}:${minutes}`, period };
 };
 
+export function parseDisplayText(displayText: string): { name: string; openmrsId: string } | null {
+  const regex = /(.*) \(OpenMRS ID: (.*)\)/;
+  const match = displayText.match(regex);
+
+  if (match && match.length === 3) {
+    const name = match[1].trim();
+    const openmrsId = match[2].trim();
+    return { name, openmrsId };
+  } else {
+    return null;
+  }
+}
+
 export const patientInfoSchema = z.object({
   dateOfAdmission: z
     .date({ coerce: true })

package/src/view-details/main/main.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Layer, Tile } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './main.scss';
+import MortuarySummary from '../view-details.component';
+import Header from '../../header/header.component';
+
+const DeceasedDetailsView: React.FC = () => {
+  const { patientUuid, bedNumber } = useParams<{ patientUuid: string; bedNumber?: string }>();
+
+  return (
+    <>
+      <Header title="Mortuary chart" />
+      <div className={styles.deceasedDetailsContainer}>
+        <Layer className={styles.container}>
+          <Tile>
+            <div className={styles.headingContainer}>
+              <div className={styles.desktopHeading}>
+                <h4>Mortuary view</h4>
+              </div>
+              <div className={styles.actionBtn}>
+                <ExtensionSlot name="mortuary-action-buttons-slot" state={{ patientUuid }} />
+              </div>
+            </div>
+          </Tile>
+          <MortuarySummary bedNumber={bedNumber} />
+        </Layer>
+      </div>
+    </>
+  );
+};
+
+export default DeceasedDetailsView;

package/src/view-details/main/main.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  background-color: colors.$white;
+}
+
+.tabs {
+  margin: 0 layout.$spacing-05;
+}
+
+.headingContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid var(--brand-03);
+    }
+  }
+}
+
+.actionBtn {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+.ghostButton {
+  color: colors.$gray-60;
+}

package/src/view-details/panels/attachement.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExtensionSlot, navigate, usePatient } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { EmptyState, getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
+import styles from './panels.scss';
+
+const AttachmentView: React.FC = () => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromStore();
+
+  return (
+    <ExtensionSlot
+      name="patient-chart-attachments-dashboard-slot"
+      state={{
+        patientUuid,
+      }}
+    />
+  );
+};
+
+export default AttachmentView;

package/src/view-details/panels/autopsy.component.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  formatDate,
+  isDesktop,
+  launchWorkspace,
+  parseDate,
+  useConfig,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import {
+  CardHeader,
+  EmptyState,
+  ErrorState,
+  getPatientUuidFromStore,
+  usePaginationInfo,
+} from '@openmrs/esm-patient-common-lib';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  OverflowMenu,
+  OverflowMenuItem,
+  TableExpandHeader,
+  DataTableSkeleton,
+  TableExpandRow,
+  TableExpandedRow,
+  Pagination,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import styles from './panels.scss';
+import { ConfigObject } from '../../config-schema';
+import EncounterObservations from './observations/observation.component';
+import { Observation } from '../../types';
+import { useAutospyEncounter } from '../view-details.resource';
+
+const AutopsyView: React.FC = () => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromStore();
+  const { autopsyFormUuid, autopsyEncounterFormUuid } = useConfig<ConfigObject>();
+  const { encounters, isLoading, error, mutate, isValidating } = useAutospyEncounter(
+    patientUuid,
+    autopsyEncounterFormUuid,
+  );
+  const headerTitle = t('autopsyReport', 'Autopsy report');
+  const layout = useLayoutType();
+  const [pageSize, setPageSize] = React.useState(10);
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const { paginated, goTo, results, currentPage } = usePagination(encounters, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, encounters?.length, currentPage, results?.length);
+
+  const handleLaunchAutopsyForm = (encounterUUID = '') => {
+    launchWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: t('autopsyReport', 'Autopsy report'),
+      mutateForm: () => mutate(),
+      formInfo: {
+        encounterUuid: encounterUUID,
+        formUuid: autopsyFormUuid,
+        patientUuid,
+        visitTypeUuid: '',
+        visitUuid: '',
+      },
+    });
+  };
+
+  const tableHeader = [
+    {
+      key: 'date',
+      header: t('dateTime', 'Date & time'),
+    },
+    {
+      key: 'visitType',
+      header: t('visitType', 'Visit type'),
+    },
+    {
+      key: 'encounterType',
+      header: t('encounterType', 'Encounter type'),
+    },
+    {
+      key: 'formName',
+      header: t('formName', 'Form name'),
+    },
+    {
+      key: 'mortician',
+      header: t('mortician', 'Mortician name'),
+    },
+    {
+      key: 'action',
+      header: t('action', 'Action'),
+    },
+  ];
+
+  if (isLoading) {
+    return <DataTableSkeleton headers={tableHeader} aria-label={headerTitle} />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+
+  if (!encounters || encounters.length === 0) {
+    return <EmptyState displayText={headerTitle} headerTitle={headerTitle} launchForm={handleLaunchAutopsyForm} />;
+  }
+
+  const tableRows = encounters.map((encounter) => ({
+    id: `${encounter.uuid}`,
+    date: formatDate(parseDate(encounter?.encounterDatetime)),
+    visitType: encounter?.visit?.visitType?.display,
+    encounterType: encounter?.encounterType?.display,
+    formName: encounter?.form?.name,
+    mortician: encounter?.encounterProviders[0]?.provider?.name,
+    action: (
+      <OverflowMenu aria-label="overflow-menu" flipped={false}>
+        <OverflowMenuItem onClick={() => handleLaunchAutopsyForm(encounter.uuid)} itemText={t('edit', 'Edit')} />
+      </OverflowMenu>
+    ),
+    obs: encounter?.obs,
+  }));
+
+  return (
+    <div className={styles.widgetCard}>
+      <CardHeader title={headerTitle}>
+        <Button
+          size="md"
+          kind="ghost"
+          onClick={() => handleLaunchAutopsyForm()}
+          renderIcon={(props) => <Add size={24} {...props} />}
+          iconDescription={t('add', 'Add')}>
+          {t('add', 'Add')}
+        </Button>
+      </CardHeader>
+      <DataTable isSortable rows={tableRows} headers={tableHeader} size={responsiveSize} useZebraStyles>
+        {({
+          rows,
+          headers,
+          getExpandHeaderProps,
+          getTableProps,
+          getTableContainerProps,
+          getHeaderProps,
+          getRowProps,
+        }) => (
+          <TableContainer {...getTableContainerProps}>
+            <Table className={styles.table} {...getTableProps()} aria-label="Bill list">
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => {
+                  const encounter = encounters.find((enc) => enc.uuid === row.id);
+
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell, index) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableExpandRow>
+                      {row.isExpanded && encounter ? (
+                        <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 1}>
+                          <div className={styles.container} key={i}>
+                            <EncounterObservations observations={encounter.obs as Observation[]} />
+                          </div>
+                        </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {paginated && (
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={encounters.length}
+          className={styles.pagination}
+          size={responsiveSize}
+          onChange={({ page: newPage, pageSize }) => {
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+            setPageSize(pageSize);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AutopsyView;

package/src/view-details/panels/billing-history.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExtensionSlot, navigate, usePatient } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { EmptyState, getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
+import styles from './panels.scss';
+
+const BillingHistoryView: React.FC = () => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromStore();
+  return <ExtensionSlot name="patient-chart-billing-dashboard-slot" state={{ patientUuid }} />;
+};
+
+export default BillingHistoryView;

package/src/view-details/panels/observations/observation.component.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import styles from './observation.scss';
+import { Observation } from '../../../types';
+
+interface EncounterObservationsProps {
+  observations: Array<Observation>;
+}
+
+const EncounterObservations: React.FC<EncounterObservationsProps> = ({ observations }) => {
+  const { t } = useTranslation();
+  const { obsConceptUuidsToHide = [] } = useConfig();
+
+  const filterObservations = (obsList: Array<Observation>) =>
+    obsConceptUuidsToHide.length ? obsList.filter((obs) => !obsConceptUuidsToHide.includes(obs.concept.uuid)) : obsList;
+
+  const renderAnswer = (value: any) => (typeof value === 'object' ? value?.name?.name || '' : value);
+
+  if (!observations) {
+    return <SkeletonText />;
+  }
+
+  const filteredObservations = filterObservations(observations);
+
+  return (
+    <div className={styles.observation}>
+      {filteredObservations.length > 0 ? (
+        filteredObservations.map((obs) =>
+          obs.groupMembers ? (
+            <React.Fragment key={obs.uuid}>
+              <span className={styles.parentConcept}>{obs.concept?.name?.name}</span>
+              {obs.groupMembers.map((member) => (
+                <React.Fragment key={member.uuid}>
+                  <span className={styles.childConcept}>{member.concept?.display}</span>
+                  <span>{renderAnswer(member.value)}</span>
+                </React.Fragment>
+              ))}
+            </React.Fragment>
+          ) : (
+            <React.Fragment key={obs.uuid}>
+              <span>{obs.concept?.name?.name}</span>
+              <span>{renderAnswer(obs.value)}</span>
+            </React.Fragment>
+          ),
+        )
+      ) : (
+        <div className={styles.observation}>
+          <p>{t('noObservationsFound', 'No observations found')}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EncounterObservations;

package/src/view-details/panels/observations/observation.scss

@@ -0,0 +1,24 @@
+@use '@carbon/layout';
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin: layout.$spacing-05 layout.$spacing-05 layout.$spacing-05 0;
+}
+
+.observation > span {
+  align-self: center;
+}
+
+.parentConcept {
+  font-weight: bold;
+}
+
+.childConcept {
+  padding-left: 0.8rem;
+}
+
+.questionText {
+  font-weight: bold;
+}

package/src/view-details/panels/panels.scss

@@ -0,0 +1,46 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin-block: layout.$spacing-05;
+  margin-inline: 0 layout.$spacing-05;
+}
+
+.observation > span {
+  align-self: center;
+  justify-self: start;
+}
+
+.parentConcept {
+  font-weight: bold;
+}
+
+.childConcept {
+  padding-inline-start: layout.$spacing-04;
+}
+.medicalHistoryContainer {
+  background-color: colors.$gray-30;
+  width: 98%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.filterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+}
+
+.search {
+  max-width: 300px;
+}
+.table {
+  border: 1px solid colors.$gray-30;
+  padding: layout.$spacing-05 layout.$spacing-05;
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabList, TabPanel, TabPanels, Tabs, InlineLoading } from '@carbon/react';
+import { ExtensionSlot, useConfig, useLayoutType } from '@openmrs/esm-framework';
+
+import styles from './views-details.scss';
+import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
+import { usePerson } from '../deceased-patient-header/deceasedInfo/deceased-info.resource';
+import BillingHistoryView from './panels/billing-history.component';
+import AutopsyView from './panels/autopsy.component';
+import AttachmentView from './panels/attachement.component';
+import { useActiveMorgueVisit } from './view-details.resource';
+import BannerInfo from '../extension/deceasedInfoBanner.component';
+
+interface MortuarySummaryProps {
+  bedNumber?: string;
+}
+
+const MortuarySummary: React.FC<MortuarySummaryProps> = ({ bedNumber }) => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromStore();
+  const { isLoading } = usePerson(patientUuid);
+  const { activeVisit, isLoading: isActiveLoading } = useActiveMorgueVisit(patientUuid);
+
+  if (isLoading || isActiveLoading) {
+    return (
+      <InlineLoading status="active" iconDescription="Loading" description={t('loadData', 'Loading summary data...')} />
+    );
+  }
+
+  return (
+    <div className={styles.summaryContainer}>
+      <p className={styles.morgueLabel}></p>
+      <BannerInfo patientUuid={patientUuid} visit={activeVisit} bedNumber={bedNumber} />
+      <Tabs>
+        <TabList aria-label="morgue summary tabs" className={styles.tablist}>
+          <Tab className={styles.tab} id="billing-tab">
+            {t('billingHistory', 'Billing history')}
+          </Tab>
+          <Tab className={classNames(styles.tab, styles.bodyLong01)} id="autopsy-tab">
+            {t('autopsyReport', 'Autopsy report')}
+          </Tab>
+
+          <Tab className={styles.tab} id="medications-tab">
+            {t('attachements', 'Attachements')}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <BillingHistoryView />
+          </TabPanel>
+          <TabPanel>
+            <AutopsyView />
+          </TabPanel>
+          <TabPanel>
+            <AttachmentView />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default MortuarySummary;

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

@@ -0,0 +1,65 @@
+import { openmrsFetch, useConfig, restBaseUrl, FetchResponse } from '@openmrs/esm-framework';
+import { OpenmrsEncounter, Visit } from '../types';
+import useSWR from 'swr';
+import { ConfigObject } from '../config-schema';
+
+export function useAutospyEncounter(patientUuid: string, encounterType: string) {
+  const encounterRepresentation =
+    'custom:(uuid,encounterDatetime,encounterType,location:(uuid,name),' +
+    'patient:(uuid,display),encounterProviders:(uuid,provider:(uuid,name)),' +
+    'obs:(uuid,obsDatetime,voided,groupMembers,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name),' +
+    'names:(uuid,conceptNameType,name))),form:(uuid,name),' +
+    'visit:(visitType:(uuid,display)))';
+
+  const url = `/ws/rest/v1/encounter?encounterType=${encounterType}&patient=${patientUuid}&v=${encounterRepresentation}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: OpenmrsEncounter[] } }, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  return {
+    encounters: data?.data ? data?.data?.results : [],
+    isLoading,
+    isValidating,
+    error,
+    mutate,
+  };
+}
+
+export const useActiveMorgueVisit = (uuid: string) => {
+  const { morgueVisitTypeUuid } = useConfig<ConfigObject>();
+  const url = `${restBaseUrl}/visit?v=full&includeInactive=false&totalCount=true&visitType=${morgueVisitTypeUuid}&q=${uuid}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ results: Visit[] }>>(url, openmrsFetch);
+
+  return { activeVisit: data?.data?.results[0], error, isLoading };
+};
+
+export const usePatientDischargedStatus = (uuid: string) => {
+  const customRepresentation = 'custom:(visitType:(uuid),startDatetime,stopDatetime,encounters:(encounterType:(uuid)))';
+  const url = `${restBaseUrl}/visit?v=${customRepresentation}&patient=${uuid}&limit=1`;
+
+  const { data, error, isLoading } = useSWR<
+    FetchResponse<{
+      results: Array<{
+        visitType: { uuid: string };
+        startDatetime: string;
+        stopDatetime: string;
+        encounters: Array<{
+          encounterType: {
+            uuid: string;
+          };
+        }>;
+      }>;
+    }>
+  >(url, openmrsFetch);
+
+  const status = data?.data?.results[0];
+
+  return {
+    status,
+    error,
+    isLoading,
+  };
+};