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

package/src/registers/moh-362/moh-362-linkage-register.component.tsx

@@ -1,117 +1,212 @@
 import React from 'react';
 
+import { usePageScale } from '../../common/report-page';
 import { clientName, formDate, text, type Moh362Row } from './moh-362.types';
-import styles from './moh-362-register.scss';
+import sheet from './moh-362-lab-register.scss';
+import styles from './moh-362-linkage-register.scss';
 
 interface Moh362LinkageRegisterProps {
   rows: Moh362Row[];
 }
 
+/** Rows ruled on each page of the paper form */
+const ROWS_PER_PAGE = 15;
+
+/** A4 landscape less its 8mm margins: the page as drawn on screen, inside the report card */
+const PAGE_WIDTH_MM = 297 - 2 * 8;
+
 const COLUMN_IDS = 'abcdefghij'.split('');
 
+/** Column widths, measured off page 6 of the form, as fractions of the sheet */
+const COLUMN_WIDTHS = [82, 204, 271, 180, 134, 193, 286, 147, 134, 182];
+const COLUMN_TOTAL = COLUMN_WIDTHS.reduce((sum, width) => sum + width, 0);
+
+/** Columns split into an upper and a lower cell: (b), (d) and (g) */
+const SPLIT_COLUMNS = new Set(['b', 'd', 'g']);
+
+const paginate = (rows: Moh362Row[]) => {
+  const pages: Moh362Row[][] = [];
+  for (let start = 0; start < rows.length; start += ROWS_PER_PAGE) {
+    pages.push(rows.slice(start, start + ROWS_PER_PAGE));
+  }
+  return pages.length ? pages : [[]];
+};
+
+/** A heading holding two labels: upper cell over lower cell */
+const SplitHeader: React.FC<{ upper: React.ReactNode; lower: React.ReactNode }> = ({ upper, lower }) => (
+  <th className={styles.splitHeader}>
+    <div className={styles.splitStack}>
+      <span>{upper}</span>
+      <span>{lower}</span>
+    </div>
+  </th>
+);
+
+/** One client: two ruled lines, columns (b), (d) and (g) split into upper and lower cells */
+const ClientRows: React.FC<{ row?: Moh362Row; serial: number }> = ({ row, serial }) => {
+  if (!row) {
+    return (
+      <>
+        <tr className={styles.clientUpper}>
+          {COLUMN_IDS.map((id) =>
+            SPLIT_COLUMNS.has(id) ? <td key={id} className={sheet.upperCell} /> : <td key={id} rowSpan={2} />,
+          )}
+        </tr>
+        <tr className={styles.clientLower}>
+          {[...SPLIT_COLUMNS].map((id) => (
+            <td key={id} className={sheet.lowerCell} />
+          ))}
+        </tr>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <tr className={styles.clientUpper}>
+        <td rowSpan={2}>{serial}</td>
+        <td className={sheet.upperCell}>{text(row.id_number)}</td>
+        <td rowSpan={2} className={sheet.left}>
+          <span className={sheet.clamp}>{clientName(row)}</span>
+        </td>
+        <td className={sheet.upperCell}>{text(row.telephone)}</td>
+        <td rowSpan={2}>{text(row.client_tested_as)}</td>
+        <td rowSpan={2} className={sheet.left}>
+          <span className={sheet.clamp}>{text(row.referral_to)}</span>
+        </td>
+        <td className={`${sheet.upperCell} ${sheet.left}`}>{text(row.handed_to)}</td>
+        <td rowSpan={2}>{formDate(row.art_start_date)}</td>
+        <td rowSpan={2}>{text(row.ccc_number)}</td>
+        <td rowSpan={2} className={sheet.left}>
+          <span className={sheet.clamp}>{text(row.screening_remarks)}</span>
+        </td>
+      </tr>
+      <tr className={styles.clientLower}>
+        <td className={sheet.lowerCell}>{text(row.nupi)}</td>
+        <td className={`${sheet.lowerCell} ${sheet.left}`}>{text(row.residence)}</td>
+        {/* the receiving health worker's cadre is not recorded */}
+        <td className={sheet.lowerCell} />
+      </tr>
+    </>
+  );
+};
+
 /**
- * REFERRAL AND LINKAGE REGISTER (Ver. July 2023), page 6 of the MOH 362 form:
- * the clients who tested HIV positive and were linked to care (started on ART),
- * columns (a) to (j), with the total linked at the foot.
+ * One A4 landscape page of the register: 15 ruled client rows, and on the last
+ * page the total of clients linked across the whole register, in one frame.
  */
-const Moh362LinkageRegister: React.FC<Moh362LinkageRegisterProps> = ({ rows }) => {
-  const linked = rows.length;
+const LinkageRegisterPage: React.FC<{
+  rows: Moh362Row[];
+  firstSerial: number;
+  page: number;
+  pages: number;
+  scale: number;
+  /** clients linked in the whole register, given only to the last page */
+  totalLinked?: number;
+}> = ({ rows, firstSerial, page, pages, scale, totalLinked }) => (
+  <section className={sheet.page} data-register-page style={{ '--page-zoom': scale } as React.CSSProperties}>
+    <div className={sheet.runningHead}>
+      <span>Ministry Of Health</span>
+      <span>MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER</span>
+      <span>Ver. July 2023</span>
+    </div>
+    <h4 className={`${sheet.title} ${styles.title}`}>REFERRAL AND LINKAGE REGISTER</h4>
 
-  return (
-    <div className={styles.sheet}>
-      <div className={styles.runningHead}>
-        <span>Ministry Of Health</span>
-        <span>MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER</span>
-        <span>Ver. July 2023</span>
-      </div>
-      <h4 className={`${styles.sheetTitle} ${styles.serifTitle}`}>REFERRAL AND LINKAGE REGISTER</h4>
-
-      <div className={styles.tableScroll}>
-        <table className={styles.register}>
-          <thead>
-            <tr>
-              <th>
-                Serial
-                <br />
-                Number
-              </th>
-              <th className={styles.splitHeader}>
-                <span>National Identification Number</span>
-                <span>National Unique Patient Identifier (NUPI) Number</span>
-              </th>
-              <th className={styles.wide}>Client Names</th>
-              <th className={styles.splitHeader}>
-                <span>Telephone Number</span>
-                <span>Residence</span>
-              </th>
-              <th>
-                Identification
-                <br />
-                Strategy
-                <br />
-                (VCT/IT/HIVST
-                <br />
-                /SNS)
-              </th>
-              <th className={styles.wide}>Patient referred to</th>
-              <th className={styles.wide}>
-                Handed over to:
-                <br />
+    <div className={sheet.frame}>
+      <table className={`${sheet.register} ${styles.linkageTable}`}>
+        <colgroup>
+          {COLUMN_WIDTHS.map((width, index) => (
+            <col key={index} style={{ width: `${(width / COLUMN_TOTAL) * 100}%` }} />
+          ))}
+        </colgroup>
+        <thead>
+          <tr className={styles.headingRow}>
+            <th>
+              Serial
+              <br />
+              Number
+            </th>
+            <SplitHeader
+              upper="National Identification Number"
+              lower="National Unique Patient Identifier (NUPI) Number"
+            />
+            <th>Client Names</th>
+            <SplitHeader upper="Telephone Number" lower="Residence" />
+            <th>
+              Identification Strategy
+              <br />
+              <span className={styles.regular}>(VCT/IT/HIVST /SNS)</span>
+            </th>
+            <th>Patient referred to</th>
+            <th>
+              Handed over to:
+              <br />
+              <span className={styles.regular}>
                 (Indicate Name (upper cell)
                 <br />
                 and Cadre (lower cell)
-              </th>
-              <th>
-                Date started on
-                <br />
-                ART
-              </th>
-              <th>CCC Number</th>
-              <th className={styles.wide}>Remarks</th>
-            </tr>
-            <tr className={styles.columnIds}>
-              {COLUMN_IDS.map((id) => (
-                <th key={id}>({id})</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row, index) => (
-              <React.Fragment key={`${row.patient_id}-${row.serial_number}-${index}`}>
-                <tr>
-                  <td rowSpan={2}>{index + 1}</td>
-                  <td className={styles.upperCell}>{text(row.id_number)}</td>
-                  <td rowSpan={2} className={styles.left}>
-                    {clientName(row)}
-                  </td>
-                  <td className={styles.upperCell}>{text(row.telephone)}</td>
-                  <td rowSpan={2}>{text(row.client_tested_as)}</td>
-                  <td rowSpan={2} className={styles.left}>
-                    {text(row.referral_to)}
-                  </td>
-                  <td className={`${styles.upperCell} ${styles.left}`}>{text(row.handed_to)}</td>
-                  <td rowSpan={2}>{formDate(row.art_start_date)}</td>
-                  <td rowSpan={2}>{text(row.ccc_number)}</td>
-                  <td rowSpan={2} className={styles.left}>
-                    {text(row.screening_remarks)}
-                  </td>
-                </tr>
-                <tr>
-                  <td className={styles.lowerCell}>{text(row.nupi)}</td>
-                  <td className={styles.lowerCell}>{text(row.residence)}</td>
-                  {/* the receiving health worker's cadre is not recorded */}
-                  <td className={styles.lowerCell} />
-                </tr>
-              </React.Fragment>
+              </span>
+            </th>
+            <th>Date started on ART</th>
+            <th>CCC Number</th>
+            <th>Remarks</th>
+          </tr>
+          <tr className={styles.idRow}>
+            {COLUMN_IDS.map((id) => (
+              <th key={id}>({id})</th>
             ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: ROWS_PER_PAGE }, (_, index) => (
+            <ClientRows key={index} row={rows[index]} serial={firstSerial + index} />
+          ))}
+          {totalLinked !== undefined && (
             <tr className={styles.totalRow}>
-              <th colSpan={9} className={styles.left}>
+              <th colSpan={3} className={styles.totalLabel}>
                 Totals Clients Linked
               </th>
-              <td>{linked}</td>
+              <td colSpan={6} className={styles.totalFill} />
+              <td className={styles.totalFigure}>{totalLinked}</td>
             </tr>
-          </tbody>
-        </table>
+          )}
+        </tbody>
+      </table>
+    </div>
+
+    <div className={sheet.pageFoot}>
+      <span>
+        Page {page} of {pages}
+      </span>
+      <span>Ver. July 2023</span>
+    </div>
+  </section>
+);
+
+/**
+ * REFERRAL AND LINKAGE REGISTER (Ver. July 2023), page 6 of the MOH 362 form,
+ * as A4 landscape pages: the clients who tested HIV positive and were linked to
+ * care (started on ART), columns (a) to (j), with the total linked at the foot
+ * of the last page.
+ */
+const Moh362LinkageRegister: React.FC<Moh362LinkageRegisterProps> = ({ rows }) => {
+  const { ref, scale } = usePageScale<HTMLDivElement>(PAGE_WIDTH_MM);
+  const pages = paginate(rows);
+
+  return (
+    <div className={sheet.reportFrame}>
+      <div className={sheet.viewport} ref={ref}>
+        {pages.map((pageRows, index) => (
+          <LinkageRegisterPage
+            key={index}
+            rows={pageRows}
+            firstSerial={index * ROWS_PER_PAGE + 1}
+            page={index + 1}
+            pages={pages.length}
+            scale={scale}
+            totalLinked={index === pages.length - 1 ? rows.length : undefined}
+          />
+        ))}
       </div>
     </div>
   );

package/src/registers/moh-362/moh-362-linkage-register.scss

@@ -0,0 +1,91 @@
+/* REFERRAL AND LINKAGE REGISTER as A4 landscape pages. The page, frame, ruled
+   table and split cells come from the lab register's sheet styles; these are
+   page 6's own measurements: a shorter heading in larger bold type, and taller
+   client rows, 15 to a page, with the total of clients linked on the last. */
+
+$ink: #000;
+$rule: 0.6pt solid $ink;
+$thick: 1.4pt solid $ink;
+$dotted: 0.6pt dotted $ink;
+$shade: #f2f2f2; // the lower cells and the totals row
+
+$heading-h: 21mm;
+$ids-h: 5.2mm;
+$line-h: 4.6mm; // half a client row: each client takes two lines
+$total-h: 6.7mm;
+
+/* the title is set in a serif on this page of the form */
+.title {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 10pt;
+  line-height: 1.2;
+}
+
+.linkageTable .headingRow th {
+  height: $heading-h;
+  font-size: 7.5pt;
+  font-weight: 700;
+}
+
+/* the strategy and handed-over headings keep their codes in regular type */
+.linkageTable .headingRow .regular {
+  font-weight: 400;
+}
+
+.linkageTable .idRow th {
+  height: $ids-h;
+  font-size: 8pt;
+  font-weight: 700;
+  border-top: $thick;
+  border-bottom: $thick;
+}
+
+.linkageTable .clientUpper td,
+.linkageTable .clientLower td {
+  height: $line-h;
+  font-size: 7pt;
+  white-space: nowrap;
+}
+
+/* a heading holding two labels: upper cell over lower cell, split by a dotted rule */
+.splitHeader {
+  padding: 0 !important;
+}
+
+.splitStack {
+  display: flex;
+  flex-direction: column;
+  height: $heading-h;
+
+  span {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.5mm;
+  }
+
+  span:first-child {
+    border-bottom: $dotted;
+  }
+}
+
+.linkageTable .totalRow > * {
+  height: $total-h;
+  font-size: 7pt;
+  font-weight: 700;
+  border-top: $thick;
+}
+
+.totalLabel {
+  text-align: left !important;
+}
+
+.totalFill,
+.totalFigure {
+  background-color: $shade;
+}
+
+.totalFigure {
+  font-size: 8pt !important;
+}

package/src/registers/moh-362/moh-362.component.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+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 { showReportError } from '../../common/report-error';
+import { downloadSheetsPdf } from '../../common/report-page';
+import { registerFileName } from '../register-file-name';
 import { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
 import { ReportSkeleton } from '../../common/report-skeleton';
 import { getMoh362 } from '../../resources/moh-362.resource';
@@ -47,6 +49,19 @@ const Moh362Register: React.FC = () => {
 
   useRestorePeriod(generate);
 
+  /* Download PDF saves the whole register, whichever sheet is open: the HTS lab
+     register's pages, then the referral and linkage register's, each an A4
+     landscape page. The file is made from copies, so the pages on screen are
+     left as they are. */
+  const sheetsRef = useRef<HTMLDivElement>(null);
+  const downloadPdf = async () => {
+    const pages = Array.from(sheetsRef.current?.querySelectorAll<HTMLElement>('[data-register-page]') ?? []);
+    const name = registerFileName('MOH-362', session?.sessionLocation?.display ?? '', period);
+    /* the register is styled by its own stylesheets in Arial and Georgia only,
+       and runs to many pages */
+    await downloadSheetsPdf(pages, name, { orientation: 'landscape', stylesheetsOnly: true, image: 'jpeg' });
+  };
+
   /* the open sheet is kept in the URL */
   const [searchParams, setSearchParams] = useSearchParams();
   const selectedSheet = searchParams.get('sheet') === 'linkage' ? 1 : 0;
@@ -71,26 +86,29 @@ const Moh362Register: React.FC = () => {
         generatedPeriod={period}
         defaultTab="custom"
         backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        onDownloadPdf={downloadPdf}
       />
       {isLoading && <ReportSkeleton />}
       {!isLoading && !isGenerated && (
         <ReportPlaceholder reportName="MOH 362 register" isLocationChanged={rows !== null && hasLocationChanged} />
       )}
       {!isLoading && isGenerated && (
-        <Tabs selectedIndex={selectedSheet} onChange={selectSheet}>
-          <TabList aria-label="MOH 362 registers" className={styles.sheetTabs}>
-            <Tab>HTS Lab Register</Tab>
-            <Tab>Referral and Linkage Register</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel className={styles.sheetPanel}>
-              <Moh362LabRegister rows={rows} />
-            </TabPanel>
-            <TabPanel className={styles.sheetPanel}>
-              <Moh362LinkageRegister rows={rows.filter(isLinked)} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+        <div ref={sheetsRef}>
+          <Tabs selectedIndex={selectedSheet} onChange={selectSheet}>
+            <TabList aria-label="MOH 362 registers" className={styles.sheetTabs}>
+              <Tab>HTS Lab Register</Tab>
+              <Tab>Referral and Linkage Register</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel className={styles.sheetPanel}>
+                <Moh362LabRegister rows={rows} />
+              </TabPanel>
+              <TabPanel className={styles.sheetPanel}>
+                <Moh362LinkageRegister rows={rows.filter(isLinked)} />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
       )}
     </>
   );

package/src/registers/moh-362/moh-362.types.ts

@@ -19,25 +19,32 @@ export interface Moh362Row {
   telephone?: string | null;
   date_of_visit?: string | null;
   hts_provider?: string | null;
-  marital_status?: number | string | null;
-  population_type?: number | string | null;
+  /** Married, Widowed, Single, Divorced or Separated */
+  marital_status?: string | null;
+  /** Gen Pop or KVP */
+  population_type?: string | null;
   sub_population?: string | null;
-  setting?: number | string | null;
-  hiv_test1?: number | string | null;
+  /** Facility or Community */
+  setting?: string | null;
+  /** Negative, Positive or Inconclusive */
+  hiv_test1?: string | null;
   kit1_name?: string | null;
   lot1?: string | null;
   expiry1?: string | null;
-  hiv_test2?: number | string | null;
+  hiv_test2?: string | null;
   kit2_name?: string | null;
   lot2?: string | null;
   expiry2?: string | null;
-  hiv_test3?: number | string | null;
+  hiv_test3?: string | null;
   kit3_name?: string | null;
   lot3?: string | null;
   expiry3?: string | null;
+  /** Positive, Negative or Inconclusive */
   final_result?: string | null;
+  /** Yes, No or NA */
   discordant_couple?: string | null;
-  referral_services?: number | string | null;
+  /** PrEP, PEP, VMMC, PMTCT, as a list, or NA */
+  referral_services?: string | null;
   client_tested_as?: string | null;
   referral_to?: string | null;
   residence?: string | null;
@@ -58,24 +65,7 @@ export const clientName = (row: Moh362Row) =>
   row.full_name || [row.first_name, row.middle_name, row.last_name].filter(Boolean).join(' ');
 
 /** Tested positive and linked to care: started on ART */
-export const isLinked = (row: Moh362Row) => row.final_result === 'P' && Boolean(row.art_start_date);
-
-/** An HIV test result (the concept the ETL returns) as the form's code: N, P, I */
-export const testResult = (value: unknown) => {
-  switch (String(value ?? '')) {
-    case '664':
-      return 'N';
-    case '703':
-      return 'P';
-    case '1138':
-      return 'I';
-    default:
-      return text(value);
-  }
-};
-
-/** The final result as the form's code: N, P, Ic (inconclusive), NA */
-export const finalResult = (value: unknown) => (String(value ?? '') === 'I' ? 'Ic' : text(value));
+export const isLinked = (row: Moh362Row) => row.final_result === 'Positive' && Boolean(row.art_start_date);
 
 export const ageOf = (row: Moh362Row) => {
   const age = Number(row.age);