Adding TPT Details to the care panel (#226)

METS-Programme · May 14, 2024 · 4279aa3 · 4279aa3
1 parent 31b8611
commit 4279aa3
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 38 deletions.
diff --git a/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx b/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { StructuredListSkeleton, ContentSwitcher, Switch } from '@carbon/react';
 import styles from './care-panel.scss';
 import { usePatientPrograms } from '../hooks/usePatientPrograms';
-import ProgramEnrollment from '../program-enrollment/program-enrollment.component';
+import ProgramEnrollment from '../program-enrollment/program-enrollment-hiv.component';
 import { ErrorState } from '@openmrs/esm-framework';
 import CarePrograms from '../care-programs/care-programs.component';
 import ProgramEnrollmentTB from '../program-enrollment/program-enrollment-tb.component';

diff --git a/packages/esm-care-panel-app/src/config-schema.ts b/packages/esm-care-panel-app/src/config-schema.ts
@@ -102,4 +102,16 @@ export const configSchema = {
     _type: Type.ConceptUuid,
     _default: '171de3f4-a500-46f6-8098-8097561dfffb',
   },
+  tptStatusUuid: {
+    _type: Type.ConceptUuid,
+    _default: '37d4ac43-b3b4-4445-b63b-e3acf47c8910',
+  },
+  tptStartDateUuid: {
+    _type: Type.ConceptUuid,
+    _default: '483939c7-79ba-4ca4-8c3e-346488c97fc7',
+  },
+  tptCompletionDateUuid: {
+    _type: Type.ConceptUuid,
+    _default: '813e21e7-4ccb-4fe9-aaab-3c0e40b6e356',
+  },
 };
diff --git a/...rollment/program-enrollment.component.tsx → ...ment/program-enrollment-hiv.component.tsx b/...rollment/program-enrollment.component.tsx → ...ment/program-enrollment-hiv.component.tsx
@@ -66,6 +66,24 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
         key: 'currentARVDuration',
         uuidConfig: configSchema.currentARVDurationUuid._default,
       },
+      {
+        key: 'tptStatus',
+        uuidConfig: configSchema.tptStatusUuid._default,
+      },
+      {
+        key: 'tptStartDate',
+        uuidConfig: configSchema.tptStartDateUuid._default,
+        processValue: (date) => {
+          return date && dayjs(date).isValid() ? dayjs(date).format('DD-MM-YYYY') : '--';
+        },
+      },
+      {
+        key: 'tptCompletionDate',
+        uuidConfig: configSchema.tptCompletionDateUuid._default,
+        processValue: (date) => {
+          return date && dayjs(date).isValid() ? dayjs(date).format('DD-MM-YYYY') : '--';
+        },
+      },
     ],
     [],
   );
@@ -74,16 +92,15 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
   const orderedEnrollments = orderBy(enrollments, 'dateEnrolled', 'desc');
 
   const [programData, setProgramData] = useState<ProgramData>({
-    artStartDate: '--',
     currentRegimen: '--',
     baselineRegimen: '--',
     whoClinicalStage: '--',
     dateConfirmedHivPositive: '--',
     baselineCd4: '--',
-    hivViralLoadDate: '--',
     hivViralLoadQualitative: '--',
     hivViralLoad: '--',
     currentARVDuration: '--',
+    tptStatus: '--',
   });
 
   const { observations, isLoading, isError } = usePatientObservations(patientUuid, conceptUuids);
@@ -97,7 +114,7 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
 
       setProgramData((prevState) => ({ ...prevState, ...newData }));
     }
