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

package/src/registers/presumptive-tb/presumptive-tb.component.tsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { useSession } from '@openmrs/esm-framework';
+
+import { ReportFiltersComponent, type ReportPeriod, useRestorePeriod } from '../../common/report-filters';
+import { downloadSheetsPdf } from '../../common/report-page';
+import { showReportError } from '../../common/report-error';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { getPresumptiveTb } from '../../resources/presumptive-tb.resource';
+import { registerFileName } from '../register-file-name';
+import { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
+import PresumptiveTbRegister from './presumptive-tb-register.component';
+import { type PresumptiveTbRow } from './presumptive-tb.types';
+import styles from './presumptive-tb-register.scss';
+
+/**
+ * Presumptive TB Register (MOH/REG/DNTLDP/02), opened from the landing page's
+ * Registers tab, with the reports' filter bar.
+ *
+ * The cases are the TB encounters (331) in the period, for the whole facility,
+ * already in the register's columns (/presumptive-tb-register).
+ */
+const PresumptiveTbRegisterPage: React.FC = () => {
+  const [rows, setRows] = useState<PresumptiveTbRow[] | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  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('presumptiveTbLocation');
+  const isGenerated = rows !== null && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setIsLoading(true);
+    setPeriod({ startDate, endDate });
+    try {
+      setRows((await getPresumptiveTb({ locationUuids, startDate, endDate })) as PresumptiveTbRow[]);
+      markGenerated(locationUuids);
+    } catch (error) {
+      showReportError('the Presumptive TB register', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useRestorePeriod(generate);
+
+  /* Download PDF saves every page of the register as an A3 landscape page,
+     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('Presumptive-TB-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',
+    });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="Presumptive TB Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="custom"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        onDownloadPdf={downloadPdf}
+      />
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isGenerated && (
+        <ReportPlaceholder
+          reportName="Presumptive TB Register"
+          isLocationChanged={rows !== null && hasLocationChanged}
+        />
+      )}
+      {!isLoading && isGenerated && (
+        <div className={styles.reportFrame} ref={sheetsRef}>
+          <PresumptiveTbRegister rows={rows} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PresumptiveTbRegisterPage;

package/src/registers/presumptive-tb/presumptive-tb.types.ts

@@ -0,0 +1,88 @@
+import dayjs from 'dayjs';
+
+/**
+ * One presumptive TB case in the register, column by column as on the form
+ * (MOH/REG/DNTLDP/02, February 2023). Where a column holds two lines, the
+ * upper and lower are separate fields.
+ *
+ * These are the columns the ETL returns (/presumptive-tb-register), one row
+ * per TB encounter in the period.
+ */
+export interface PresumptiveTbRow {
+  /** (A) cumulative from the start of each year */
+  serial_number?: number | string | null;
+  /** (B) patient department number, e.g. CCC or OPD number */
+  department_number?: string | null;
+  /** (C) date registered as a presumed TB/DR-TB case */
+  date?: string | null;
+  /** (D) first, middle and last names */
+  full_name?: string | null;
+  /** (E) M, F or other */
+  sex?: string | null;
+  /** (F) completed years, or months for a child under one, e.g. `35 Yrs` or `8 Mo` */
+  age?: string | number | null;
+  /** (G) upper: national ID (identifier type 5) */
+  national_id?: string | null;
+  /** (G) lower: Client Registry number (identifier type 55), in place of UPI */
+  cr_number?: string | null;
+  /** (H) upper: nearest landmark */
+  physical_address?: string | null;
+  /** (H) lower */
+  phone_number?: string | null;
+  /** (I) PS, SR, CI, CP, CHV or ISP */
+  referred_by?: string | null;
+  /** (J) upper: Positive, Negative or Not Done, in full */
+  hiv_result?: string | null;
+  /** (J) lower */
+  hiv_test_date?: string | null;
+  /** (K) type of sample (code) */
+  sample_type?: string | null;
+  /** (K) date the sputum sample was collected */
+  sample_date?: string | null;
+  /** (L) upper: N, SG, AO or ND */
+  xray_result?: string | null;
+  /** (L) lower */
+  xray_date?: string | null;
+  /** (M) upper: other radiological test(s) and result */
+  other_radiology_result?: string | null;
+  /** (M) lower */
+  other_radiology_date?: string | null;
+  /** (N) upper: molecular / culture test(s) and result, e.g. MTB + RS */
+  molecular_result?: string | null;
+  /** (N) lower */
+  molecular_date?: string | null;
+  /** (O) upper: microscopy / TB LAMP result */
+  microscopy_result?: string | null;
+  /** (O) lower */
+  microscopy_date?: string | null;
+  /** (P) DSTB, DRTB or No TB */
+  outcome?: string | null;
+  /** (Q) upper: Yes or No */
+  started_tb_treatment?: string | null;
+  /** (Q) lower: sub-county TB registration number & start date */
+  tb_registration?: string | null;
+  /** (R) upper: Yes or No */
+  tpt_started?: string | null;
+  /** (R) lower: TPT sub-county register number & start date */
+  tpt_registration?: string | null;
+  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') : '');
+
+/** Diagnosed with TB: drug-sensitive or drug-resistant */
+export const isDiagnosed = (row: PresumptiveTbRow) => ['DSTB', 'DRTB'].includes(text(row.outcome).toUpperCase());
+
+/** Investigated for TB: a sample collected or any investigation recorded */
+export const isInvestigated = (row: PresumptiveTbRow) =>
+  [row.sample_date, row.xray_result, row.other_radiology_result, row.molecular_result, row.microscopy_result].some(
+    (value) => text(value) !== '',
+  );
+
+/** A diagnosed case started on anti-TB treatment */
+export const isInitiated = (row: PresumptiveTbRow) =>
+  isDiagnosed(row) && /^y(es)?$/i.test(text(row.started_tb_treatment));

package/src/registers/register-catalog.ts

@@ -1,4 +1,4 @@
-import { Activity, Chemistry, Microscope } from '@carbon/react/icons';
+import { Activity, Chemistry, Medication, Microscope, Stethoscope, TaskView } from '@carbon/react/icons';
 
 import { type ReportCategory } from '../dashboard/report-catalog';
 
@@ -11,8 +11,8 @@ import { type ReportCategory } from '../dashboard/report-catalog';
 export const registerCategories: ReportCategory[] = [
   {
     id: 'hiv-testing',
-    title: 'HIV testing services',
-    description: 'HTS daily registers',
+    title: 'HIV Testing Services & Pre-Exposure Prophylaxis',
+    description: 'HTS and PrEP daily registers',
     tone: 'violet',
     reports: [
       {
@@ -23,6 +23,40 @@ export const registerCategories: ReportCategory[] = [
         icon: Microscope,
         keywords: ['hts', 'hiv testing', 'lab', 'referral', 'linkage', 'kits'],
       },
+      {
+        code: 'MOH 267',
+        name: 'PrEP daily activity',
+        description: 'PrEP visits: clients new, continuing or restarting, their PrEP method, HIV results and STIs.',
+        path: '/moh-267',
+        icon: Medication,
+        keywords: ['prep', 'pre-exposure', 'prophylaxis', 'daily activity', 'dar', 'sti'],
+      },
+    ],
+  },
+  {
+    id: 'tb',
+    title: 'Tuberculosis',
+    description: 'TB case finding registers',
+    tone: 'teal',
+    reports: [
+      {
+        code: 'MOH/REG/DNTLDP/02',
+        name: 'Presumptive TB',
+        description:
+          'Presumptive TB cases, their investigations and results, and whether started on TB treatment or TPT.',
+        path: '/presumptive-tb',
+        icon: Stethoscope,
+        keywords: ['tb', 'tuberculosis', 'presumptive', 'acf', 'case finding', 'sputum', 'genexpert', 'tpt'],
+      },
+      {
+        code: 'TB4',
+        name: 'Notification & treatment',
+        description:
+          'Drug-sensitive TB patients notified: diagnosis, investigations, treatment, follow-up and outcome.',
+        path: '/tb4',
+        icon: TaskView,
+        keywords: ['tb', 'tb4', 'tuberculosis', 'dstb', 'notification', 'treatment', 'outcome', 'smear', 'culture'],
+      },
     ],
   },
   {

package/src/registers/register-file-name.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+
+/**
+ * A register's PDF file name: its code, the facility and the period, e.g.
+ * `MOH-267_Kesses_2026-09.pdf` for a whole month, or
+ * `MOH-267_Kesses_2026-10-01_to_2026-10-28.pdf` for any other range.
+ */
+export function registerFileName(code: string, facility: string, period: { startDate: string; endDate: string }) {
+  const start = dayjs(period.startDate);
+  const end = dayjs(period.endDate);
+  const isWholeMonth = start.isSame(start.startOf('month'), 'day') && end.isSame(start.endOf('month'), 'day');
+  const range = isWholeMonth ? start.format('YYYY-MM') : `${start.format('YYYY-MM-DD')}_to_${end.format('YYYY-MM-DD')}`;
+  const name = [code, facility, period.startDate ? range : '']
+    .filter(Boolean)
+    .join('_')
+    .replace(/[^a-z0-9_-]+/gi, '-');
+  return `${name}.pdf`;
+}

package/src/registers/tb4/tb4-parts.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { type Tb4Nutrition, type Tb4Row, text } from './tb4.types';
+import styles from './tb4-register.scss';
+
+/** Patients ruled on each page, on both facing pages, as on the form */
+export const ROWS_PER_PAGE = 5;
+
+/** A3 landscape less its 8mm margins: the page as drawn on screen, inside the report card */
+export const PAGE_WIDTH_MM = 420 - 2 * 8;
+
+export const paginate = (rows: Tb4Row[]) => {
+  const pages: Tb4Row[][] = [];
+  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 box in a divided cell: a printed label filling it, a label in its corner, or an entry */
+export interface Box {
+  heading?: string;
+  tag?: string;
+  value?: React.ReactNode;
+  /** relative width beside the other boxes of its part (default 1) */
+  grow?: number;
+}
+
+/** A part of a divided cell: its share of the row's height and the boxes across it */
+export interface Part {
+  share: number;
+  boxes?: Box[];
+}
+
+/** A divided cell: parts stacked down the row, as printed */
+export const Stack: React.FC<{ parts: Part[] }> = ({ parts }) => (
+  <div className={styles.stack} style={{ gridTemplateRows: parts.map((part) => `${part.share}fr`).join(' ') }}>
+    {parts.map((part, index) => (
+      <div key={index} className={styles.part}>
+        {(part.boxes ?? [{}]).map((box, boxIndex) => (
+          <div key={boxIndex} className={styles.box} style={box.grow ? { flexGrow: box.grow } : undefined}>
+            {box.heading && <span className={styles.heading}>{box.heading}</span>}
+            {box.tag && <span className={styles.tag}>{box.tag}</span>}
+            {box.value !== undefined && <span className={styles.boxValue}>{box.value}</span>}
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+/** A whole cell's entry */
+export const Value: React.FC<{ children: React.ReactNode; left?: boolean; wrap?: boolean }> = ({
+  children,
+  left,
+  wrap,
+}) => (
+  <span className={[styles.value, left && styles.valueLeft, wrap && styles.wrap].filter(Boolean).join(' ')}>
+    {children}
+  </span>
+);
+
+/**
+ * Nutritional status, as printed in (K) and (AD): weight beside height, then
+ * BMI/Z score, then MUAC
+ */
+export const NutritionStack: React.FC<{ nutrition?: Tb4Nutrition | null }> = ({ nutrition }) => (
+  <Stack
+    parts={[
+      { share: 0.146, boxes: [{ tag: 'Weight' }, { tag: 'Height' }] },
+      { share: 0.295, boxes: [{ value: text(nutrition?.weight) }, { value: text(nutrition?.height) }] },
+      { share: 0.146, boxes: [{ tag: 'BMI/Z score', value: text(nutrition?.bmi) }] },
+      { share: 0.413, boxes: [{ tag: 'MUAC', value: text(nutrition?.muac) }] },
+    ]}
+  />
+);
+
+/**
+ * A key beneath the register: its heading across the top, then its rows. A row
+ * with fewer cells than the widest spans its last cell across the rest, and
+ * the rows listed in `subheadings` are set bold ("CT - Scan", "Comorbidities").
+ */
+export const KeyTable: React.FC<{
+  title: string;
+  rows: Array<Array<React.ReactNode>>;
+  widthMm: number;
+  subheadings?: number[];
+  leftTitle?: boolean;
+}> = ({ title, rows, widthMm, subheadings = [], leftTitle }) => {
+  const columns = Math.max(...rows.map((cells) => cells.length));
+  return (
+    <table
+      className={[styles.keyTable, leftTitle && styles.leftHeadingKey].filter(Boolean).join(' ')}
+      style={{ width: `${widthMm}mm` }}
+    >
+      <thead>
+        <tr>
+          <th colSpan={columns}>{title}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((cells, index) => (
+          <tr key={index} className={subheadings.includes(index) ? styles.keySubheading : undefined}>
+            {cells.map((cell, cellIndex) => (
+              <td
+                key={cellIndex}
+                colSpan={cells.length < columns && cellIndex === cells.length - 1 ? columns - cellIndex : 1}
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+/** Widths, measured off the form, as `<col>` percentages */
+export const Columns: React.FC<{ widths: number[] }> = ({ widths }) => {
+  const total = widths.reduce((sum, width) => sum + width, 0);
+  return (
+    <colgroup>
+      {widths.map((width, index) => (
+        <col key={index} style={{ width: `${(width / total) * 100}%` }} />
+      ))}
+    </colgroup>
+  );
+};
+
+/** A column heading: its letter in bold over the printed heading */
+export const Heading: React.FC<{
+  letter: string;
+  children?: React.ReactNode;
+  centre?: boolean;
+  rowSpan?: number;
+  colSpan?: number;
+}> = ({ letter, children, centre, rowSpan, colSpan }) => (
+  <th rowSpan={rowSpan} colSpan={colSpan} className={centre ? styles.centreHeading : undefined}>
+    <span className={styles.letter}>({letter})</span>
+    {children}
+  </th>
+);
+
+/** One A3 landscape page of the register: the ruled table, the keys beneath, and the page line */
+export const Tb4Page: React.FC<{
+  page: number;
+  pages: number;
+  side: string;
+  scale: number;
+  table: React.ReactNode;
+  keys: React.ReactNode;
+}> = ({ page, pages, side, scale, table, keys }) => (
+  <section className={styles.page} data-register-page style={{ '--page-zoom': scale } as React.CSSProperties}>
+    {table}
+    {keys}
+    <div className={styles.pageFoot}>
+      <span>
+        Page {page} of {pages} · {side}
+      </span>
+      <span>MOH/REG/DLTLDP/01 · February 2025</span>
+    </div>
+  </section>
+);