From 4279aa3042e4254584f86e4e591551b40132bb19 Mon Sep 17 00:00:00 2001 From: Daphne <89844768+Daphne210@users.noreply.github.com> Date: Wed, 15 May 2024 02:31:00 +0300 Subject: [PATCH] Adding TPT Details to the care panel (#226) --- .../src/care-panel/care-panel.component.tsx | 2 +- .../esm-care-panel-app/src/config-schema.ts | 12 +++ ...x => program-enrollment-hiv.component.tsx} | 80 ++++++++++++------- .../program-enrollment.resource.ts | 10 +-- .../program-enrollment.scss | 2 + .../esm-care-panel-app/src/types/index.ts | 3 + 6 files changed, 71 insertions(+), 38 deletions(-) rename packages/esm-care-panel-app/src/program-enrollment/{program-enrollment.component.tsx => program-enrollment-hiv.component.tsx} (69%) 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 index 620ae6fe..fe347c15 100644 --- 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 index b10d1da7..459cc18b 100644 --- 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/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment-hiv.component.tsx similarity index 69% rename from packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx rename to packages/esm-care-panel-app/src/program-enrollment/program-enrollment-hiv.component.tsx index f2837f08..5d0776ca 100644 --- a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx +++ b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment-hiv.component.tsx @@ -66,6 +66,24 @@ const ProgramEnrollment: React.FC = ({ 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 = ({ enrollments = [], const orderedEnrollments = orderBy(enrollments, 'dateEnrolled', 'desc'); const [programData, setProgramData] = useState({ - 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 = ({ enrollments = [], setProgramData((prevState) => ({ ...prevState, ...newData })); } - }, [observationConfig, observations]); + }, [conceptUuids, observationConfig, observations]); if (orderedEnrollments?.length === 0) { return null; @@ -110,29 +127,21 @@ const ProgramEnrollment: React.FC = ({ enrollments = [],

{t('artStartDate', 'ART Start Date')}

-

- {programData.artStartDate} -

+ {programData.artStartDate}

{t('dateConfirmedHivPositive', 'Date Positive HIV Test Confirmed')}

-

- {programData.dateConfirmedHivPositive} -

+ {programData.dateConfirmedHivPositive}

{t('baselineRegimen', 'Baseline Regimen')}

-

- {programData.baselineRegimen} -

+ {programData.baselineRegimen}

{t('baselineCd4', 'baseline CD4')}

-

- {programData.baselineCd4} -

+ {programData.baselineCd4}


@@ -140,15 +149,12 @@ const ProgramEnrollment: React.FC = ({ enrollments = [],

{t('currentRegimen', 'Current Regimen')}

-

- {programData.currentRegimen} -

+ + {programData.currentRegimen}

{t('whoStage', 'WHO Stage')}

-

- {programData.whoClinicalStage} -

+ {programData.whoClinicalStage}


@@ -156,22 +162,36 @@ const ProgramEnrollment: React.FC = ({ enrollments = [],

{t('viralLoadDate', 'HIV Viral Load Date')}

-

- {programData.hivViralLoadDate} -

+ {programData.hivViralLoadDate}

{t('viralLoadQual', 'Viral Load Qualitative')}

-

- {programData.hivViralLoadQualitative} -

+ {programData.hivViralLoadQualitative}

{t('hivViralLoad', 'HIV Viral Load')}

-

- {programData.hivViralLoad} -

+ {programData.hivViralLoad} +
+
+

+
{t('tptDetails', 'TPT Details')}
+
+
+

{t('tptStatus', 'TPT Status')}

+ {programData.tptStatus}
+ {programData.tptStatus === 'Treatment complete' && ( + <> +
+

{t('tptStartDate', 'TPT Start Date')}

+ {programData.tptStartDate} +
+
+

{t('tptCompletionDate', 'TPT Completion Date')}

+ {programData.tptCompletionDate} +
+ + )}
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 index d8552106..65a0451e 100644 --- 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 index 80788de7..db29b756 100644 --- 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 index ad518bb2..00341ec7 100644 --- 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; }