@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.45

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

@@ -1,17 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import styles from './moh-366.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { getMoh366PatientList } from '../../../resources/moh-731.resource';
-import { Button, Loading } from '@carbon/react';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
+import { moh366Columns } from './moh-366.columns';
 
 interface Moh366RegisterProps {}
 const Moh366Register: React.FC<Moh366RegisterProps> = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
 
   const startDate = searchParams.get('startDate');
@@ -20,48 +17,44 @@ const Moh366Register: React.FC<Moh366RegisterProps> = () => {
   const indicator = searchParams.get('indicator');
   const gender = searchParams.get('gender');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator || gender === null) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          gender,
-        };
-
-        const data = await getMoh366PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, gender]);
-
-  function navigateBack() {
-    navigate('/moh-731');
-  }
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh366PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        gender,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, gender],
+  );
+
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      {isLoading && <Loading />}
-      <div className={styles.container}>
-        <b>Ministry Of Health</b>
-        <b>HIV Care Treatment Daily Activity Register MOH 366</b>
-        <b>Ver. July 2023</b>
-      </div>
+    <RegisterLayout
+      parentLabel="MOH-731 Report"
+      parentPath="/moh-731"
+      title="HIV Care Treatment Daily Activity Register MOH 366"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh366Columns}
+    >
       <table className={classNames(styles.table, styles.tableBordered, styles.textCentre)}>
         <thead>
           <tr>
@@ -114,7 +107,7 @@ const Moh366Register: React.FC<Moh366RegisterProps> = () => {
             <th colSpan={4} className={styles.textCentre}>
               Indicate Y/N/NA
             </th>
-            <th colSpan={2} rowSpan={2} className={classNames(styles.textCenter, styles.verticalText)}>
+            <th colSpan={2} rowSpan={2} className={classNames(styles.textCentre, styles.verticalText)}>
               E=Established <br />
               NE=Not Established
             </th>
@@ -138,38 +131,38 @@ const Moh366Register: React.FC<Moh366RegisterProps> = () => {
             </th>
           </tr>
           <tr>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt; 1 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt; 1 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>1-4 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>1-4 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>5-9 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>5-9 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>10-14 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>10-14 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15-19 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15-19 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>20-24 yrs(M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>20-24 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>25+ yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>25+ yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt 15 yrs</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15+ yrs</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt; 15 yrs</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15+ yrs</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt; 1 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>&lt; 1 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>1-4 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>1-4 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>5-9 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>5-9 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>10-14 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>10-14 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15-19 yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>15-19 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>20-24 yrs(M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>20-24 yrs (F)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>25+ yrs (M)</th>
-            <th className={classNames(styles.textCenter, styles.verticalText)}>25+ yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt; 1 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt; 1 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>1-4 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>1-4 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>5-9 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>5-9 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>10-14 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>10-14 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15-19 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15-19 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>20-24 yrs(M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>20-24 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>25+ yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>25+ yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt 15 yrs</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15+ yrs</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt; 15 yrs</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15+ yrs</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt; 1 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>&lt; 1 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>1-4 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>1-4 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>5-9 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>5-9 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>10-14 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>10-14 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15-19 yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>15-19 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>20-24 yrs(M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>20-24 yrs (F)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>25+ yrs (M)</th>
+            <th className={classNames(styles.textCentre, styles.verticalText)}>25+ yrs (F)</th>
           </tr>
           <tr>
             <th className={styles.textCentre}>(a)</th>
@@ -471,7 +464,7 @@ const Moh366Register: React.FC<Moh366RegisterProps> = () => {
           ))}
         </tbody>
       </table>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-731/registers/prep-register.component.tsx

@@ -1,15 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import styles from './prep-registers.scss';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import styles from '../../../common/report-register/register-table.scss';
+import { useSearchParams } from 'react-router-dom';
 import { getPrepPatientList } from '../../../resources/moh-731.resource';
-import { Button, Loading } from '@carbon/react';
 import classNames from 'classnames';
+import { prepExportColumns } from './prep.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 const PrepRegisterComponent: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
 
   const startDate = searchParams.get('startDate');
@@ -18,37 +15,28 @@ const PrepRegisterComponent: React.FC = () => {
   const indicator = searchParams.get('indicator');
   const gender = searchParams.get('gender');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator || !gender) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          gender,
-        };
-
-        const data = await getPrepPatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, gender]);
-
-  function navigateBack() {
-    navigate('/moh-731');
-  }
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getPrepPatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        gender,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, gender],
+  );
 
   const transformDate = (date: string): string => {
     if (!date) return '';
@@ -60,16 +48,20 @@ const PrepRegisterComponent: React.FC = () => {
     }).format(new Date(date));
   };
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      {isLoading && <Loading />}
-      <div className={styles.container}>
-        <b>Ministry Of Health</b>
-        <b>MOH 267 PrEP Daily Activity Register</b>
-        <b>Ver. July 2023</b>
-      </div>
+    <RegisterLayout
+      parentLabel="MOH-731 Report"
+      parentPath="/moh-731"
+      title="MOH 267 PrEP Daily Activity Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={prepExportColumns}
+    >
       <table className={classNames(styles.table, styles.tableBordered, styles.textCentre)}>
         <thead>
           <tr>
