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

package/src/reports/moh-729b/moh-729b-summary.component.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle } from '@carbon/react';
+import { Download } from '@carbon/react/icons';
+
+import { columnsToCsv, downloadCsv } from '../../common/report-register';
+import {
+  columnCells,
+  MOH_729B_SUMMARY,
+  NOT_YET_COUNTED,
+  rowCells,
+  type SummarySection,
+  type SummaryTable,
+  tableCells,
+} from './moh-729b-summary.config';
+import { countedCode, type Moh729bCell } from './moh-729b.types';
+/* drawn exactly like the MOH 731 Summary */
+import styles from '../moh-731/summary/moh-731-summary.scss';
+
+interface Moh729bSummaryProps {
+  /** Clients in any of the counts */
+  count: (cells: Moh729bCell[]) => number;
+  /** Opens the linelist of the counts, under a heading */
+  openLinelist: (cells: Moh729bCell[], label: string) => void;
+  /** The section tab shown, by id */
+  sectionId: string;
+  onSectionChange: (sectionId: string) => void;
+  /** Used to name the export */
+  period: string;
+}
+
+const SHOW_CODES_KEY = 'ampath-moh729b-summary-show-codes';
+
+const readShowCodes = () => {
+  try {
+    return localStorage.getItem(SHOW_CODES_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+/** The form's code for a single count, e.g. `CF2G` or `PM12 · 2nd Line` */
+const codeOf = (cells: Moh729bCell[]) =>
+  cells.length === 1 && !cells[0].band ? countedCode(cells[0].code) : undefined;
+
+/**
+ * The MOH 729B report regrouped for reading, as the MOH 731 Summary: a tab per
+ * group of the form, each part as a compact table with a Total column and a
+ * Total row. Every number opens its linelist, and a total opens the clients of
+ * the counts it adds up.
+ */
+const Moh729bSummary: React.FC<Moh729bSummaryProps> = ({ count, openLinelist, sectionId, onSectionChange, period }) => {
+  const [showCodes, setShowCodes] = useState(readShowCodes);
+  const selectedIndex = Math.max(
+    0,
+    MOH_729B_SUMMARY.findIndex((section) => section.id === sectionId),
+  );
+
+  const toggleCodes = (checked: boolean) => {
+    setShowCodes(checked);
+    try {
+      localStorage.setItem(SHOW_CODES_KEY, String(checked));
+    } catch {
+      /* not remembered, still applied */
+    }
+  };
+
+  /** A count or total: its value, opening its linelist; the form's code on hover (or shown) */
+  const value = (cells: Moh729bCell[], label: string, options: { strong?: boolean; code?: boolean } = {}) => {
+    if (cells.length === 0) {
+      return <span className={styles.none}>–</span>;
+    }
+    const amount = count(cells);
+    const code = codeOf(cells);
+    return (
+      <button
+        type="button"
+        className={classNames(styles.value, { [styles.zero]: amount === 0, [styles.strong]: options.strong })}
+        onClick={() => openLinelist(cells, label)}
+        title={code ? `${code} · open the linelist` : `Open the ${label} linelist`}
+      >
+        {amount.toLocaleString()}
+        {showCodes && code && options.code !== false && <span className={styles.code}>{code}</span>}
+      </button>
+    );
+  };
+
+  const exportCsv = () => {
+    const lines: Array<Record<string, unknown>> = [];
+    MOH_729B_SUMMARY.forEach((section) =>
+      section.cards.forEach((card) =>
+        card.tables.forEach((table) => {
+          const part = [card.title, table.title].filter(Boolean).join(' · ');
+          table.rows.forEach((row) => {
+            row.cells.forEach((cells, index) => {
+              if (cells.length) {
+                lines.push({ section: section.tab, part, row: row.label, column: table.columns[index], cells });
+              }
+            });
+            lines.push({ section: section.tab, part, row: row.label, column: 'Total', cells: rowCells(row) });
+          });
+          if (table.totalLabel) {
+            lines.push({
+              section: section.tab,
+              part,
+              row: table.totalLabel,
+              column: 'Total',
+              cells: tableCells(table),
+            });
+          }
+        }),
+      ),
+    );
+    downloadCsv(
+      columnsToCsv(lines, [
+        { header: 'Section', value: (line) => line.section },
+        { header: 'Part', value: (line) => line.part },
+        { header: 'Row', value: (line) => line.row },
+        { header: 'Column', value: (line) => line.column },
+        { header: 'MOH 729B Code', value: (line) => codeOf(line.cells as Moh729bCell[]) ?? '', text: true },
+        { header: 'Value', value: (line) => count(line.cells as Moh729bCell[]) },
+      ]),
+      `moh-729b-summary-${period}.csv`.replace(/[^a-z0-9.-]+/gi, '-').toLowerCase(),
+    );
+  };
+
+  const renderTable = (table: SummaryTable, caption: string, key: number) => (
+    <div key={key} className={styles.tableScroll}>
+      {table.title && <p className={styles.tableTitle}>{table.title}</p>}
+      <table className={classNames(styles.table, { [styles.single]: table.columns.length === 0 })}>
+        <thead>
+          <tr>
+            <th scope="col" className={styles.labelCol} />
+            {table.columns.map((column) => (
+              <th scope="col" key={column}>
+                {column}
+              </th>
+            ))}
+            <th scope="col" className={styles.totalCol}>
+              {table.columns.length ? 'Total' : 'Number'}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {table.rows.map((row) => (
+            <tr key={row.label}>
+              <th scope="row" className={styles.labelCol}>
+                {row.label}
+              </th>
+              {table.columns.map((column, index) => (
+                <td key={column}>{value(row.cells[index] ?? [], `${caption} · ${row.label} · ${column}`)}</td>
+              ))}
+              <td className={styles.totalCol}>
+                {/* the code is beside the row's own counts already; only a count
+                    shown in the Total column alone carries it here */}
+                {value(rowCells(row), `${caption} · ${row.label}`, { code: table.columns.length === 0 })}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        {table.totalLabel && (
+          <tfoot>
+            <tr>
+              <th scope="row" className={styles.labelCol}>
+                {table.totalLabel}
+              </th>
+              {table.columns.map((column, index) => (
+                <td key={column}>
+                  {value(columnCells(table, index), `${caption} · ${table.totalLabel} · ${column}`, {
+                    strong: true,
+                    code: false,
+                  })}
+                </td>
+              ))}
+              <td className={styles.totalCol}>
+                {value(tableCells(table), `${caption} · ${table.totalLabel}`, { strong: true, code: false })}
+              </td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
+  );
+
+  const renderSection = (section: SummarySection) => (
+    <>
+      <div className={styles.strip}>
+        {section.headlines.map((headline) => (
+          <button
+            type="button"
+            key={headline.label}
+            className={styles.headline}
+            onClick={() => openLinelist(headline.cells, headline.label)}
+          >
+            <span className={styles.headlineLabel}>{headline.label}</span>
+            <span className={styles.headlineValue}>{count(headline.cells).toLocaleString()}</span>
+          </button>
+        ))}
+      </div>
+      <div className={styles.grid}>
+        {section.cards.map((card) => (
+          <div key={card.title} className={styles.card}>
+            <h5 className={styles.cardTitle}>{card.title}</h5>
+            {card.note && <p className={styles.note}>{card.note}</p>}
+            {card.tables.map((table, index) => renderTable(table, card.title, index))}
+          </div>
+        ))}
+        {section.id === 'ois' && (
+          <div className={styles.card}>
+            <h5 className={styles.cardTitle}>Not counted yet</h5>
+            <p className={styles.note}>{NOT_YET_COUNTED}</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+
+  return (
+    <div className={styles.summary}>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={({ selectedIndex: index }) => onSectionChange(MOH_729B_SUMMARY[index].id)}
+      >
+        <div className={styles.bar}>
+          <TabList aria-label="MOH 729B sections" className={styles.sectionTabs}>
+            {MOH_729B_SUMMARY.map((section) => (
+              <Tab key={section.id}>{section.tab}</Tab>
+            ))}
+          </TabList>
+          <div className={styles.tools}>
+            <Toggle
+              id="moh729b-summary-codes"
+              size="sm"
+              labelText="Show MOH codes"
+              hideLabel
+              labelA="MOH codes"
+              labelB="MOH codes"
+              toggled={showCodes}
+              onToggle={toggleCodes}
+            />
+            <Button kind="ghost" size="sm" renderIcon={Download} onClick={exportCsv}>
+              Export CSV
+            </Button>
+          </div>
+        </div>
+        <TabPanels>
+          {MOH_729B_SUMMARY.map((section) => (
+            <TabPanel key={section.id} className={styles.panel}>
+              {renderSection(section)}
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Moh729bSummary;

package/src/reports/moh-729b/moh-729b-summary.config.ts

@@ -0,0 +1,229 @@
+import { WEIGHT_BANDS } from './moh-729b.config';
+import { type Moh729bCell } from './moh-729b.types';
+
+/**
+ * The layout of the MOH 729B Summary tab: each section as a set of tables, each
+ * cell one or more counts of the form (a regimen code, narrowed to a weight
+ * band or line where the form splits it).
+ *
+ * The counts in a table never overlap -- a client has one regimen code, one
+ * weight band and one line -- so a Total column or row is the clients of its
+ * cells together, and opens their linelists as one.
+ */
+
+export interface SummaryRow {
+  label: string;
+  /** The counts in each column (Total excluded); empty where the form has no box */
+  cells: Moh729bCell[][];
+  /** What the row's Total counts, where that is not its cells together (a child
+      without a weight is in no band but still in the regimen's Total) */
+  total?: Moh729bCell[];
+}
+
+export interface SummaryTable {
+  title?: string;
+  /** Column headings, Total excluded; none for a single "Number" column */
+  columns: string[];
+  rows: SummaryRow[];
+  /** Label of the Total row; omitted for no Total row */
+  totalLabel?: string;
+}
+
+export interface SummaryCard {
+  /** As on the form, e.g. `Adult ART`; also the linelist caption */
+  title: string;
+  note?: string;
+  tables: SummaryTable[];
+}
+
+export interface SummarySection {
+  id: string;
+  tab: string;
+  /** Totals shown in the strip above the section */
+  headlines: Array<{ label: string; cells: Moh729bCell[] }>;
+  cards: SummaryCard[];
+}
+
+const LINES = ['1st Line', '2nd Line', '3rd Line'];
+
+/** A row of codes, one per column; null where the form has no such regimen */
+const byCode = (label: string, codes: Array<string | null>): SummaryRow => ({
+  label,
+  cells: codes.map((code) => (code ? [{ code }] : [])),
+});
+
+/** A single figure, for a table with one "Number" column */
+const single = (label: string, code: string): SummaryRow => ({ label, cells: [], total: [{ code }] });
+
+/** Every count in a table's rows */
+export const rowCells = (row: SummaryRow) => row.total ?? row.cells.flat();
+export const tableCells = (table: SummaryTable) => table.rows.flatMap(rowCells);
+export const columnCells = (table: SummaryTable, index: number) => table.rows.flatMap((row) => row.cells[index] ?? []);
+
+const ADULT_ART: SummaryTable = {
+  columns: LINES,
+  rows: [
+    byCode('TDF + 3TC + DTG', ['AF2E', 'AS2B', 'AT2G']),
+    byCode('TAF + 3TC + DTG', ['AS2G', null, null]),
+    byCode('TDF + 3TC + EFV', ['AF2B', null, null]),
+    byCode('AZT + 3TC + DTG', ['AF1D', 'AS1C', 'AT2H']),
+    byCode('ABC + 3TC + DTG', ['AF4C', 'AS5C', null]),
+    byCode('TDF + 3TC + ATV/r', ['AF2D', 'AS2C', null]),
+    byCode('TDF + 3TC + LPV/r', ['AF2F', 'AS2A', null]),
+    byCode('AZT + 3TC + LPV/r', ['AF1E', 'AS1A', null]),
+    byCode('AZT + 3TC + ATV/r', ['AF1F', 'AS1B', null]),
+    byCode('ABC + 3TC + LPV/r', [null, 'AS5A', null]),
+    byCode('ABC + 3TC + ATV/r', [null, 'AS5B', null]),
+    byCode('TDF + 3TC + DTG + DRV + RTV', [null, null, 'AT2D']),
+    byCode('TDF + 3TC + DTG + ETV + DRV + RTV', [null, null, 'AT2F']),
+    byCode('AZT + 3TC + DTG + DRV + RTV', [null, null, 'AT2I']),
+    byCode('Any other regimen', ['AF5X', 'AS6X', 'AT2X']),
+  ],
+  totalLabel: 'Total adults',
+};
+
+const PAEDIATRIC_LINES: Array<[string, string[]]> = [
+  ['1st Line', ['CF2G', 'CF1D', 'CF4E', 'CF5X']],
+  ['2nd Line', ['CS1A', 'CS1B', 'CS2A', 'CS2B', 'CS4X']],
+  ['3rd Line', ['CT1H', 'CT2D', 'CT3X']],
+];
+
+const PAEDIATRIC_ART: SummaryTable = {
+  columns: LINES,
+  rows: [
+    byCode('ABC + 3TC + DTG', ['CF2G', 'CS2B', null]),
+    byCode('AZT + 3TC + DTG', ['CF1D', 'CS1B', null]),
+    byCode('TDF + 3TC + DTG', ['CF4E', null, null]),
+    byCode('AZT + 3TC + LPV/r', [null, 'CS1A', null]),
+    byCode('ABC + 3TC + LPV/r', [null, 'CS2A', null]),
+    byCode('AZT + 3TC + DRV + RTV + RAL', [null, null, 'CT1H']),
+    byCode('ABC + 3TC + DRV + RTV + RAL', [null, null, 'CT2D']),
+    byCode('Any other regimen', ['CF5X', 'CS4X', 'CT3X']),
+  ],
+  totalLabel: 'Total children',
+};
+
+const PAEDIATRIC_WEIGHT: SummaryTable = {
+  title: 'By weight band',
+  columns: WEIGHT_BANDS,
+  rows: PAEDIATRIC_LINES.map(([label, codes]) => ({
+    label,
+    cells: WEIGHT_BANDS.map((band) => codes.map((code) => ({ code, band }))),
+    total: codes.map((code) => ({ code })),
+  })),
+  totalLabel: 'Total children',
+};
+
+const PMTCT_MOTHERS: SummaryTable = {
+  columns: LINES,
+  rows: (
+    [
+      ['TDF + 3TC + DTG', 'PM12'],
+      ['TDF + 3TC + EFV', 'PM9'],
+      ['AZT + 3TC + DTG', 'PM13'],
+      ['ABC + 3TC + DTG', 'PM14'],
+      ['TDF + 3TC + ATV/r', 'PM11'],
+      ['TDF + 3TC + LPV/r', 'PM7'],
+      ['AZT + 3TC + ATV/r', 'PM10'],
+      ['AZT + 3TC + LPV/r', 'PM5'],
+      ['Any other PMTCT regimen', 'PM1X'],
+    ] as Array<[string, string]>
+  ).map(([label, code]) => ({ label, cells: [1, 2, 3].map((line) => [{ code, line }]), total: [{ code }] })),
+  totalLabel: 'Total pregnant women',
+};
+
+const PREP: SummaryTable = {
+  columns: [],
+  rows: [
+    single('TDF + FTC', 'PRP1A'),
+    single('TDF + 3TC', 'PRP1B'),
+    single('Dapivirine ring', 'PRP1D'),
+    single('Cabotegravir', 'PRP1E'),
+    single('Lenacapavir', 'PRP1F'),
+    single('Others', 'PRP1X'),
+  ],
+  totalLabel: 'Total on PrEP',
+};
+
+const PEP: SummaryTable = {
+  columns: ['Adults', 'Children'],
+  rows: [
+    byCode('TDF + 3TC + DTG', ['PA3D', null]),
+    byCode('TDF + 3TC + ATV/r', ['PA3C', null]),
+    byCode('AZT + 3TC + ATV/r', ['PA1C', null]),
+    byCode('ABC + 3TC + LPV/r', [null, 'PC3A']),
+    byCode('ABC + 3TC + DTG', [null, 'PC3C']),
+    byCode('Any other PEP regimen', ['PA4X', 'PC4X']),
+  ],
+  totalLabel: 'Total given PEP',
+};
+
+const HEPATITIS_B: SummaryTable = {
+  columns: [],
+  rows: [single('TDF + 3TC', 'HPB1A'), single('TDF + FTC', 'HPB1B'), single('Any other Hep B regimen', 'HPB1C')],
+  totalLabel: 'Total Hep B (HIV-ve)',
+};
+
+const TPT: SummaryTable = {
+  columns: ['6H', '3HP'],
+  rows: [byCode('Adults (≥15 yrs)', ['ATPT1A', 'ATPT1B']), byCode('Children (<15 yrs)', ['CTPT1A', 'CTPT1B'])],
+  totalLabel: 'Total started TPT',
+};
+
+const all = (table: SummaryTable) => tableCells(table);
+
+/** Not counted yet: shown on the form blank, listed here so the gap is visible */
+export const NOT_YET_COUNTED =
+  'Not counted yet: PMTCT infants (PC8, PC7, PC1X), universal prophylaxis (OI1A, OI1C, OI2A), TPT for HIV-negative clients (ATPT1C) and Cryptococcal Meningitis (OI6B, OI6X). These are blank on the form too, until their queries are added.';
+
+export const MOH_729B_SUMMARY: SummarySection[] = [
+  {
+    id: 'art',
+    tab: 'ART',
+    headlines: [
+      { label: 'Adults on ART', cells: all(ADULT_ART) },
+      { label: 'Children on ART', cells: all(PAEDIATRIC_ART) },
+      { label: 'Pregnant women on ART', cells: all(PMTCT_MOTHERS) },
+      { label: 'Total on ART', cells: [...all(ADULT_ART), ...all(PAEDIATRIC_ART), ...all(PMTCT_MOTHERS)] },
+    ],
+    cards: [
+      { title: 'Adult ART', tables: [ADULT_ART] },
+      {
+        title: 'Paediatric ART',
+        note: 'Under 15 years. Weight is from the latest clinical visit.',
+        tables: [PAEDIATRIC_ART, PAEDIATRIC_WEIGHT],
+      },
+      { title: 'PMTCT · Pregnant women', note: 'Women pregnant this month.', tables: [PMTCT_MOTHERS] },
+    ],
+  },
+  {
+    id: 'prevention',
+    tab: 'PrEP, PEP & Hep B',
+    headlines: [
+      { label: 'On PrEP', cells: all(PREP) },
+      { label: 'Given PEP', cells: all(PEP) },
+      { label: 'Hep B (HIV-ve)', cells: all(HEPATITIS_B) },
+    ],
+    cards: [
+      { title: 'Pre-Exposure Prophylaxis (PrEP)', note: 'Seen for PrEP this month, not discontinued.', tables: [PREP] },
+      { title: 'Post Exposure Prophylaxis (PEP)', note: 'Given PEP this month; children are under 15.', tables: [PEP] },
+      {
+        title: 'Hepatitis B patients who are HIV-ve',
+        note: 'HBV positive at ANC this month (MOH 731 2.4). No Hep B regimen is recorded yet, so all are "any other".',
+        tables: [HEPATITIS_B],
+      },
+    ],
+  },
+  {
+    id: 'ois',
+    tab: 'OIs & TPT',
+    headlines: [{ label: 'Started TPT (HIV positive)', cells: all(TPT) }],
+    cards: [
+      {
+        title: 'TPT HIV Positive',
+        note: 'Started ART and TPT this month (MOH 731 3.4).',
+        tables: [TPT],
+      },
+    ],
+  },
+];

package/src/reports/moh-729b/moh-729b.component.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { useNavigate, 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 { 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 { registerFileName } from '../../registers/register-file-name';
+import { getMoh729b } from '../../resources/moh-729b.resource';
+import Moh729bForm, { type Moh729bCounts } from './moh-729b-form.component';
+import Moh729bSummary from './moh-729b-summary.component';
+import { encodeCell, inCell, inCells, type Moh729bCell, type Moh729bRow } from './moh-729b.types';
+import styles from './moh-729b.scss';
+import reportStyles from '../moh-731/moh-731.scss';
+
+/**
+ * MoH 729B Facility Monthly ARV Patient Summary (F-MAPS), opened from the
+ * landing page's Reports tab, with the reports' filter bar.
+ *
+ * The clients active on ART in the month come back one row each with their
+ * regimen code (/moh-729b), so every count on the form is a count of those
+ * rows and opens the linelist of exactly those clients. As MOH 731, the form
+ * has a Summary tab beside it that regroups the counts into tables with totals.
+ */
+const Moh729bReport: React.FC = () => {
+  const [rows, setRows] = useState<Moh729bRow[] | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+
+  const navigate = useNavigate();
+
+  /* The form tab is the default; the selected tab and the Summary's section
+     are kept in the URL, so a linelist opened from them comes back to them */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const view = searchParams.get('view') === 'summary' ? 'summary' : undefined;
+  const section = searchParams.get('section') ?? '';
+  const setParam = (key: string, value?: string) => {
+    const next = new URLSearchParams(searchParams);
+    if (value) {
+      next.set(key, value);
+    } else {
+      next.delete(key);
+    }
+    setSearchParams(next, { replace: true });
+  };
+  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('moh729bLocation');
+  const isReportGenerated = rows !== null && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setIsLoading(true);
+    setPeriod({ startDate, endDate });
+    try {
+      setRows((await getMoh729b({ locationUuids, endDate })) as unknown as Moh729bRow[]);
+      markGenerated(locationUuids);
+    } catch (error) {
+      showReportError('the MOH 729B report', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useRestorePeriod(generate);
+
+  /** Opens the linelist of one count or, under a heading, of several */
+  const openLinelist = (cells: Moh729bCell[], label?: string) => {
+    const params = new URLSearchParams({ ...period, locationUuids, from: 'moh-729b' });
+    cells.forEach((cell) => params.append('f', encodeCell(cell)));
+    if (label) params.set('label', label);
+    if (view) params.set('view', view);
+    if (view && section) params.set('section', section);
+    navigate(`/moh-729b-linelist?${params}`);
+  };
+
+  const counts = useMemo<Moh729bCounts>(
+    () => ({
+      count: (cell) => (rows ?? []).filter((row) => inCell(row, cell)).length,
+      open: (cell) => openLinelist([cell]),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows, period, locationUuids, view, section],
+  );
+  const countClients = (cells: Moh729bCell[]) => (rows ?? []).filter((row) => inCells(row, cells)).length;
+
+  /* Download PDF saves the form as one A3 portrait 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('MOH-729B', facility, period), {
+      paperSize: 'a3',
+      orientation: 'portrait',
+      stylesheetsOnly: true,
+    });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="MOH 729B F-MAPS Report"
+        mode="monthly"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isReportGenerated}
+        generatedPeriod={period}
+        onDownloadPdf={downloadPdf}
+      />
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH 729B" isLocationChanged={rows !== null && hasLocationChanged} />
+      )}
+      {!isLoading && isReportGenerated && (
+        <Tabs
+          selectedIndex={view === 'summary' ? 1 : 0}
+          onChange={({ selectedIndex }) => setParam('view', selectedIndex === 1 ? 'summary' : undefined)}
+        >
+          <TabList aria-label="MOH 729B views" className={reportStyles.tabList}>
+            <Tab>MOH 729B Form</Tab>
+            <Tab>Summary</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={reportStyles.formPanel}>
+              {/* Download PDF saves the form whichever tab is open */}
+              <div className={styles.reportFrame} ref={sheetRef}>
+                <Moh729bForm
+                  facility={facility}
+                  startDate={period.startDate}
+                  endDate={period.endDate}
+                  counts={counts}
+                />
+              </div>
+            </TabPanel>
+            <TabPanel className={reportStyles.summaryPanel}>
+              <div className={reportStyles.reportFrame}>
+                <Moh729bSummary
+                  count={countClients}
+                  openLinelist={openLinelist}
+                  sectionId={section}
+                  onSectionChange={(id) => setParam('section', id)}
+                  period={period.endDate.slice(0, 7)}
+                />
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      )}
+    </>
+  );
+};
+
+export default Moh729bReport;