@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2283 → 5.4.2-pre.2288

package/src/deceased-panel/dashboard-link/dashboard-link.component.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ConfigurableLink } from '@openmrs/esm-framework';
-import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { usePerson } from '../../../../esm-morgue-app/src/hook/useMorgue.resource';
-
-const DeceasedPanelDashboardLink = () => {
-  const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
-  const { person, isLoading } = usePerson(patientUuid);
-  const url = `\${openmrsSpaBase}/patient/${patientUuid}/chart/deceased-panel`;
-
-  if (isLoading) {
-    return null;
-  }
-
-  if (person?.dead) {
-    return (
-      <ConfigurableLink className={classNames('cds--side-nav__link', 'active-left-nav-link')} to={url}>
-        {t('mortuaryDetails', 'Mortuary details')}
-      </ConfigurableLink>
-    );
-  }
-
-  return null;
-};
-
-export default DeceasedPanelDashboardLink;

package/src/deceased-panel/hook/useEncounter.ts

@@ -1,29 +0,0 @@
-import useSWR from 'swr';
-import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
-import groupBy from 'lodash-es/groupBy';
-import { OpenmrsEncounter } from '../../types';
-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,
-  };
-}

package/src/deceased-panel/hook/useMorgueVisit.ts

@@ -1,41 +0,0 @@
-import { FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
-import useSWR from 'swr';
-import { ConfigObject } from '../../config-schema';
-import { Visit } from '../../types';
-
-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,
-  };
-};

package/src/deceased-panel/hook/usePerson.ts

@@ -1,13 +0,0 @@
-import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import useSWR from 'swr';
-import { Patient } from '../../types';
-
-const usePerson = (uuid: string) => {
-  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display))`;
-  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
-  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
-  const person = data?.data;
-  return { isLoading, error, person };
-};
-
-export default usePerson;

package/src/deceased-panel/mortuary-summary/mortuary-summary.component.tsx

@@ -1,62 +0,0 @@
-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 './mortuary-summary.scss';
-import BillingHistoryView from '../panels/billing-history.component';
-import AutopsyView from '../panels/autopsy.component';
-import AttachmentView from '../panels/attachement.component';
-import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
-import usePerson from '../hook/usePerson';
-import { useActiveMorgueVisit } from '../hook/useMorgueVisit';
-
-const MortuarySummary: React.FC = () => {
-  const config = useConfig();
-  const { t } = useTranslation();
-  const layout = useLayoutType();
-  const patientUuid = getPatientUuidFromStore();
-  const { person, 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>
-      <ExtensionSlot name="deceased-banner-info-slot" state={{ patientUuid }} />
-      <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/deceased-panel/mortuary-summary/mortuary-summary.scss

@@ -1,82 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.morgueLabel {
-  margin-top: layout.$spacing-03;
-  margin-left: layout.$spacing-06;
-  font-size: type.type-scale(2);
-}
-
-.summaryContainer {
-  background-color: colors.$white;
-  display: grid;
-  grid-template-columns: max-content auto;
-
-  :global(.cds--tabs) {
-    min-height: 8rem;
-  }
-}
-
-.verticalTabs {
-  margin: layout.$spacing-05 0;
-  scroll-behavior: smooth;
-
-  > ul {
-    flex-direction: column;
-  }
-
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0;
-  }
-
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
-    border-bottom: 0 !important;
-    border-left: layout.$spacing-01 solid $color-gray-30;
-  }
-}
-
-.tab {
-  outline: 0;
-  outline-offset: 0;
-  min-height: 2rem !important;
-
-  &:active,
-  &:focus {
-    outline: layout.$spacing-01 solid var(--brand-03) !important;
-  }
-
-  &[aria-selected='true'] {
-    border-left: 3px solid var(--brand-03);
-    border-bottom: none;
-    font-weight: 600;
-    margin-left: 0 !important;
-  }
-
-  &[aria-selected='false'] {
-    border-bottom: none;
-    border-left: layout.$spacing-01 solid $ui-03;
-    margin-left: 0 !important;
-  }
-}
-
-.tablist {
-  :global(.cds--tab--list) {
-    flex-direction: column;
-    max-height: fit-content;
-    overflow-x: visible;
-  }
-
-  > button :global(.cds--tabs .cds--tabs__nav-link) {
-    border-bottom: none;
-  }
-}
-
-.text02 {
-  color: colors.$gray-70;
-}
-
-.bodyLong01 {
-  @include type.type-style('body-01');
-}

package/src/deceased-panel/panels/attachement.component.tsx

@@ -1,21 +0,0 @@
-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/deceased-panel/panels/autopsy.component.tsx

@@ -1,215 +0,0 @@
-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 { useAutospyEncounter } from '../hook/useEncounter';
-import EncounterObservations from './observations/observation.component';
-import { Observation } from '../../types';
-
-const AutopsyView: React.FC = () => {
-  const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
-  const { formsList, 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: formsList?.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/deceased-panel/panels/billing-history.component.tsx

@@ -1,13 +0,0 @@
-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/deceased-panel/panels/observations/observation.component.tsx

@@ -1,57 +0,0 @@
-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/deceased-panel/panels/observations/observation.scss

@@ -1,24 +0,0 @@
-@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/deceased-panel/panels/panels.scss

@@ -1,46 +0,0 @@
-@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/deceased-panel/tabs/tabs.component.tsx

@@ -1,35 +0,0 @@
-import { Layer, Tile } from '@carbon/react';
-import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
-import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { ConfigObject } from '../../config-schema';
-import { usePatientDischargedStatus } from '../hook/useMorgueVisit';
-import MortuarySummary from '../mortuary-summary/mortuary-summary.component';
-import styles from './tabs.scss';
-
-const DeceasedDetailsView: React.FC = () => {
-  const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
-
-  return (
-    <div className={styles.deceasedDetailsContainer}>
-      <Layer className={styles.container}>
-        <Tile>
-          <div className={styles.headingContainer}>
-            <div className={styles.desktopHeading}>
-              <h4>{t('mortuaryView', 'Mortuary view')}</h4>
-            </div>
-            <div className={styles.actionBtn}>
-              <ExtensionSlot name="mortuary-action-buttons-slot" state={{ patientUuid }} />
-            </div>
-          </div>
-        </Tile>
-
-        <MortuarySummary />
-      </Layer>
-    </div>
-  );
-};
-
-export default DeceasedDetailsView;