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

package/src/registers/moh-267/moh-267-register.scss

@@ -0,0 +1,298 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* MOH 267 PrEP Daily Activity Register (Ver. July 2023) as A4 landscape pages,
+   drawn in the units the paper is measured in (mm, pt) so a page is one sheet,
+   as on page 3 of the form: the ruled visits, the page and month totals, and
+   on the last page the summary tables, all inside one frame. Heights are fixed
+   so a page never spills over: 22 visits on a full page, 15 with the summary
+   on the last. */
+
+/* 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: #000;
+$rule: 0.6pt solid $ink;
+$thick: 1.4pt solid $ink;
+$dotted: 0.6pt dotted $ink;
+$shade: #e8e8e8; // the lower half of (c), and cells that do not apply
+
+$heading-h: 23.8mm;
+$ids-h: 3.4mm;
+$line-h: 3.35mm; // half a visit's row: each visit takes two lines
+$total-h: 4mm;
+
+/* 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;
+}
+
+/* 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);
+}
+
+.runningHead {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  margin-bottom: 1.6mm;
+  font-size: 9.5pt;
+  font-weight: 700;
+
+  span:last-child {
+    text-align: right;
+  }
+}
+
+/* The ruled sheet: visits, totals and summary in one heavy border. A full
+   page's frame ends with its totals; the last page's runs down to the foot. */
+.frame {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: $thick;
+}
+
+.lastFrame {
+  flex: 1;
+}
+
+.register {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0 0.6mm;
+    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;
+  }
+
+  thead tr:first-child > * {
+    border-top: none;
+  }
+}
+
+.headings th {
+  height: $heading-h;
+  font-size: 7.5pt;
+  font-weight: 700;
+}
+
+/* code lists in the headings, in regular type and set left */
+.codeHeading {
+  font-size: 6.5pt !important;
+  font-weight: 400 !important;
+  text-align: left !important;
+  vertical-align: middle;
+
+  strong {
+    font-size: 7pt;
+  }
+}
+
+.codes {
+  font-weight: 400;
+}
+
+/* (a), (b) … under the headings, in a heavy rule as on the form */
+.columnIds th {
+  height: $ids-h;
+  font-size: 7pt;
+  font-weight: 400;
+  border-top: $thick;
+  border-bottom: $thick;
+}
+
+/* A heading holding two labels: upper cell over lower cell */
+.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 1mm;
+  }
+
+  span:first-child {
+    border-bottom: $rule;
+  }
+}
+
+.upperLine td,
+.lowerLine td {
+  height: $line-h;
+  white-space: nowrap;
+}
+
+/* the two halves of (c): national ID over NUPI */
+.upperCell {
+  border-bottom: $dotted !important;
+}
+
+.lowerCell {
+  border-top: $dotted !important;
+  background-color: $shade;
+}
+
+.left {
+  text-align: left !important;
+}
+
+/* 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;
+}
+
+.totalRow th,
+.totalRow td {
+  height: $total-h;
+  font-weight: 700;
+}
+
+/* Summary tables at the foot of the last page, spaced across the sheet as on the form */
+
+.summary {
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 3mm 1.5mm 0;
+}
+
+.summaryTable {
+  border-collapse: collapse;
+  font-size: 5.5pt;
+  line-height: 1.1;
+
+  th,
+  td {
+    height: 3.8mm;
+    padding: 0 0.5mm;
+    text-align: center;
+    border: $rule;
+  }
+
+  th {
+    font-weight: 700;
+  }
+
+  td {
+    width: 5.1mm;
+  }
+}
+
+.ageTable {
+  width: 66mm;
+}
+
+.rowLabel {
+  width: 15mm;
+  text-align: left !important;
+}
+
+.notApplicable {
+  background-color: $shade;
+}
+
+.methodColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 3mm;
+}
+
+.methodTable {
+  width: 69mm;
+
+  td {
+    width: auto;
+  }
+
+  .rowLabel {
+    width: 22.5mm;
+    height: 5.8mm;
+    font-weight: 400;
+  }
+
+  thead th:not(:first-child) {
+    font-size: 5.5pt;
+    text-align: left;
+  }
+}
+
+.seroconverting {
+  width: 30mm;
+
+  th {
+    width: 22.5mm;
+    height: 5.5mm;
+    text-align: left;
+  }
+
+  td {
+    width: 7.5mm;
+  }
+}
+
+.pageFoot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 1.2mm;
+  font-size: 8pt;
+  font-weight: 700;
+
+  span:first-child {
+    font-weight: 400;
+  }
+}

