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 ebb61206..b6db0fbc 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 @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StructuredListSkeleton, ContentSwitcher, Switch } from '@carbon/react'; import styles from './care-panel.scss'; @@ -7,6 +7,7 @@ import ProgramEnrollment from '../program-enrollment/program-enrollment.componen import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib'; import { ErrorState } from '@openmrs/esm-framework'; import CarePrograms from '../care-programs/care-programs.component'; +import ProgramEnrollmentTB from '../program-enrollment/program-enrollment-tb.component'; interface CarePanelProps { patientUuid: string; @@ -22,18 +23,33 @@ type SwitcherItem = { const CarePanel: React.FC = ({ patientUuid, formEntrySub, launchPatientWorkspace }) => { const { t } = useTranslation(); - const [programEnrolled, setProgramEnrolled] = useState('TB Program'); const { isLoading, error, enrollments } = usePatientPrograms(patientUuid); const switcherHeaders = enrollments?.map((item) => item.program.name); - const [switchItem, setSwitcherItem] = useState(); + const [selectedIndex, setSelectedIndex] = useState(0); + const [switchItem, setSwitcherItem] = useState(() => { + const firstEnrollment = enrollments?.[0]; + return firstEnrollment ? { index: 0, name: firstEnrollment.program.name } : undefined; + }); const programs = { hiv: 'HIV Program', tb: 'TB Program', mch: 'MCH Program', nutrition: 'Nutrition Program', }; - const handleItemTabChange = (name) => { - setProgramEnrolled(name); + useEffect(() => { + if (!switchItem && enrollments && enrollments.length > 0) { + setSwitcherItem({ index: 0, name: enrollments[0].program.name }); + } + }, [enrollments, switchItem]); + + const handleItemTabChange = (index: number, name?: string) => { + const programName = enrollments?.[index]?.program?.name; + const switcherItem = { index, name: programName }; + + if (programName) { + setSwitcherItem(switcherItem); + setSelectedIndex(index); + } }; if (isLoading) { return ( @@ -46,44 +62,52 @@ const CarePanel: React.FC = ({ patientUuid, formEntrySub, launch if (error) { return ; } - - if (Object.keys(enrollments).length === 0) { - return ( -
- -
- ); - } return ( <> -
- -
- handleItemTabChange(event.name)}> - {switcherHeaders?.map((enrollment, index) => ( - - ))} - -
- -
- {programEnrolled === programs.hiv && ( - - )} - {programEnrolled === programs.tb && ( -
- No data to display for this program + {Object.keys(enrollments).length > 0 ? ( +
+ +
+ handleItemTabChange(event.index, event.name)} + > + {switcherHeaders?.map((enrollment, index) => ( + + ))} + +
+ +
+ {switchItem?.name === programs.hiv && ( + + )} +
+ {switchItem?.name === programs.tb && ( + + )}
- )} +
-
+ ) : ( +
+ +
+ )} ); diff --git a/packages/esm-care-panel-app/src/config-schema.ts b/packages/esm-care-panel-app/src/config-schema.ts index 24b5ae24..24381d39 100644 --- a/packages/esm-care-panel-app/src/config-schema.ts +++ b/packages/esm-care-panel-app/src/config-schema.ts @@ -61,4 +61,20 @@ export const configSchema = { _type: Type.ConceptUuid, _default: '9dc21a72-0971-11e7-8037-507b9dc4c741', }, + dateStartedTBFirstRegimenUuid: { + _type: Type.ConceptUuid, + _default: '7326297e-0ccd-4355-9b86-dde1c056e2c2', + }, + dsTbRegmimenUuid: { + _type: Type.ConceptUuid, + _default: '159958AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', + }, + tbDiseaseClassificationUuid: { + _type: Type.ConceptUuid, + _default: 'd45871ee-62d6-4d4d-b905-f7b75a3fd3bb', + }, + tbPatientTypeUuid: { + _type: Type.ConceptUuid, + _default: 'e077f196-c19a-417f-adc6-b175a3343bfd', + }, }; diff --git a/packages/esm-care-panel-app/src/hooks/useCarePrograms.ts b/packages/esm-care-panel-app/src/hooks/useCarePrograms.ts index b83a60aa..1264ad0b 100644 --- a/packages/esm-care-panel-app/src/hooks/useCarePrograms.ts +++ b/packages/esm-care-panel-app/src/hooks/useCarePrograms.ts @@ -10,6 +10,15 @@ export type PatientCarePrograms = { enrollmentDetails?: { uuid: string; dateCompleted: string; location: string; dateEnrolled: string }; }; +export interface ProgramEnrollmentProps { + patientUuid: string; + programName: string; + enrollments: Array; + formEntrySub: any; + launchPatientWorkspace: Function; + PatientChartProps: string; +} + export const useCarePrograms = (patientUuid: string) => { const url = `/ws/rest/v1/ugandaemr/patientCohorts?patientUuid=${patientUuid}`; const { data, error, isLoading, isValidating } = useSWR<{ data: Array }>(url, openmrsFetch); diff --git a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment-tb.component.tsx b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment-tb.component.tsx new file mode 100644 index 00000000..906e072b --- /dev/null +++ b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment-tb.component.tsx @@ -0,0 +1,108 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import styles from './program-enrollment.scss'; +import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; +import dayjs from 'dayjs'; +import orderBy from 'lodash/orderBy'; +import { mutate } from 'swr'; +import { parseStageFromDisplay, usePatientObservations } from './program-enrollment.resource'; +import { ProgramData } from '../types/index'; +import { usePatient } from '@openmrs/esm-framework'; +import { configSchema } from '../config-schema'; +import { ProgramEnrollmentProps } from '../hooks/useCarePrograms'; + +const ProgramEnrollmentTB: React.FC = ({ enrollments = [], patientUuid }) => { + const { t } = useTranslation(); + + const { patient } = usePatient(patientUuid); + + const observationConfig = useMemo( + () => [ + { + key: 'dateStartedTBFirstLineRegimen', + uuidConfig: configSchema.dateStartedTBFirstRegimenUuid._default, + processValue: (date) => { + return date && dayjs(date).isValid() ? dayjs(date).format('DD-MM-YYYY') : '--'; + }, + }, + { + key: 'dsTBRegimen', + uuidConfig: configSchema.dsTbRegmimenUuid._default, + }, + { + key: 'tbPatientType', + uuidConfig: configSchema.tbPatientTypeUuid._default, + }, + { + key: 'tbDiseaseClassification', + uuidConfig: configSchema.tbDiseaseClassificationUuid._default, + }, + ], + [], + ); + const conceptUuids = observationConfig.map((config) => config.uuidConfig); + + const orderedEnrollments = orderBy(enrollments, 'dateEnrolled', 'desc'); + + const [programData, setProgramData] = useState({ + dateStartedTBFirstLineRegimen: '--', + dsTBRegimen: '--', + tbDiseaseClassification: '--', + tbPatientType: '--', + }); + + const { observations, isLoading, isError } = usePatientObservations(patientUuid, conceptUuids); + useEffect(() => { + if (observations) { + const newData = observationConfig.reduce((acc, { key, uuidConfig, processValue }) => { + const value = observations[uuidConfig]?.[0] || '--'; + acc[key] = processValue ? processValue(value) : value; + return acc; + }, {}); + + setProgramData((prevState) => ({ ...prevState, ...newData })); + } + }, [observationConfig, observations]); + + if (orderedEnrollments?.length === 0) { + return null; + } + return ( +
+
+
{t('diseasClassification', 'Disease Classification/Patient Type')}
+
+
+

{t('diseaseClassification', 'TB Disease Classification')}

+

+ {programData.tbDiseaseClassification} +

+
+
+

{t('tbPatientType', 'Patient Type')}

+

+ {programData.tbPatientType} +

+
+
+

+
{t('firstLineTreatment', 'First Line Treatment')}
+
+
+

{t('dateStarted', 'Date Started')}

+

+ {programData.dateStartedTBFirstLineRegimen} +

+
+
+

{t('dsTbRegmien', 'DS TB Regimen')}

+

+ {programData.dsTBRegimen} +

+
+
+
+
+ ); +}; +export default ProgramEnrollmentTB; 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.component.tsx index a83c0eb0..ee0d45e0 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.component.tsx @@ -9,52 +9,9 @@ import { parseStageFromDisplay, usePatientObservations } from './program-enrollm import { ProgramData } from '../types/index'; import { usePatient } from '@openmrs/esm-framework'; import { configSchema } from '../config-schema'; +import { ProgramEnrollmentProps } from '../hooks/useCarePrograms'; -export interface ProgramEnrollmentProps { - patientUuid: string; - programName: string; - enrollments: Array; - formEntrySub: any; - launchPatientWorkspace: Function; - PatientChartProps: string; -} -const shareObjProperty = { dateEnrolled: 'Enrolled on', dateCompleted: 'Date Completed' }; -const programDetailsMap = { - HIV: { - dateEnrolled: 'Enrolled on', - whoStage: 'WHO Stage', - entryPoint: 'Entry Point', - regimenShortDisplay: 'Regimen', - changeReasons: 'Reason for regimen change', - }, - TB: { - ...shareObjProperty, - startDate: 'Date started regimen', - regimenShortName: 'Regimen', - }, - TPT: { - ...shareObjProperty, - tptDrugName: 'Regimen', - tptDrugStartDate: 'Date started regimen', - tptIndication: 'Indication for TPT', - }, - 'MCH - Mother Services': { - ...shareObjProperty, - lmp: 'LMP', - eddLmp: 'EDD', - gravida: 'Gravida', - parity: 'Parity', - gestationInWeeks: 'Gestation in weeks', - }, - 'MCH - Child Services': { ...shareObjProperty, entryPoint: 'Entry Point' }, - mchMother: {}, - mchChild: {}, - VMMC: { - ...shareObjProperty, - }, -}; - -const ProgramEnrollment: React.FC = ({ enrollments = [], programName, patientUuid }) => { +const ProgramEnrollment: React.FC = ({ enrollments = [], patientUuid }) => { const { t } = useTranslation(); const { patient } = usePatient(patientUuid); @@ -113,29 +70,6 @@ const ProgramEnrollment: React.FC = ({ enrollments = [], const conceptUuids = observationConfig.map((config) => config.uuidConfig); const orderedEnrollments = orderBy(enrollments, 'dateEnrolled', 'desc'); - const headers = useMemo( - () => - Object.entries(programDetailsMap[programName] ?? { ...shareObjProperty }).map(([key, value]) => ({ - key, - header: value, - })), - [programName], - ); - const rows = useMemo( - () => - orderedEnrollments?.map((enrollment) => { - const firstEncounter = enrollment?.firstEncounter ?? {}; - const enrollmentEncounterUuid = enrollment?.enrollmentEncounterUuid; - return { - id: `${enrollment.enrollmentUuid}`, - ...enrollment, - ...firstEncounter, - changeReasons: enrollment?.firstEncounter?.changeReasons?.join(', '), - enrollmentEncounterUuid: enrollmentEncounterUuid, - }; - }), - [orderedEnrollments], - ); const handleDiscontinue = (enrollment) => { launchPatientWorkspace('patient-form-entry-workspace', { 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 f029c3cb..c90abc09 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 @@ -151,8 +151,8 @@ .container { display: flex; flex-direction: row; - padding-left: 1rem; flex-wrap: wrap; + justify-content: space-between; } .value { diff --git a/packages/esm-care-panel-app/src/types/index.ts b/packages/esm-care-panel-app/src/types/index.ts index c9b73074..25c401aa 100644 --- a/packages/esm-care-panel-app/src/types/index.ts +++ b/packages/esm-care-panel-app/src/types/index.ts @@ -235,4 +235,8 @@ export interface ProgramData { hivViralLoadQualitative?: string; hivViralLoad?: string; lastEncounterDate?: string; + dateStartedTBFirstLineRegimen?: string; + dsTBRegimen?: string; + tbDiseaseClassification?: string; + tbPatientType?: string; }