@digihmis/esm-outpatient-app 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digihmis/esm-outpatient-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Outpatient microfrontend for the OpenMRS SPA",
   "browser": "dist/digihmis-esm-outpatient-app.js",
   "main": "src/index.ts",
@@ -37,6 +37,7 @@
     "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
   },
   "dependencies": {
+    "@digihmis/esm-commons-lib": "1.0.0",
     "lodash-es": "^4.17.15",
     "react-to-print": "2.14.13"
   },

package/src/icon-wrapper/icon-wrapper.extension.tsx

@@ -1,17 +1,2 @@
-import React from 'react';
-
-interface IconWrapperProps {
-  src: string;
-  alt?: string;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export const IconWrapper: React.FC<IconWrapperProps> = ({
-  src,
-  alt = 'Icon',
-  className,
-  style = { width: '100px', height: '148px' },
-}) => {
-  return <img src={src} alt={alt} className={className} style={style} />;
-};
+// Moved to the shared library so every app uses one implementation.
+export { IconWrapper, type IconWrapperProps } from '@digihmis/esm-commons-lib';

package/src/left-panel/left-panel.component.tsx

@@ -1,100 +1,6 @@
-import React, { useMemo } from 'react';
-import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import { BrowserRouter, useLocation, useParams } from 'react-router-dom';
-import { type CarbonIconType } from '@carbon/react/icons';
-import last from 'lodash-es/last';
-import styles from './left-panel.scss';
-
-export interface DashboardLinkConfig {
-  name: string;
-  title: string;
-  icon?: string | CarbonIconType;
-  showOnlyOnRoute?: string;
-}
-
-const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
-  const { t } = useTranslation();
-  const { name, title, icon, showOnlyOnRoute } = dashboardLinkConfig;
-  const location = useLocation();
-  const params = useParams();
-  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
-
-  // Extract patientUuid from the current URL path if params.patientUuid is not available
-  const patientUuid = useMemo(() => {
-    if (params.patientUuid) {
-      return params.patientUuid;
-    }
-    // Extract UUID from path like /outpatient/UUID/file or /outpatient/patient/UUID/file
-    const pathParts = location.pathname.split('/');
-    const outpatientIndex = pathParts.indexOf('outpatient');
-    if (outpatientIndex !== -1 && pathParts.length > outpatientIndex + 1) {
-      const nextPart = pathParts[outpatientIndex + 1];
-      // Check if it's a UUID pattern (basic check)
-      if (nextPart && nextPart.length > 20 && nextPart.includes('-')) {
-        return nextPart;
-      }
-      // Check if path is /outpatient/patient/UUID/file
-      if (nextPart === 'patient' && pathParts.length > outpatientIndex + 2) {
-        const uuidPart = pathParts[outpatientIndex + 2];
-        if (uuidPart && uuidPart.length > 20 && uuidPart.includes('-')) {
-          return uuidPart;
-        }
-      }
-    }
-    return null;
-  }, [params.patientUuid, location.pathname]);
-
-  const shouldShow = useMemo(() => {
-    if (!showOnlyOnRoute) {
-      return true;
-    }
-    return location.pathname.includes(showOnlyOnRoute);
-  }, [showOnlyOnRoute, location.pathname]);
-
-  const linkPath = useMemo(() => {
-    let path = name;
-    if (name.includes(':patientUuid') && patientUuid) {
-      path = name.replace(':patientUuid', patientUuid);
-    }
-    return path;
-  }, [name, patientUuid]);
-
-  const isActive = useMemo(() => {
-    if (name.includes(':patientUuid')) {
-      return location.pathname.includes('/file');
-    }
-    const urlSegment = decodeURIComponent(last(location.pathname.split('/')));
-    const nameSegment = name.split('/').at(-1);
-    return nameSegment === urlSegment;
-  }, [location.pathname, name]);
-
-  if (!shouldShow) {
-    return null;
-  }
-
-  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
-
-  return (
-    <ConfigurableLink
-      to={`${spaBasePath}/${linkPath}`}
-      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
-      {typeof icon === 'string' ? (
-        <MaybeIcon icon={icon} className={styles.icon} size={16} />
-      ) : (
-        IconComp && <IconComp className={styles.icon} />
-      )}
-      {t(title)}
-    </ConfigurableLink>
-  );
-};
-
-export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
-  return (
-    <BrowserRouter>
-      <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />
-    </BrowserRouter>
-  );
-};
-
-export default DashboardLink;
+// Moved to the shared library so every app uses one implementation.
+export {
+  DashboardLink as default,
+  createDashboardLink,
+  type DashboardLinkConfig,
+} from '@digihmis/esm-commons-lib';

