@kenyaemr/esm-care-panel-app 4.1.1-pre.72

package/src/patient-summary/patient-summary.scss

@@ -0,0 +1,83 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.bodyContainer {
+  margin: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  display: flex;
+  justify-content: space-between;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-02;
+  margin-top: spacing.$spacing-02;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.card {
+  background-color: $ui-02;
+  padding: spacing.$spacing-04;
+}
+
+.value {
+  @include type.type-style('productive-heading-03');
+  color: colors.$gray-100;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  padding-left: 1rem;
+  flex-wrap: wrap;
+}
+
+.content {
+  margin-top: spacing.$spacing-05;
+  width: 30%;
+  margin-left: spacing.$spacing-03;
+}
+
+.btnHidden {
+  visibility: hidden;
+}
+
+.btnShow {
+  visibility: visible;
+}

package/src/print-layout/print.component.tsx

@@ -0,0 +1,16 @@
+import React, { useRef } from 'react';
+import styles from './print.scss';
+import { useConfig } from '@openmrs/esm-framework';
+
+export function PrintComponent() {
+  const componentRef = useRef(null);
+  const { logo } = useConfig();
+
+  return (
+    <div className={styles.printPage}>
+      <div ref={componentRef}>{logo?.src ? <img src={logo.src} alt={logo?.alt} width={110} height={40} /> : null}</div>
+    </div>
+  );
+}
+
+export default PrintComponent;

package/src/print-layout/print.scss

@@ -0,0 +1,10 @@
+.logo {
+  margin: 2rem;
+  
+}
+
+.printPage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/program-enrollment/program-enrollment.component.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile, Button } from '@carbon/react';
+import styles from './program-enrollment.scss';
+import { Edit } from '@carbon/react/icons';
+import { useLayoutType, useVisit } from '@openmrs/esm-framework';
+import isNull from 'lodash-es/isNull';
+import { ProgramType } from '../types';
+
+interface ProgramEnrollmentProps {
+  patientUuid: string;
+  programName: string;
+  data: Array<any>;
+  formEntrySub: any;
+  launchPatientWorkspace: Function;
+}
+
+const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
+  patientUuid,
+  programName,
+  data,
+  formEntrySub,
+  launchPatientWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() == 'tablet';
+  const { currentVisit } = useVisit(patientUuid);
+  const handleOpenWorkspace = (formUuid, formName, encounterUuid) => {
+    const mutateForm = () => {};
+    formEntrySub.next({ formUuid, encounterUuid });
+    launchPatientWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: formName,
+      mutateForm,
+      formUuid,
+      encounterUuid,
+      visit: currentVisit,
+    });
+  };
+
+  if (isNull(data)) {
+    return;
+  }
+
+  return (
+    <div>
+      <section>
+        {data.map((enrollment) =>
+          enrollment.status === 'Active' && programName === enrollment.programName ? (
+            <>
+              {enrollment.programName && (
+                <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                  <h4 className={styles.title}>{t('currentEnrollmentDetails', 'Current enrollment details')}</h4>
+                </div>
+              )}
+              {enrollment.data.map((program) => (
+                <Tile className={styles.card}>
+                  <div className={styles.btnDiscontinue}>
+                    <Button
+                      size="sm"
+                      iconDescription={t('edit', 'Edit')}
+                      onClick={() =>
+                        handleOpenWorkspace(
+                          program.enrollmentFormUuid,
+                          program.enrollmentFormName,
+                          program.enrollmentEncounterUuid,
+                        )
+                      }
+                      kind="tertiary"
+                      renderIcon={(props) => <Edit size={16} {...props} />}>
+                      {t('edit', 'Edit')}{' '}
+                    </Button>
+                    <Button
+                      size="sm"
+                      kind="danger--ghost"
+                      onClick={() =>
+                        handleOpenWorkspace(program.discontinuationFormUuid, program.discontinuationFormName, '')
+                      }>
+                      {t('discontinue', 'Discontinue')}
+                    </Button>
+                  </div>
+                  <div className={styles.labelContainer}>
+                    <div className={styles.content}>
+                      <p>{t('enrolled', 'Enrolled')}</p>
+                      <span className={styles.value}>{program?.dateEnrolled}</span>
+                    </div>
+                    {program.programName === ProgramType.HIV ? (
+                      <>
+                        <div className={styles.content}>
+                          <p>{t('whoStage', 'WHO Stage')}</p>
+                          <p>
+                            <span className={styles.value}>{program?.whoStage}</span>
+                          </p>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('entryPoint', 'Entry point')}</p>
+                          <p>
+                            <span className={styles.value}>{program?.entryPoint}</span>
+                          </p>
+                        </div>
+                      </>
+                    ) : null}
+                    {program.programName === ProgramType.MCH_MOTHER ? (
+                      <>
+                        <div className={styles.content}>
+                          <p>{t('lmp', 'LMP')} </p>
+                          <span className={styles.value}>{program?.lmp ? program?.lmp : '--'}</span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('edd', 'EDD')} </p>
+                          <span className={styles.value}>{program?.eddLmp ? program?.eddLmp : '--'}</span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('gravida', 'Gravida')} </p>
+                          <span className={styles.value}>{program?.gravida ? program?.gravida : '--'}</span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('parity', 'Parity')} </p>
+                          <span className={styles.value}>{program?.parity ? program?.parity : '--'}</span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('gestationInWeeks', 'Gestation in weeks')} </p>
+                          <span className={styles.value}>
+                            {program?.gestationInWeeks ? program?.gestationInWeeks : '--'}
+                          </span>
+                        </div>
+                      </>
+                    ) : null}
+                    {program.programName === ProgramType.MCH_CHILD ? (
+                      <div className={styles.content}>
+                        <p>{t('entryPoint', 'Entry point')}</p>
+                        <span className={styles.value}>{program?.entryPoint ? program?.entryPoint : '--'}</span>
+                      </div>
+                    ) : null}
+                    {program.programName === ProgramType.TPT ? (
+                      <div className={styles.content}>
+                        <p>{t('indicationForTpt', 'Indication for TPT')} </p>
+                        <span className={styles.value}>
+                          {program?.tptIndication ? program?.tptIndication : '--'}
+                        </span>{' '}
+                      </div>
+                    ) : null}
+                  </div>
+                </Tile>
+              ))}
+            </>
+          ) : enrollment.status === 'Inactive' && programName === enrollment.programName ? (
+            <>
+              {enrollment.programName && (
+                <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                  <h4 className={styles.title}>{t('historicEnrollment', 'Historic enrollment')}</h4>
+                </div>
+              )}
+              {enrollment.data.map((program) => (
+                <Tile className={styles.card}>
+                  <div className={styles.btnDiscontinue}>
+                    <Button
+                      size="sm"
+                      iconDescription={t('edit', 'Edit')}
+                      onClick={() =>
+                        handleOpenWorkspace(
+                          program.discontinuationFormUuid,
+                          program.discontinuationFormName,
+                          program.discontinuationEncounterUuid,
+                        )
+                      }
+                      kind="tertiary"
+                      renderIcon={(props) => <Edit size={16} {...props} />}>
+                      {t('edit', 'Edit')}{' '}
+                    </Button>
+                    <Button
+                      size="sm"
+                      kind="ghost"
+                      onClick={() => handleOpenWorkspace(program.enrollmentFormUuid, program.enrollmentFormName, '')}>
+                      {t('enroll', 'Enroll')}
+                    </Button>
+                  </div>
+                  <div className={styles.labelContainer}>
+                    <div className={styles.content}>
+                      <p className={styles.label}>{t('completed', 'Completed')}</p>
+                      <span className={styles.value}>{program?.dateCompleted}</span>
+                    </div>
+                    {program.programName === ProgramType.HIV ? (
+                      <>
+                        <div className={styles.content}>
+                          <p>{t('whoStage', 'WHO Stage')} </p>
+                          <span className={styles.value}>{program?.whoStage ? program?.whoStage : '--'} </span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('entryPoint', 'Entry point')} </p>
+                          <span className={styles.value}>{program?.entryPoint ? program?.entryPoint : '--'} </span>
+                        </div>
+                      </>
+                    ) : null}
+                    {program.programName === ProgramType.MCH_MOTHER ? (
+                      <>
+                        <div className={styles.content}>
+                          <p>{t('gestationInWeeks', 'Gestation in weeks')} </p>
+                          <span className={styles.content}>
+                            {program?.gestationInWeeks ? program?.gestationInWeeks : '--'}
+                          </span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('lmp', 'LMP')} </p>
+                          <span className={styles.value}>{program?.lmp ? program?.lmp : '--'} </span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('edd', 'EDD')} </p>
+                          <span className={styles.value}>{program?.eddLmp ? program?.eddLmp : '--'} </span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('gravida', 'Gravida')} </p>
+                          <span className={styles.value}>{program?.gravida ? program?.gravida : '--'} </span>
+                        </div>
+                        <div className={styles.content}>
+                          <p>{t('parity', 'Parity')} </p>
+                          <span className={styles.value}>{program?.parity ? program?.parity : '--'} </span>
+                        </div>
+                      </>
+                    ) : null}
+                    {program.programName === ProgramType.MCH_CHILD ? (
+                      <div className={styles.content}>
+                        <p>{t('entryPoint', 'Entry point')} </p>
+                        <span className={styles.value}>{program?.entryPoint ? program?.entryPoint : '--'} </span>
+                      </div>
+                    ) : null}
+                    {program.programName === ProgramType.TPT ? (
+                      <div className={styles.content}>
+                        <p>{t('indicationForTpt', 'Indication for TPT')} </p>
+                        <span className={styles.value}>{program?.tptIndication ? program?.tptIndication : '--'} </span>
+                      </div>
+                    ) : null}
+                  </div>
+                </Tile>
+              ))}
+            </>
+          ) : null,
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default ProgramEnrollment;

