@digihmis/esm-outpatient-app 1.0.4 → 1.0.5

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.24.0"},"extensions":[{"name":"outpatient-dashboard-header","slot":"outpatient-sidebar-slot","component":"outpatientDashboardHeader","order":0,"online":true,"offline":true},{"name":"outpatient-db-link","slot":"outpatient-dashboard-slot","component":"leftPanelLink","meta":{"name":"outpatient","slot":"outpatient-homepage-dashboard-slot","title":"Outpatient queue"},"order":1,"online":true,"offline":true},{"name":"outpatient-queue-dashboard","slot":"outpatient-homepage-dashboard-slot","component":"outpatientQueueDashboard"},{"name":"care-panel-link","slot":"outpatient-dashboard-slot","component":"carePanelLink","meta":{"name":"outpatient/patient/:patientUuid/file","slot":"outpatient-file-dashboard-slot","title":"Patient file","showOnlyOnRoute":"/file"},"order":2,"online":true,"offline":true},{"name":"care-panel-history","slot":"outpatient-file-dashboard-slot","component":"carePanel"}],"workspaces":[],"version":"1.0.4"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.24.0"},"extensions":[{"name":"outpatient-dashboard-header","slot":"outpatient-sidebar-slot","component":"outpatientDashboardHeader","order":0,"online":true,"offline":true},{"name":"outpatient-db-link","slot":"outpatient-dashboard-slot","component":"leftPanelLink","meta":{"name":"outpatient","slot":"outpatient-homepage-dashboard-slot","title":"Outpatient queue"},"order":1,"online":true,"offline":true},{"name":"outpatient-queue-dashboard","slot":"outpatient-homepage-dashboard-slot","component":"outpatientQueueDashboard"},{"name":"care-panel-link","slot":"outpatient-dashboard-slot","component":"carePanelLink","meta":{"name":"outpatient/patient/:patientUuid/file","slot":"outpatient-file-dashboard-slot","title":"Patient file","showOnlyOnRoute":"/patient/"},"order":2,"online":true,"offline":true},{"name":"care-panel-history","slot":"outpatient-file-dashboard-slot","component":"carePanel"}],"workspaces":[],"version":"1.0.5"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digihmis/esm-outpatient-app",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Outpatient microfrontend for the OpenMRS SPA",
   "browser": "dist/digihmis-esm-outpatient-app.js",
   "main": "src/index.ts",

package/src/config-schema.ts

@@ -210,6 +210,12 @@ export const configSchema: ConfigSchema = {
     _description: 'Procedure Concept SET UUID',
     _default: '165418AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
   },