package/src/page-header/page-header.component.tsx

@@ -1,35 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Calendar } from '@carbon/react/icons';
-import { useSession, formatDate, ExtensionSlot, useConfig } from '@openmrs/esm-framework';
-import styles from './page-header.scss';
+import { useConfig } from '@openmrs/esm-framework';
+import { PageHeader as CommonPageHeader } from '@digihmis/esm-commons-lib';
 import { ConfigObject } from '../config-schema';
-import { IconWrapper } from '../icon-wrapper/icon-wrapper.extension';
 
+// The shared header lives in @digihmis/esm-commons-lib; this passes the module's title + icon.
 export const PageHeader: React.FC = () => {
   const { t } = useTranslation();
-  const userSession = useSession();
   const { outpatientIcon } = useConfig<ConfigObject>();
-  const userLocation = userSession?.sessionLocation?.display;
-
   return (
-    <div className={styles.header}>
-      <div className={styles['left-justified-items']}>
-        <IconWrapper src={outpatientIcon.src} alt={outpatientIcon.alt} />
-        <div className={styles['page-labels']}>
-          <p className={styles['page-name']}>{userLocation}</p>
-          <p className={styles['page-subtitle']}>{t('outpatient', 'Outpatient')}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles.extensionSlot}>
-          <ExtensionSlot name={'provider-banner-slot'} />
-          <div className={styles['date-and-location']}>
-            <Calendar size={16} />
-            <span className={styles.value}>{formatDate(new Date(), { mode: 'wide', noToday: true })}</span>
-          </div>
-        </div>
-      </div>
-    </div>
+    <CommonPageHeader title={t('outpatient', 'Outpatient')} iconSrc={outpatientIcon.src} iconAlt={outpatientIcon.alt} />
   );
 };