@@ -141,40 +133,40 @@ const PrepRegisterComponent: React.FC = () => {
             </th>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (a)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (b)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (l)
             </th>
-            <th colSpan={3} className={styles.textCenter}>
+            <th colSpan={3} className={styles.textCentre}>
               (c)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (d)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (e)
             </th>
-            <th colSpan={3} className={styles.textCenter}>
+            <th colSpan={3} className={styles.textCentre}>
               (f)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (g)
             </th>
-            <th colSpan={3} className={styles.textCenter}>
+            <th colSpan={3} className={styles.textCentre}>
               (h)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (i)
             </th>
-            <th colSpan={2} className={styles.textCenter}>
+            <th colSpan={2} className={styles.textCentre}>
               (j)
             </th>
-            <th colSpan={4} className={styles.textCenter}>
+            <th colSpan={4} className={styles.textCentre}>
               (k)
             </th>
           </tr>
@@ -241,23 +233,23 @@ const PrepRegisterComponent: React.FC = () => {
               <b>TOTAL this Page</b>
             </td>
 
-            <td colSpan={2} className={styles.textCenter}>
+            <td colSpan={2} className={styles.textCentre}>
               {patientlist.length}
             </td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={3} className={styles.textCenter}></td>
+            <td colSpan={3} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={3} className={styles.textCenter}></td>
+            <td colSpan={3} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={4} className={styles.textCenter}></td>
+            <td colSpan={4} className={styles.textCentre}></td>
           </tr>
 
           <tr>
@@ -265,27 +257,27 @@ const PrepRegisterComponent: React.FC = () => {
               <b>TOTAL this Month</b>
             </td>
 
-            <td colSpan={2} className={styles.textCenter}>
+            <td colSpan={2} className={styles.textCentre}>
               {patientlist.length}
             </td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={3} className={styles.textCenter}></td>
+            <td colSpan={3} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={3} className={styles.textCenter}></td>
+            <td colSpan={3} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={2} className={styles.textCenter}></td>
+            <td colSpan={2} className={styles.textCentre}></td>
 
-            <td colSpan={4} className={styles.textCenter}></td>
+            <td colSpan={4} className={styles.textCentre}></td>
           </tr>
         </tbody>
       </table>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-731/registers/prep.columns.ts

@@ -0,0 +1,34 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * The PrEP register's columns, with the headings the register prints.
+ *
+ * This register prints two rows per client with cells spanning both, so the
+ * headings could not be paired to fields by position; they are taken from the
+ * header row by the column letter each one carries.
+ */
+export const prepExportColumns: RegisterColumn[] = [
+  { header: 'PrEP No (a)', value: (row) => row.PrEP_Number ?? '' },
+  { header: 'Date of Visit (b)', value: (row) => row.Date_Of_Visit ?? '' },
+  { header: 'AMRSID (l)', value: (row) => row.amrsId ?? '' },
+  { header: 'National Identification Number (c)', value: (row) => row.National_ID ?? '' },
+  { header: 'National Unique Patient Identifier (NUPI) (c)', value: (row) => row.NUPI ?? '' },
+  { header: 'Age (d)', value: (row) => row.Age ?? '' },
+  { header: 'Sex (M/F) (e)', value: (row) => row.Sex ?? '' },
+  {
+    header: 'Population type (f): 1. General Population 2. Discordant Couple 3. MSM/MSW 4. FSW 5. PWID/PWUD 6. VP',
+    value: (row) => row.population_type ?? '',
+  },
+  {
+    header: 'Client PrEP Status (g): N-New C-Continuing D-Discontinued R-Restart',
+    value: (row) => row.client_prep_status ?? '',
+  },
+  {
+    header:
+      'PrEP Method (h): 1. Daily oral PrEP 2. Event driven oral PrEP 3. Dapivirine Vaginal ring 4. Cabotegravir Injectable',
+    value: (row) => row.prep_method ?? '',
+  },
+  { header: 'HIV Results (N/P/Ic/NA) (i)', value: (row) => row.HIV_result ?? '' },
+  { header: 'Diagnosed with STI (N/Y) (j)', value: (row) => row.with_STI ?? '' },
+  { header: 'Remarks (k)', value: (row) => row.remarks ?? '' },
+];