+  radiologyConceptSetUuid: {
+    _type: Type.String,
+    _description:
+      'Radiology/Imaging Concept SET UUID. Used on the patient file to split a patient’s studies into the Imaging tab (concepts in this set) vs the Procedures tab (everything else).',
+    _default: '164068AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
   visitAttributeTypes: {
     paymentMethods: {
       _type: Type.String,
@@ -332,6 +338,7 @@ export type ConfigObject = {
   };
   procedureOrderTypeUuid: string;
   procedureConceptSetUuid: string;
+  radiologyConceptSetUuid: string;
   visitAttributeTypes: {
     paymentMethods: string;
     insuranceScheme: string;

package/src/dashboard.meta.ts

@@ -12,5 +12,7 @@ export const carePanelMeta = {
   slot: 'outpatient-file-dashboard-slot',
   title: 'Patient file',
   icon: UserIdentification,
-  showOnlyOnRoute: '/file',
+  // Show the link throughout a patient's context (any /patient/<uuid>/... route), not only on the
+  // /file route itself — otherwise it vanishes the moment you're on any other patient sub-route.
+  showOnlyOnRoute: '/patient/',
 };

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

@@ -28,6 +28,7 @@ import {
   useClinicalEncounterFieldLabels,
 } from './clinical-encounters.resource';
 import styles from './patient-management.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
 
 interface ClinicalEncountersListProps {
   patientUuid: string;
@@ -62,7 +63,6 @@ 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);
@@ -117,17 +117,24 @@ const ClinicalEncountersList: React.FC<ClinicalEncountersListProps> = ({ patient
 
   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 className={styles.cardEncounter}>
+        <CardHeader title={t('clinicalEncounters', 'Clinical encounters ')}>
+          <Button kind="ghost" size="sm" renderIcon={Add} onClick={onStartConsultation}>
+            {t('startConsultation', 'Start consultation')}
+          </Button>
+        </CardHeader>
       </div>
 
       <DataTable rows={rows} headers={headers} size="sm" useZebraStyles>
-        {({ rows, headers, getHeaderProps, getRowProps, getExpandedRowProps, getTableProps, getTableContainerProps }) => (
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getExpandedRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
           <TableContainer {...getTableContainerProps()}>
             <Table {...getTableProps()} aria-label={t('clinicalEncounters', 'Clinical encounters')}>
               <TableHead>

package/src/patient-management/patient-management-workspace/patient-management-schema/index.ts

@@ -83,8 +83,8 @@ export const BaseClinicalEncounterSchema = z.object({
   // Lymphadenopathy (when Lymphadenopathy is selected)
   siteLymphadenopathy: z.array(genericItemSchema).optional().default([]),
 
-  // Section 3: Diagnosis
-  primaryDiagnosis: z.array(genericItemSchema).optional().default([]),
+  // Section 3: Diagnosis — a primary diagnosis is mandatory before an encounter can be saved.
+  primaryDiagnosis: z.array(genericItemSchema).min(1, 'Please select at least one primary diagnosis'),
   secondaryDiagnosis: z.array(genericItemSchema).optional().default([]),
   diagnosisNotes: z.string().optional(),
 

package/src/patient-management/patient-management-workspace/patient-management-workspace.tsx

@@ -536,6 +536,9 @@ const ClinicalEncounterWorkspace: React.FC<ClinicalEncounterWorkspaceProps> = ({
       if (hasLymphadenopathy) {
         fieldsToValidate.push('siteLymphadenopathy');
       }
+    } else if (currentSection === 3) {
+      // Diagnosis step: a primary diagnosis is mandatory before leaving this step.
+      fieldsToValidate.push('primaryDiagnosis');
     }
 
     const isValid = fieldsToValidate.length > 0 ? await trigger(fieldsToValidate) : true;

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

@@ -12,7 +12,15 @@ import {
   Tag,
   Tile,
 } from '@carbon/react';
-import { Calendar, ChartLineData, Medication, Microscope, Stethoscope, type CarbonIconType } from '@carbon/react/icons';
+import {
+  Activity,
+  Calendar,
+  ChartLineData,
+  Medication,
+  Microscope,
+  Stethoscope,
+  type CarbonIconType,
+} from '@carbon/react/icons';
 import {
   ExtensionSlot,
   formatDatetime,
@@ -23,6 +31,7 @@ import {
 } from '@openmrs/esm-framework';
 import PatientBanner from './patient-banner/patient-banner.component';
 import ClinicalEncountersList from './clinical-encounters.component';
+import { LabResults, ImagingResults, ProcedureResults } from './results/investigation-results.component';
 import { getPatientUuidFromUrl } from './utils';
 import styles from './patient-management.scss';
 
@@ -82,6 +91,14 @@ const CarePanel: React.FC = () => {
       emptyTitle: t('noImagingTitle', 'No imaging results'),
       emptyBody: t('noImagingBody', 'Radiology and imaging results will appear here.'),
     },
+    {
+      key: 'procedures',
+      label: t('procedures', 'Procedures'),
+      icon: Activity,
+      slot: 'outpatient-procedures-slot',
+      emptyTitle: t('noProcedureTitle', 'No procedure reports'),
+      emptyBody: t('noProcedureBody', 'Procedure reports for this patient will appear here.'),
+    },
     {
       key: 'prescriptions',
       label: t('prescriptions', 'Prescriptions'),
@@ -102,33 +119,33 @@ const CarePanel: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <Layer>
-        <Tile className={styles.headerCard}>
-          {isLoading ? (
-            <SkeletonText heading width="50%" />
-          ) : (
-            patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow />
-          )}
-
-        </Tile>
-      </Layer>
+      {isLoading ? (
+        <SkeletonText heading width="50%" />
+      ) : (
+        patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow />
+      )}
 
       <ExtensionSlot name="patient-vitals-header-slot" state={{ patientUuid }} className={styles.vitals} />
-
-      <Layer className={styles.tabsCard}>
-        <Tabs>
-          <TabList aria-label={t('carePanel', 'Care panel')} contained>
-            {tabs.map((tab) => (
-              <Tab key={tab.key} renderIcon={tab.icon}>
-                {tab.label}
-              </Tab>
-            ))}
-          </TabList>
-          <TabPanels>
-            {tabs.map((tab) => (
+      <div className={styles.tabsContainer}>
+      <Tabs>
+        <TabList aria-label={t('carePanel', 'Care panel')} scrollDebounceWait={200}>
+          {tabs.map((tab) => (
+            <Tab key={tab.key} renderIcon={tab.icon}>
+              {tab.label}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabs.map((tab) => (
               <TabPanel key={tab.key} className={styles.tabPanel}>
                 {tab.key === 'encounter' ? (
                   <ClinicalEncountersList patientUuid={patientUuid} onStartConsultation={startConsultation} />
+                ) : tab.key === 'labs' ? (
+                  <LabResults patientUuid={patientUuid} />
+                ) : tab.key === 'imaging' ? (
+                  <ImagingResults patientUuid={patientUuid} />
+                ) : tab.key === 'procedures' ? (
+                  <ProcedureResults patientUuid={patientUuid} />
                 ) : (
                   <>
                     <ExtensionSlot name={tab.slot} state={{ patientUuid, visitUuid: activeVisit?.uuid }} />
@@ -137,9 +154,9 @@ const CarePanel: React.FC = () => {
                 )}
               </TabPanel>
             ))}
-          </TabPanels>
-        </Tabs>
-      </Layer>
+        </TabPanels>
+      </Tabs>
+      </div>
     </div>
   );
 };

package/src/patient-management/patient-management.scss

@@ -2,16 +2,19 @@
 @use '@carbon/type';
 
 .container {
-  padding: layout.$spacing-05;
-  margin: 0 auto;
+  margin: 1rem auto;
+
 }
 
-/* ---- Header card: banner + visit status + primary action ---- */
 .headerCard {
   padding: layout.$spacing-05;
   margin-bottom: layout.$spacing-05;
 }
 
+.cardEncounter {
+  padding-top: layout.$spacing-03;
+}
+
 .actionBar {
   display: flex;
   align-items: center;
@@ -29,10 +32,8 @@
 
 .vitals {
   display: block;
-  margin-bottom: layout.$spacing-05;
 }
 
-/* ---- Tabs card ---- */
 .tabsCard {
   border: 1px solid var(--cds-border-subtle);
 }
@@ -189,3 +190,30 @@
   text-align: right;
   width: 3rem;
 }
+
+
+.tabsContainer {
+  padding-left: layout.$spacing-06;
+  padding-right: layout.$spacing-06;
+  background: var(--cds-field);
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding-left: layout.$spacing-03;
+    padding-right: layout.$spacing-03;
+  }
+}
+
+.tabsHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 0.51rem;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-03;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-03;
+  }
+}

package/src/patient-management/results/investigation-results.component.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  InlineLoading,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Tile,
+} from '@carbon/react';
+import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import {
+  formatLabValue,
+  useConceptSetMembers,
+  useLabResults,
+  useProcedureRecords,
+  type ProcedureRecord,
+} from './results.resource';
+import styles from './investigation-results.scss';
+
+/** Map a report/procedure/order status to a Carbon tag colour. */
+function statusColor(status?: string): string {
+  const s = (status ?? '').toLowerCase();
+  if (s.includes('approv') || s.includes('complet') || s.includes('verif')) {
+    return 'green';
+  }
+  if (s.includes('prelim') || s.includes('report')) {
+    return 'blue';
+  }
+  if (s.includes('progress') || s.includes('receiv')) {
+    return 'teal';
+  }
+  return 'gray';
+}
+
+function formatDate(value?: string): string {
+  if (!value) {
+    return '';
+  }
+  try {
+    return formatDatetime(parseDate(value), { mode: 'standard' });
+  } catch {
+    return value;
+  }
+}
+
+const Loading: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.loading}>
+      <InlineLoading description={t('loadingResults', 'Loading results…')} />
+    </div>
+  );
+};
+
+const Empty: React.FC<{ message: string }> = ({ message }) => (
+  <Layer>
+    <Tile>
+      <p className={styles.empty}>{message}</p>
+    </Tile>
+  </Layer>
+);
+
+// ---- Lab results --------------------------------------------------------------
+
+export const LabResults: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { labResults, isLoading, error } = useLabResults(patientUuid);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (error) {
+    return <p className={styles.error}>{t('labResultsError', 'Could not load lab results.')}</p>;
+  }
+  if (!labResults.length) {
+    return <Empty message={t('noLabResultsBody', 'Laboratory results for this patient will appear here.')} />;
+  }
+
+  return (
+    <div className={styles.list}>
+      {labResults.map((record) => (
+        <Layer key={record.orderUuid}>
+          <Tile className={styles.card}>
+            <div className={styles.cardHeader}>
+              <h4 className={styles.title}>{record.testName}</h4>
+              <span className={styles.date}>{formatDate(record.date)}</span>
+            </div>
+            {record.results.length ? (
+              <Table size="sm" className={styles.valuesTable}>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>{t('test', 'Test')}</TableHeader>
+                    <TableHeader>{t('result', 'Result')}</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {record.results.map((value, index) => (
+                    <TableRow key={`${record.orderUuid}-${index}`}>
+                      <TableCell>{value.concept?.display ?? '—'}</TableCell>
+                      <TableCell>{formatLabValue(value.value)}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            ) : (
+              <p className={styles.empty}>{t('noValues', 'No recorded values.')}</p>
+            )}
+          </Tile>
+        </Layer>
+      ))}
+    </div>
+  );
+};
+
+// ---- Shared report list (imaging + procedure) ---------------------------------
+
+const ReportCard: React.FC<{ record: ProcedureRecord }> = ({ record }) => {
+  const { t } = useTranslation();
+  const findings = record.procedureReport || record.preliminaryReport;
+  return (
+    <Layer>
+      <Tile className={styles.card}>
+        <div className={styles.cardHeader}>
+          <h4 className={styles.title}>{record.concept?.display ?? t('study', 'Study')}</h4>
+          <div className={styles.cardHeader}>
+            {record.status && <Tag type={statusColor(record.status)}>{record.status}</Tag>}
+            <span className={styles.date}>{formatDate(record.startDatetime)}</span>
+          </div>
+        </div>
+        {findings ? (
+          <div className={styles.section}>
+            <p className={styles.sectionLabel}>{t('findings', 'Findings')}</p>
+            <p className={styles.reportText}>{findings}</p>
+          </div>
+        ) : (
+          <p className={styles.empty}>{t('noReportYet', 'No report entered yet.')}</p>
+        )}
+        {record.impressions && (
+          <div className={styles.section}>
+            <p className={styles.sectionLabel}>{t('impression', 'Impression')}</p>
+            <p className={styles.reportText}>{record.impressions}</p>
+          </div>
+        )}
+      </Tile>
+    </Layer>
+  );
+};
+
+const ProcedureReportList: React.FC<{
+  patientUuid: string;
+  variant: 'imaging' | 'procedure';
+  emptyMessage: string;
+}> = ({ patientUuid, variant, emptyMessage }) => {
+  const { t } = useTranslation();
+  const { radiologyConceptSetUuid } = useConfig<ConfigObject>();
+  const { procedures, isLoading, error } = useProcedureRecords(patientUuid);
+  const radiologyMembers = useConceptSetMembers(radiologyConceptSetUuid);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (error) {
+    return <p className={styles.error}>{t('studiesError', 'Could not load studies.')}</p>;
+  }
+
+  const filtered = procedures.filter((record) => {
+    const isImaging = record.concept ? radiologyMembers.has(record.concept.uuid) : false;
+    return variant === 'imaging' ? isImaging : !isImaging;
+  });
+
+  if (!filtered.length) {
+    return <Empty message={emptyMessage} />;
+  }
+
+  return (
+    <div className={styles.list}>
+      {filtered.map((record) => (
+        <ReportCard key={record.uuid} record={record} />
+      ))}
+    </div>
+  );
+};
+
+export const ImagingResults: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <ProcedureReportList
+      patientUuid={patientUuid}
+      variant="imaging"
+      emptyMessage={t('noImagingBody', 'Radiology and imaging results will appear here.')}
+    />
+  );
+};
+
+export const ProcedureResults: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <ProcedureReportList
+      patientUuid={patientUuid}
+      variant="procedure"
+      emptyMessage={t('noProcedureBody', 'Procedure reports for this patient will appear here.')}
+    />
+  );
+};

package/src/patient-management/results/investigation-results.scss

@@ -0,0 +1,75 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-03 0;
+}
+
+.card {
+  padding: layout.$spacing-05;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+  margin-bottom: layout.$spacing-03;
+}
+
+.title {
+  @include type.type-style('heading-compact-02');
+  margin: 0;
+}
+
+.date {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+}
+
+.section {
+  margin-top: layout.$spacing-04;
+}
+
+.sectionLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: layout.$spacing-02;
+}
+
+.reportText {
+  @include type.type-style('body-01');
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+.valuesTable {
+  width: 100%;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: layout.$spacing-06;
+}
+
+.empty {
+  @include type.type-style('body-01');
+  color: colors.$gray-60;
+  padding: layout.$spacing-05;
+  text-align: center;
+}
+
+.error {
+  @include type.type-style('body-01');
+  color: colors.$red-60;
+  padding: layout.$spacing-05;
+  text-align: center;
+}