package/src/registers/moh-267/moh-267-summary.ts

@@ -0,0 +1,102 @@
+import dayjs from 'dayjs';
+
+import { type Moh267Row } from './moh-267.types';
+
+/**
+ * The figures in MOH 267's summary tables, counted from the register's visits
+ * by MOH 731's PrEP rules (the visits and their flags come from the MOH 731
+ * PrEP visits base):
+ *
+ * - Number initiated (New) on PrEP (g): visits flagged new (MOH 731 1.3).
+ * - Number Current on PrEP (New + Refill + Restart): clients whose latest
+ *   visit in the period is New, Continuing or Restart.
+ * - Number diagnosed with STI (j): visits with an STI (MOH 731 1.4).
+ * - Number Seroconverting while on PrEP (i): MOH 731 1.5.
+ */
+
+export const AGE_BANDS: Array<{ label: string; min: number; max?: number }> = [
+  { label: '10 - 14 Yrs', min: 10, max: 14 },
+  { label: '15 - 19 Yrs', min: 15, max: 19 },
+  { label: '20 - 24 Yrs', min: 20, max: 24 },
+  { label: '25 - 29 Yrs', min: 25, max: 29 },
+  { label: '≥ 30 Yrs', min: 30 },
+];
+
+/** The populations of the age-by-sex tables, by the register's population type */
+export const POPULATIONS = ['General Population', 'MSM/MSW', 'FSW', 'PWID/PWUD', 'Discordant Couple', 'VP'] as const;
+
+export type Population = (typeof POPULATIONS)[number];
+export type Sex = 'M' | 'F';
+
+/** The PrEP methods across the method table, then its Total of every method */
+export const METHODS = [
+  'Event driven oral PrEP',
+  'Daily oral PrEP',
+  'Dapivirine Vaginal ring',
+  'Cabotegravir Injectable',
+] as const;
+
+const inBand = (row: Moh267Row, band: { min: number; max?: number }) => {
+  const age = Number(row.age);
+  return row.age !== null && row.age !== undefined && row.age !== '' && Number.isFinite(age)
+    ? age >= band.min && (band.max === undefined || age <= band.max)
+    : false;
+};
+
+/** Each client's latest visit in the period */
+const latestPerClient = (rows: Moh267Row[]) => {
+  const latest = new Map<unknown, Moh267Row>();
+  rows.forEach((row) => latest.set(row.patient_id ?? row, row)); // rows come oldest first
+  return Array.from(latest.values());
+};
+
+/** One age-by-sex table: the count for a population, age band and sex */
+export type AgeSexCounts = (population: Population | 'TOTAL', bandIndex: number, sex: Sex) => number;
+
+const ageSexCounts =
+  (rows: Moh267Row[]): AgeSexCounts =>
+  (population, bandIndex, sex) =>
+    rows.filter(
+      (row) =>
+        (population === 'TOTAL' || row.population_type === population) &&
+        row.sex === sex &&
+        inBand(row, AGE_BANDS[bandIndex]),
+    ).length;
+
+const isCurrent = (row: Moh267Row) => ['New', 'Continuing', 'Restart'].includes(row.prep_status ?? '');
+
+export function moh267Summary(rows: Moh267Row[], endDate: string) {
+  const latest = latestPerClient(rows);
+  const newVisits = rows.filter((row) => Number(row.is_new) === 1);
+  const threeMonthsBefore = dayjs(endDate).subtract(3, 'month');
+
+  /* clients on each method, for the method table: by their latest visit */
+  const byMethod = (clients: Moh267Row[]) => (method: (typeof METHODS)[number] | 'Total') =>
+    clients.filter((row) => method === 'Total' || row.prep_method === method).length;
+
+  return {
+    initiated: ageSexCounts(newVisits),
+    current: ageSexCounts(latest.filter(isCurrent)),
+    sti: ageSexCounts(rows.filter((row) => row.sti_diagnosed === 'Yes')),
+    methods: [
+      { label: 'Number initiated (New) on PrEP', count: byMethod(newVisits) },
+      {
+        label: 'Number continuing / currently on (Refills) PrEP',
+        count: byMethod(latest.filter((row) => row.prep_status === 'Continuing')),
+      },
+      { label: 'Number Restarting PrEP', count: byMethod(latest.filter((row) => row.prep_status === 'Restart')) },
+      {
+        label: 'Number on PrEP for at-least 3 months',
+        count: byMethod(
+          latest.filter(
+            (row) =>
+              isCurrent(row) && row.prep_start_date && !dayjs(row.prep_start_date).isAfter(threeMonthsBefore, 'day'),
+          ),
+        ),
+      },
+    ],
+    seroconverted: rows.filter((row) => Number(row.is_seroconverted) === 1).length,
+  };
+}
+
+export type Moh267Summary = ReturnType<typeof moh267Summary>;

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

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react';
+import dayjs from 'dayjs';
+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 { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { getMoh267 } from '../../resources/moh-267.resource';
+import { registerFileName } from '../register-file-name';
+import Moh267Register from './moh-267-register.component';
+import { type Moh267Row } from './moh-267.types';
+import styles from './moh-267-register.scss';
+
+/**
+ * MOH 267 PrEP Daily Activity Register, opened from the landing page's
+ * Registers tab, with the reports' filter bar. Its visits are MOH 731's PrEP
+ * visits (1.3 to 1.5), so the register and the report agree.
+ */
+const Moh267RegisterPage: React.FC = () => {
+  const [rows, setRows] = useState<Moh267Row[] | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  /* TOTAL this Month: the visits in the calendar month of the period's end,
+     whatever range the register itself covers */
+  const [monthVisits, setMonthVisits] = useState(0);
+  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('moh267Location');
+  const isGenerated = rows !== null && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setIsLoading(true);
+    setPeriod({ startDate, endDate });
+    try {
+      const monthStart = dayjs(endDate).startOf('month').format('YYYY-MM-DD');
+      const monthEnd = dayjs(endDate).endOf('month').format('YYYY-MM-DD');
+      const isWholeMonth = startDate === monthStart && endDate === monthEnd;
+      const [visits, month] = await Promise.all([
+        getMoh267({ locationUuids, startDate, endDate }),
+        isWholeMonth ? null : getMoh267({ locationUuids, startDate: monthStart, endDate: monthEnd }),
+      ]);
+      setRows(visits);
+      setMonthVisits((month ?? visits).length);
+      markGenerated(locationUuids);
+    } catch (error) {
+      showReportError('the MOH 267 register', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useRestorePeriod(generate);
+
+  /* Download PDF saves every page as an A4 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('MOH-267', session?.sessionLocation?.display ?? '', period);
+    /* styled by its own stylesheets in Arial only, and may run to many pages */
+    await downloadSheetsPdf(pages, name, { orientation: 'landscape', stylesheetsOnly: true, image: 'jpeg' });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="MOH 267 PrEP Daily Activity 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="MOH 267 register" isLocationChanged={rows !== null && hasLocationChanged} />
+      )}
+      {!isLoading && isGenerated && (
+        <div className={styles.reportFrame} ref={sheetsRef}>
+          <Moh267Register rows={rows} endDate={period.endDate} monthVisits={monthVisits} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Moh267RegisterPage;

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

@@ -0,0 +1,47 @@
+import dayjs from 'dayjs';
+
+/**
+ * One PrEP visit in the MOH 267 PrEP Daily Activity Register (Ver. July 2023),
+ * column by column as on the form, as the ETL returns it (/moh-267-register):
+ * the same visits as MOH 731 1.3 to 1.5, one per client per day, with the
+ * form's codes as words.
+ */
+export interface Moh267Row {
+  patient_id?: number;
+  /** (a) */
+  prep_number?: string | null;
+  /** (b) */
+  date_of_visit?: string | null;
+  /** (c) upper */
+  id_number?: string | null;
+  /** (c) lower */
+  nupi?: string | null;
+  /** (d) */
+  age?: number | string | null;
+  /** (e) M or F */
+  sex?: string | null;
+  /** (f) General Population, Discordant Couple, MSM/MSW, FSW, PWID/PWUD or VP */
+  population_type?: string | null;
+  /** (g) New, Continuing, Discontinued or Restart */
+  prep_status?: string | null;
+  /** (h) Daily oral PrEP, Event driven oral PrEP, Dapivirine Vaginal ring, Cabotegravir Injectable (or Lenacapavir) */
+  prep_method?: string | null;
+  /** (i) Negative, Positive, Inconclusive or NA */
+  hiv_result?: string | null;
+  /** (j) Yes or No */
+  sti_diagnosed?: string | null;
+  /** (k) */
+  remarks?: string | null;
+  /** the PrEP start date, for the clients on PrEP at least 3 months */
+  prep_start_date?: string | null;
+  /** MOH 731 1.3: an Initial visit that is not a transfer-in */
+  is_new?: number | null;
+  /** MOH 731 1.5: a Follow-up visit with a positive HIV test */
+  is_seroconverted?: number | 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') : '');