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

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

@@ -0,0 +1,418 @@
+import React from 'react';
+
+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';
+
+/** Column widths, measured off page 8 of the form: A to O, P (X-ray, others), Q, R, S (molecular, five smears), T */
+const COLUMN_WIDTHS = [
+  51, 62, 59, 218, 48, 64, 85, 105, 68, 68, 76, 57, 55, 122, 60, 47, 46, 89, 50, 77, 52, 52, 50, 45, 48, 136,
+];
+
+const SMEAR_MONTHS = [0, 2, 3, 5, 6] as const;
+
+/** A test's serial number, date and result, down the row (S) */
+const TestStack: React.FC<{ test?: Tb4Test | null }> = ({ test }) => (
+  <Stack
+    parts={[
+      { share: 0.292, boxes: [{ value: text(test?.serial) }] },
+      { share: 0.295, boxes: [{ value: formDate(test?.date) }] },
+      { share: 0.413, boxes: [{ value: text(test?.result) }] },
+    ]}
+  />
+);
+
+/** One patient: A to T across one tall row, divided inside as printed */
+const PatientRow: React.FC<{ row?: Tb4Row }> = ({ row }) => (
+  <tr>
+    <td>
+      <Value>{text(row?.serial_number)}</Value>
+    </td>
+    <td>
+      <Value>{formDate(row?.registration_date)}</Value>
+    </td>
+    <td>
+      <Value>{text(row?.sub_county_tb_number)}</Value>
+    </td>
+    <td>
+      <Value left wrap>
+        {text(row?.full_name)}
+      </Value>
+    </td>
+    <td>
+      <Value>{text(row?.sex)}</Value>
+    </td>
+    <td>
+      <Value>{text(row?.age)}</Value>
+    </td>
+    <td>
+      <Stack
+        parts={[
+          { share: 0.146, boxes: [{ heading: 'Nationality' }] },
+          { share: 0.295, boxes: [{ value: text(row?.nationality) }] },
+          { share: 0.146, boxes: [{ heading: 'Number' }] },
+          { share: 0.413, boxes: [{ value: text(row?.id_number) }] },
+        ]}
+      />
+    </td>
+    <td>
+      <Value left wrap>
+        {[row?.physical_address, row?.patient_phone, row?.supporter_phone]
+          .map(text)
+          .filter(Boolean)
+          .map((line) => (
+            <React.Fragment key={line}>
+              {line}
+              <br />
+            </React.Fragment>
+          ))}
+      </Value>
+    </td>
+    <td>
+      <Value>{text(row?.key_population)}</Value>
+    </td>
+    <td>
+      <Value>{text(row?.referred_by)}</Value>
+    </td>
+    <td>
+      <NutritionStack nutrition={row?.nutrition_start} />
+    </td>
+    <td>
+      <Value>{text(row?.severity)}</Value>
+    </td>
+    <td>
+      <Value>{text(row?.tb_type)}</Value>
+    </td>
+    <td>
+      <Stack
+        parts={[
+          { share: 0.441, boxes: [{ value: text(row?.eptb_subtype) }] },
+          { share: 0.146, boxes: [{ value: text(row?.lymph_node_type) }] },
+          { share: 0.146 },
+          { share: 0.267 },
+        ]}
+      />
+    </td>
+    <td>
+      <Value>{text(row?.patient_type)}</Value>
+    </td>
+    <td>
+      <Stack
+        parts={[
+          { share: 0.183, boxes: [{ tag: 'Date', value: formDate(row?.xray_date) }] },
+          { share: 0.258, boxes: [{ tag: 'Score', value: text(row?.xray_score) }] },
+          { share: 0.559, boxes: [{ tag: 'Finding', value: text(row?.xray_finding) }] },
+        ]}
+      />
+    </td>
+    <td>
+      <Value>{text(row?.other_imaging)}</Value>
+    </td>
+    <td>
+      <Stack
+        parts={[
+          { share: 0.146 },
+          { share: 0.295, boxes: [{ value: formDate(row?.tb_lamp?.date) }] },
+          { share: 0.146 },
+          { share: 0.413, boxes: [{ value: text(row?.tb_lamp?.result) }] },
+        ]}
+      />
+    </td>
+    <td>
+      <Value>
+        {text(row?.lf_lam?.result)}
+        <br />
+        {formDate(row?.lf_lam?.date)}
+      </Value>
+    </td>
+    <td>
+      <TestStack test={row?.molecular} />
+    </td>
+    {SMEAR_MONTHS.map((month) => (
+      <td key={month}>
+        <TestStack test={row?.smears?.[month]} />
+      </td>
+    ))}
+    <td>
+      <Stack
+        parts={[
+          { share: 0.146, boxes: [{ value: text(row?.culture?.result) }] },
+          { share: 0.146, boxes: [{ heading: 'Date' }] },
+          { share: 0.149, boxes: [{ value: formDate(row?.culture?.date) }] },
+          { share: 0.146 },
+          {
+            share: 0.146,
+            boxes: [{ heading: 'R' }, { heading: 'H' }, { heading: 'Z' }, { heading: 'E', grow: 2.2 }],
+          },
+          {
+            share: 0.267,
+            boxes: [
+              { value: text(row?.dst?.r) },
+              { value: text(row?.dst?.h) },
+              { value: text(row?.dst?.z) },
+              { value: text(row?.dst?.e), grow: 2.2 },
+            ],
+          },
+        ]}
+      />
+    </td>
+  </tr>
+);
+
+/** Keys 1 to 6a, beneath the register on the left-hand pages */
+const PatientKeys: React.FC = () => (
+  <div className={styles.keys}>
+    <div className={styles.keyColumn}>
+      <p className={styles.keyTitle}>KEY:</p>
+      <KeyTable
+        title="Key 1: Patient referred by"
+        widthMm={68}
+        rows={[
+          ['HTC', 'HTC'],
+          ['Comprehensive care unit', 'CCC'],
+          ['Diabetes', 'DC'],
+          ['Private Sector', 'PS'],
+          ['Antenatal/PMTCT clinic', 'PMTCT'],
+          ['Self referral', 'SR'],
+          ['Contact Invitation', 'CI'],
+          ['Chemist/Pharmacy', 'CP'],
+          ['Community Health Promoter', 'CHP'],
+        ]}
+      />
+    </div>
+    <div className={styles.keyColumn}>
+      <KeyTable
+        title="Key 2: Severity Score"
+        widthMm={79}
+        rows={[
+          [
+            'Non- Severe',
+            <>
+              No danger signs
+              <br />
+              Diagnosed and managed at the outpatient/ No hospitalization
+            </>,
+          ],
+          [
+            'Severe',
+            <>
+              Requiring hospitalization at diagnosis
+              <br />
+              Hospitalized at diagnosis/Diagnosed while an inpatient
+              <br />
+              Severely ill at diagnosis with any danger signs children who are BC
+            </>,
+          ],
+        ]}
+      />
+      <KeyTable
+        title="Key 3: lymphadenitis"
+        widthMm={79}
+        rows={[
+          [
+            'Complicated',
+            <>
+              a) Has a Leaking Sinus/ associated abscess
+              <br />
+              b) Causing nerve/ nearby structure compression
+              <br />
+              c) TB Spread to any other organ
+            </>,
+          ],
+          ['Uncomplicated', 'Simple nodes with none of the above'],
+        ]}
+      />
+    </div>
+    <KeyTable
+      title="Key 4: Type of patient:"
+      widthMm={74}
+      leftTitle
+      rows={[
+        ['New', 'N'],
+        ['Treatment after loss follow up', 'TLF'],
+        ['Recurrent', 'R'],
+        ['Previous Treatment History unknown', 'THU'],
+        ['Treatment after Failure', 'TF'],
+        ['Transfer In', 'TI'],
+        ['Others previously treated', 'PT'],
+      ]}
+    />
+    <KeyTable
+      title="Key 5 : X-Ray"
+      widthMm={68}
+      subheadings={[4]}
+      rows={[
+        ['N', 'Normal'],
+        ['SG', 'Abnormal Suggestive TB'],
+        ['AO', 'Abnormal Others'],
+        ['ND', 'Not Done'],
+        ['CT - Scan'],
+        ['FSTB', 'Finding Suggestive of TB'],
+        ['FSM', 'Finding Suggestive of Malignancy'],
+      ]}
+    />
+    <KeyTable
+      title="Key 6 a: Molecular test results"
+      widthMm={82}
+      rows={[
+        ['TS', 'MTB detected, rifampicin resistance not detected;'],
+        ['RR', 'MTB detected, rifampicin resistance detected;'],
+        ['TI', 'MTB detected, rifampicin resistance indeterminate'],
+        ['N', 'MTB not detected;'],
+        ['I', 'Invalid/no result/error'],
+        ['NA', 'Not Applicable'],
+        ['TR', 'MTB detected Trace'],
+      ]}
+    />
+  </div>
+);
+
+/**
+ * The left-hand pages of the TB4 register (page 8 of the form): the patient,
+ * diagnosis and investigations, columns A to T, five patients a page, with
+ * Keys 1 to 6a beneath.
+ */
+const Tb4PatientSheet: 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) => (
+        <Tb4Page
+          key={index}
+          page={index + 1}
+          pages={pages.length}
+          side="Patient, diagnosis and investigations (A–T)"
+          scale={scale}
+          keys={<PatientKeys />}
+          table={
+            <table className={styles.register}>
+              <Columns widths={COLUMN_WIDTHS} />
+              <thead>
+                <tr style={{ height: '14mm' }}>
+                  <Heading letter="A" rowSpan={3}>
+                    Serial No.
+                  </Heading>
+                  <Heading letter="B" rowSpan={3}>
+                    Date of Sub- County Reg.
+                  </Heading>
+                  <Heading letter="C" rowSpan={3}>
+                    Sub County TB Reg No.
+                  </Heading>
+                  <Heading letter="D" rowSpan={3} centre>
+                    &quot;Name (Write 3 names)&quot;
+                  </Heading>
+                  <Heading letter="E" rowSpan={3}>
+                    Sex (M/F Other)
+                  </Heading>
+                  <Heading letter="F" rowSpan={3}>
+                    Age in years and months
+                  </Heading>
+                  <Heading letter="G" rowSpan={3} centre>
+                    Nationality and National ID/ Passport / UPI/NEMIS Number/Alien ID Number
+                  </Heading>
+                  <Heading letter="H" rowSpan={3}>
+                    Physical address (Neighbour/ School/ Church/ Mosque)
+                    <br />
+                    <br />
+                    Phone No. of patient
+                    <br />
+                    <br />
+                    Phone No. treatment supporter
+                  </Heading>
+                  <Heading letter="I" rowSpan={3}>
+                    Is the patient a key vulnerable population (HCW, Truck driver prisoner or miner) or None
+                  </Heading>
+                  <Heading letter="J" rowSpan={3} centre>
+                    Patient Referred By (Key 1)
+                  </Heading>
+                  <Heading letter="K" rowSpan={3}>
+                    Nutritional status at the start of TB Treatment (Kgs)/ Height/ Length (Cm)
+                  </Heading>
+                  <Heading letter="L" rowSpan={3} centre>
+                    Severity Score (Severe/ Non- Severe Key 2)
+                  </Heading>
+                  <Heading letter="M" rowSpan={3}>
+                    Type of TB (PTB/ EPTB
+                  </Heading>
+                  <Heading letter="N" rowSpan={3}>
+                    EPTB Sub-type
+                    <br />
+                    <br />
+                    (If lymph nodes, specify complicated/ uncomplicated Key 3)
+                  </Heading>
+                  <Heading letter="O" rowSpan={3} centre>
+                    Type of patient (Key 4)
+                  </Heading>
+                  <Heading letter="P" rowSpan={2} colSpan={2}>
+                    Imaging (Key5)
+                  </Heading>
+                  <Heading letter="Q" rowSpan={3}>
+                    TB LAMP
+                    <br />
+                    <br />
+                    Date
+                    <br />
+                    <br />
+                    Results (Pos/ Neg/ND)
+                  </Heading>
+                  <Heading letter="R" rowSpan={3} centre>
+                    LF LAM
+                    <br />
+                    <br />
+                    (Pos/ Neg/ ND) and date
+                  </Heading>
+                  <Heading letter="S" colSpan={6} centre>
+                    Molecular/Microbiological Tests (Serial no., date and result sputum smear examination,
+                    quantification)
+                  </Heading>
+                  <Heading letter="T" rowSpan={3} centre>
+                    <br />
+                    Culture/DST Results Resistant (R)/Sensitive (S) and Date collected (Growth/No Growth/ Done No
+                    Results/ Contaminated/Not done) (Key7a/7b)
+                  </Heading>
+                </tr>
+                <tr style={{ height: '9.5mm' }}>
+                  <th className={styles.boldHeading}>Molecular test (Key 6a/6b)</th>
+                  <th colSpan={5} className={styles.boldHeading}>
+                    Smear
+                  </th>
+                </tr>
+                <tr style={{ height: '18.5mm' }}>
+                  <th className={styles.tinyHeading}>X-ray Finding</th>
+                  <th className={styles.tinyHeading}>Others Specify)</th>
+                  <th className={styles.boldHeading}>Month 0</th>
+                  {SMEAR_MONTHS.map((month) => (
+                    <th key={month} className={styles.boldHeading}>
+                      Month {month}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: ROWS_PER_PAGE }, (_, rowIndex) => (
+                  <PatientRow key={rowIndex} row={pageRows[rowIndex]} />
+                ))}
+              </tbody>
+            </table>
+          }
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Tb4PatientSheet;

package/src/registers/tb4/tb4-register.scss

@@ -0,0 +1,282 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The TB4 Notification and Treatment Register (MOH/REG/DLTLDP/01) as A3
+   landscape pages, drawn in the units the paper is measured in (mm, pt) so a
+   page is one sheet, as on pages 8 and 9 of the form: the two facing pages of
+   each spread, five patients to a page, with the keys beneath. Each patient's
+   row is divided inside as printed (nationality over number, weight beside
+   height over BMI and MUAC, …), drawn as stacks of fixed fractions of the row
+   so every page keeps the form's proportions. */
+
+/* On screen a page is the printable area only, A3 landscape less its 8mm
+   margins: the card around it gives the margin, and `usePageScale` is told
+   this width. */
+$page-w: 420mm - 2 * 8mm;
+$page-h: 297mm - 2 * 8mm;
+
+$ink: #000;
+$rule: 0.6pt solid #555;
+$frame: 1.2pt solid $ink;
+$key-fill: #d6e3bc; // the keys' headings
+
+$heading-h: 42mm;
+$row-h: 32mm;
+
+/* The card the pages sit in, drawn like the filter card above it */
+.reportFrame {
+  margin: layout.$spacing-05 0 layout.$spacing-07;
+  padding: layout.$spacing-05;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+}
+
+/* The two facing pages as tabs, under the filters */
+.sheetTabs {
+  margin-top: layout.$spacing-05;
+}
+
+.sheetPanel {
+  padding: 0;
+}
+
+/* Holds the fixed-width pages without making the app scroll sideways */
+.viewport {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-09;
+  overflow-x: auto;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  box-sizing: border-box;
+  width: $page-w;
+  height: $page-h;
+  margin: 0 auto;
+  color: $ink;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 7pt;
+  line-height: 1.15;
+  background-color: #fff;
+  /* set by `usePageScale` from the measured container width, floored at 1 */
+  zoom: var(--page-zoom, 1);
+}
+
+.register {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: $frame;
+
+  th,
+  td {
+    padding: 0;
+    overflow: hidden;
+    border: $rule;
+  }
+
+  th {
+    padding: 0.8mm 0.8mm;
+    font-size: 6.5pt;
+    font-weight: 400;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  /* each patient's row is ruled off heavier, as printed */
+  tbody tr {
+    height: $row-h;
+    border-top: $frame;
+  }
+
+  td {
+    height: $row-h;
+    vertical-align: middle;
+  }
+}
+
+/* the column letter, bold over its heading */
+.letter {
+  display: block;
+  font-weight: 700;
+  text-align: center;
+}
+
+.centreHeading {
+  text-align: center !important;
+}
+
+.boldHeading {
+  font-weight: 700 !important;
+  text-align: center !important;
+}
+
+/* the small headings under the imaging column */
+.tinyHeading {
+  font-size: 5pt !important;
+  font-weight: 700 !important;
+  text-align: center !important;
+  vertical-align: middle !important;
+}
+
+/* the months of the drug collection grid */
+.monthHeading {
+  padding: 0 !important;
+  font-size: 5.5pt !important;
+  font-weight: 700 !important;
+  text-align: center !important;
+  vertical-align: middle !important;
+}
+
+/* A whole cell's entry */
+.value {
+  display: block;
+  padding: 0.6mm 0.8mm;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.valueLeft {
+  text-align: left;
+}
+
+/* names, addresses and remarks wrap within their cell */
+.wrap {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+
+/* A divided cell: parts stacked down the row's height, each holding one or
+   more boxes side by side */
+.stack {
+  display: grid;
+  height: $row-h;
+}
+
+.part {
+  display: flex;
+  min-height: 0;
+  border-top: $rule;
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
+.box {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0 0.6mm;
+  overflow: hidden;
+  text-align: center;
+  border-left: $rule;
+
+  &:first-child {
+    border-left: none;
+  }
+}
+
+/* a printed label filling its box: "Nationality", "Outcome", "R", … */
+.heading {
+  font-size: 6.5pt;
+  font-weight: 700;
+}
+
+/* a printed label in the corner of a box that is also written in: "BMI/Z score", "MUAC" */
+.tag {
+  position: absolute;
+  top: 0.6mm;
+  left: 0.6mm;
+  font-size: 4.8pt;
+  font-weight: 700;
+}
+
+.boxValue {
+  overflow-wrap: anywhere;
+}
+
+/* An initial phase collection (W): its date written up the narrow column */
+.collection {
+  text-align: center;
+}
+
+.vertical {
+  display: inline-block;
+  font-size: 6pt;
+  white-space: nowrap;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}
+
+/* The keys beneath the register, spaced across the sheet as on the form */
+
+.keys {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 4mm;
+  margin-top: 4mm;
+}
+
+.keyTitle {
+  margin: 0 0 1.5mm;
+  font-size: 10pt;
+  font-weight: 700;
+}
+
+.keyColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.keyTable {
+  border-collapse: collapse;
+  font-size: 6.8pt;
+  line-height: 1.12;
+
+  th,
+  td {
+    padding: 0.6mm 1.2mm;
+    text-align: left;
+    vertical-align: middle;
+    border: 0.6pt solid #7f7f7f;
+  }
+
+  thead th {
+    font-size: 7.2pt;
+    font-weight: 700;
+    text-align: center;
+    background-color: $key-fill;
+  }
+
+  td {
+    height: 4.6mm;
+  }
+}
+
+/* a heading within a key, e.g. "CT - Scan", "Comorbidities" */
+.keySubheading td {
+  font-weight: 700;
+}
+
+.leftHeadingKey thead th {
+  text-align: left;
+}
+
+.pageFoot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 1.5mm;
+  font-size: 7.5pt;
+}