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

package/src/reports/acf-summary/acf-summary-form.component.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { usePageScale } from '../../common/report-page';
+import { COUNTED_DEPARTMENT } from './acf-summary.counts';
+import styles from './acf-summary.scss';
+
+/** A4 landscape less its 8mm margins: the page as drawn on screen, inside the report card */
+const PAGE_WIDTH_MM = 297 - 2 * 8;
+
+/** The form's measuring unit (row heights below) in millimetres */
+const MM_PER_UNIT = 0.227;
+const height = (units: number): React.CSSProperties => ({ height: `${units * MM_PER_UNIT}mm` });
+
+/** The departments across the top, then Total; widths measured off the form */
+const DEPARTMENTS: Array<[string, number]> = [
+  ['OPD', 44],
+  ['TB / Chest Clinic', 48],
+  ['Maternity', 68],
+  ['Medical ward', 73],
+  ['Surgical ward', 77],
+  ['Pediatric Ward', 82],
+  ['CCC', 45],
+  ['Radiology', 71],
+  ['HTS', 42],
+  ['Nutrition', 65],
+  ['Diabtes', 67],
+  ['Eye Clinic', 49],
+  ['ENT clinic', 54],
+  ['Dental clinic', 65],
+  ['Laboratory', 82],
+  ['Other departments', 89],
+  ['Total', 49],
+];
+const LABEL_WIDTH = 138;
+const TOTAL_WIDTH = DEPARTMENTS.reduce((sum, [, width]) => sum + width, LABEL_WIDTH);
+const percent = (width: number) => `${(width / TOTAL_WIDTH) * 100}%`;
+
+/** The indicators down the side, each with its row height as printed */
+const INDICATORS: Array<[string, number]> = [
+  ['1. Workload', 25],
+  ['2. Number of people screened for TB', 48],
+  ['3. Number of people with respiratory conditions', 58],
+  ['4. Number of presumptive TB cases investigated for TB disease', 69],
+  ['5. Number of presumptive TB cases diagnosed with TB', 73],
+  ['6. Number of presumptive cases Bact.confirmed with TB', 84],
+  ['7. Number of presumptive cases diagnosed with TB clinically', 85],
+  ['8. Number of diagnosed TB cases initiated on treatment', 73],
+];
+
+/** A count on the form, opening the linelist of its cases when clicked; blank where there is none */
+const Count: React.FC<{ value?: number; onOpen?: () => void }> = ({ value, onOpen }) =>
+  value === undefined || !onOpen ? (
+    <td className={styles.count} />
+  ) : (
+    <td
+      className={`${styles.count} ${styles.clickable}`}
+      title="Click to open linelist"
+      role="button"
+      tabIndex={0}
+      onClick={onOpen}
+      onKeyDown={(event) => (event.key === 'Enter' || event.key === ' ') && onOpen()}
+    >
+      {value}
+    </td>
+  );
+
+/** A label and the ruled line it is written on */
+const Field: React.FC<{ label: string; value?: string; wide?: boolean }> = ({ label, value, wide }) => (
+  <span className={styles.field}>
+    {label}:<span className={wide ? styles.wideLine : styles.line}>{value}</span>
+  </span>
+);
+
+interface AcfSummaryFormProps {
+  facility: string;
+  /** Any date in the reporting month */
+  month: string;
+  /** The counts by indicator number, for the TB / Chest Clinic and the Total;
+      an indicator without one is left blank */
+  counts?: Record<number, number>;
+  /** Opens the linelist of an indicator's cases */
+  onOpen?: (indicator: number) => void;
+}
+
+/**
+ * Summary Tool for Facility-Based Active Case Finding (MOH/F/DNTLDP/02,
+ * February 2023): page 2 of the tool as one A4 landscape sheet -- the eight ACF
+ * indicators by department, with a Total column.
+ *
+ * Indicators 4 to 8 are counted from the Presumptive TB Register's cases (its
+ * TB assessment encounters), under the TB / Chest Clinic and so the Total;
+ * workload (1, from MOH 717), screened (2) and respiratory conditions (3) and
+ * the other departments are blank until their queries are added.
+ */
+const AcfSummaryForm: React.FC<AcfSummaryFormProps> = ({ facility, month, counts = {}, onOpen }) => {
+  const { ref, scale } = usePageScale<HTMLDivElement>(PAGE_WIDTH_MM);
+  const date = month ? dayjs(month) : undefined;
+
+  return (
+    <div className={styles.viewport} ref={ref}>
+      <section className={styles.page} data-register-page style={{ '--page-zoom': scale } as React.CSSProperties}>
+        <h2 className={styles.title}>Summary Tool for Facility-Based Active Case Finding</h2>
+
+        <div className={styles.fields}>
+          <Field label="County" />
+          <Field label="Sub County" />
+          <Field label="Health Facility" value={facility} wide />
+        </div>
+        <div className={styles.fields}>
+          <Field label="Month" value={date?.format('MMMM')} />
+          <Field label="Year" value={date?.format('YYYY')} />
+        </div>
+
+        <table className={styles.grid}>
+          <colgroup>
+            <col style={{ width: percent(LABEL_WIDTH) }} />
+            {DEPARTMENTS.map(([name, width]) => (
+              <col key={name} style={{ width: percent(width) }} />
+            ))}
+          </colgroup>
+          <thead>
+            <tr style={height(50)}>
+              <th />
+              {DEPARTMENTS.map(([name]) => (
+                <th key={name}>{name}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {INDICATORS.map(([indicator, rowHeight], index) => (
+              <tr key={indicator} style={height(rowHeight)}>
+                <th scope="row">{indicator}</th>
+                {DEPARTMENTS.map(([name]) => (
+                  <Count
+                    key={name}
+                    value={name === COUNTED_DEPARTMENT || name === 'Total' ? counts[index + 1] : undefined}
+                    onOpen={onOpen && (() => onOpen(index + 1))}
+                  />
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <div className={styles.signOff}>
+          <span>
+            Prepared by
+            <span className={styles.dots} />
+          </span>
+          <span>
+            Signature
+            <span className={styles.dots} />
+          </span>
+          <span>
+            Date
+            <span className={styles.dots} />
+          </span>
+        </div>
+
+        <div className={styles.instructions}>
+          <strong>Instructions</strong>:
+          <ol>
+            <li>
+              Workload- Information to be obtained from MOH 717
+              <br />
+              Summarize indicators 2-6 from departmental ACF summary tools
+            </li>
+          </ol>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AcfSummaryForm;

package/src/reports/acf-summary/acf-summary-linelist.component.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { type LinelistColumn, LinelistTable, useAllRows } from '../../common/linelist-table';
+import { RegisterLayout, useLocationName } from '../../common/report-register';
+import { getPresumptiveTb } from '../../resources/presumptive-tb.resource';
+import { ACF_INDICATORS, type AcfCase } from './acf-summary.counts';
+
+const formatDate = (value: unknown) => (value ? new Date(String(value)).toLocaleDateString('en-GB') : '');
+
+const COLUMNS: LinelistColumn[] = [
+  { header: 'Name', field: 'full_name' },
+  { header: 'CCC Number', field: 'department_number', text: true },
+  { header: 'Date', value: (row) => formatDate(row.date), sortValue: (row) => row.date },
+  { header: 'Sex', field: 'sex' },
+  { header: 'Age', field: 'age' },
+  { header: 'National ID', field: 'national_id', text: true },
+  { header: 'CR Number', field: 'cr_number', text: true },
+  { header: 'Referred By', field: 'referred_by' },
+  { header: 'HIV Result', field: 'hiv_result' },
+  { header: 'Chest X-ray', field: 'xray_result' },
+  { header: 'Microscopy', field: 'microscopy_result' },
+  { header: 'Culture', field: 'molecular_result', wrap: true },
+  { header: 'Outcome', field: 'outcome' },
+  { header: 'Started Anti-TB', field: 'started_tb_treatment' },
+  { header: 'TB Treatment Start', field: 'tb_registration' },
+  /* Available from the Columns menu */
+  { header: 'Phone Number', field: 'phone_number', text: true, hidden: true },
+  { header: 'Physical Address', field: 'physical_address', wrap: true, hidden: true },
+];
+
+/**
+ * The cases behind a count on the ACF Facility Summary Tool: the Presumptive TB
+ * Register's cases for the period (the same rows the form is counted from),
+ * narrowed to the indicator's rule.
+ */
+const AcfSummaryLinelist: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const startDate = searchParams.get('startDate') ?? '';
+  const endDate = searchParams.get('endDate') ?? '';
+  const locationUuids = searchParams.get('locationUuids') ?? '';
+  const number = Number(searchParams.get('indicator'));
+  const indicator = ACF_INDICATORS[number];
+  const heading = indicator ? `${number}. ${indicator.label} linelist` : 'ACF linelist';
+
+  const locationName = useLocationName(locationUuids);
+  /* the period's cases come back in one response; they are fetched once and
+     handed to the table in the batches it reads */
+  let cases: Promise<AcfCase[]> | undefined;
+  const { rows, isLoading } = useAllRows(
+    ({ startIndex, limit }) => {
+      cases ??= getPresumptiveTb({ locationUuids, startDate, endDate }).then((all) =>
+        (all as AcfCase[]).filter((row) => indicator?.counts(row)),
+      );
+      return cases.then((matching) => ({
+        results: matching.slice(startIndex, startIndex + limit),
+        total: matching.length,
+        isTotalExact: true,
+      }));
+    },
+    [searchParams.toString()],
+  );
+
+  return (
+    <RegisterLayout
+      parentLabel="ACF Facility Summary Tool"
+      parentPath="/acf-summary"
+      title="ACF Facility Summary · TB / Chest Clinic"
+      heading={heading}
+      location={locationName}
+      isLoading={isLoading}
+      isEmpty={rows.length === 0}
+    >
+      {/* the layout key changed when the IDs became visible, so a layout saved
+          while they were hidden does not hide them again */}
+      <LinelistTable
+        rows={rows}
+        columns={COLUMNS}
+        layoutKey="acf-summary:ids"
+        exportName={`ACF ${heading} ${endDate}`}
+      />
+    </RegisterLayout>
+  );
+};
+
+export default AcfSummaryLinelist;

package/src/reports/acf-summary/acf-summary.component.tsx

@@ -0,0 +1,97 @@
+import React, { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+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 { showReportError } from '../../common/report-error';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { registerFileName } from '../../registers/register-file-name';
+import { getPresumptiveTb } from '../../resources/presumptive-tb.resource';
+import { acfCounts, type AcfCase } from './acf-summary.counts';
+import AcfSummaryForm from './acf-summary-form.component';
+import styles from './acf-summary.scss';
+
+/**
+ * Summary Tool for Facility-Based Active Case Finding (MOH/F/DNTLDP/02),
+ * opened from the landing page's Reports tab, with the reports' filter bar.
+ *
+ * Indicators 4 to 8 are counted from the Presumptive TB Register's cases for
+ * the month (/presumptive-tb-register), so the two always agree.
+ */
+const AcfSummaryReport: React.FC = () => {
+  const [isGenerated, setIsGenerated] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [counts, setCounts] = useState<Record<number, number>>({});
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+
+  const navigate = useNavigate();
+  const session = useSession();
+  const locationUuids = session?.sessionLocation?.uuid ?? '';
+  const facility = session?.sessionLocation?.display ?? '';
+  /* Only a report for the current location counts */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('acfSummaryLocation');
+  const isReportGenerated = isGenerated && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setIsLoading(true);
+    setPeriod({ startDate, endDate });
+    try {
+      setCounts(acfCounts((await getPresumptiveTb({ locationUuids, startDate, endDate })) as AcfCase[]));
+      setIsGenerated(true);
+      markGenerated(locationUuids);
+    } catch (error) {
+      showReportError('the ACF Facility Summary Tool', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useRestorePeriod(generate);
+
+  /* Each count opens the register cases it counts */
+  const openLinelist = (indicator: number) => {
+    const params = new URLSearchParams({ ...period, locationUuids, indicator: String(indicator), from: 'acf-summary' });
+    navigate(`/acf-summary-linelist?${params}`);
+  };
+
+  /* Download PDF saves the form as one A4 landscape page, made from a copy, so
+     the page on screen is left as it is */
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const downloadPdf = async () => {
+    const pages = Array.from(sheetRef.current?.querySelectorAll<HTMLElement>('[data-register-page]') ?? []);
+    await downloadSheetsPdf(pages, registerFileName('ACF-Facility-Summary', facility, period), {
+      orientation: 'landscape',
+      stylesheetsOnly: true,
+    });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="ACF Facility Summary Tool"
+        mode="monthly"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isReportGenerated}
+        generatedPeriod={period}
+        onDownloadPdf={downloadPdf}
+      />
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder
+          reportName="ACF Facility Summary Tool"
+          isLocationChanged={isGenerated && hasLocationChanged}
+        />
+      )}
+      {!isLoading && isReportGenerated && (
+        <div className={styles.reportFrame} ref={sheetRef}>
+          <AcfSummaryForm facility={facility} month={period.startDate} counts={counts} onOpen={openLinelist} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AcfSummaryReport;

package/src/reports/acf-summary/acf-summary.counts.ts

@@ -0,0 +1,37 @@
+import {
+  isDiagnosed,
+  isInitiated,
+  isInvestigated,
+  type PresumptiveTbRow,
+} from '../../registers/presumptive-tb/presumptive-tb.types';
+
+/** A register row with the ETL's bacteriological confirmation flag */
+export type AcfCase = PresumptiveTbRow & { bact_confirmed?: number | string | null };
+
+/** The department the register's cases are counted under: its TB assessment encounters (331) */
+export const COUNTED_DEPARTMENT = 'TB / Chest Clinic';
+
+const isBactConfirmed = (row: AcfCase) => isDiagnosed(row) && Number(row.bact_confirmed) === 1;
+
+/**
+ * The ACF indicators counted from the Presumptive TB Register's rows, by the
+ * indicator's number on the form, each with the cases it counts. The ones the
+ * register cannot give (workload, screened, respiratory conditions) are absent
+ * and stay blank.
+ */
+export const ACF_INDICATORS: Record<number, { label: string; counts: (row: AcfCase) => boolean }> = {
+  4: { label: 'Presumptive TB cases investigated for TB disease', counts: isInvestigated },
+  5: { label: 'Presumptive TB cases diagnosed with TB', counts: isDiagnosed },
+  6: { label: 'Presumptive cases Bact. confirmed with TB', counts: isBactConfirmed },
+  7: {
+    label: 'Presumptive cases diagnosed with TB clinically',
+    counts: (row) => isDiagnosed(row) && !isBactConfirmed(row),
+  },
+  8: { label: 'Diagnosed TB cases initiated on treatment', counts: isInitiated },
+};
+
+export function acfCounts(rows: AcfCase[]): Record<number, number> {
+  return Object.fromEntries(
+    Object.entries(ACF_INDICATORS).map(([number, indicator]) => [number, rows.filter(indicator.counts).length]),
+  );
+}

package/src/reports/acf-summary/acf-summary.scss

@@ -0,0 +1,162 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The Summary Tool for Facility-Based Active Case Finding (MOH/F/DNTLDP/02) as
+   one A4 landscape sheet, drawn in the units the paper is measured in (mm, pt)
+   so it prints as one page: the title and header fields, the indicators by
+   department, and the sign-off with the instructions. Row heights come from
+   the form (acf-summary-form.component.tsx). */
+
+/* On screen a page is the printable area only, A4 landscape less its 8mm
+   margins: the card around it gives the margin, and `usePageScale` is told
+   this width. */
+$page-w: 297mm - 2 * 8mm;
+$page-h: 210mm - 2 * 8mm;
+
+$ink: #1a1a1a;
+$rule: 0.6pt solid #404040;
+
+/* The card the page sits 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;
+}
+
+/* Holds the fixed-width page without making the app scroll sideways */
+.viewport {
+  overflow-x: auto;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: $page-w;
+  height: $page-h;
+  margin: 0 auto;
+  padding: 4mm 3mm 0;
+  color: $ink;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 7pt;
+  line-height: 1.2;
+  background-color: #fff;
+  /* set by `usePageScale` from the measured container width, floored at 1 */
+  zoom: var(--page-zoom, 1);
+}
+
+.title {
+  margin: 0 0 5mm;
+  font-size: 13pt;
+  font-weight: 700;
+  text-align: center;
+}
+
+/* County, sub county and facility; then month and year */
+.fields {
+  display: flex;
+  gap: 10mm;
+  margin: 0 0 6mm 15mm;
+  font-size: 9pt;
+  font-weight: 700;
+}
+
+.field {
+  display: inline-flex;
+  align-items: flex-end;
+  white-space: nowrap;
+}
+
+.line,
+.wideLine {
+  display: inline-block;
+  min-height: 4mm;
+  margin-left: 1mm;
+  padding: 0 1mm;
+  font-weight: 400;
+  border-bottom: 1px dashed $ink;
+}
+
+.line {
+  width: 55mm;
+}
+
+.wideLine {
+  width: 65mm;
+}
+
+.grid {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0.6mm 0.8mm;
+    overflow: hidden;
+    border: $rule;
+  }
+
+  thead th {
+    font-size: 6pt;
+    font-weight: 700;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  tbody th {
+    font-size: 6pt;
+    font-weight: 700;
+    text-align: left;
+    vertical-align: top;
+  }
+}
+
+.count {
+  font-size: 8pt;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background-color: $brand-primary-10;
+    outline: 1px solid var(--brand-01);
+    outline-offset: -1px;
+  }
+}
+
+.signOff {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4mm;
+  font-size: 9pt;
+  font-weight: 700;
+}
+
+/* The dotted line a sign-off is written on */
+.dots {
+  display: inline-block;
+  width: 50mm;
+  margin-left: 0.5mm;
+  border-bottom: 1px dotted $ink;
+}
+
+.instructions {
+  margin-top: 1.5mm;
+  font-size: 7pt;
+
+  ol {
+    margin: 0.5mm 0 0 5mm;
+    padding: 0;
+    list-style: decimal;
+  }
+
+  li {
+    padding-left: 1mm;
+  }
+}

package/src/reports/datatable-wrapper/datatable-wrapper.component.tsx

@@ -1,54 +1,69 @@
-import { DataTable, type DataTableHeader, type DataTableRow, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
-import React from "react";
+import {
+  DataTable,
+  type DataTableHeader,
+  type DataTableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import React from 'react';
 
 interface DatatableWrapperProps {
-    rows: Omit<DataTableRow<any[]>, "cells">[];
-    headers: DataTableHeader[];
-    subHeaders?: string[];
+  rows: Omit<DataTableRow<any[]>, 'cells'>[];
+  headers: DataTableHeader[];
+  subHeaders?: string[];
+  /** Header keys whose cells wrap instead of stretching the row (`wrap: true` columns) */
+  wrapKeys?: readonly string[];
+  /** Applied to the table, so a register can use its own stylesheet */
+  className?: string;
 }
 
-const DatatableWrapper: React.FC<DatatableWrapperProps> = ({ rows, headers, subHeaders = [] }) => {
-    return <DataTable rows={rows} headers={headers}>
-        {({
-            rows,
-            headers,
-            getTableProps,
-            getHeaderProps,
-            getRowProps,
-            getCellProps,
-        }) => (
-            <Table {...getTableProps()}>
-                <TableHead>
-                    <TableRow>
-                        {headers.map((header) => (
-                            <TableHeader {...getHeaderProps({ header })}>
-                                {header.header}
-                            </TableHeader>
-                        ))}
-                    </TableRow>
-                    {
-                        (subHeaders && subHeaders.length) &&
-                        <TableRow>
-                            {subHeaders.map((head, i) => (
-                                <TableHeader key={i}>
-                                    {head}
-                                </TableHeader>
-                            ))}
-                        </TableRow>
-                    }
-                </TableHead>
-                <TableBody>
-                    {rows.map((row) => (
-                        <TableRow {...getRowProps({ row })}>
-                            {row.cells.map((cell) => (
-                                <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        )}
+const DatatableWrapper: React.FC<DatatableWrapperProps> = ({
+  rows,
+  headers,
+  subHeaders = [],
+  wrapKeys = [],
+  className,
+}) => {
+  return (
+    <DataTable rows={rows} headers={headers}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+        <Table {...getTableProps()} className={className}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+            {subHeaders && subHeaders.length && (
+              <TableRow>
+                {subHeaders.map((head, i) => (
+                  <TableHeader key={i}>{head}</TableHeader>
+                ))}
+              </TableRow>
+            )}
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell, i) => (
+                  <TableCell
+                    {...getCellProps({ cell })}
+                    className={wrapKeys.includes(headers[i]?.key) ? 'wrapCell' : undefined}
+                  >
+                    {cell.value}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </DataTable>
-}
+  );
+};
 
-export default DatatableWrapper;
+export default DatatableWrapper;