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

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

@@ -0,0 +1,412 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* MOH 362: HTS LAB REGISTER as A4 landscape pages, drawn in the units the paper
+   is measured in (mm, pt) so a page is one sheet: the ruled client rows and the
+   summary blocks inside one frame, as on page 5 of the form. Heights are fixed
+   so a page never spills over: 23 clients on a full page, and 15 clients with
+   the summary on the last. The referral and linkage register draws its pages
+   with these same page, frame and cell styles. */
+
+/* On screen a page is the printable area only, A4 landscape less its 8mm
+   margins: the card around it (`.reportFrame`) gives the margin, as MOH 731's
+   does, and `usePageScale` is told this width. */
+$page-w: 297mm - 2 * 8mm;
+$page-h: 210mm - 2 * 8mm;
+
+$ink: #000;
+$rule: 0.6pt solid $ink;
+$thick: 1.4pt solid $ink;
+$dotted: 0.6pt dotted $ink;
+$shade: #d9d9d9; // the grey label cells of the summary blocks
+$lower-shade: #f2f2f2; // the lower half of columns (b) and (i)
+
+$heading-h: 38mm;
+$ids-h: 3.2mm;
+$line-h: 2.95mm; // half a client row: each client takes two lines
+
+/* The card the pages sit in, drawn like the filter card above it and like
+   MOH 731's report card (same margin, padding, rule and fill). It wraps
+   `.viewport` rather than styling it: the pages are scaled to the viewport's
+   width, so padding there would push them into a scrollbar. */
+.reportFrame {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+}
+
+/* Holds the fixed-width pages without making the app scroll sideways; the
+   pages are spaced apart as separate sheets */
+.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: 6pt;
+  line-height: 1.15;
+  background-color: #fff;
+  /* set by `usePageScale` from the measured container width, floored at 1 */
+  zoom: var(--page-zoom, 1);
+}
+
+.runningHead {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  font-size: 7.5pt;
+
+  span:nth-child(2) {
+    text-align: center;
+  }
+
+  span:last-child {
+    text-align: right;
+  }
+}
+
+.title {
+  margin: 1mm 0 0.6mm;
+  font-size: 8pt;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+}
+
+/* The ruled sheet: register, summary and sign-off in one border. A full page's
+   frame ends with its last row; the last page's runs down to the foot. */
+.frame {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: $rule;
+  border-top: none;
+}
+
+.lastFrame {
+  flex: 1;
+}
+
+.register {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0 0.5mm;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    border: $rule;
+  }
+
+  /* the frame draws the outer edge */
+  tr > :first-child {
+    border-left: none;
+  }
+
+  tr > :last-child {
+    border-right: none;
+  }
+
+  th {
+    font-weight: 400;
+    font-size: 5.5pt;
+  }
+}
+
+.headings th {
+  height: $heading-h;
+}
+
+/* (a), (b) ... under the headings, in a heavy rule as on the form */
+.columnIds th {
+  height: $ids-h;
+  font-size: 5.5pt;
+  border-top: $thick;
+  border-bottom: $thick;
+}
+
+.upperLine td,
+.lowerLine td {
+  height: $line-h;
+  white-space: nowrap;
+}
+
+.upperCell {
+  border-bottom: $dotted !important;
+}
+
+.lowerCell {
+  border-top: $dotted !important;
+  background-color: $lower-shade;
+}
+
+/* the final result in full: "Inconclusive" must fit the narrow column (n) */
+.finalResult {
+  padding: 0 0.3mm !important;
+  font-size: 5.5pt;
+}
+
+/* national ID over the Client Registry ID (CR + 13 digits + check digit) */
+.idCell {
+  padding: 0 0.3mm !important;
+  font-size: 5pt;
+  letter-spacing: -0.1pt;
+}
+
+.left {
+  text-align: left !important;
+}
+
+/* names and remarks may take both lines of the row, never more */
+.clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.codeList {
+  text-align: left !important;
+  font-size: 5pt !important;
+}
+
+/* Headings ruled inside: each stack fills the heading's height */
+
+.splitStack,
+.headerStack,
+.codedStack,
+.referralStack {
+  display: flex;
+  flex-direction: column;
+  height: $heading-h;
+}
+
+.splitHeader,
+.testHeader {
+  padding: 0 !important;
+}
+
+.splitStack span {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5mm;
+}
+
+.splitStack span:first-child {
+  border-bottom: $rule;
+}
+
+.headerStack {
+  text-align: left;
+
+  span {
+    padding: 0.3mm 0.5mm;
+    border-bottom: $rule;
+  }
+
+  /* the kit, lot and expiry used on this page, written in */
+  em {
+    display: block;
+    overflow: hidden;
+    font-style: normal;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .testName {
+    flex: 1.3;
+  }
+
+  .kit {
+    flex: 1.6;
+  }
+
+  span:nth-child(3),
+  span:nth-child(4) {
+    flex: 1.1;
+  }
+
+  .codes {
+    flex: 0.7;
+    text-align: center;
+    border-bottom: none;
+  }
+}
+
+/* A client's HIV test: the result in full, then the kit, lot and expiry used,
+   wrapped to the column's width in small type. The box is a fixed height
+   within the client's two lines, so the wrapped text never stretches the row
+   and its split cells keep their proportions (the full line is also the cell's
+   tooltip). */
+.testCell {
+  padding: 0 0.4mm !important;
+  text-align: left !important;
+  vertical-align: top !important;
+  white-space: normal !important;
+}
+
+.testBox {
+  /* 2px short of the client's two lines, so the ruled row heights alone set
+     the layout: a box of the full height plus the cell's borders made each row
+     a fraction taller, and drawn for the PDF, where borders round to whole
+     pixels, the rows drifted until the last ran past the foot of the frame */
+  height: calc(2 * #{$line-h} - 2px);
+  overflow: hidden;
+  line-height: 1;
+
+  strong {
+    display: block;
+    font-size: 5pt;
+    font-weight: 700;
+  }
+}
+
+.testDetail {
+  display: block;
+  font-size: 3.6pt;
+  /* three lines of it fit under the result within the box */
+  line-height: 0.92;
+  overflow-wrap: anywhere;
+}
+
+.codedStack {
+  justify-content: center;
+
+  span:first-child {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: $dotted;
+  }
+
+  .codes {
+    flex: 0 0 5.5mm;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.referralStack {
+  justify-content: space-evenly;
+}
+
+/* Summary blocks at the foot of the page, laid out as on the form */
+
+.summary {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 2mm 3mm 0 7mm;
+  font-weight: 700;
+}
+
+.summaryColumn {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.summaryTable {
+  border-collapse: collapse;
+
+  th,
+  td {
+    height: 4.2mm;
+    padding: 0 1mm;
+    font-size: 7pt;
+    text-align: center;
+    white-space: nowrap;
+    border: $rule;
+  }
+
+  td {
+    min-width: 8mm;
+    font-weight: 400;
+  }
+
+  thead th {
+    background-color: $shade;
+  }
+}
+
+.titleCell {
+  text-align: left !important;
+  font-size: 7.5pt !important;
+}
+
+.rowLabel {
+  text-align: right !important;
+}
+
+.summaryTable tbody .rowLabel {
+  background-color: transparent;
+}
+
+/* the HIV test block shades its labels, as on the form */
+.summaryColumn:last-child .rowLabel {
+  background-color: $shade;
+}
+
+.figureLabel {
+  min-width: 25mm;
+  text-align: right !important;
+  background-color: $shade;
+}
+
+.figure {
+  min-width: 13mm !important;
+}
+
+.figureBox {
+  th {
+    min-width: 22mm;
+  }
+
+  td {
+    height: 8.6mm;
+    font-size: 8pt;
+  }
+}
+
+.signOff {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20mm;
+  padding: 1mm 12mm 1.2mm 0;
+  font-size: 6.5pt;
+}
+
+.rule {
+  display: inline-block;
+  width: 32mm;
+  border-bottom: $rule;
+}
+
+.pageFoot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 1.5mm;
+  font-size: 7.5pt;
+}

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

@@ -0,0 +1,215 @@
+import React from 'react';
+
+import { usePageScale } from '../../common/report-page';
+import { clientName, formDate, text, type Moh362Row } from './moh-362.types';
+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>
+    </>
+  );
+};
+
+/**
+ * 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 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>
+
+    <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)
+              </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={3} className={styles.totalLabel}>
+                Totals Clients Linked
+              </th>
+              <td colSpan={6} className={styles.totalFill} />
+              <td className={styles.totalFigure}>{totalLinked}</td>
+            </tr>
+          )}
+        </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>
+  );
+};
+
+export default Moh362LinkageRegister;

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;
+}