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

package/src/reports/moh-705a/moh-705a.scss

@@ -64,23 +64,65 @@ $pad: 3mm;
 }
 
 .container {
-  overflow-x: auto;
+  overflow-x: visible;
   margin: 0;
 }
 
 .table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
+  font-family: inherit;
+}
+
+.numberColumn {
+  width: 3mm;
+}
+
+.diseaseColumn {
+  width: 34mm;
+}
+
+.dayColumn {
+  width: 4.5mm;
+}
+
+.totalColumn {
+  width: 8mm;
 }
 
 .tableBordered td,
 .tableBordered th {
-  padding: 1mm 1.5mm;
+  box-sizing: border-box;
+  padding: 0.6mm 0.45mm;
   font-size: $text;
   text-align: left;
   border: $rule;
 }
 
+.tableBordered tbody td:nth-child(n + 3):not(:last-child),
+.tableBordered thead th:nth-child(n + 2):not(:last-child) {
+  width: 4.5mm;
+  font-size: 5pt;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.tableBordered tbody td:last-child,
+.tableBordered thead th:last-child {
+  width: 8mm;
+  text-align: center;
+}
+
+.tableBordered tbody td:nth-child(2) {
+  font-family: inherit;
+  overflow-wrap: anywhere;
+}
+
+.tableBordered tbody td:nth-child(n + 3) {
+  text-align: center;
+}
+
 .tableBordered th {
   font-weight: 700;
   color: $ink;

package/src/reports/moh-705a/registers/moh-204a-register.component.tsx

@@ -8,7 +8,7 @@ import { getMoh705aPatientList } from '../../../resources/moh-705.resource';
 import { moh204aExportColumns } from './moh-204a.columns';
 import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
-interface Moh204ARegisterComponentProps {}
+interface Moh204ARegisterComponentProps { }
 
 const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () => {
   const [searchParams] = useSearchParams();
@@ -39,6 +39,15 @@ const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () =>
     [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 Record<string, any>[];
+
   return (
     <RegisterLayout
       parentLabel="MOH-705A Report"
@@ -51,7 +60,7 @@ const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () =>
       total={total}
       isTotalExact={isTotalExact}
       onPageChange={onPageChange}
-      fetchAll={fetchAll}
+      fetchAll={removePatientListDuplicates}
       columns={moh204aExportColumns}
     >
       <div className={styles.tableContainer}>
@@ -273,7 +282,7 @@ const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () =>
           </TableHead>
           <TableBody>
             {patientlist?.length > 0 ? (
-              patientlist?.map((patient) => (
+              uniqueBy(patientlist, 'person_id')?.map((patient) => (
                 <TableRow key={patient.person_id || patient.id}>
                   <TableCell>{patient.date}</TableCell>
                   <TableCell>{patient.opd_number_new_visit}</TableCell>

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

@@ -12,7 +12,7 @@ import SpecimenReferralToHigherLevels from './sub-reports/specimen-referral-to-h
 import DrugSusceptibilityTesting from './sub-reports/drug-susceptibility-testing/drug-susceptibility-testing.component';
 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 { getMoh706 } from '../../resources/moh-706.resource';
 import styles from './moh-706.scss';
 import MOH706Header from './moh-706-header.component';
@@ -22,7 +22,10 @@ import { ReportPage } from '../../common/report-page';
 
 const MoH706Report: React.FC = () => {
   const [moh706Data, setMoh706Data] = useState<any>({});
-  const isReportGenerated = hasReportData(moh706Data);
+  /* 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(moh706Data) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filters, setFilters] = useState<{ locationUuids?: string; startDate?: string; endDate?: string }>({});
 
@@ -59,6 +62,7 @@ const MoH706Report: React.FC = () => {
       const result = await getMoh706(params);
       const flatData = Object.assign({}, ...result);
       setMoh706Data(flatData);
+      markGenerated(params.locationUuids);
       setFilters({ locationUuids: params.locationUuids, startDate, endDate });
     } catch (error: any) {
       showReportError('the MOH-706 report', error);
@@ -77,7 +81,9 @@ const MoH706Report: React.FC = () => {
         isReportGenerated={isReportGenerated}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-706" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH-706" isLocationChanged={hasReportData(moh706Data) && hasLocationChanged} />
+      )}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <div className={styles.sheet}>

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 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 styles from './moh-710.scss';
 import classNames from 'classnames';
@@ -17,7 +17,10 @@ const Moh710Report: React.FC = () => {
     const saved = sessionStorage.getItem('moh710Data');
     return saved ? JSON.parse(saved) : [];
   });
-  const isReportGenerated = hasReportData(moh710Data);
+  /* 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('moh710Location');
+  const isReportGenerated = hasReportData(moh710Data) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const navigate = useNavigate();
 
@@ -65,6 +68,7 @@ const Moh710Report: React.FC = () => {
       const data = await getMoh710(params);
       const flatData = Object.assign({}, ...data.result);
       setMoh710Data(flatData);
+      markGenerated(params.locationUuids);
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
@@ -94,7 +98,9 @@ const Moh710Report: React.FC = () => {
         generatedPeriod={{ startDate, endDate }}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-710" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH-710" isLocationChanged={hasReportData(moh710Data) && hasLocationChanged} />
+      )}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <div className={styles.mainTitleBox}>

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 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 styles from './moh711.scss';
 import classNames from 'classnames';
@@ -30,7 +30,10 @@ const Moh711Report: React.FC = () => {
     const saved = sessionStorage.getItem('moh711Data');
     return saved ? JSON.parse(saved) : [];
   });
-  const isReportGenerated = hasReportData(moh711Data);
+  /* 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('moh711Location');
+  const isReportGenerated = hasReportData(moh711Data) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [startDate, setStartDate] = useState<string>(() => {
     return sessionStorage.getItem('moh711StartDate') || '';
@@ -77,6 +80,7 @@ const Moh711Report: React.FC = () => {
       const data = await getMoh711(params);
       const flatData = Object.assign({}, ...data.result);
       setMoh711Data(flatData);
+      markGenerated(params.locationUuids);
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
@@ -95,7 +99,9 @@ const Moh711Report: React.FC = () => {
         generatedPeriod={{ startDate, endDate }}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-711" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder reportName="MOH-711" isLocationChanged={hasReportData(moh711Data) && hasLocationChanged} />
+      )}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <div className={styles.headerContainer}>

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 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 styles from './moh717.scss';
 import classNames from 'classnames';
@@ -28,7 +28,10 @@ const Moh717Report: React.FC = () => {
     const saved = sessionStorage.getItem('moh717ReportData');
     return saved ? JSON.parse(saved) : [];
   });
-  const isReportGenerated = hasReportData(moh717ReportData);
+  /* 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('moh717Location');
+  const isReportGenerated = hasReportData(moh717ReportData) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [startDate, setStartDate] = useState<string>(() => {
     return sessionStorage.getItem('moh717StartDate') || '';
@@ -72,6 +75,7 @@ const Moh717Report: React.FC = () => {
       const data = await getMoh717(params);
       const flatData = Object.assign({}, ...data.result);
       setMoh717ReportData(flatData);
+      markGenerated(params.locationUuids);
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
@@ -89,7 +93,12 @@ const Moh717Report: React.FC = () => {
         generatedPeriod={{ startDate, endDate }}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-717" />}
+      {!isLoading && !isReportGenerated && (
+        <ReportPlaceholder
+          reportName="MOH-717"
+          isLocationChanged={hasReportData(moh717ReportData) && hasLocationChanged}
+        />
+      )}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <div className={styles.headerContainer}>