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

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

@@ -3,19 +3,25 @@ import React, { useEffect, useState } from 'react';
 import styles from './moh-731.scss';
 import { ReportFiltersComponent, type ReportPeriod } from '../../common/report-filters';
 import { showReportError } from '../../common/report-error';
-import { hasReportData, ReportPlaceholder } from '../../common/report-placeholder';
+import { hasReportData, ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
 import { formatDate, useSession } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import { getMoh731 } from '../../resources/moh-731.resource';
 import HivTestingandPreExposusreProphylaxis from './sections/hiv-testing-and-pre-exposure.component';
 import PmtctComponent from './sections/pmtct.component';
 import HivAndTBTreatmentComponent from './sections/hiv-and-tb-treatment.component';
 import { ReportSkeleton } from '../../common/report-skeleton';
 import { usePageScale } from '../../common/report-page';
+import Moh731Summary from './summary/moh-731-summary.component';
+import { useOpenMoh731Linelist } from './linelist/use-open-moh-731-linelist';
 
 interface Moh731Props {}
 
+/** The sheet's on-screen width: A4 less its 8mm margins (`.form` in moh-731.scss) */
+const SHEET_WIDTH_MM = 210 - 2 * 8;
+
 const Moh731Report: React.FC<Moh731Props> = () => {
   const [moh731Data, setMoh731Data] = useState<any>(() => {
     const saved = sessionStorage.getItem('moh731Data');
@@ -45,7 +51,32 @@ const Moh731Report: React.FC<Moh731Props> = () => {
   const locationUuids = session?.sessionLocation?.uuid;
   const navigate = useNavigate();
 
-  const isReportGenerated = hasReportData(moh731Data);
+  /* The form tab is the default; the selected tab is kept in the URL so a
+     linelist opened from the Summary tab comes back to it. */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedTab = searchParams.get('view') === 'summary' ? 1 : 0;
+  const selectTab = ({ selectedIndex }: { selectedIndex: number }) => {
+    const next = new URLSearchParams(searchParams);
+    if (selectedIndex === 1) {
+      next.set('view', 'summary');
+    } else {
+      next.delete('view');
+    }
+    setSearchParams(next, { replace: true });
+  };
+  /* the Summary's section tab, kept in the URL the same way */
+  const summarySection = searchParams.get('section') ?? '';
+  const selectSummarySection = (section: string) => {
+    const next = new URLSearchParams(searchParams);
+    next.set('section', section);
+    setSearchParams(next, { replace: true });
+  };
+
+  /* Only a report for the current location counts: after switching location the
+     old figures would otherwise be shown, and labelled, as the new location's. */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh731Location');
+  const isReportGenerated = hasReportData(moh731Data) && isForCurrentLocation;
+  const openSummaryLinelist = useOpenMoh731Linelist(startDate, endDate, locationUuids ?? '', 'summary', summarySection);
 
   /* The sign-off records who produced the return and when. Designation and
      signature stay blank -- those are filled in by hand on the printed sheet. */
@@ -65,7 +96,7 @@ const Moh731Report: React.FC<Moh731Props> = () => {
   const generatedOn = formatDate(new Date(), { mode: 'standard', time: false, noToday: true });
 
   /** Fills the available width, never rendering below A4 */
-  const { ref: viewportRef, scale } = usePageScale<HTMLDivElement>();
+  const { ref: viewportRef, scale } = usePageScale<HTMLDivElement>(SHEET_WIDTH_MM);
 
   const fetchMoh731ReportData = async ({ startDate, endDate }: ReportPeriod) => {
     setIsLoading(true);
@@ -81,6 +112,7 @@ const Moh731Report: React.FC<Moh731Props> = () => {
       const data = await getMoh731(params);
       const flatData = Object.assign({}, ...data.result);
       setMoh731Data(flatData);
+      markGenerated(params.locationUuids);
       setIsLoading(false);
     } catch (error: any) {
       setIsLoading(false);
@@ -99,97 +131,118 @@ const Moh731Report: React.FC<Moh731Props> = () => {
         generatedPeriod={{ startDate, endDate }}
       />
       {isLoading && <ReportSkeleton blocks={3} />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-731" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH-731" isLocationChanged={hasReportData(moh731Data) && hasLocationChanged} />
+      )}
       {!isLoading && isReportGenerated && (
-        <>
-          {/* The sheet is a fixed A4 page, so it scrolls inside this viewport
+        <Tabs selectedIndex={selectedTab} onChange={selectTab}>
+          <TabList aria-label="MOH 731 views" className={styles.tabList}>
+            <Tab>MOH 731 Form</Tab>
+            <Tab>Summary</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.formPanel}>
+              {/* The sheet is a fixed A4 page, so it scrolls inside this viewport
               rather than forcing the whole app to scroll sideways. */}
-          <div className={styles.viewport} ref={viewportRef}>
-            {/* The scale is a custom property rather than an inline `zoom`, so
+              <div className={styles.reportFrame}>
+                <div className={styles.viewport} ref={viewportRef}>
+                  {/* The scale is a custom property rather than an inline `zoom`, so
                 the print stylesheet can still reset it to 1 */}
-            <div className={styles.form} style={{ '--page-zoom': scale } as React.CSSProperties}>
-              {/* Ministry line sits above the ruled sheet, as on the printed form */}
-              <div className={styles.ministryLine}>
-                <span>Ministry of Health</span>
-                <span>Ver. July 2023</span>
-              </div>
+                  <div className={styles.form} style={{ '--page-zoom': scale } as React.CSSProperties}>
+                    {/* Ministry line sits above the ruled sheet, as on the printed form */}
+                    <div className={styles.ministryLine}>
+                      <span>Ministry of Health</span>
+                      <span>Ver. July 2023</span>
+                    </div>
 
-              <div className={styles.sheet}>
-                <div className={styles.formHeader}>
-                  <div className={styles.formTitle}>
-                    <strong>National AIDS &amp; STI Control Program- NASCOP</strong>
-                    <strong>Comprehensive HIV/ AIDS reporting form</strong>
-                  </div>
-                  <span className={styles.formVersion}>(MOH 731-Ver. July 2023)</span>
-                </div>
+                    <div className={styles.sheet}>
+                      <div className={styles.formHeader}>
+                        <div className={styles.formTitle}>
+                          <strong>National AIDS &amp; STI Control Program- NASCOP</strong>
+                          <strong>Comprehensive HIV/ AIDS reporting form</strong>
+                        </div>
+                        <span className={styles.formVersion}>(MOH 731-Ver. July 2023)</span>
+                      </div>
 
-                {/* Each label and its rule is one flex item, so the six pairs stay
+                      {/* Each label and its rule is one flex item, so the six pairs stay
                   on a single centred line and cannot run together. */}
-                <p className={styles.locationContainer}>
-                  <span>
-                    County<span className={styles.line}>{county}</span>
-                  </span>
-                  <span>
-                    Sub County<span className={styles.line}>{subCounty}</span>
-                  </span>
-                  <span>
-                    Facility<span className={styles.line}>{facility}</span>
-                  </span>
-                  <span>
-                    MFL<span className={styles.shortLine}>{mflCode}</span>
-                  </span>
-                  <span>
-                    Month<span className={styles.shortLine}>{reportMonth}</span>
-                  </span>
-                  <span>
-                    year<span className={styles.shortLine}>{reportYear}</span>
-                  </span>
-                </p>
-
-                <h5 className={styles.sectionHeader}>1. HIV Testing Services &amp; Pre exposure Prophylaxis</h5>
-                <HivTestingandPreExposusreProphylaxis
-                  MOH731Data={moh731Data}
-                  startDate={startDate}
-                  endDate={endDate}
-                  locationUuids={locationUuids!}
-                />
-
-                <h5 className={styles.sectionHeader}>2. Elimination of Mother-to-Child Transmission (EMTCT)</h5>
-                <PmtctComponent
-                  MOH731Data={moh731Data}
-                  startDate={startDate}
-                  endDate={endDate}
-                  locationUuids={locationUuids!}
-                />
-
-                {/* The sign-off is the bottom band of columns 1 and 2 on the printed
+                      <p className={styles.locationContainer}>
+                        <span>
+                          County<span className={styles.line}>{county}</span>
+                        </span>
+                        <span>
+                          Sub County<span className={styles.line}>{subCounty}</span>
+                        </span>
+                        <span>
+                          Facility<span className={styles.line}>{facility}</span>
+                        </span>
+                        <span>
+                          MFL<span className={styles.shortLine}>{mflCode}</span>
+                        </span>
+                        <span>
+                          Month<span className={styles.shortLine}>{reportMonth}</span>
+                        </span>
+                        <span>
+                          year<span className={styles.shortLine}>{reportYear}</span>
+                        </span>
+                      </p>
+
+                      <h5 className={styles.sectionHeader}>1. HIV Testing Services &amp; Pre exposure Prophylaxis</h5>
+                      <HivTestingandPreExposusreProphylaxis
+                        MOH731Data={moh731Data}
+                        startDate={startDate}
+                        endDate={endDate}
+                        locationUuids={locationUuids!}
+                      />
+
+                      <h5 className={styles.sectionHeader}>2. Elimination of Mother-to-Child Transmission (EMTCT)</h5>
+                      <PmtctComponent
+                        MOH731Data={moh731Data}
+                        startDate={startDate}
+                        endDate={endDate}
+                        locationUuids={locationUuids!}
+                      />
+
+                      {/* The sign-off is the bottom band of columns 1 and 2 on the printed
                 sheet, with section 5 continuing beside it, so it is handed to
                 section 3 rather than rendered after it. */}
-                <HivAndTBTreatmentComponent
-                  MOH731Data={moh731Data}
-                  startDate={startDate}
-                  endDate={endDate}
-                  locationUuids={locationUuids!}
-                  footer={
-                    <div className={styles.reviewSection}>
-                      <span className={styles.reviewLabel}>Reviewed by:</span>
-                      <span>Name</span>
-                      <span>Designation</span>
-                      <span>Signature</span>
-                      <span>Date</span>
-
-                      <span />
-                      <span className={styles.reviewRule}>{generatedBy}</span>
-                      <span className={styles.reviewRule} />
-                      <span className={styles.reviewRule} />
-                      <span className={styles.reviewRule}>{generatedOn}</span>
+                      <HivAndTBTreatmentComponent
+                        MOH731Data={moh731Data}
+                        startDate={startDate}
+                        endDate={endDate}
+                        locationUuids={locationUuids!}
+                        footer={
+                          <div className={styles.reviewSection}>
+                            <span className={styles.reviewLabel}>Reviewed by:</span>
+                            <span>Name</span>
+                            <span>Designation</span>
+                            <span>Signature</span>
+                            <span>Date</span>
+
+                            <span />
+                            <span className={styles.reviewRule}>{generatedBy}</span>
+                            <span className={styles.reviewRule} />
+                            <span className={styles.reviewRule} />
+                            <span className={styles.reviewRule}>{generatedOn}</span>
+                          </div>
+                        }
+                      />
                     </div>
-                  }
-                />
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </>
+            </TabPanel>
+            <TabPanel className={styles.summaryPanel}>
+              <Moh731Summary
+                data={moh731Data}
+                openLinelist={openSummaryLinelist}
+                sectionId={summarySection}
+                onSectionChange={selectSummarySection}
+                period={`${startDate}-${endDate}`}
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       )}
     </>
   );

package/src/reports/moh-731/moh-731.scss

@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 /* A replica of the printed MOH 731 (Ver. July 2023) facility summary sheet,
@@ -41,6 +42,32 @@ $label-gap: 4mm; // between a row label and its first code
 $label-w: 36mm;
 $section-gap: 0.8mm; // around a divider
 
+/* Form / Summary tabs, between the filters and the panels */
+.tabList {
+  margin-top: layout.$spacing-05;
+}
+
+/* Each tab's panel brings its own spacing (the report card, the summary grid) */
+.formPanel,
+.summaryPanel {
+  padding: 0;
+}
+
+.summaryPanel {
+  margin-top: layout.$spacing-05;
+}
+
+/* The card the sheet sits in, drawn like the filter card above it (same rule
+   and fill) so the report reads as the second panel of one page.
+   It wraps `.viewport` rather than styling it: the page is scaled to the
+   viewport's width, so padding there would push the sheet into a scrollbar. */
+.reportFrame {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+}
+
 /* Holds the fixed-width page without making the app scroll sideways.
 
    No padding of its own: vertical padding here is dead space, and horizontal
@@ -52,17 +79,19 @@ $section-gap: 0.8mm; // around a divider
   overflow-x: auto;
 }
 
+/* On screen the sheet sits inside `.reportFrame`, whose padding is the margin:
+   drawn as a separate shadowed page with its own 8mm margins, it sat further
+   in from the card's edge than any other panel's content does. So the screen
+   sheet is the printable area only -- A4 less its margins, which `@page` puts
+   back for print -- and `usePageScale` is told that width. */
 .form {
   box-sizing: border-box;
-  width: $page-w;
-  min-height: $page-h;
-  padding: $page-margin;
+  width: $page-w - 2 * $page-margin;
   margin: 0 auto;
   color: $ink;
   font-size: $text;
   line-height: 1.15;
   background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
   /* Set by `usePageScale` from the measured container width, floored at 1 so
      the sheet is never drawn smaller than the paper. Reset to 1 for print. */
   zoom: var(--page-zoom, 1);
@@ -428,6 +457,24 @@ $section-gap: 0.8mm; // around a divider
     overflow: visible;
   }
 
+  /* Download PDF prints the form whichever tab is open */
+  .tabList,
+  .summaryPanel {
+    display: none !important;
+  }
+
+  .formPanel[hidden] {
+    display: block !important;
+  }
+
+  /* the card is screen chrome; the printout is the bare sheet */
+  .reportFrame {
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+  }
+
   .form {
     width: auto;
     min-height: 0;