@ampath/esm-reports-app 1.0.0-next.8 → 1.0.0-next.80

package/src/registers/tb4/tb4-treatment-sheet.component.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { usePageScale } from '../../common/report-page';
+import {
+  Columns,
+  Heading,
+  KeyTable,
+  NutritionStack,
+  PAGE_WIDTH_MM,
+  ROWS_PER_PAGE,
+  Stack,
+  Tb4Page,
+  Value,
+  paginate,
+} from './tb4-parts';
+import { formDate, text, type Tb4Row, type Tb4Test } from './tb4.types';
+import styles from './tb4-register.scss';
+
+/** Initial phase drug collections ruled per patient (W) */
+const INITIAL_COLLECTIONS = 8;
+
+const MONTH_LETTERS = 'JFMAMJJASOND'.split('');
+
+/**
+ * Column widths, measured off page 9 of the form: U, V, the eight initial phase
+ * collections (W), the 24 months of the continuation phase (X), then Y to AH
+ */
+const COLUMN_WIDTHS = [
+  92,
+  93,
+  ...Array<number>(INITIAL_COLLECTIONS).fill(21.75),
+  ...Array<number>(12).fill(24.1),
+  ...Array<number>(12).fill(23.6),
+  91,
+  93,
+  113,
+  97,
+  67,
+  81,
+  80,
+  91,
+  78,
+  133,
+];
+
+/** An entry over its date, split across the row as printed (U, Y, Z, AA, AB) */
+const UpperLower: React.FC<{ upper: React.ReactNode; lower: React.ReactNode; tags?: [string, string] }> = ({
+  upper,
+  lower,
+  tags,
+}) => (
+  <Stack
+    parts={[
+      { share: 0.45, boxes: [{ tag: tags?.[0], value: upper }] },
+      { share: 0.55, boxes: [{ tag: tags?.[1], value: lower }] },
+    ]}
+  />
+);
+
+const TestUpperLower: React.FC<{ test?: Tb4Test | null }> = ({ test }) => (
+  <UpperLower upper={text(test?.result)} lower={formDate(test?.date)} />
+);
+
+/**
+ * The continuation phase grid's two years, from the earliest collection on the
+ * page; blank (as printed, "Year:……") when the page has none
+ */
+const continuationYears = (rows: Tb4Row[]): [number, number] | null => {
+  const years = rows
+    .flatMap((row) => row?.continuation_collections ?? [])
+    .map((date) => dayjs(date).year())
+    .filter((year) => Number.isFinite(year));
+  if (!years.length) {
+    return null;
+  }
+  const first = Math.min(...years);
+  return [first, first + 1];
+};
+
+/** One patient: U to AH across one tall row, divided inside as printed */
+const TreatmentRow: React.FC<{ row?: Tb4Row; years: [number, number] | null }> = ({ row, years }) => {
+  const initial = row?.initial_phase_collections ?? [];
+  /* each month's collections, as days of the month, upper then lower */
+  const continuation = (year: number, month: number) =>
+    (row?.continuation_collections ?? [])
+      .map((date) => dayjs(date))
+      .filter((date) => date.year() === year && date.month() === month)
+      .map((date) => date.format('D'));
+
+  return (
+    <tr>
+      <td>
+        <UpperLower upper={text(row?.started_treatment)} lower={text(row?.not_started_reason)} />
+      </td>
+      <td>
+        <UpperLower upper={text(row?.regimen)} lower={formDate(row?.treatment_start_date)} tags={['Regimen', 'Date']} />
+      </td>
+      {Array.from({ length: INITIAL_COLLECTIONS }, (_, index) => (
+        <td key={`w${index}`} className={styles.collection}>
+          <span className={styles.vertical}>{formDate(initial[index])}</span>
+        </td>
+      ))}
+      {[0, 1].map((yearIndex) =>
+        MONTH_LETTERS.map((_, month) => {
+          const days = years ? continuation(years[yearIndex], month) : [];
+          return (
+            <td key={`x${yearIndex}-${month}`}>
+              <UpperLower upper={days[0] ?? ''} lower={days[1] ?? ''} />
+            </td>
+          );
+        }),
+      )}
+      <td>
+        <TestUpperLower test={row?.hiv} />
+      </td>
+      <td>
+        <TestUpperLower test={row?.partner_hiv} />
+      </td>
+      <td>
+        <UpperLower upper={text(row?.cpt)} lower={formDate(row?.cpt_start_date)} />
+      </td>
+      <td>
+        <UpperLower upper={text(row?.art)} lower={text(row?.art_start)} />
+      </td>
+      <td>
+        <Value>{text(row?.nutrition_support)}</Value>
+      </td>
+      <td>
+        <NutritionStack nutrition={row?.nutrition_end} />
+      </td>
+      <td>
+        <Value wrap>{text(row?.risk_factors)}</Value>
+      </td>
+      <td>
+        <Value wrap>{text(row?.comorbidities)}</Value>
+      </td>
+      <td>
+        <Stack
+          parts={[
+            { share: 0.17, boxes: [{ heading: 'Outcome' }] },
+            { share: 0.28, boxes: [{ value: text(row?.outcome) }] },
+            { share: 0.17, boxes: [{ heading: 'Date' }] },
+            { share: 0.38, boxes: [{ value: formDate(row?.outcome_date) }] },
+          ]}
+        />
+      </td>
+      <td>
+        <Value left wrap>
+          {text(row?.remarks)}
+        </Value>
+      </td>
+    </tr>
+  );
+};
+
+/** Keys 6b to 10, beneath the register on the right-hand pages */
+const TreatmentKeys: React.FC = () => (
+  <div className={styles.keys}>
+    <KeyTable
+      title="Key 6 b: Molecular test results"
+      widthMm={69}
+      rows={[
+        ['A', 'MTB Detected; INH, FLQ, AMK, KAN, CAP, and ETH Resistance NOT Detected'],
+        ['B', 'MTB Detected; INH, FLQ, AMK, KAN, CAP, and ETH Resistance Detected'],
+        ['C', 'MTB Detected; INH Resistance Detected'],
+        ['D', 'MTB Detected; INH and KAN Resistance Detected; AMK and CAP Indeterminate'],
+        ['E', 'MTB Detected; INH and Low FLQ Resistance Detected'],
+        ['F', 'MTB Detected; INH, FLQ, AMK, and KAN Resistance Detected'],
+      ]}
+    />
+    <KeyTable
+      title="Key 7 a: DST"
+      widthMm={26}
+      leftTitle
+      rows={[['R = Rifampicin'], ['H = Isoniazid'], ['Z = Pyrazinamide'], ['E = Ethambutol']]}
+    />
+    <KeyTable
+      title="Key 7 b: Culture Results"
+      widthMm={27}
+      rows={[['Growth'], ['No Growth'], ['Done No Results'], ['Not done'], ['Contaminated']]}
+    />
+    <KeyTable
+      title="Key 8: Nutritional Support"
+      widthMm={51}
+      rows={[
+        ['Therapeutic feeds', 'RUTF'],
+        ['Supplementary Food', 'FBF'],
+        ['Nutritional Counseling', 'NC'],
+        ['Vitamin A', 'VIT A'],
+        ['Pyridoxine', 'Pyridoxine'],
+        ['Not Done', 'ND'],
+      ]}
+    />
+    <KeyTable
+      title="Key 9: Comorbidities/Risk Factors"
+      widthMm={70}
+      leftTitle
+      subheadings={[0, 6]}
+      rows={[
+        ['Comorbidities'],
+        ['Malnutrition', 'Kidney Diseases'],
+        ['Diabetes', 'Asthma'],
+        ['Hypertension', 'Liver Disease(s)'],
+        ['Mental Health Conditions.', 'Renal Disease(s)'],
+        ['Lung Cancer (If other cancers, specify)', 'Otherr (specify)'],
+        ['Risk Factors'],
+        ['Undernutrition', 'Alcoholism'],
+        ['Drug & Substance Abuse', 'Smoking'],
+        ['Pregnancy', 'Others (specify)'],
+      ]}
+    />
+    <KeyTable
+      title="Key 10: Treatment Outcome"
+      widthMm={48}
+      leftTitle
+      rows={[
+        ['Cured', 'C'],
+        ['Treatment completed', 'TC'],
+        ['Treatment failure', 'F'],
+        ['Lost to follow-up', 'LTFU'],
+        ['Died', 'D'],
+        ['Moved to MTB4', 'MTB4'],
+        ['Not Evaluated', 'NE'],
+        ['Not a TB Case', 'NTB'],
+      ]}
+    />
+  </div>
+);
+
+/**
+ * The right-hand pages of the TB4 register (page 9 of the form): treatment and
+ * follow-up, columns U to AH, for the same five patients a page as the
+ * left-hand pages, with Keys 6b to 10 beneath.
+ */
+const Tb4TreatmentSheet: React.FC<{ rows: Tb4Row[] }> = ({ rows }) => {
+  const { ref, scale } = usePageScale<HTMLDivElement>(PAGE_WIDTH_MM);
+  const pages = paginate(rows);
+
+  return (
+    <div className={styles.viewport} ref={ref}>
+      {pages.map((pageRows, index) => {
+        const years = continuationYears(pageRows);
+        return (
+          <Tb4Page
+            key={index}
+            page={index + 1}
+            pages={pages.length}
+            side="Treatment and follow-up (U–AH)"
+            scale={scale}
+            keys={<TreatmentKeys />}
+            table={
+              <table className={styles.register}>
+                <Columns widths={COLUMN_WIDTHS} />
+                <thead>
+                  <tr style={{ height: '15mm' }}>
+                    <Heading letter="U" rowSpan={3} centre>
+                      Started treatment
+                      <br />
+                      <br />
+                      Yes/No
+                      <br />
+                      <br />
+                      If No, provide reason (Specify)
+                    </Heading>
+                    <Heading letter="V" rowSpan={3} centre>
+                      Regimen and Date treatment started+
+                    </Heading>
+                    <Heading letter="W" rowSpan={3} colSpan={INITIAL_COLLECTIONS} centre>
+                      Initial phase date of drugs collection
+                    </Heading>
+                    <Heading letter="X" colSpan={24} centre>
+                      Continuation phase date of drugs collection
+                      <br />
+                      <br />
+                      Indicate the date when the patient collected drugs
+                    </Heading>
+                    <Heading letter="Y" rowSpan={3} centre>
+                      HIV Test New Pos/ Known Pos/ Neg/ Unknown (Date done)
+                    </Heading>
+                    <Heading letter="Z" rowSpan={3} centre>
+                      Partner tested for HIV Pos/ Neg/Unknown/ No Partner
+                      <br />
+                      <br />
+                      (Date done)
+                    </Heading>
+                    <Heading letter="AA" rowSpan={3} centre>
+                      Cotrimoxazole Preventive Therapy/ Dapsone Yes/No
+                      <br />
+                      <br />
+                      (Date Started)
+                    </Heading>
+                    <Heading letter="AB" rowSpan={3} centre>
+                      ART : Yes/No (Date started &amp; Regimen)
+                    </Heading>
+                    <Heading letter="AC" rowSpan={3} centre>
+                      Nutrition Support (Key 8)
+                    </Heading>
+                    <Heading letter="AD" rowSpan={3} centre>
+                      Nutritional status at end Treatment Height/ Length (Cm)
+                    </Heading>
+                    <Heading letter="AE" rowSpan={3} centre>
+                      Risk Factors (Key 9)
+                    </Heading>
+                    <Heading letter="AF" rowSpan={3} centre>
+                      Co-Morbidities
+                      <br />
+                      <br />
+                      (Key 9)
+                    </Heading>
+                    <Heading letter="AG" rowSpan={3} centre>
+                      Date and Outcome of treatment (Key10)
+                    </Heading>
+                    <Heading letter="AH" rowSpan={3} centre>
+                      Remarks
+                    </Heading>
+                  </tr>
+                  <tr style={{ height: '13.5mm' }}>
+                    {[0, 1].map((yearIndex) => (
+                      <th key={yearIndex} colSpan={12} className={styles.centreHeading}>
+                        Year:{years ? years[yearIndex] : '……...'}
+                      </th>
+                    ))}
+                  </tr>
+                  <tr style={{ height: '13.5mm' }}>
+                    {[0, 1].map((yearIndex) =>
+                      MONTH_LETTERS.map((letter, month) => (
+                        <th key={`${yearIndex}-${month}`} className={styles.monthHeading}>
+                          {letter}
+                        </th>
+                      )),
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: ROWS_PER_PAGE }, (_, rowIndex) => (
+                    <TreatmentRow key={rowIndex} row={pageRows[rowIndex]} years={years} />
+                  ))}
+                </tbody>
+              </table>
+            }
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Tb4TreatmentSheet;

package/src/registers/tb4/tb4.component.tsx

@@ -0,0 +1,120 @@
+import React, { useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { useSession } from '@openmrs/esm-framework';
+
+import { ReportFiltersComponent, type ReportPeriod, useRestorePeriod } from '../../common/report-filters';
+import { downloadSheetsPdf } from '../../common/report-page';
+import { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
+import { registerFileName } from '../register-file-name';
+import Tb4PatientSheet from './tb4-patient-sheet.component';
+import Tb4TreatmentSheet from './tb4-treatment-sheet.component';
+import { type Tb4Row } from './tb4.types';
+import styles from './tb4-register.scss';
+
+/**
+ * TB4 Notification and Treatment Register (MOH/REG/DLTLDP/01), opened from the
+ * landing page's Registers tab, with the reports' filter bar. Each spread of
+ * the paper register is two facing pages, shown as tabs: the patient,
+ * diagnosis and investigations (A–T), and treatment and follow-up (U–AH).
+ *
+ * The template only for now: its queries are still to be written, so
+ * generating it shows the form ruled and blank for the period. Once the
+ * backend is in, `generate` fetches the patients (`Tb4Row`) instead.
+ */
+const Tb4RegisterPage: React.FC = () => {
+  const [rows, setRows] = useState<Tb4Row[] | null>(null);
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+
+  const session = useSession();
+  const locationUuids = session?.sessionLocation?.uuid ?? '';
+  /* Only a register for the current location counts */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('tb4Location');
+  const isGenerated = rows !== null && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setPeriod({ startDate, endDate });
+    // no backend yet: the register is drawn blank
+    setRows([]);
+    markGenerated(locationUuids);
+  };
+
+  useRestorePeriod(generate);
+
+  /* Download PDF saves the register as the paper book runs, whichever tab is
+     open: each left-hand page followed by its right-hand page, as A3
+     landscape pages made from copies, so the pages on screen are left as
+     they are */
+  const sheetsRef = useRef<HTMLDivElement>(null);
+  const downloadPdf = async () => {
+    const panels = Array.from(sheetsRef.current?.querySelectorAll<HTMLElement>('[data-tb4-side]') ?? []);
+    const [left, right] = panels.map((panel) =>
+      Array.from(panel.querySelectorAll<HTMLElement>('[data-register-page]')),
+    );
+    const pages = (left ?? []).flatMap((page, index) => [page, right?.[index]].filter(Boolean));
+    const name = registerFileName('TB4-Register', session?.sessionLocation?.display ?? '', period);
+    /* styled by its own stylesheets in Arial only, and may run to many pages */
+    await downloadSheetsPdf(pages, name, {
+      paperSize: 'a3',
+      orientation: 'landscape',
+      stylesheetsOnly: true,
+      image: 'jpeg',
+    });
+  };
+
+  /* the open side is kept in the URL */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedSide = searchParams.get('side') === 'treatment' ? 1 : 0;
+  const selectSide = ({ selectedIndex }: { selectedIndex: number }) => {
+    const next = new URLSearchParams(searchParams);
+    if (selectedIndex === 1) {
+      next.set('side', 'treatment');
+    } else {
+      next.delete('side');
+    }
+    setSearchParams(next, { replace: true });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="TB4 Notification and Treatment Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={false}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="custom"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        onDownloadPdf={downloadPdf}
+      />
+      {!isGenerated && (
+        <ReportPlaceholder reportName="TB4 register" isLocationChanged={rows !== null && hasLocationChanged} />
+      )}
+      {isGenerated && (
+        <div ref={sheetsRef}>
+          <Tabs selectedIndex={selectedSide} onChange={selectSide}>
+            <TabList aria-label="TB4 register pages" className={styles.sheetTabs}>
+              <Tab>Patient, diagnosis &amp; investigations (A–T)</Tab>
+              <Tab>Treatment &amp; follow-up (U–AH)</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel className={styles.sheetPanel}>
+                <div className={styles.reportFrame} data-tb4-side>
+                  <Tb4PatientSheet rows={rows} />
+                </div>
+              </TabPanel>
+              <TabPanel className={styles.sheetPanel}>
+                <div className={styles.reportFrame} data-tb4-side>
+                  <Tb4TreatmentSheet rows={rows} />
+                </div>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Tb4RegisterPage;

package/src/registers/tb4/tb4.types.ts

@@ -0,0 +1,129 @@
+import dayjs from 'dayjs';
+
+/** A test result with the date it was done, and for smears the serial number */
+export interface Tb4Test {
+  serial?: string | null;
+  date?: string | null;
+  result?: string | null;
+}
+
+/** Nutritional status: weight (kg), height/length (cm), BMI or Z score, MUAC */
+export interface Tb4Nutrition {
+  weight?: number | string | null;
+  height?: number | string | null;
+  bmi?: number | string | null;
+  muac?: number | string | null;
+}
+
+/**
+ * One patient in the TB4 Notification and Treatment Register
+ * (MOH/REG/DLTLDP/01, February 2025), column by column as on the form's two
+ * facing pages: A to T (patient, diagnosis and investigations) and U to AH
+ * (treatment and follow-up).
+ *
+ * The register has no backend yet: these are the names its query is to
+ * return, so the page fills in once it is connected.
+ */
+export interface Tb4Row {
+  /** (A) cumulative from the start of each year */
+  serial_number?: number | string | null;
+  /** (B) date the sub-county registration number was issued */
+  registration_date?: string | null;
+  /** (C) */
+  sub_county_tb_number?: string | null;
+  /** (D) three names */
+  full_name?: string | null;
+  /** (E) M, F or other */
+  sex?: string | null;
+  /** (F) years and months */
+  age?: string | number | null;
+  /** (G) */
+  nationality?: string | null;
+  /** (G) national ID, passport, UPI, NEMIS or alien ID number */
+  id_number?: string | null;
+  /** (H) neighbour, school, church or mosque */
+  physical_address?: string | null;
+  /** (H) */
+  patient_phone?: string | null;
+  /** (H) */
+  supporter_phone?: string | null;
+  /** (I) HCW, truck driver, prisoner, miner, or None */
+  key_population?: string | null;
+  /** (J) Key 1 */
+  referred_by?: string | null;
+  /** (K) at the start of treatment */
+  nutrition_start?: Tb4Nutrition | null;
+  /** (L) Severe or Non-Severe (Key 2) */
+  severity?: string | null;
+  /** (M) PTB or EPTB */
+  tb_type?: string | null;
+  /** (N) EPTB sub-type */
+  eptb_subtype?: string | null;
+  /** (N) for lymph nodes: complicated or uncomplicated (Key 3) */
+  lymph_node_type?: string | null;
+  /** (O) Key 4 */
+  patient_type?: string | null;
+  /** (P) X-ray: date, score and finding (Key 5) */
+  xray_date?: string | null;
+  xray_score?: string | null;
+  xray_finding?: string | null;
+  /** (P) other imaging, specified */
+  other_imaging?: string | null;
+  /** (Q) Pos, Neg or ND */
+  tb_lamp?: Tb4Test | null;
+  /** (R) Pos, Neg or ND */
+  lf_lam?: Tb4Test | null;
+  /** (S) molecular test at month 0 (Key 6a/6b) */
+  molecular?: Tb4Test | null;
+  /** (S) sputum smears by month of treatment: 0, 2, 3, 5 and 6 */
+  smears?: Partial<Record<0 | 2 | 3 | 5 | 6, Tb4Test>> | null;
+  /** (T) culture result (Key 7b) and the date collected */
+  culture?: Tb4Test | null;
+  /** (T) DST: R or S for each drug (Key 7a) */
+  dst?: { r?: string | null; h?: string | null; z?: string | null; e?: string | null } | null;
+
+  /** (U) Yes or No */
+  started_treatment?: string | null;
+  /** (U) if not started, why */
+  not_started_reason?: string | null;
+  /** (V) */
+  regimen?: string | null;
+  /** (V) */
+  treatment_start_date?: string | null;
+  /** (W) initial phase drug collection dates, up to eight */
+  initial_phase_collections?: string[] | null;
+  /** (X) continuation phase drug collection dates, placed by month */
+  continuation_collections?: string[] | null;
+  /** (Y) New Pos, Known Pos, Neg or Unknown, and the date done */
+  hiv?: Tb4Test | null;
+  /** (Z) partner tested: Pos, Neg, Unknown or No Partner, and the date done */
+  partner_hiv?: Tb4Test | null;
+  /** (AA) cotrimoxazole preventive therapy / dapsone: Yes or No */
+  cpt?: string | null;
+  /** (AA) */
+  cpt_start_date?: string | null;
+  /** (AB) Yes or No */
+  art?: string | null;
+  /** (AB) date started and regimen */
+  art_start?: string | null;
+  /** (AC) Key 8 */
+  nutrition_support?: string | null;
+  /** (AD) at the end of treatment */
+  nutrition_end?: Tb4Nutrition | null;
+  /** (AE) Key 9 */
+  risk_factors?: string | null;
+  /** (AF) Key 9 */
+  comorbidities?: string | null;
+  /** (AG) Key 10 */
+  outcome?: string | null;
+  /** (AG) */
+  outcome_date?: string | null;
+  /** (AH) */
+  remarks?: string | null;
+}
+
+/** Blank rather than "null" / "undefined" in a cell */
+export const text = (value: unknown) => (value === null || value === undefined ? '' : String(value));
+
+/** DD/MM/YYYY, as the form asks */
+export const formDate = (value: unknown) => (value ? dayjs(String(value)).format('DD/MM/YYYY') : '');