@kenyaemr/esm-care-panel-app 5.4.2-pre.2178 → 5.4.2-pre.2188

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"patient-chart-hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false},{"name":"dispensing-patient-vitals","component":"dispensingPaentientVitals","slot":"dispensing-condition-and-diagnoses","order":1,"online":true,"offline":true}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"}],"version":"5.4.2-pre.2178"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"patient-chart-hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false},{"name":"dispensing-patient-vitals","component":"dispensingPaentientVitals","slot":"dispensing-condition-and-diagnoses","order":1,"online":true,"offline":true}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"}],"version":"5.4.2-pre.2188"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-care-panel-app",
-  "version": "5.4.2-pre.2178",
+  "version": "5.4.2-pre.2188",
   "description": "Patient care panels microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-care-panel-app.js",
   "main": "src/index.ts",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.15",
-    "react-to-print": "^2.14.13"
+    "react-to-print": "^3.1.0"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",

package/src/patient-summary/patient-summary-body.component.tsx

@@ -0,0 +1,272 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '@openmrs/esm-framework';
+import PatientSummaryRow from './patient-summary-row.component';
+import styles from './patient-summary.scss';
+import { type PatientSummary } from '../types';
+
+function capitalizeEveryWord(str) {
+  if (!str) {
+    return '';
+  }
+  return str.replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+interface PatientSummaryBodyProps {
+  data: PatientSummary;
+}
+
+const PatientSummaryBody: React.FC<PatientSummaryBodyProps> = ({ data }) => {
+  const { t } = useTranslation();
+  const currentUserSession = useSession();
+
+  return (
+    <>
+      <PatientSummaryRow
+        items={[
+          { label: t('reportDate', 'Report Date'), value: data?.reportDate, isDate: true },
+          { label: t('clinicName', 'Clinic Name'), value: data?.clinicName },
+          { label: t('mflCode', 'MFL Code'), value: data?.mflCode },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('uniquePatientIdentifier', 'Unique Patient Identifier'), value: data?.uniquePatientIdentifier },
+          {
+            label: t('nationalUniquePatientIdentifier', 'National Unique Patient Identifier'),
+            value: data?.nationalUniquePatientIdentifier,
+          },
+          { label: t('patientName', 'Patient Name'), value: capitalizeEveryWord(data?.patientName) },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('birthDate', 'Birth Date'), value: data?.birthDate, isDate: true },
+          { label: t('age', 'Age'), value: data?.age },
+          { label: t('gender', 'Gender'), value: data?.gender, isGender: true },
+        ]}
+      />
+
+      <PatientSummaryRow items={[{ label: t('maritalStatus', 'Marital Status'), value: data?.maritalStatus }]} />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          {
+            label: t('dateConfirmedPositive', 'Date Confirmed Positive'),
+            value: data?.dateConfirmedHIVPositive,
+            isDate: true,
+          },
+          { label: t('firstCD4', 'First CD4'), value: data?.firstCd4 },
+          { label: t('dateFirstCD4', 'Date First CD4'), value: data?.firstCd4Date, isNone: true },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('dateEnrolledToCare', 'Date Enrolled to Care'), value: data?.dateEnrolledIntoCare, isDate: true },
+          { label: t('whoAtEnrollment', 'WHO at Enrollment'), value: data?.whoStagingAtEnrollment },
+          { label: t('transferInDate', 'Transfer In Date'), value: data?.transferInDate, isNone: true },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('entryPoint', 'Entry Point'), value: data?.patientEntryPoint },
+          { label: t('dateOfEntryPoint', 'Date of Entry Point'), value: data?.patientEntryPointDate, isDate: true },
+          { label: t('facilityTransferredFrom', 'Facility Transferred From'), value: data?.transferInFacility },
+        ]}
+      />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('weight', 'Weight'), value: data?.weight },
+          { label: t('height', 'Height'), value: data?.height },
+          { label: t('bmi', 'BMI'), value: data?.bmi },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          {
+            label: t('bloodPressure', 'Blood Pressure'),
+            value: data?.bloodPressure && data?.bpDiastolic ? `${data?.bloodPressure}/${data?.bpDiastolic}` : null,
+          },
+          { label: t('oxygenSaturation', 'Oxygen Saturation'), value: data?.oxygenSaturation },
+          { label: t('respiratoryRate', 'Respiratory Rate'), value: data?.respiratoryRate },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('pulseRate', 'Pulse Rate'), value: data?.pulseRate },
+          { label: t('familyProtection', 'Family Protection'), value: data?.familyProtection },
+          { label: t('tbScreeningOutcome', 'TB Screening Outcome'), value: data?.tbScreeningOutcome },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: 'chronicDisease', value: data?.chronicDisease },
+          { label: 'ioHistory', value: data?.iosResults },
+          { label: 'stiScreeningOutcome', value: data?.stiScreeningOutcome },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          ...(data?.gender === 'F'
+            ? [{ label: t('caxcScreeningOutcome', 'CAXC Screening Outcome'), value: data?.caxcScreeningOutcome }]
+            : []),
+          { label: t('dateEnrolledInTb', 'Date Enrolled in TB'), value: data?.dateEnrolledInTb, isNone: true },
+          { label: t('dateCompletedInTb', 'Date Completed in TB'), value: data?.dateCompletedInTb, isNone: true },
+          ...(data?.gender === 'F' ? [{ label: t('lmp', 'LMP'), value: data?.lmp, isDate: true }] : []),
+        ]}
+      />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          {
+            label: t('treatmentSupporterName', 'Treatment Supporter Name'),
+            value: capitalizeEveryWord(data?.nameOfTreatmentSupporter),
+          },
+          {
+            label: t('treatmentSupporterRelationship', 'Treatment Supporter Relationship'),
+            value: data?.relationshipToTreatmentSupporter,
+          },
+          {
+            label: t('treatmentSupporterContact', 'Treatment Supporter Contact'),
+            value: data?.contactOfTreatmentSupporter,
+          },
+        ]}
+      />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow items={[{ label: t('drugAllergies', 'Drug Allergies'), value: data?.allergies }]} />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('previousART', 'Previous ART'), value: data?.previousArtStatus },
+          { label: t('dateStartedART', 'Date Started ART'), value: data?.dateStartedArt, isDate: true },
+          { label: t('clinicalStageART', 'Clinical Stage ART'), value: data?.whoStageAtArtStart },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('purposeDrugs', 'Purpose Drugs'), value: data?.purposeDrugs },
+          { label: t('purposeDate', 'Purpose Date'), value: data?.purposeDate, isDate: true },
+          { label: t('cd4AtArtStart', 'CD4 at ART Start'), value: data?.cd4AtArtStart },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('initialRegimen', 'Initial Regimen'), value: data?.firstRegimen?.regimenShortDisplay },
+          { label: t('initialRegimenDate', 'Initial Regimen Date'), value: data?.firstRegimen?.startDate },
+          { label: t('currentArtRegimen', 'Current ART Regimen'), value: data?.currentArtRegimen?.regimenShortDisplay },
+          {
+            label: t('currentArtRegimenDate', 'Current ART Regimen Date'),
+            value: data?.currentArtRegimen?.startDate,
+            isDate: true,
+          },
+        ]}
+      />
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('artInterruptionReason', 'ART Interruption Reason'), value: '--' },
+          { label: t('substitutionWithin1stLineRegimen', 'Substitution Within 1st Line Regimen'), value: '--' },
+          { label: t('switchTo2ndLineRegimen', 'Switch to 2nd Line Regimen'), value: '--' },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('dapsone', 'Dapsone'), value: data?.dapsone },
+          { label: t('tpt', 'TPT'), value: data?.onIpt },
+          { label: t('clinicsEnrolled', 'Clinics Enrolled'), value: data?.clinicsEnrolled },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('transferOutDate', 'Transfer Out Date'), value: data?.transferOutDate, isNone: true },
+          { label: t('transferOutFacility', 'Transfer Out Facility'), value: data?.transferOutFacility },
+          { label: t('deathDate', 'Death Date'), value: data?.deathDate, isNone: true },
+        ]}
+      />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('mostRecentCD4', 'Most Recent CD4'), value: data?.mostRecentCd4 },
+          { label: t('mostRecentVL', 'Most Recent VL'), value: data?.viralLoadValue },
+          { label: t('nextAppointmentDate', 'Next Appointment Date'), value: data?.nextAppointmentDate, isDate: true },
+        ]}
+      />
+
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <p className={styles.label}>{t('viralLoadTrends', 'Viral load trends')}</p>
+          {data?.allVlResults?.value?.length > 0
+            ? data?.allVlResults?.value?.map((vl, index) => {
+                return (
+                  <div key={`vl-${index}`}>
+                    <span className={styles.value}> {vl.vl} </span>
+                    {vl?.vlDate === 'N/A' || vl?.vlDate === '' ? (
+                      <span>None</span>
+                    ) : (
+                      <span>({vl?.vlDate ? vl?.vlDate : '--'})</span>
+                    )}
+                    <br />
+                  </div>
+                );
+              })
+            : '--'}
+        </div>
+        <div className={styles.content}>
+          <p className={styles.label}>{t('cd4Trends', 'CD4 Trends')}</p>
+          {data?.allCd4CountResults?.length > 0
+            ? data?.allCd4CountResults?.map((cd4, index) => {
+                return (
+                  <div key={`cd4Trend-${cd4?.cd4Count}-${index}`}>
+                    <span className={styles.value}>{cd4?.cd4Count}</span>
+                    {cd4?.cd4Count === 'N/A' || cd4?.cd4Count === '' ? (
+                      <span>None</span>
+                    ) : (
+                      <span>( {cd4?.cd4CountDate ? cd4?.cd4CountDate : '--'})</span>
+                    )}
+                    <br />
+                  </div>
+                );
+              })
+            : '--'}
+        </div>
+      </div>
+
+      <div className={styles.divider} />
+
+      <PatientSummaryRow
+        items={[
+          { label: t('clinicalNotes', 'Clinical Notes'), value: data?.['clinicalNotes'] ?? '--' },
+          { label: t('clinicianName', 'Clinician Name'), value: currentUserSession?.user?.person?.display },
+          { label: t('clinicianSignature', 'Clinician Signature'), value: currentUserSession?.user?.person?.display },
+        ]}
+      />
+    </>
+  );
+};
+
+export default PatientSummaryBody;

