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

package/src/common/report-filters/report-filters.scss

@@ -32,7 +32,6 @@
   padding: layout.$spacing-04 layout.$spacing-05;
   background-color: $ui-02;
   border: 1px solid $ui-03;
-  border-left: layout.$spacing-02 solid var(--brand-01);
 }
 
 .fields {
@@ -107,9 +106,13 @@
 }
 
 /* Carbon pins `inline-size: 143.5px` on both the container and the input in
-   range mode. Overridden through the range class so this wins on specificity
-   rather than on stylesheet order. */
-.fields .datePicker:global(.cds--date-picker--range) {
+   range mode, so the two dates never fill the field. `.datePicker` lands on
+   the form-item wrapper, not on the range element itself, so the range is
+   matched as its descendant. */
+.fields .datePicker :global(.cds--date-picker--range) {
+  gap: layout.$spacing-05;
+  width: 100%;
+
   :global(.cds--date-picker-container) {
     flex: 1 1 0;
     inline-size: auto;
@@ -136,18 +139,26 @@
 
 .summary {
   @include type.type-style('body-short-01');
-  display: inline-flex;
-  align-items: center;
+  display: flex;
+  flex: 1 1 18rem;
+  align-items: flex-start;
   gap: layout.$spacing-03;
+  min-width: 0;
+  margin: 0;
   color: $text-02;
 
+  /* level with the first line however many lines the message wraps to */
   svg {
+    flex-shrink: 0;
+    margin-top: 0.0625rem;
     fill: var(--brand-01);
   }
 
+  /* a period such as "01 Sep 2026 to 30 Sep 2026" never breaks mid-range */
   strong {
     color: $color-gray-100;
     font-weight: 600;
+    white-space: nowrap;
   }
 }
 
@@ -206,7 +217,7 @@
    error-toned: nothing is wrong, the figures are simply for another period. */
 
 .summaryStale {
-  padding: layout.$spacing-02 layout.$spacing-03;
+  padding: layout.$spacing-03 layout.$spacing-04;
   color: $color-gray-100;
   background-color: $warning-background;
 
@@ -214,3 +225,48 @@
     fill: $color-gray-70;
   }
 }
+
+/* Stacked fields fill the card. The desktop caps above (a year box no wider
+   than a year needs) would otherwise leave each stacked field a different,
+   arbitrary width. Placed after them so it wins at equal specificity. */
+@media (max-width: $breakpoint-tablet-max) {
+  .fields .periodField,
+  .fields .yearField,
+  .fields .monthField,
+  .fields .rangeField {
+    max-width: none;
+  }
+
+  /* Carbon caps buttons at 20rem; sharing the row, they should split it */
+  .actionButtons :global(.cds--btn) {
+    max-width: none;
+  }
+}
+
+/* Phones: one column throughout. Side by side, "Download PDF" and "Generate
+   report" each wrapped onto two lines and together overran the card. */
+@media (max-width: $breakpoint-phone-max) {
+  .filtersContainer {
+    padding: layout.$spacing-04;
+  }
+
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* Its flex basis is a width on the row; stacked, it would become a height */
+  .summary {
+    flex: none;
+  }
+
+  .actionButtons {
+    flex-direction: column;
+    align-items: stretch;
+
+    :global(.cds--btn) {
+      flex: none;
+      width: 100%;
+    }
+  }
+}

package/src/common/report-page/use-page-scale.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-/** A4 portrait width, 210mm, in CSS pixels at the reference 96dpi */
-const A4_WIDTH_PX = (210 * 96) / 25.4;
+/** A4 portrait width */
+const A4_WIDTH_MM = 210;
+
+/** Millimetres to CSS pixels at the reference 96dpi */
+const mmToPx = (mm: number) => (mm * 96) / 25.4;
 
 /**
  * Scales the sheet to fill whatever width it is given, never going below A4.
@@ -20,29 +23,36 @@ const A4_WIDTH_PX = (210 * 96) / 25.4;
  *
  * Returned as a factor for `zoom`, which scales the layout box as well as the
  * paint, so the scroll container stays the right size around the page.
+ *
+ * `pageWidthMm` is the width of the sheet as drawn on screen: the full A4 by
+ * default, or less for a sheet drawn without its paper margins (they are added
+ * back only for print).
  */
-export function usePageScale<T extends HTMLElement>() {
+export function usePageScale<T extends HTMLElement>(pageWidthMm = A4_WIDTH_MM) {
   const [scale, setScale] = useState(1);
   const observer = useRef<ResizeObserver | null>(null);
 
-  const ref = useCallback((node: T | null) => {
-    observer.current?.disconnect();
+  const ref = useCallback(
+    (node: T | null) => {
+      observer.current?.disconnect();
 
-    if (!node) {
-      return;
-    }
+      if (!node) {
+        return;
+      }
 
-    const measure = () => {
-      // clientWidth excludes the scrollbar, so the page cannot chase a
-      // scrollbar it has just caused
-      setScale(Math.max(1, node.clientWidth / A4_WIDTH_PX));
-    };
+      const measure = () => {
+        // clientWidth excludes the scrollbar, so the page cannot chase a
+        // scrollbar it has just caused
+        setScale(Math.max(1, node.clientWidth / mmToPx(pageWidthMm)));
+      };
 
-    measure();
+      measure();
 
-    observer.current = new ResizeObserver(measure);
-    observer.current.observe(node);
-  }, []);
+      observer.current = new ResizeObserver(measure);
+      observer.current.observe(node);
+    },
+    [pageWidthMm],
+  );
 
   useEffect(() => () => observer.current?.disconnect(), []);
 

package/src/common/report-placeholder/index.ts

@@ -1,2 +1,3 @@
 export { default as ReportPlaceholder } from './report-placeholder.component';
 export * from './has-report-data';
+export * from './use-generated-location';

package/src/common/report-placeholder/report-placeholder.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Layer } from '@carbon/react';
-import { Report } from '@carbon/react/icons';
+import { Location, Report } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
 
 import styles from './report-placeholder.scss';
 
@@ -9,6 +10,8 @@ interface ReportPlaceholderProps {
   reportName?: string;
   /** Shown when a report was generated but came back with nothing in it */
   isEmptyResult?: boolean;
+  /** A report was generated, but for another location than the current one */
+  isLocationChanged?: boolean;
 }
 
 /**
@@ -20,37 +23,59 @@ interface ReportPlaceholderProps {
  * run this yet", so the template is held back until there is data to put in it.
  * That leaves the page empty, hence the guidance here.
  */
-const ReportPlaceholder: React.FC<ReportPlaceholderProps> = ({ reportName, isEmptyResult = false }) => (
-  <Layer className={styles.placeholder}>
-    <Report size={32} className={styles.icon} />
+const ReportPlaceholder: React.FC<ReportPlaceholderProps> = ({
+  reportName,
+  isEmptyResult = false,
+  isLocationChanged = false,
+}) => {
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
 
-    {isEmptyResult ? (
-      <>
-        <h5>No records for this period</h5>
-        <p>
-          {reportName ?? 'The report'} ran successfully but returned no data for the period you selected. Try a
-          different reporting period, or confirm that data has been entered for this facility.
-        </p>
-      </>
-    ) : (
-      <>
-        <h5>No report generated yet</h5>
-        <p>
-          {reportName ? `The ${reportName} form` : 'The report'} will appear here, filled in with your facility&rsquo;s
-          figures, once you generate it.
-        </p>
-        <ol className={styles.steps}>
-          <li>Choose the reporting period in the filters above.</li>
-          <li>
-            Select <strong>Generate report</strong>.
-          </li>
-          <li>
-            Use <strong>Download PDF</strong> to save or print the completed form.
-          </li>
-        </ol>
-      </>
-    )}
-  </Layer>
-);
+  return (
+    <Layer className={styles.placeholder}>
+      {isLocationChanged ? (
+        <Location size={32} className={styles.icon} />
+      ) : (
+        <Report size={32} className={styles.icon} />
+      )}
+
+      {isLocationChanged ? (
+        <>
+          <h5>Location changed</h5>
+          <p>
+            The last {reportName ?? 'report'} was generated for a different location, so it is not shown here. Select{' '}
+            <strong>Generate report</strong> to produce it for{' '}
+            {location ? <strong>{location}</strong> : 'this location'}.
+          </p>
+        </>
+      ) : isEmptyResult ? (
+        <>
+          <h5>No records for this period</h5>
+          <p>
+            {reportName ?? 'The report'} ran successfully but returned no data for the period you selected. Try a
+            different reporting period, or confirm that data has been entered for this facility.
+          </p>
+        </>
+      ) : (
+        <>
+          <h5>No report generated yet</h5>
+          <p>
+            {reportName ? `The ${reportName} form` : 'The report'} will appear here, filled in with your
+            facility&rsquo;s figures, once you generate it.
+          </p>
+          <ol className={styles.steps}>
+            <li>Choose the reporting period in the filters above.</li>
+            <li>
+              Select <strong>Generate report</strong>.
+            </li>
+            <li>
+              Use <strong>Download PDF</strong> to save or print the completed form.
+            </li>
+          </ol>
+        </>
+      )}
+    </Layer>
+  );
+};
 
 export default ReportPlaceholder;

package/src/common/report-placeholder/report-placeholder.scss

@@ -8,6 +8,8 @@
   align-items: center;
   gap: layout.$spacing-03;
   padding: layout.$spacing-07 layout.$spacing-05;
+  /* the same gap below the filter card as a generated report's panel has */
+  margin-top: layout.$spacing-05;
   margin-bottom: layout.$spacing-05;
   text-align: center;
   background-color: $ui-02;

package/src/common/report-placeholder/use-generated-location.ts

@@ -0,0 +1,62 @@
+import { useCallback, useState } from 'react';
+import { useSession } from '@openmrs/esm-framework';
+
+function readLocation(storageKey?: string): string {
+  if (!storageKey) {
+    return '';
+  }
+  try {
+    return sessionStorage.getItem(storageKey) ?? '';
+  } catch {
+    return '';
+  }
+}
+
+function writeLocation(storageKey: string | undefined, locationUuid: string) {
+  if (!storageKey) {
+    return;
+  }
+  try {
+    sessionStorage.setItem(storageKey, locationUuid);
+  } catch {
+    /* storage unavailable: the report just won't survive a reload */
+  }
+}
+
+/**
+ * Which location the report on screen was generated for, compared with the
+ * one the user is at now.
+ *
+ * A report's figures belong to the location they were fetched for, but its
+ * masthead names the session location. After switching location, the old
+ * figures would be shown -- and labelled -- as the new location's. So a report
+ * only counts as generated while it is for the current location; otherwise the
+ * page falls back to the placeholder and asks for it to be generated again.
+ *
+ * Reports that keep their figures in session storage pass `storageKey`, so the
+ * location is restored alongside them. Figures restored without a location
+ * (saved before this was recorded) are treated as not generated, rather than
+ * assumed to be for wherever the user happens to be.
+ */
+export function useGeneratedLocation(storageKey?: string) {
+  const session = useSession();
+  const currentLocation = session?.sessionLocation?.uuid ?? '';
+  const [generatedLocation, setGeneratedLocation] = useState(() => readLocation(storageKey));
+
+  /** Call once a report has been fetched, with the location it was fetched for */
+  const markGenerated = useCallback(
+    (locationUuid: string) => {
+      setGeneratedLocation(locationUuid);
+      writeLocation(storageKey, locationUuid);
+    },
+    [storageKey],
+  );
+
+  return {
+    /** The report held is for the location the user is at now */
+    isForCurrentLocation: Boolean(generatedLocation) && generatedLocation === currentLocation,
+    /** A report is held, but for a different location than the current one */
+    hasLocationChanged: Boolean(generatedLocation) && generatedLocation !== currentLocation,
+    markGenerated,
+  };
+}

package/src/common/report-register/index.ts

@@ -3,3 +3,4 @@ export * from './register-columns';
 export * from './report-parents';
 export * from './rows-to-csv';
 export * from './use-patient-list';
+export * from './use-location-name';

package/src/common/report-register/register-layout.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem, Button, Layer, Pagination } from '@carbon/react';
 import { Link, useSearchParams } from 'react-router-dom';
-import { ArrowLeft, Calendar, Document, Download } from '@carbon/react/icons';
+import { ArrowLeft, Calendar, Document, Download, Location } from '@carbon/react/icons';
 import { formatDate } from '@openmrs/esm-framework';
 
 import { formatIndicatorName } from '../../utils/format-indicator';
@@ -29,6 +29,13 @@ interface RegisterLayoutProps {
   onBack?: () => void;
   /** Register name, e.g. `HIV Care Treatment Daily Activity Register MOH 366` */
   title: string;
+  /**
+   * The page heading, when the register can name the figure itself. Without
+   * it the heading is built from the link's `label` and `gender`.
+   */
+  heading?: string;
+  /** The location the register was generated for, shown beside the period */
+  location?: string;
   isLoading: boolean;
   /** `true` once loaded with nothing to show */
   isEmpty: boolean;
@@ -69,6 +76,8 @@ const RegisterLayout: React.FC<RegisterLayoutProps> = ({
   parentPath,
   onBack,
   title,
+  heading: headingProp,
+  location,
   isLoading,
   isEmpty,
   page,
@@ -109,11 +118,18 @@ const RegisterLayout: React.FC<RegisterLayoutProps> = ({
   if (locationUuids) parentQuery.append('locationUuids', locationUuids);
   if (startDate) parentQuery.append('startDate', startDate);
   if (endDate) parentQuery.append('endDate', endDate);
+  /* back to the report tab the register was opened from, e.g. a summary view */
+  const view = params.get('view');
+  if (view) parentQuery.append('view', view);
+  const section = params.get('section');
+  if (section) parentQuery.append('section', section);
   const parentLink = parentQuery.toString() ? `${parent.path}?${parentQuery}` : parent.path;
 
-  const heading = label
-    ? `${label}${gender && GENDERS[gender] ? ` (${GENDERS[gender]})` : ''}`
-    : formatIndicatorName(indicator ?? '');
+  const heading =
+    headingProp ??
+    (label
+      ? `${label}${gender && GENDERS[gender] ? ` (${GENDERS[gender]})` : ''}`
+      : formatIndicatorName(indicator ?? ''));
 
   /* Exports every page, not the one on screen: the DOM only holds the current
      page once paginated, so a scrape would silently export 50 of 2,000. */
@@ -190,6 +206,12 @@ const RegisterLayout: React.FC<RegisterLayoutProps> = ({
                   {period}
                 </>
               )}
+              {location && (
+                <span className={styles.location}>
+                  <Location size={14} />
+                  {location}
+                </span>
+              )}
               {typeof total === 'number' && total > 0 && (
                 <span>{isTotalExact ? `${total.toLocaleString()} records` : `${total.toLocaleString()}+ records`}</span>
               )}

package/src/common/report-register/register-layout.scss

@@ -109,6 +109,7 @@
 .period {
   @include type.type-style('label-01');
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: layout.$spacing-02;
   color: $text-02;
@@ -119,6 +120,15 @@
   }
 }
 
+/* Location sits after the period as one unit, so on a narrow screen it wraps
+   to its own line whole rather than leaving its pin behind */
+.location {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  margin-left: layout.$spacing-03;
+}
+
 .export {
   flex-shrink: 0;
   margin-left: auto;

package/src/common/report-register/use-location-name.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { openmrsFetch, useSession } from '@openmrs/esm-framework';
+
+/**
+ * The display name of the location(s) a register was generated for.
+ *
+ * Read from the link's `locationUuids` rather than the session: the user may
+ * have switched location since generating the report, and the register must
+ * name the location its rows came from. The session location answers without
+ * a request when it is the one asked for; any other is looked up. Several
+ * uuids (comma-separated) are named in order.
+ */
+export function useLocationName(locationUuids: string | null | undefined): string {
+  const session = useSession();
+  const uuids = (locationUuids ?? '')
+    .split(',')
+    .map((uuid) => uuid.trim())
+    .filter(Boolean);
+  const key = uuids.join(',');
+  const sessionUuid = session?.sessionLocation?.uuid;
+  const sessionName = session?.sessionLocation?.display;
+
+  const [names, setNames] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const missing = uuids.filter((uuid) => uuid !== sessionUuid);
+    if (missing.length === 0) {
+      return;
+    }
+
+    const abortController = new AbortController();
+
+    Promise.all(
+      missing.map((uuid) =>
+        openmrsFetch(`/ws/rest/v1/location/${uuid}?v=custom:(display)`, { signal: abortController.signal })
+          .then((response) => response.json())
+          .then((location) => [uuid, location?.display ?? ''] as const)
+          .catch(() => [uuid, ''] as const),
+      ),
+    ).then((found) => {
+      if (!abortController.signal.aborted) {
+        setNames(Object.fromEntries(found.filter(([, name]) => name)));
+      }
+    });
+
+    return () => abortController.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, sessionUuid]);
+
+  return uuids
+    .map((uuid) => (uuid === sessionUuid ? sessionName : names[uuid]))
+    .filter(Boolean)
+    .join(', ');
+}

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

@@ -5,7 +5,7 @@ import TableRowMapper from '../table-wrapper/table-row-mapper.component';
 import { getCell } from '../../utils/utils';
 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 { getMoh505 } from '../../resources/moh-505.resource';
 import MOH505Header from './moh-505-header.component';
 import { useSearchParams } from 'react-router-dom';
@@ -15,7 +15,10 @@ import styles from './moh-505.scss';
 
 const Moh505Report: React.FC = () => {
   const [moh505Data, setMoh505Data] = useState<any>({});
-  const isReportGenerated = hasReportData(moh505Data);
+  /* 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();
+  const isReportGenerated = hasReportData(moh505Data) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filters, setFilters] = useState<{ locationUuids?: string; startDate?: string; endDate?: string }>({});
 
@@ -52,6 +55,7 @@ const Moh505Report: React.FC = () => {
       const result = await getMoh505(params);
       const flatData = Object.assign({}, ...result);
       setMoh505Data(flatData);
+      markGenerated(params.locationUuids);
       setFilters({ locationUuids: params.locationUuids, startDate, endDate });
     } catch (error: any) {
       showReportError('the MOH-505 report', error);
@@ -397,7 +401,9 @@ const Moh505Report: React.FC = () => {
         isReportGenerated={isReportGenerated}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-505" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH-505" isLocationChanged={hasReportData(moh505Data) && hasLocationChanged} />
+      )}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <div className={styles.sheet}>

package/src/reports/moh-705B/moh-204b-register.component.tsx

@@ -37,6 +37,15 @@ const Moh204BRegisterComponent: React.FC = () => {
     [startDate, endDate, locationUuids, indicator],
   );
 
+  const removePatientListDuplicates = async () => {
+    const list = await fetchAll();
+    const filtered = uniqueBy(list, 'person_id');
+    return filtered;
+  };
+
+  const uniqueBy = (arr: any, key: string) =>
+    [...new Map(arr.map((item: any) => [item[key], item])).values()] as Array<Record<string, any>>;
+
   return (
     <RegisterLayout
       parentLabel="MOH-705B Report"
@@ -49,7 +58,7 @@ const Moh204BRegisterComponent: React.FC = () => {
       total={total}
       isTotalExact={isTotalExact}
       onPageChange={onPageChange}
-      fetchAll={fetchAll}
+      fetchAll={removePatientListDuplicates}
       columns={moh204bExportColumns}
     >
       <div className={styles.tableContainer}>
@@ -190,7 +199,7 @@ const Moh204BRegisterComponent: React.FC = () => {
           </TableHead>
           <TableBody>
             {patientlist?.length > 0 ? (
-              patientlist?.map((patient, index) => (
+              uniqueBy(patientlist, 'person_id')?.map((patient, index) => (
                 <TableRow key={patient.person_id || index}>
                   <TableCell>{patient.date}</TableCell>
                   <TableCell>{patient.opd_number_new_visit}</TableCell>