-  }, [observationConfig, observations]);
+  }, [conceptUuids, observationConfig, observations]);
 
   if (orderedEnrollments?.length === 0) {
     return null;
@@ -110,68 +127,71 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
         <div className={styles.container}>
           <div className={styles.content}>
             <p className={styles.label}>{t('artStartDate', 'ART Start Date')}</p>
-            <p>
-              <span className={styles.value}>{programData.artStartDate}</span>
-            </p>
+            <span className={styles.value}>{programData.artStartDate}</span>
           </div>
           <div className={styles.content}>
             <p className={styles.label}>{t('dateConfirmedHivPositive', 'Date Positive HIV Test Confirmed')}</p>
-            <p>
-              <span className={styles.value}>{programData.dateConfirmedHivPositive}</span>
-            </p>
+            <span className={styles.value}>{programData.dateConfirmedHivPositive}</span>
           </div>
           <div className={styles.content}>
             <p className={styles.label}>{t('baselineRegimen', 'Baseline Regimen')}</p>
-            <p>
-              <span className={styles.value}>{programData.baselineRegimen}</span>
-            </p>
+            <span className={styles.value}>{programData.baselineRegimen}</span>
           </div>
         </div>
         <div className={styles.container}>
           <div className={styles.content}>
             <p className={styles.label}>{t('baselineCd4', 'baseline CD4')}</p>
-            <p>
-              <span className={styles.value}>{programData.baselineCd4}</span>
-            </p>
+            <span className={styles.value}>{programData.baselineCd4}</span>
           </div>
         </div>
         <br></br>
         <div className={styles.sectionTitle}>{t('lastArtVisitSummary', 'Last ART Visit Summary')}</div>
         <div className={styles.container}>
           <div className={styles.content}>
             <p className={styles.label}>{t('currentRegimen', 'Current Regimen')}</p>
-            <p>
-              <span className={styles.value}>{programData.currentRegimen}</span>
-            </p>
+
+            <span className={styles.value}>{programData.currentRegimen}</span>
           </div>
           <div className={styles.content}>
             <p className={styles.label}>{t('whoStage', 'WHO Stage')}</p>
-            <p>
-              <span className={styles.value}>{programData.whoClinicalStage}</span>
-            </p>
+            <span className={styles.value}>{programData.whoClinicalStage}</span>
           </div>
         </div>
         <br></br>
         <div className={styles.sectionTitle}>{t('lastViralLoadResults', 'Last Viral Load Results')}</div>
         <div className={styles.container}>
           <div className={styles.content}>
             <p className={styles.label}>{t('viralLoadDate', 'HIV Viral Load Date')}</p>
-            <p>
-              <span className={styles.value}>{programData.hivViralLoadDate}</span>
-            </p>
+            <span className={styles.value}>{programData.hivViralLoadDate}</span>
           </div>
           <div className={styles.content}>
             <p className={styles.label}>{t('viralLoadQual', 'Viral Load Qualitative')}</p>
-            <p>
-              <span className={styles.value}>{programData.hivViralLoadQualitative}</span>
-            </p>
+            <span className={styles.value}>{programData.hivViralLoadQualitative}</span>
           </div>
           <div className={styles.content}>
             <p className={styles.label}>{t('hivViralLoad', 'HIV Viral Load')}</p>
-            <p>
-              <span className={styles.value}>{programData.hivViralLoad}</span>
-            </p>
+            <span className={styles.value}>{programData.hivViralLoad}</span>
+          </div>
+        </div>
+        <br></br>
+        <div className={styles.sectionTitle}>{t('tptDetails', 'TPT Details')}</div>
+        <div className={styles.container}>
+          <div className={styles.content}>
+            <p className={styles.label}>{t('tptStatus', 'TPT Status')}</p>
+            <span className={styles.value}>{programData.tptStatus}</span>
           </div>
+          {programData.tptStatus === 'Treatment complete' && (
+            <>
+              <div className={styles.content}>
+                <p className={styles.label}>{t('tptStartDate', 'TPT Start Date')}</p>
+                <span className={styles.value}>{programData.tptStartDate}</span>
+              </div>
+              <div className={styles.content}>
+                <p className={styles.label}>{t('tptCompletionDate', 'TPT Completion Date')}</p>
+                <span className={styles.value}>{programData.tptCompletionDate}</span>
+              </div>
+            </>
+          )}
         </div>
       </div>
     </div>

diff --git a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.resource.ts b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.resource.ts
@@ -1,7 +1,6 @@
 import useSWR from 'swr';
 import { openmrsFetch } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
-import { configSchema } from '../config-schema';
 
 export function extractValue(observation) {
   if (observation.valueDateTime) {
@@ -16,17 +15,14 @@ export function extractValue(observation) {
 
 export function usePatientObservations(patientUuid, conceptUuids) {
   const conceptsQueryParam = conceptUuids.join('%2C');
-  const apiUrl = `/ws/fhir2/R4/Observation?patient=${patientUuid}&code=${conceptsQueryParam}&_summary=data&_sort=-date&_count=100`;
+  const apiUrl = `/ws/fhir2/R4/Observation?patient=${patientUuid}&code=${conceptsQueryParam}&_summary=data&_sort=-date&_count=500`;
 
-  const { data, error, isValidating, mutate } = useSWR(apiUrl, async (url) => {
-    const response = await openmrsFetch(url);
-    return response.data;
-  });
+  const { data, error, isValidating, mutate } = useSWR<{ data: any }, Error>(apiUrl, openmrsFetch);
 
   const observations = useMemo(() => {
     const resultsByConcept = {};
 
-    data?.entry?.forEach((entry) => {
+    data?.data?.entry?.forEach((entry) => {
       const observation = entry.resource;
       const observedConceptCode = observation.code.coding.find((coding) => conceptUuids.includes(coding.code))?.code;
       const value = extractValue(observation);

diff --git a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.scss b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.scss
@@ -165,6 +165,8 @@
     margin: spacing.$spacing-03 0;
     &>p:first-child {
         @include type.type-style('label-01');
+        font-size: var(--cds-label-01-font-size, 1rem);
+        font-weight: var(--cds-label-01-font-weight, 600);
         color: colors.$gray-70;
         margin-bottom: spacing.$spacing-02;
     }

diff --git a/packages/esm-care-panel-app/src/types/index.ts b/packages/esm-care-panel-app/src/types/index.ts
@@ -240,4 +240,7 @@ export interface ProgramData {
   tbDiseaseClassification?: string;
   tbPatientType?: string;
   currentARVDuration?: string;
+  tptStatus?: string;
+  tptStartDate?: string;
+  tptCompletionDate?: string;
 }