package/src/patient-summary/patient-summary-header.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { Printer } from '@carbon/react/icons';
+import styles from './patient-summary.scss';
+
+interface PatientSummaryHeaderProps {
+  onPrint: () => void;
+  printMode: boolean;
+}
+
+const PatientSummaryHeader: React.FC<PatientSummaryHeaderProps> = ({ onPrint, printMode }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() == 'tablet';
+
+  return (
+    <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+      <h4 className={styles.title}>{t('patientSummary', 'Patient summary')}</h4>
+      {printMode === false && (
+        <Button
+          size="sm"
+          className={styles.btnShow}
+          onClick={onPrint}
+          kind="tertiary"
+          renderIcon={(props) => <Printer size={16} {...props} />}
+          iconDescription={t('print', 'Print')}>
+          {t('print', 'Print')}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default PatientSummaryHeader;

package/src/patient-summary/patient-summary-row.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDate } from '@openmrs/esm-framework';
+import styles from './patient-summary.scss';
+
+interface PatientSummaryRowProps {
+  items: Array<{
+    label: string;
+    value: any;
+    isDate?: boolean;
+    isGender?: boolean;
+    isNone?: boolean;
+  }>;
+}
+
+const PatientSummaryRow: React.FC<PatientSummaryRowProps> = ({ items }) => {
+  const { t } = useTranslation();
+
+  const getDisplayValue = (item) => {
+    if (item.isDate) {
+      return item.value ? formatDate(new Date(item.value), { noToday: true }) : '--';
+    }
+    if (item.isGender) {
+      switch (item.value) {
+        case 'F':
+          return 'Female';
+        case 'M':
+          return 'Male';
+        default:
+          return 'Unknown';
+      }
+    }
+    if (item.isNone) {
+      return item.value === 'N/A' || item.value === '' ? 'None' : item.value;
+    }
+    return item.value || '--';
+  };
+
+  return (
+    <div className={styles.container}>
+      {items.map((item, index) => (
+        <div key={`${item.label}-${index}`} className={styles.content}>
+          <p className={styles.label}>{t(item.label, item.label)}</p>
+          <p>
+            <span className={styles.value}>{getDisplayValue(item)}</span>
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PatientSummaryRow;

package/src/patient-summary/patient-summary.component.test.tsx

@@ -19,7 +19,7 @@ jest.mock('react-to-print', () => {
 
   return {
     ...originalModule,
-    useReactToPrint: jest.fn(),
+    useReactToPrint: jest.fn().mockReturnValue(jest.fn()),
   };
 });