@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/past-visits-components/medications-summary.component.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { capitalize } from 'lodash-es';
+import { Tag, Tooltip } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { type OrderItem } from '../visit.resource';
+import { type ChartConfig } from '../../../config-schema';
+import styles from '../visit-detail-overview.scss';
+
+interface MedicationSummaryProps {
+  medications: Array<OrderItem>;
+}
+
+const MedicationSummary: React.FC<MedicationSummaryProps> = ({ medications }) => {
+  const { t } = useTranslation();
+  const { drugOrderTypeUUID } = useConfig<ChartConfig>();
+
+  const isDiscontinued = (order: OrderItem['order']) => {
+    if (!order?.dateStopped) {
+      return false;
+    }
+
+    return new Date(order.dateStopped) < new Date();
+  };
+
+  const drugOrders = medications?.filter((medication) => {
+    return medication?.order?.orderType?.uuid === drugOrderTypeUUID;
+  });
+
+  if (drugOrders.length === 0) {
+    return (
+      <EmptyState displayText={t('medications__lower', 'medications')} headerTitle={t('medications', 'Medications')} />
+    );
+  }
+
+  return (
+    <div className={styles.medicationRecord}>
+      {drugOrders.map(
+        (medication, index) =>
+          (medication?.order?.dose != null || medication?.order?.dosingInstructions) && (
+            <React.Fragment key={index}>
+              <div className={styles.medicationContainer}>
+                <div>
+                  <p className={styles.bodyLong01}>
+                    <strong>{capitalize(medication?.order?.drug?.display)}</strong>{' '}
+                    {medication?.order?.drug?.strength && (
+                      <>&mdash; {medication?.order?.drug?.strength?.toLowerCase()}</>
+                    )}{' '}
+                    {medication?.order?.doseUnits?.display && (
+                      <>&mdash; {medication?.order?.doseUnits?.display?.toLowerCase()}</>
+                    )}{' '}
+                    {isDiscontinued(medication.order) && (
+                      <Tooltip align="right" label={<>{formatDate(new Date(medication.order.dateStopped))}</>}>
+                        <Tag type="gray" className={styles.tag}>
+                          {t('discontinued', 'Discontinued')}
+                        </Tag>
+                      </Tooltip>
+                    )}
+                  </p>
+                  <p className={styles.bodyLong01}>
+                    {medication?.order?.dose != null ? (
+                      <>
+                        <span className={styles.label01}> {t('dose', 'Dose').toUpperCase()} </span>{' '}
+                        <span className={styles.dosage}>
+                          {medication?.order?.dose} {medication?.order?.doseUnits?.display?.toLowerCase()}
+                        </span>{' '}
+                        {medication.order?.route?.display && (
+                          <span>&mdash; {medication?.order?.route?.display?.toLowerCase()} </span>
+                        )}
+                        {medication?.order?.frequency?.display && (
+                          <>
+                            {medication.order?.route?.display ? <>&mdash; </> : null}
+                            {medication?.order?.frequency?.display?.toLowerCase()}{' '}
+                          </>
+                        )}
+                        {medication?.order?.duration != null && (
+                          <>
+                            &mdash;{' '}
+                            {t('orderDurationAndUnit', 'for {{duration}} {{durationUnit}}', {
+                              duration: medication?.order?.duration,
+                              durationUnit: medication?.order?.durationUnits?.display?.toLowerCase(),
+                            })}
+                          </>
+                        )}
+                        {medication?.order?.duration == null && (
+                          <>&mdash; {t('orderIndefiniteDuration', 'Indefinite duration')}</>
+                        )}
+                        {medication?.order?.numRefills != null && medication?.order?.numRefills !== 0 && (
+                          <span>
+                            <span className={styles.label01}> &mdash; {t('refills', 'Refills').toUpperCase()}</span>{' '}
+                            {medication?.order?.numRefills}
+                          </span>
+                        )}
+                        {medication?.order?.dosingInstructions && (
+                          <span> &mdash; {medication?.order?.dosingInstructions?.toLocaleLowerCase()}</span>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        <span className={styles.label01}>
+                          {t('dosingInstructions', 'Dosing Instructions').toUpperCase()}{' '}
+                        </span>
+                        <span className={styles.dosage}>{medication?.order?.dosingInstructions}</span>
+                        {medication?.order?.duration != null && (
+                          <span>
+                            {' '}
+                            &mdash;{' '}
+                            {t('orderDurationAndUnit', 'for {{duration}} {{durationUnit}}', {
+                              duration: medication?.order?.duration,
+                              durationUnit: medication?.order?.durationUnits?.display?.toLowerCase(),
+                            })}
+                          </span>
+                        )}
+                        {medication?.order?.numRefills != null && medication?.order?.numRefills !== 0 && (
+                          <span>
+                            <span className={styles.label01}> &mdash; {t('refills', 'Refills').toUpperCase()}</span>{' '}
+                            {medication?.order?.numRefills}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </p>
+                  <p className={styles.bodyLong01}>
+                    {medication?.order?.orderReasonNonCoded ? (
+                      <span>
+                        <span className={styles.label01}>{t('indication', 'Indication').toUpperCase()}</span>{' '}
+                        {medication?.order?.orderReasonNonCoded}
+                      </span>
+                    ) : null}
+                    {medication?.order?.orderReasonNonCoded && medication?.order?.quantity != null && <>&mdash;</>}
+                    {medication?.order?.quantity != null ? (
+                      <span>
+                        <span className={styles.label01}> {t('quantity', 'Quantity').toUpperCase()}</span>{' '}
+                        {medication?.order?.quantity}
+                      </span>
+                    ) : null}
+                    {medication?.order?.dateStopped ? (
+                      <span className={styles.bodyShort01}>
+                        <span className={styles.label01}>
+                          {medication?.order?.quantity != null ? ` — ` : ''} {t('endDate', 'End date').toUpperCase()}
+                        </span>{' '}
+                        {formatDate(new Date(medication?.order?.dateStopped))}
+                      </span>
+                    ) : null}
+                  </p>
+                </div>
+              </div>
+
+              <p className={styles.metadata}>
+                <div className={styles.startDateColumn}>
+                  <span>{formatDate(new Date(medication.order.dateActivated))}</span> &middot;{' '}
+                  <span>{medication.order.orderer?.display ?? '--'}</span>
+                </div>
+              </p>
+            </React.Fragment>
+          ),
+      )}
+    </div>
+  );
+};
+
+export default MedicationSummary;

package/src/visit/visits-widget/past-visits-components/notes-summary.component.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '@openmrs/esm-framework';
+import type { Note } from '../visit.resource';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import styles from '../visit-detail-overview.scss';
+
+interface NotesSummaryProps {
+  notes: Array<Note>;
+}
+
+const NotesSummary: React.FC<NotesSummaryProps> = ({ notes }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+
+  const currentUserIdentifiers = useMemo(
+    () =>
+      new Set(
+        [
+          session?.currentProvider?.uuid,
+          (session?.currentProvider as { display?: string } | undefined)?.display,
+          session?.user?.uuid,
+          session?.user?.person?.uuid,
+          session?.user?.display,
+        ].filter((identifier): identifier is string => Boolean(identifier)),
+      ),
+    [session],
+  );
+
+  if (notes.length === 0) {
+    return <EmptyState displayText={t('notes__lower', 'notes')} headerTitle={t('notes', 'Notes')} />;
+  }
+
+  return (
+    <>
+      {notes.map((note: Note, index) => {
+        const isCurrentUserNote = [...(note.authorUuids ?? []), ...(note.authorNames ?? [])].some((identifier) =>
+          currentUserIdentifiers.has(identifier),
+        );
+
+        return (
+          <div className={styles.notesContainer} key={index}>
+            <p
+              className={classNames(styles.noteText, styles.bodyLong01, {
+                [styles.currentUserNoteText]: isCurrentUserNote,
+              })}
+            >
+              {note.note}
+            </p>
+            <p
+              className={classNames(styles.metadata, {
+                [styles.currentUserNoteMetadata]: isCurrentUserNote,
+              })}
+            >
+              {note.time} {note.provider.name ? <span>&middot; {note.provider.name} </span> : null}
+              {note.provider.role ? <span>&middot; {note.provider.role}</span> : null}
+            </p>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default NotesSummary;

package/src/visit/visits-widget/past-visits-components/patient-notes-summary.component.tsx

@@ -0,0 +1,318 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Tile,
+} from '@carbon/react';
+import {
+  formatDatetime,
+  isDesktop,
+  parseDate,
+  useConfig,
+  useLayoutType,
+  useSession,
+  type Encounter,
+  type OpenmrsResource,
+} from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import type { ChartConfig } from '../../../config-schema';
+import type { Note } from '../visit.resource';
+import { useAllEncounters } from './encounters-table/encounters-table.resource';
+import tableStyles from './encounters-table/encounters-table.scss';
+import notesStyles from '../visit-detail-overview.scss';
+
+interface PatientNotesSummaryProps {
+  patientUuid: string;
+  isTabActive: boolean;
+}
+
+interface EncounterProvider {
+  uuid?: string;
+  encounterRole?: OpenmrsResource;
+  provider?: {
+    uuid?: string;
+    person?: {
+      uuid?: string;
+      display?: string;
+    };
+  };
+}
+
+type EncounterWithNotes = Omit<Encounter, 'encounterProviders'> & {
+  auditInfo?: {
+    creator?: {
+      uuid?: string;
+      display?: string;
+    };
+  };
+  encounterProviders?: Array<EncounterProvider>;
+};
+
+interface PatientNote extends Note {
+  authorUuids: Array<string>;
+  authorNames: Array<string>;
+  datetime: string;
+  id: string;
+  notePreview: string;
+}
+
+const getNoteDatetime = (obsDatetime: string, encounterDatetime: string) => obsDatetime || encounterDatetime || '';
+
+interface PatientNotesTableProps {
+  notes: Array<PatientNote>;
+}
+
+const PatientNotesTable: React.FC<PatientNotesTableProps> = ({ notes }) => {
+  const { t } = useTranslation();
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const desktopLayout = isDesktop(useLayoutType());
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [notes]);
+
+  const tableHeaders = [
+    {
+      header: t('dateAndTime', 'Date & time'),
+      key: 'time',
+    },
+    {
+      header: t('note', 'Note'),
+      key: 'notePreview',
+    },
+    {
+      header: t('provider', 'Provider'),
+      key: 'providerName',
+    },
+    {
+      header: t('role', 'Role'),
+      key: 'providerRole',
+    },
+  ];
+
+  const paginatedNotes = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return notes.slice(startIndex, startIndex + pageSize);
+  }, [currentPage, notes, pageSize]);
+
+  const rows = useMemo(
+    () =>
+      paginatedNotes.map((note) => ({
+        id: note.id,
+        notePreview: <span className={notesStyles.notePreview}>{note.notePreview}</span>,
+        providerName: note.provider.name || '--',
+        providerRole: note.provider.role || '--',
+        time: note.time || '--',
+      })),
+    [paginatedNotes],
+  );
+
+  const notesById = useMemo(() => new Map(paginatedNotes.map((note) => [note.id, note])), [paginatedNotes]);
+
+  return (
+    <div className={tableStyles.container}>
+      <DataTable
+        headers={tableHeaders}
+        rows={rows}
+        size={desktopLayout ? 'sm' : 'lg'}
+        useZebraStyles={notes.length > 1}
+      >
+        {({ rows, headers, getTableProps, getHeaderProps, getExpandHeaderProps, getRowProps }) => (
+          <TableContainer className={tableStyles.tableContainer}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  const note = notesById.get(row.id);
+
+                  if (!note) {
+                    return null;
+                  }
+
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableExpandRow>
+                      {row.isExpanded ? (
+                        <TableExpandedRow className={tableStyles.expandedRow} colSpan={headers.length + 1}>
+                          <div className={notesStyles.noteTableDetails}>
+                            <p className={classNames(notesStyles.noteText, notesStyles.bodyLong01)}>{note.note}</p>
+                            <p className={notesStyles.metadata}>
+                              {note.time} {note.provider.name ? <span>&middot; {note.provider.name} </span> : null}
+                              {note.provider.role ? <span>&middot; {note.provider.role}</span> : null}
+                            </p>
+                          </div>
+                        </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={tableStyles.hiddenRow} colSpan={headers.length + 1} />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 && (
+              <div className={tableStyles.tileContainer}>
+                <Tile className={tableStyles.tile}>
+                  <div className={tableStyles.tileContent}>
+                    <p className={tableStyles.content}>{t('noNotesToDisplay', 'No notes to display')}</p>
+                  </div>
+                </Tile>
+              </div>
+            )}
+          </TableContainer>
+        )}
+      </DataTable>
+      <Pagination
+        forwardText={t('nextPage', 'Next page')}
+        backwardText={t('previousPage', 'Previous page')}
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={notes.length}
+        onChange={({ pageSize: newPageSize, page }) => {
+          if (newPageSize !== pageSize) {
+            setPageSize(newPageSize);
+          }
+          if (page !== currentPage) {
+            setCurrentPage(page);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+const PatientNotesSummary: React.FC<PatientNotesSummaryProps> = ({ patientUuid, isTabActive }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ChartConfig>();
+  const session = useSession();
+  const { data: encounters, isLoading, error } = useAllEncounters(isTabActive ? patientUuid : null);
+
+  const currentUserIdentifiers = useMemo(
+    () =>
+      new Set(
+        [
+          session?.user?.uuid,
+          session?.user?.person?.uuid,
+          session?.user?.display,
+          session?.currentProvider?.uuid,
+          (session?.currentProvider as { display?: string } | undefined)?.display,
+        ].filter(Boolean),
+      ),
+    [session],
+  );
+
+  const allNotes: Array<PatientNote> = useMemo(() => {
+    return ((encounters as Array<EncounterWithNotes>) ?? [])
+      .flatMap((encounter) => {
+        const encounterProvider = encounter.encounterProviders?.[0];
+        const providerName = encounterProvider?.provider?.person?.display ?? '';
+        const providerRole = encounterProvider?.encounterRole?.display ?? '';
+        const authorUuids = [
+          encounter.auditInfo?.creator?.uuid,
+          encounterProvider?.provider?.uuid,
+          encounterProvider?.provider?.person?.uuid,
+        ].filter(Boolean);
+        const authorNames = [encounter.auditInfo?.creator?.display, providerName].filter(Boolean);
+
+        return (encounter.obs ?? [])
+          .filter((obs) => config.notesConceptUuids?.includes(obs.concept.uuid))
+          .map((obs, obsIndex) => {
+            const datetime = getNoteDatetime(obs.obsDatetime, encounter.encounterDatetime);
+            const note = (typeof obs.value === 'string' ? obs.value : obs.display) ?? '';
+
+            return {
+              authorNames,
+              authorUuids,
+              concept: obs.concept,
+              datetime,
+              id: obs.uuid ?? `${encounter.uuid}-${obsIndex}`,
+              note,
+              notePreview: note?.length > 120 ? `${note.substring(0, 120)}...` : note,
+              provider: {
+                name: providerName,
+                role: providerRole,
+              },
+              time: datetime ? formatDatetime(parseDate(datetime), { noToday: true }) : '',
+            };
+          });
+      })
+      .sort((noteA, noteB) => new Date(noteB.datetime).getTime() - new Date(noteA.datetime).getTime());
+  }, [config.notesConceptUuids, encounters]);
+
+  const myNotes = useMemo(
+    () =>
+      allNotes.filter((note) =>
+        [...note.authorUuids, ...note.authorNames].some((identifier) => currentUserIdentifiers.has(identifier)),
+      ),
+    [allNotes, currentUserIdentifiers],
+  );
+
+  if (!isTabActive) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('notes', 'Notes')} />;
+  }
+
+  return (
+    <Tabs>
+      <TabList aria-label={t('patientNotesTabs', 'Patient notes tabs')} className={notesStyles.patientNotesTabList}>
+        <Tab className={notesStyles.patientNotesTab} id="all-notes-tab">
+          {t('allNotes', 'All Notes')}
+        </Tab>
+        <Tab className={notesStyles.patientNotesTab} id="my-notes-tab">
+          {t('myNotes', 'My Notes')}
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <PatientNotesTable notes={allNotes} />
+        </TabPanel>
+        <TabPanel>
+          <PatientNotesTable notes={myNotes} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default PatientNotesSummary;

package/src/visit/visits-widget/past-visits-components/tests-summary.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Encounter, ExtensionSlot } from '@openmrs/esm-framework';
+import { type ExternalOverviewProps } from '@openmrs/esm-patient-common-lib';
+
+const TestsSummary = ({ patientUuid, encounters = [] }: { patientUuid: string; encounters: Array<Encounter> }) => {
+  const filter = React.useMemo<ExternalOverviewProps['filter']>(() => {
+    const encounterIds = encounters.map((e) => `Encounter/${e.uuid}`);
+    return ([entry]) => {
+      return encounterIds.includes(entry.encounter?.reference);
+    };
+  }, [encounters]);
+
+  return <ExtensionSlot name="test-results-filtered-overview-slot" state={{ filter, patientUuid }} />;
+};
+
+export default TestsSummary;