package/src/patient-management/clinical-encounters.component.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Tile,
+} from '@carbon/react';
+import { Add, Printer, Stethoscope } from '@carbon/react/icons';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import {
+  type ClinicalEncounter,
+  type EncounterObs,
+  openVisitSummary,
+  useClinicalEncounters,
+  useClinicalEncounterFieldLabels,
+} from './clinical-encounters.resource';
+import styles from './patient-management.scss';
+
+interface ClinicalEncountersListProps {
+  patientUuid: string;
+  onStartConsultation: () => void;
+}
+
+/** Uniform sentence case for observation labels, matching the printed discharge/case summary. */
+function toSentenceCase(text: string): string {
+  if (!text) {
+    return text;
+  }
+  const lower = text.toLowerCase();
+  return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
+
+/** Render an obs value whether it is coded (an object with display), boolean, numeric or free text. */
+function formatObsValue(value: unknown): string {
+  if (value == null || value === '') {
+    return '—';
+  }
+  if (typeof value === 'object') {
+    const coded = value as { display?: string };
+    return coded.display ?? String(value);
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'Yes' : 'No';
+  }
+  return String(value);
+}
+
+function providerName(encounter: ClinicalEncounter): string | null {
+  return encounter.encounterProviders?.[0]?.provider?.display ?? null;
+}
+
+/** The saved clinical-encounter records for a patient, shown on the Clinical encounter tab. */
+const ClinicalEncountersList: React.FC<ClinicalEncountersListProps> = ({ patientUuid, onStartConsultation }) => {
+  const { t } = useTranslation();
+  const { encounters, isLoading } = useClinicalEncounters(patientUuid);
+  const fieldLabels = useClinicalEncounterFieldLabels();
+
+  const headers = [
+    { key: 'date', header: t('date', 'Date') },
+    { key: 'provider', header: t('provider', 'Provider') },
+    { key: 'diagnoses', header: t('diagnoses', 'Diagnoses') },
+    { key: 'summary', header: t('summary', 'Summary') },
+  ];
+
+  const byUuid = React.useMemo(() => new Map(encounters.map((e) => [e.uuid, e])), [encounters]);
+
+  const rows = encounters.map((e) => {
+    const obsCount = (e.obs ?? []).filter((o) => o.concept).length;
+    const summary = [
+      obsCount ? t('findingsCount', '{{count}} findings', { count: obsCount }) : null,
+      e.orders?.length ? t('ordersCount', '{{count}} orders', { count: e.orders.length }) : null,
+    ]
+      .filter(Boolean)
+      .join(' · ');
+    return {
+      id: e.uuid,
+      date: formatDatetime(parseDate(e.encounterDatetime), { mode: 'standard' }),
+      provider: providerName(e) ?? '—',
+      diagnoses: e.diagnoses?.length ? e.diagnoses.map((d) => d.display).join(', ') : '—',
+      summary: summary || '—',
+    };
+  });
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} rowCount={4} columnCount={4} />;
+  }
+
+  if (encounters.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.emptyTile}>
+          <Stethoscope size={32} className={styles.emptyIcon} />
+          <p className={styles.emptyTitle}>{t('noConsultationsTitle', 'No consultations yet')}</p>
+          <p className={styles.emptyBody}>
+            {t('noConsultationsBody', 'Start a consultation to record findings for this visit.')}
+          </p>
+          <Button kind="ghost" size="sm" renderIcon={Add} onClick={onStartConsultation}>
+            {t('startConsultation', 'Start consultation')}
+          </Button>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <div className={styles.encounterList}>
+      <div className={styles.encounterListHeader}>
+        <span className={styles.encounterCount}>
+          {t('clinicalEncountersCount', '{{count}} clinical encounter(s)', { count: encounters.length })}
+        </span>
+        <Button kind="ghost" size="sm" renderIcon={Add} onClick={onStartConsultation}>
+          {t('startConsultation', 'Start consultation')}
+        </Button>
+      </div>
+
+      <DataTable rows={rows} headers={headers} size="sm" useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getExpandedRowProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()} aria-label={t('clinicalEncounters', 'Clinical encounters')}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader aria-label={t('expandRow', 'Expand row')} />
+                  {headers.map((header) => {
+                    const { key, ...headerProps } = getHeaderProps({ header });
+                    return (
+                      <TableHeader key={header.key} {...headerProps}>
+                        {header.header}
+                      </TableHeader>
+                    );
+                  })}
+                  <TableHeader aria-label={t('actions', 'Actions')} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  const { key, ...rowProps } = getRowProps({ row });
+                  const visitUuid = byUuid.get(row.id)?.visit?.uuid;
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableExpandRow {...rowProps}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                        <TableCell className={styles.rowActionCell}>
+                          {visitUuid && (
+                            <Button
+                              kind="ghost"
+                              size="sm"
+                              hasIconOnly
+                              renderIcon={Printer}
+                              iconDescription={t('printSummary', 'Print summary')}
+                              tooltipPosition="left"
+                              onClick={() => openVisitSummary(visitUuid)}
+                            />
+                          )}
+                        </TableCell>
+                      </TableExpandRow>
+                      <TableExpandedRow colSpan={headers.length + 2} {...getExpandedRowProps({ row })}>
+                        {byUuid.get(row.id) && (
+                          <EncounterDetail encounter={byUuid.get(row.id)!} fieldLabels={fieldLabels} t={t} />
+                        )}
+                      </TableExpandedRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+const EncounterDetail: React.FC<{
+  encounter: ClinicalEncounter;
+  fieldLabels: Record<string, string>;
+  t: (k: string, f: string) => string;
+}> = ({ encounter, fieldLabels, t }) => {
+  const obs = (encounter.obs ?? []).filter((o: EncounterObs) => o.concept);
+  const hasNothing = !encounter.diagnoses?.length && !obs.length && !encounter.orders?.length;
+  return (
+    <div className={styles.detail}>
+      {encounter.diagnoses?.length > 0 && (
+        <section className={styles.detailSection}>
+          <h6 className={styles.detailLabel}>{t('diagnoses', 'Diagnoses')}</h6>
+          <div className={styles.tagRow}>
+            {encounter.diagnoses.map((d, i) => (
+              <Tag key={i} type={d.rank === 1 ? 'red' : 'gray'}>
+                {d.display}
+                {d.certainty === 'CONFIRMED' ? ` · ${t('confirmed', 'Confirmed')}` : ` · ${t('presumed', 'Presumed')}`}
+              </Tag>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {obs.length > 0 && (
+        <section className={styles.detailSection}>
+          <h6 className={styles.detailLabel}>{t('findings', 'Findings')}</h6>
+          <dl className={styles.obsGrid}>
+            {obs.map((o) => (
+              <div key={o.uuid} className={styles.obsRow}>
+                <dt className={styles.obsName}>
+                  {(o.concept?.uuid && fieldLabels[o.concept.uuid]) || toSentenceCase(o.concept?.display ?? '')}
+                </dt>
+                <dd className={styles.obsValue}>{formatObsValue(o.value)}</dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+      )}
+
+      {encounter.orders?.length > 0 && (
+        <section className={styles.detailSection}>
+          <h6 className={styles.detailLabel}>{t('orders', 'Orders')}</h6>
+          <ul className={styles.orderList}>
+            {encounter.orders.map((o, i) => (
+              <li key={i}>{o.display}</li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {hasNothing && <p className={styles.emptyBody}>{t('noRecordedData', 'No data was recorded on this encounter.')}</p>}
+    </div>
+  );
+};
+
+export default ClinicalEncountersList;

package/src/patient-management/clinical-encounters.resource.ts

@@ -0,0 +1,90 @@
+import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+/** The Clinical Encounter type the custom form engine saves against. */
+const CLINICAL_ENCOUNTER_TYPE = 'd89b11c0-78f3-45a4-9300-587d91145462';
+
+export interface EncounterObs {
+  uuid: string;
+  concept?: { uuid: string; display: string };
+  value: unknown;
+}
+
+export interface EncounterDiagnosis {
+  display: string;
+  certainty?: string;
+  rank?: number;
+}
+
+export interface EncounterOrderRef {
+  display: string;
+}
+
+export interface ClinicalEncounter {
+  uuid: string;
+  encounterDatetime: string;
+  encounterProviders: Array<{ provider?: { display: string } }>;
+  visit?: { uuid: string };
+  obs: Array<EncounterObs>;
+  diagnoses: Array<EncounterDiagnosis>;
+  orders: Array<EncounterOrderRef>;
+}
+
+const REP =
+  'custom:(uuid,encounterDatetime,encounterProviders:(provider:(display)),visit:(uuid),' +
+  'obs:(uuid,concept:(uuid,display),value),diagnoses:(display,certainty,rank),orders:(display))';
+
+/** The clinical-encounter form id whose field labels drive the records-table observation labels. */
+const CLINICAL_ENCOUNTER_FORM = 'clinical-encounter';
+
+interface RawFormField {
+  concept?: string;
+  label?: string;
+}
+interface RawFormSection {
+  fields?: Array<RawFormField>;
+}
+interface RawFormPage {
+  sections?: Array<RawFormSection>;
+}
+
+/**
+ * Concept-uuid -> authored form field label for the clinical-encounter form, so the records table
+ * shows each observation under its form label (matching the printed summary). Empty until loaded.
+ */
+export function useClinicalEncounterFieldLabels(): Record<string, string> {
+  const url = `${restBaseUrl}/digihmisforms/form/${CLINICAL_ENCOUNTER_FORM}`;
+  const { data } = useSWR<FetchResponse<{ pages?: Array<RawFormPage> }>>(url, openmrsFetch);
+  const labels: Record<string, string> = {};
+  for (const page of data?.data?.pages ?? []) {
+    for (const section of page.sections ?? []) {
+      for (const field of section.fields ?? []) {
+        if (field.concept && field.label) {
+          labels[field.concept] = field.label;
+        }
+      }
+    }
+  }
+  return labels;
+}
+
+/** The patient's saved clinical-encounter records, most recent first. */
+export function useClinicalEncounters(patientUuid?: string) {
+  const url = patientUuid
+    ? `${restBaseUrl}/encounter?patient=${patientUuid}&encounterType=${CLINICAL_ENCOUNTER_TYPE}&v=${REP}&limit=50`
+    : null;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<ClinicalEncounter> }>>(
+    url,
+    openmrsFetch,
+  );
+  const encounters = (data?.data?.results ?? [])
+    .slice()
+    .sort((a, b) => (a.encounterDatetime < b.encounterDatetime ? 1 : -1));
+  return { encounters, error, isLoading, mutate };
+}
+
+/** Open a visit's discharge/case summary PDF (digihmis-module-print) in a new tab. */
+export function openVisitSummary(visitUuid: string) {
+  const base = (window as unknown as { openmrsBase?: string }).openmrsBase ?? '/openmrs';
+  window.open(`${base}${restBaseUrl}/digihmisprint/dischargeSummary?visitUuid=${visitUuid}`, '_blank', 'noopener');
+}