@ampath/esm-reports-app 1.0.0-next.55 → 1.0.0-next.57

package/src/reports/moh-731/sections/pmtct.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from '../moh-731.scss';
 import classNames from 'classnames';
-import { useNavigate } from 'react-router-dom';
+import { useOpenMoh731Linelist } from '../linelist/use-open-moh-731-linelist';
 
 interface PmtctComponentProps {
   MOH731Data: any;
@@ -12,13 +12,7 @@ interface PmtctComponentProps {
 }
 
 const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate, endDate, locationUuids }) => {
-  const navigate = useNavigate();
-
-  const navigateToRegister = (indicator: string, gender: string, label: string) => {
-    navigate(
-      `/moh-366-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&gender=${gender}&label=${encodeURIComponent(label)}&from=moh-731`,
-    );
-  };
+  const openLinelist = useOpenMoh731Linelist(startDate, endDate, locationUuids);
   return (
     <>
       <div className={styles.flexRow}>
@@ -35,7 +29,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-01</span>
                   <div
-                    onClick={() => navigateToRegister('known_positive_1st_anc', 'F', 'Known Positive at 1st ANC')}
+                    onClick={() => openLinelist('HV02-01')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -54,7 +48,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-02</span>
                   <div
-                    onClick={() => navigateToRegister('initial_test_anc', 'F', 'Tested at ANC')}
+                    onClick={() => openLinelist('HV02-02')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -65,7 +59,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-03</span>
                     <div
-                      onClick={() => navigateToRegister('retest_anc', 'F', 'Tested at ANC')}
+                      onClick={() => openLinelist('HV02-03')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -79,7 +73,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-04</span>
                   <div
-                    onClick={() => navigateToRegister('initial_test_LD', 'F', 'Tested at L&D')}
+                    onClick={() => openLinelist('HV02-04')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -90,7 +84,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-05</span>
                     <div
-                      onClick={() => navigateToRegister('retest_LD', 'F', 'Tested at L&D')}
+                      onClick={() => openLinelist('HV02-05')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -104,7 +98,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-06</span>
                   <div
-                    onClick={() => navigateToRegister('initial_test_pnc_less_6_weeks', 'F', 'Tested at PNC_≤6weeks')}
+                    onClick={() => openLinelist('HV02-06')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -115,7 +109,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-07</span>
                     <div
-                      onClick={() => navigateToRegister('retest_pnc_less_6_weeks', 'F', 'Tested at PNC_≤6weeks')}
+                      onClick={() => openLinelist('HV02-07')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -129,7 +123,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-08</span>
                   <div
-                    onClick={() => navigateToRegister('initial_test_pnc_greater_6_weeks', 'F', 'Tested at PNC_>6weeks')}
+                    onClick={() => openLinelist('HV02-08')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -140,7 +134,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-09</span>
                     <div
-                      onClick={() => navigateToRegister('retest_pnc_greater_6_weeks', 'F', 'Tested at PNC_>6weeks')}
+                      onClick={() => openLinelist('HV02-09')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -164,7 +158,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-10</span>
                   <div
-                    onClick={() => navigateToRegister('positive_anc', 'F', 'Tested at ANC')}
+                    onClick={() => openLinelist('HV02-10')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -178,7 +172,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-11</span>
                   <div
-                    onClick={() => navigateToRegister('positive_LD', 'F', 'Tested at L&D')}
+                    onClick={() => openLinelist('HV02-11')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -192,7 +186,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-12</span>
                   <div
-                    onClick={() => navigateToRegister('positive_pnc_less_6_weeks', 'F', 'Tested at PNC_≤6weeks')}
+                    onClick={() => openLinelist('HV02-12')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -206,7 +200,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-13</span>
                   <div
-                    onClick={() => navigateToRegister('positive_pnc_greater_6_weeks', 'F', 'Tested at PNC_>6weeks')}
+                    onClick={() => openLinelist('HV02-13')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -230,7 +224,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-14</span>
                   <div
-                    onClick={() => navigateToRegister('maternal_haart_1st_anc', 'F', 'On HAART at 1st ANC')}
+                    onClick={() => openLinelist('HV02-14')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -244,7 +238,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-15</span>
                   <div
-                    onClick={() => navigateToRegister('start_maternal_haart_1st_anc', 'F', 'Start HAART_ANC')}
+                    onClick={() => openLinelist('HV02-15')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -258,7 +252,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-16</span>
                   <div
-                    onClick={() => navigateToRegister('start_maternal_haart_LD', 'F', 'Start HAART_L&D')}
+                    onClick={() => openLinelist('HV02-16')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -272,7 +266,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-17</span>
                   <div
-                    onClick={() => navigateToRegister('maternal_haart_less_6_weeks', 'F', 'Start HAART_PNC_≤6weeks')}
+                    onClick={() => openLinelist('HV02-17')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -286,7 +280,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-18</span>
                   <div
-                    onClick={() => navigateToRegister('maternal_haart_more_6_weeks', 'F', 'Start HAART_PNC_>6weeks')}
+                    onClick={() => openLinelist('HV02-18')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -311,7 +305,13 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td>Screened_HBV_ANC</td>
                 <td className={styles.textBox}>
                   <span>HV02-19</span>
-                  <div className={styles.rectangle}></div>
+                  <div
+                    onClick={() => openLinelist('HV02-19')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
+                    {MOH731Data.hbv_screened_anc}
+                  </div>
                 </td>
                 <td></td>
               </tr>
@@ -320,7 +320,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-20</span>
                   <div
-                    onClick={() => navigateToRegister('hbv_screened_positive_anc', 'F', 'HBV Screened_Positive')}
+                    onClick={() => openLinelist('HV02-20')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -351,7 +351,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-21</span>
                   <div
-                    onClick={() => navigateToRegister('known_positive_anc_10_19', 'F', '1st ANC KP')}
+                    onClick={() => openLinelist('HV02-21')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -362,7 +362,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-22</span>
                     <div
-                      onClick={() => navigateToRegister('known_positive_anc_20_24', 'F', '1st ANC KP')}
+                      onClick={() => openLinelist('HV02-22')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -376,7 +376,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-23</span>
                   <div
-                    onClick={() => navigateToRegister('positive_anc_ld_pnc_10_19', 'F', 'New HIV Positive')}
+                    onClick={() => openLinelist('HV02-23')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -387,7 +387,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-24</span>
                     <div
-                      onClick={() => navigateToRegister('positive_anc_ld_pnc_20_24', 'F', 'New HIV Positive')}
+                      onClick={() => openLinelist('HV02-24')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -401,7 +401,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-25</span>
                   <div
-                    onClick={() => navigateToRegister('on_art_anc_10_19', 'F', 'On HAART 1st ANC KP')}
+                    onClick={() => openLinelist('HV02-25')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -412,7 +412,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-26</span>
                     <div
-                      onClick={() => navigateToRegister('on_art_anc_20_24', 'F', 'On HAART 1st ANC KP')}
+                      onClick={() => openLinelist('HV02-26')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -426,7 +426,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-27</span>
                   <div
-                    onClick={() => navigateToRegister('start_art_10_19', 'F', 'Started HAART New')}
+                    onClick={() => openLinelist('HV02-27')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -437,7 +437,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                   <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                     <span>HV02-28</span>
                     <div
-                      onClick={() => navigateToRegister('start_art_20_24', 'F', 'Started HAART New')}
+                      onClick={() => openLinelist('HV02-28')}
                       className={styles.rectangle}
                       title="Click to open linelist"
                     >
@@ -461,7 +461,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-29</span>
                   <div
-                    onClick={() => navigateToRegister('infant_arv_anc', 'F', 'Infant ARV Prophylaxis_ANC')}
+                    onClick={() => openLinelist('HV02-29')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -475,7 +475,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-30</span>
                   <div
-                    onClick={() => navigateToRegister('infant_arv_ld', 'F', 'Infant ARV Prophylaxis_L&D')}
+                    onClick={() => openLinelist('HV02-30')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -485,11 +485,11 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td></td>
               </tr>
               <tr>
-                <td>Infant ARV Prophylaxis_L&PNC</td>
+                <td>Infant ARV Prophylaxis_PNC</td>
                 <td className={styles.textBox}>
                   <span>HV02-31</span>
                   <div
-                    onClick={() => navigateToRegister('infant_arv_pnc', 'F', 'Infant ARV Prophylaxis_L&PNC')}
+                    onClick={() => openLinelist('HV02-31')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -518,7 +518,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-32</span>
                   <div
-                    onClick={() => navigateToRegister('exclusive_bf', 'F', 'Exclusive Breastfeeding (EBF)')}
+                    onClick={() => openLinelist('HV02-32')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -537,7 +537,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-33</span>
                   <div
-                    onClick={() => navigateToRegister('bf', 'F', 'Breastfeeding (BF)')}
+                    onClick={() => openLinelist('HV02-33')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >
@@ -551,7 +551,7 @@ const PmtctComponent: React.FC<PmtctComponentProps> = ({ MOH731Data, startDate,
                 <td className={styles.textBox}>
                   <span>HV02-34</span>
                   <div
-                    onClick={() => navigateToRegister('weaning', 'F', 'Not Breastfeeding (NBF)')}
+                    onClick={() => openLinelist('HV02-34')}
                     className={styles.rectangle}
                     title="Click to open linelist"
                   >

package/src/reports/moh-731/summary/moh-731-summary.component.tsx

@@ -0,0 +1,313 @@
+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 { MOH_731_INDICATORS } from '../linelist/moh-731-indicators';
+import { type Moh731LinelistTotal } from '../linelist/use-open-moh-731-linelist';
+import {
+  MOH_731_SUMMARY,
+  rowTotalCodes,
+  type SummaryRow,
+  type SummarySection,
+  type SummaryTable,
+} from './moh-731-summary.config';
+import styles from './moh-731-summary.scss';
+
+interface Moh731SummaryProps {
+  /** The report as generated: indicator key -> value */
+  data: Record<string, unknown>;
+  openLinelist: (figure: string | Moh731LinelistTotal) => 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-moh731-summary-show-codes';
+
+/** A figure's value, 0 where the report has none */
+const valueOf = (data: Record<string, unknown>, code: string) => {
+  const indicator = MOH_731_INDICATORS[code]?.indicator;
+  return Number((indicator && data[indicator]) || 0);
+};
+
+const sum = (data: Record<string, unknown>, codes: string[]) =>
+  codes.reduce((total, code) => total + valueOf(data, code), 0);
+
+/** The codes a table's Total row adds up: every row that counts towards the total */
+const tableCodes = (table: SummaryTable) =>
+  table.rows.filter((row) => !row.ofWhich && !row.excluded).flatMap(rowTotalCodes);
+
+const rowLabel = (row: SummaryRow) => (row.ofWhich ? `of which ${row.label}` : row.label);
+
+const readShowCodes = () => {
+  try {
+    return localStorage.getItem(SHOW_CODES_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * The MOH 731 report regrouped for reading: a tab per section, each sub-section
+ * as a compact table with a Total column and a Total row. Every number opens its
+ * linelist, and a total opens the linelists of the figures it adds up.
+ */
+const Moh731Summary: React.FC<Moh731SummaryProps> = ({ data, openLinelist, sectionId, onSectionChange, period }) => {
+  const [showCodes, setShowCodes] = useState(readShowCodes);
+  const selectedIndex = Math.max(
+    0,
+    MOH_731_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 */
+    }
+  };
+
+  /* One figure opens its own linelist; several open as a total */
+  const open = (codes: string[], label: string, block: string) => {
+    if (codes.length === 1) {
+      openLinelist(codes[0]);
+    } else if (codes.length > 1) {
+      openLinelist({ codes, label, block });
+    }
+  };
+
+  /** A figure or total: its value, opening its linelist; the MOH code on hover (or shown) */
+  const value = (codes: string[], label: string, block: string, options: { strong?: boolean; code?: boolean } = {}) => {
+    if (codes.length === 0) {
+      return <span className={styles.none}>–</span>;
+    }
+    const amount = sum(data, codes);
+    const code = codes.length === 1 ? codes[0] : undefined;
+    return (
+      <button
+        type="button"
+        className={classNames(styles.value, { [styles.zero]: amount === 0, [styles.strong]: options.strong })}
+        onClick={() => open(codes, label, block)}
+        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_731_SUMMARY.forEach((section) =>
+      section.subsections.forEach((sub) =>
+        sub.tables.forEach((table) => {
+          table.rows.forEach((row) => {
+            (row.cells ?? []).forEach((cell, index) => {
+              if (cell) {
+                lines.push({
+                  section: section.title,
+                  block: sub.block,
+                  row: rowLabel(row),
+                  column: table.columns[index],
+                  code: cell,
+                  value: valueOf(data, cell),
+                });
+              }
+            });
+            lines.push({
+              section: section.title,
+              block: sub.block,
+              row: rowLabel(row),
+              column: 'Total',
+              code: row.only ?? '',
+              value: sum(data, rowTotalCodes(row)),
+            });
+          });
+          if (table.totalLabel) {
+            lines.push({
+              section: section.title,
+              block: sub.block,
+              row: table.totalLabel,
+              column: 'Total',
+              code: '',
+              value: sum(data, tableCodes(table)),
+            });
+          }
+        }),
+      ),
+    );
+    downloadCsv(
+      columnsToCsv(lines, [
+        { header: 'Section', value: (line) => line.section },
+        { header: 'Sub-section', value: (line) => line.block },
+        { header: 'Row', value: (line) => line.row },
+        { header: 'Column', value: (line) => line.column },
+        { header: 'MOH 731 Code', value: (line) => line.code, text: true },
+        { header: 'Value', value: (line) => line.value },
+      ]),
+      `moh-731-summary-${period}.csv`.replace(/[^a-z0-9.-]+/gi, '-').toLowerCase(),
+    );
+  };
+
+  const renderTable = (table: SummaryTable, block: string, key: number) => {
+    const included = table.rows.filter((row) => !row.ofWhich && !row.excluded);
+    const hasTotalColumn = table.rowTotals !== false;
+    return (
+      <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>
+              ))}
+              {/* a table without a breakdown has one column of figures, not totals */}
+              {hasTotalColumn && (
+                <th scope="col" className={styles.totalCol}>
+                  {table.columns.length ? 'Total' : 'Number'}
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {table.rows.map((row) => (
+              <tr
+                key={row.label}
+                className={classNames({ [styles.ofWhich]: row.ofWhich, [styles.excluded]: row.excluded })}
+              >
+                <th scope="row" className={styles.labelCol}>
+                  {row.group && <span className={styles.group}>{row.group} · </span>}
+                  {rowLabel(row)}
+                </th>
+                {table.columns.map((column, index) => (
+                  <td key={column}>
+                    {row.only
+                      ? null
+                      : value(row.cells?.[index] ? [row.cells[index] as string] : [], `${row.label} ${column}`, block)}
+                  </td>
+                ))}
+                {/* the code is beside the row's own figures already; only a figure
+                    shown in the Total column alone carries it here */}
+                {hasTotalColumn && (
+                  <td className={styles.totalCol}>
+                    {value(rowTotalCodes(row), `${row.label} total`, block, { code: Boolean(row.only) })}
+                  </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(
+                      included.map((row) => row.cells?.[index]).filter((cell): cell is string => Boolean(cell)),
+                      `${table.totalLabel} – ${column}`,
+                      block,
+                      { strong: true, code: false },
+                    )}
+                  </td>
+                ))}
+                {hasTotalColumn && (
+                  <td className={styles.totalCol}>
+                    {value(tableCodes(table), table.totalLabel, block, { strong: true, code: false })}
+                  </td>
+                )}
+              </tr>
+            </tfoot>
+          )}
+        </table>
+      </div>
+    );
+  };
+
+  const renderSection = (section: SummarySection) => (
+    <>
+      {section.headlines.length > 0 && (
+        <div className={styles.strip}>
+          {section.headlines.map((headline) => {
+            const table = section.subsections
+              .find((sub) => sub.block === headline.block)
+              ?.tables.find((t) => t.totalLabel);
+            const codes = table ? tableCodes(table) : [];
+            return (
+              <button
+                type="button"
+                key={headline.block}
+                className={styles.headline}
+                onClick={() => open(codes, table?.totalLabel ?? headline.label, headline.block)}
+              >
+                <span className={styles.headlineLabel}>{headline.label}</span>
+                <span className={styles.headlineValue}>{sum(data, codes).toLocaleString()}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+      <div className={styles.grid}>
+        {section.subsections.map((sub) => (
+          <div key={sub.block} className={styles.card}>
+            <h5 className={styles.cardTitle}>{sub.block}</h5>
+            {sub.note && <p className={styles.note}>{sub.note}</p>}
+            {sub.tables.map((table, index) => renderTable(table, sub.block, index))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+
+  return (
+    <div className={styles.summary}>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={({ selectedIndex: index }) => onSectionChange(MOH_731_SUMMARY[index].id)}
+      >
+        <div className={styles.bar}>
+          <TabList aria-label="MOH 731 sections" className={styles.sectionTabs}>
+            {MOH_731_SUMMARY.map((section) => (
+              <Tab key={section.id} title={section.title}>
+                {section.tab}
+              </Tab>
+            ))}
+          </TabList>
+          <div className={styles.tools}>
+            <Toggle
+              id="moh731-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_731_SUMMARY.map((section) => (
+            <TabPanel key={section.id} className={styles.panel}>
+              {renderSection(section)}
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Moh731Summary;