package/src/program-enrollment/program-enrollment.scss

@@ -0,0 +1,75 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-02;
+  margin-top: spacing.$spacing-02;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.card {
+  background-color: $ui-02;
+  margin-top: spacing.$spacing-03;
+  background-color: #f4f4f4;
+}
+
+.btnEdit {
+  margin-left: auto;
+}
+
+.btnDiscontinue {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.labelContainer {
+  display: flex;
+  flex-direction: row;
+  padding-left: 1rem;
+  flex-wrap: wrap;
+}
+
+.value {
+  @include type.type-style('productive-heading-03');
+  color: colors.$gray-100;
+}
+
+.content {
+  margin-top: spacing.$spacing-05;
+  width: 30%;
+  margin-left: spacing.$spacing-03;
+}

package/src/program-summary/program-summary.component.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import styles from './program-summary.scss';
+import { useProgramSummary } from '../hooks/useProgramSummary';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { StructuredListSkeleton } from '@carbon/react';
+import { ProgramType } from '../types';
+
+interface ProgramSummaryProps {
+  patientUuid: string;
+  programName: string;
+}
+
+const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programName }) => {
+  const { data, isError, isLoading } = useProgramSummary(patientUuid);
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() == 'tablet';
+
+  if (isLoading) {
+    return <StructuredListSkeleton role="progressbar" />;
+  }
+
+  if (isError) {
+    return <span>{t('errorProgramSummary', 'Error loading HIV summary')}</span>;
+  }
+
+  if (Object.keys(data)?.length === 0) {
+    return;
+  }
+
+  if (Object.keys(data).length > 0) {
+    return (
+      <>
+        {Object.entries(data).map(([key, val]) =>
+          key == ProgramType.HIV && programName == ProgramType.HIV ? (
+            <div className={styles.card}>
+              <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                <h4 className={styles.title}> {t('currentStatus', 'Current status')}</h4>
+              </div>
+              <div className={styles.container}>
+                <div className={styles.content}>
+                  <p>{t('lastViralLoad', 'Last viral load')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.HIV?.ldlValue}</span>
+                    {data?.HIV?.ldlDate ? <span>({data?.HIV?.ldlDate})</span> : ''}{' '}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('lastCd4Count', 'Last CD4 count')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.HIV?.cd4}</span>{' '}
+                    {data?.HIV?.cd4Date ? <span> ({data?.HIV?.cd4Date}) </span> : ''}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('CD4Percentage', 'CD4 percentage')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.HIV?.cd4Percent}</span>{' '}
+                    {data?.HIV?.cd4PercentDate ? <span>({data?.HIV?.cd4PercentDate}) </span> : ''}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('lastWhoStage', 'Last WHO stage')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>
+                      {' '}
+                      {t('whoStage', 'WHO STAGE')} {data?.HIV?.whoStage}
+                    </span>{' '}
+                    {data?.HIV?.whoStageDate ? <span> ({data?.HIV?.whoStageDate}) </span> : ''}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('regimen', 'Regimen')}</p>
+                  <p className={styles.value}>{data?.HIV?.lastEncDetails?.regimenShortDisplay} </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('regimenStartDate', ' Date started regimen')}</p>
+                  <p className={styles.value}>{data?.HIV?.lastEncDetails?.startDate}</p>
+                </div>
+              </div>
+            </div>
+          ) : key == ProgramType.TB && programName == ProgramType.TB ? (
+            <div className={styles.card}>
+              <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                <h4 className={styles.title}> {t('currentStatus', 'Current status')}</h4>
+              </div>
+              <div className={styles.container}>
+                <div className={styles.content}>
+                  <p>{t('treatmentNumber:', 'Treatment number')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.TB?.tbTreatmentNumber}</span>{' '}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('diseaseClassification', 'Disease classification')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.TB?.tbDiseaseClassification}</span>{' '}
+                    {data?.TB?.tbDiseaseClassificationDate ? (
+                      <span> ({data?.TB?.tbDiseaseClassificationDate}) </span>
+                    ) : (
+                      ''
+                    )}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('patientClassification', 'Patient classification')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.TB?.tbPatientClassification}</span>
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('regimen', 'Regimen')}</p>
+                  <p className={styles.value}>
+                    {' '}
+                    {data?.TB?.lastTbEncounter
+                      ? data?.TB?.lastTbEncounter?.regimenShortDisplay
+                      : t('neverOnTbRegimen', 'Never on TB regimen')}{' '}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : key == ProgramType.MCHMOTHER && programName == ProgramType.MCHMOTHER ? (
+            <div className={styles.card}>
+              <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                <h4 className={styles.title}> {t('currentStatus', 'Current status')}</h4>
+              </div>
+              <div className={styles.container}>
+                <div className={styles.content}>
+                  <p>{t('hivStatus:', 'HIV status')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchMother?.hivStatus}</span>{' '}
+                    {data?.mchMother?.hivStatusDate ? <span>({data?.mchMother?.hivStatusDate})</span> : ''}{' '}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('onART', 'On ART')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchMother?.onHaart}</span>{' '}
+                    {data?.mchMother?.onHaartDate ? <span> ({data?.mchMother?.onHaartDate}) </span> : ''}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : key == ProgramType.MCHCHILD && programName == ProgramType.MCHCHILD ? (
+            <div className={styles.card}>
+              <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+                <h4 className={styles.title}> {t('currentStatus', 'Current status')}</h4>
+              </div>
+              <div className={styles.container}>
+                <div className={styles.content}>
+                  <p>{t('currentProphylaxisUsed:', 'Current prophylaxis used')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchChild?.currentProphylaxisUsed}</span>{' '}
+                    {data?.mchChild?.currentProphylaxisUsedDate ? (
+                      <span>({data?.mchChild?.currentProphylaxisUsedDate})</span>
+                    ) : (
+                      ''
+                    )}{' '}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('currentFeedingOption', 'Current feeding option')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchChild?.currentFeedingOption}</span>{' '}
+                    {data?.mchChild?.currentFeedingOptionDate ? (
+                      <span> ({data?.mchChild?.currentFeedingOptionDate}) </span>
+                    ) : (
+                      ''
+                    )}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('milestonesAttained', 'Milestones Attained')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchChild?.milestonesAttained}</span>{' '}
+                    {data?.mchChild?.milestonesAttainedDate ? (
+                      <span> ({data?.mchChild?.milestonesAttainedDate}) </span>
+                    ) : (
+                      ''
+                    )}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('heiOutcome', 'HEI Outcome')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchChild?.heiOutcome}</span>{' '}
+                    {data?.mchChild?.heiOutcomeDate ? <span> ({data?.mchChild?.heiOutcomeDate}) </span> : ''}
+                  </p>
+                </div>
+
+                <div className={styles.content}>
+                  <p>{t('hivStatus', 'HIV Status')}</p>
+                  <p>
+                    {' '}
+                    <span className={styles.value}>{data?.mchChild?.hivStatus}</span>{' '}
+                    {data?.mchChild?.hivStatusDate ? <span> ({data?.mchChild?.hivStatusDate}) </span> : ''}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : null,
+        )}
+      </>
+    );
+  }
+};
+
+export default ProgramSummary;