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

package/src/reports/moh-711/registers/moh-406.columns.ts

@@ -0,0 +1,133 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 406 as the register prints it: one column per cell, in the order they appear.
+ *
+ * The last 6 columns are rendered by the table but have no headings above
+ * them -- the header row is 43 columns wide against 49 of data. They carry
+ * their field names rather than headings borrowed from neighbouring columns.
+ */
+export const moh406ExportColumns: RegisterColumn[] = [
+  { header: 'Registration Information - Date of Visit (dd/mm/yyyy)', value: (row) => row.date_of_visit ?? '' },
+  { header: 'Registration Information - PNC Number (New Visit) - NUPI', value: (row) => row.pnc_number ?? '' },
+  { header: 'Registration Information - PNC Number/NUPI (Revisit)', value: (row) => row.pnc_number ?? '' },
+  { header: 'Registration Information - AMRSID', value: (row) => row.amrsID ?? '' },
+  {
+    header: 'Registration Information - Full Name(first name, middle and surname)',
+    value: (row) => row.full_names ?? '',
+  },
+  {
+    header: 'Registration Information - Date of Birth (dd/mm/yyyy) - Age in Years',
+    value: (row) => row.date_of_birth ?? '',
+  },
+  { header: 'Registration Information - County/ SubCounty', value: (row) => row.subcounty_county ?? '' },
+  {
+    header: 'Registration Information - Village/Estate/ Landmark - Telephone number',
+    value: (row) => row.village_estate_landmark ?? '',
+  },
+  { header: 'Maternity History - Date of Delivery (dd/mm/yyyy)', value: (row) => row.date_of_delivery ?? '' },
+  {
+    header: 'Maternity History - Place of Delivery 1)Facility 2) Home 3) BBA',
+    value: (row) => row.place_of_delivery ?? '',
+  },
+  {
+    header: 'Maternity History - Mode of Delivery 1) SVD 2) CS 3) Breech 4) AVD',
+    value: (row) => row.mode_of_delivery ?? '',
+  },
+  {
+    header: 'Postpartum Visit - Timing Mother - 1=no change, 2=10 days to 14 days; 3=4 to 6 weeks; 4=4 to 6 months',
+    value: (row) => row.timing_mother ?? '',
+  },
+  {
+    header: 'Postpartum Visit - Timing Baby - 1=no change, 2=10 days to 14 days; 3=4 to 6 weeks; 4=4 to 6 months',
+    value: (row) => row.timing_baby ?? '',
+  },
+  { header: 'Vital Signs - Temp', value: (row) => row.temperature ?? '' },
+  { header: 'Vital Signs - Pulse', value: (row) => row.pulse ?? '' },
+  { header: 'Vital Signs - Blood Pressure', value: (row) => row.blood_pressure ?? '' },
+  {
+    header: 'Postnatal Examinations - Pallor (Y/N) - 1= mild; 2= moderate; 3= severe',
+    value: (row) => row.pallor_present ?? '',
+  },
+  {
+    header: 'Postnatal Examinations - Breast 1=normal 2= cracked nipple 3=engorged 4=mastitis',
+    value: (row) => row.breast ?? '',
+  },
+  {
+    header: 'Postnatal Examinations - Uterus 1= contracte d 2= not contracte d 3= Others Specify',
+    value: (row) => row.uterus ?? '',
+  },
+  { header: 'Postnatal Examinations - PPH 1=present 2=Absent', value: (row) => row.pph ?? '' },
+  {
+    header: 'Postnatal Examinations - C-Section Site 1=Bleeding 2=Normal 3=Infected 4=Gapping 5=N/A',
+    value: (row) => row.c_section_site ?? '',
+  },
+  { header: 'Postnatal Examinations - Lochia 1=Normal 2=Foul smelling 3=Excessi ve', value: (row) => row.lochia ?? '' },
+  {
+    header: 'Postnatal Examinations - Episiotomy 1=Repaired 2=Gaping 3=Infected 4=Healed 5=N/',
+    value: (row) => row.episiotomy ?? '',
+  },
+  { header: 'Postnatal Examinations - Fistula 1=VVF 2=RVF 3=VVR 4=Non', value: (row) => row.fistula ?? '' },
+  {
+    header: 'TB screening - TB Screening 1: Presumed TB 2: No signs 3: On TB treatment 4: On TPT 5: Not done',
+    value: (row) => row.tb_screening ?? '',
+  },
+  { header: 'Tested PNC - (I/R/ND/KP)', value: (row) => row.tested_pnc ?? '' },
+  {
+    header: 'HIV Test 1 - Kit Name: - Lot No. - Expiry No. / / - (N,P,I,NA)',
+    value: (row) => row.hiv_test_1_kit_name ?? '',
+  },
+  {
+    header: 'HIV Test 2 - Kit Name: - Lot No. - Expiry No. / / - (N,P,I,NA)',
+    value: (row) => row.hiv_test_2_kit_name ?? '',
+  },
+  {
+    header: 'HIV Test 3 - Kit Name: - Lot No. - Expiry No. / / - (N,P,I,NA)',
+    value: (row) => row.hiv_test_3_kit_name ?? '',
+  },
+  { header: 'Results in PNC - <=6wks - (N/P/Ic/NA)', value: (row) => row.results_less_6_weeks ?? '' },
+  { header: 'Results in PNC - &gt;6wks - (N/P/Ic/NA)', value: (row) => row.results_greater_6_weeks ?? '' },
+  {
+    header: 'HAART & Infant Prophylaxis and Treatment - <=6wks - Infant - NVP +AZT +CTX or NVP +CTX - (Y/N/NA/R)',
+    value: (row) => row.infant_prophylaxis_less_6_weeks ?? '',
+  },
+  {
+    header: 'HAART & Infant Prophylaxis and Treatment - <=6wks - Mother - HAART - (Y/N/NA/R)',
+    value: (row) => row.maternal_haart_less_6_weeks ?? '',
+  },
+  {
+    header: 'HAART & Infant Prophylaxis and Treatment - &gt;6wks - Infant - NVP +AZT +CTX or NVP +CTX - (Y/N/NA/R)',
+    value: (row) => row.infant_prophylaxis_greater_6_weeks ?? '',
+  },
+  {
+    header: 'HAART & Infant Prophylaxis and Treatment - &gt;6wks - Mother - HAART - (Y/N/NA/R)',
+    value: (row) => row.maternal_haart_greater_6_weeks ?? '',
+  },
+  {
+    header:
+      'Cervical Cancer Screening (VIA/VILLI/PAP Smear/ND) - Results 1=Normal, 2=Suspected, 3= Confirmed, 4= Not done',
+    value: (row) => row.cervical_cancer_method ?? '',
+  },
+  {
+    header: 'Modern Post Partum Family Planning (Y/N) - Counseled Method received',
+    value: (row) => row.counselled ?? '',
+  },
+  { header: 'Other Maternal Complications', value: (row) => row.other_maternal_complications ?? '' },
+  { header: 'Haematinics (Y/N)', value: (row) => row.haematinics ?? '' },
+  {
+    header: 'Refferals - From - 1 = Community Unit 2 = Another Health Facility 3 = Not Applicable',
+    value: (row) => row.referrals_from ?? '',
+  },
+  {
+    header: 'Refferals - To - 1 = Community Unit 2 = Another Health Facility 3 = Not Applicable',
+    value: (row) => row.referrals_to ?? '',
+  },
+  { header: 'Refferals - Reasons for referral (specify)', value: (row) => row.reason_for_referral ?? '' },
+  { header: 'Remarks', value: (row) => row.remarks ?? '' },
+  { header: 'Nupi', value: (row) => row.nupi ?? '' },
+  { header: 'Age', value: (row) => row.age ?? '' },
+  { header: 'Phone number', value: (row) => row.phone_number ?? '' },
+  { header: 'Pallor', value: (row) => row.pallor ?? '' },
+  { header: 'Cervical cancer results', value: (row) => row.cervical_cancer_results ?? '' },
+  { header: 'Family planning method', value: (row) => row.family_planning_method ?? '' },
+];

package/src/reports/moh-711/registers/moh-510-register.component.tsx

@@ -1,16 +1,11 @@
-import { Button, Loading } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
 
-import styles from '../moh711.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import { getMoh510PatientList } from '../../../resources/moh-711.resource';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh510Register: React.FC = () => {
-  const navigate = useNavigate();
-
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
 
   const startDate = searchParams.get('startDate');
@@ -18,43 +13,42 @@ const Moh510Register: React.FC = () => {
   const locationUuids = searchParams.get('locationUuids');
   const indicator = searchParams.get('indicator');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-        };
-
-        const data = await getMoh510PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator]);
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh510PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator],
+  );
 
-  function navigateBack() {
-    navigate('/moh-711');
-  }
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
-    </>
+    <RegisterLayout
+      parentLabel="MOH-711 Report"
+      parentPath="/moh-711"
+      title="MOH 510 Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+    ></RegisterLayout>
   );
 };
 

package/src/reports/moh-711/registers/moh-511-register.component.tsx

@@ -1,17 +1,15 @@
-import { Button, Loading, Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
+import { Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import styles from '../moh711.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import { getMoh511PatientList } from '../../../resources/moh-711.resource';
 import { moh511Columns } from './type';
 import classNames from 'classnames';
+import { moh511ExportColumns } from './moh-511.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh511Register: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
   const location = useLocation();
 
@@ -21,43 +19,44 @@ const Moh511Register: React.FC = () => {
   const indicator = searchParams.get('indicator');
   const reportName = location.state?.reportName || '';
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator || !reportName) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          reportName,
-        };
-
-        const data = await getMoh511PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, reportName]);
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh511PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, reportName],
+  );
 
-  function navigateBack() {
-    navigate(location.state?.from || '/moh-711');
-  }
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
+    <RegisterLayout
+      parentLabel="MOH-711 Report"
+      parentPath="/moh-711"
+      title="MOH 511 Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh511ExportColumns}
+    >
       <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <TableHead>
           <TableRow>
@@ -264,7 +263,7 @@ const Moh511Register: React.FC = () => {
           )}
         </TableBody>
       </Table>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-711/registers/moh-511.columns.ts

@@ -0,0 +1,59 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 511 as the register prints it: one column per cell, in the order they appear.
+ */
+export const moh511ExportColumns: RegisterColumn[] = [
+  { header: 'Serial No. - A', value: (row) => row.serial_no ?? '' },
+  { header: 'Date. (DD:MM:YYYY) - B', value: (row) => row.visit_date ?? '' },
+  { header: 'CWC No. (New Visit) - C', value: (row) => row.cwc_number_new ?? '' },
+  { header: 'CWC No. (Revisit) - D', value: (row) => row.cwc_number_revisit ?? '' },
+  { header: 'BIRTH NOTIFICATION (NUMBER) - E', value: (row) => row.birth_notification_number ?? '' },
+  { header: 'Full Names (Three names) - F', value: (row) => row.full_name ?? '' },
+  { header: 'Age - G', value: (row) => row.age ?? '' },
+  { header: 'Sex - H', value: (row) => row.sex ?? '' },
+  { header: 'County/Sub- county - I', value: (row) => row.county_sub_county ?? '' },
+  { header: 'Village /Estate / Landmark - J', value: (row) => row.village_estate_landmark ?? '' },
+  { header: 'Telephone number - K', value: (row) => row.phone_number ?? '' },
+  { header: 'Weight in Kgs - L', value: (row) => row.weight_kg ?? '' },
+  { header: 'Weight categories: (1=Normal 2=UW 3=SUW 4=OW 5=Obese) - M', value: (row) => row.weight_category ?? '' },
+  { header: 'Height / Length in cm - N', value: (row) => row.height ?? '' },
+  {
+    header: 'Height/Length categories: (1=Normal 2=Stunted 3=Sev. Stunted) - O',
+    value: (row) => row.height_category ?? '',
+  },
+  { header: 'MUAC 1.Green 2.Yellow 3.Red - P', value: (row) => row.muac ?? '' },
+  {
+    header: 'Exclusive Breast feeding (less than 6 months)(Y/N) - Q',
+    value: (row) => row.exclusive_breastfeeding_less_6_months ?? '',
+  },
+  {
+    header: 'Vitamin A supplimentation: (6-59 months) (1=6- 11 months, 2=12-59 months, 3=Not supplimented) - R',
+    value: (row) => row.vitamin_A_supplementation ?? '',
+  },
+  { header: 'Dewormed (Y/N) - S', value: (row) => row.dewormed ?? '' },
+  { header: 'MNPs supplimentation:(6-23 children) - T', value: (row) => row.mnps_supplimentation ?? '' },
+  {
+    header: 'Childs assessed for Developmental milestones including 1st Haed control ,2= sitting, 3=talking - U',
+    value: (row) => row.developmental_milestones ?? '',
+  },
+  {
+    header:
+      'Any Danger Signs 1.Unable to breastfeed 2.Unable to drink 3.Vomits everything 4.Bloody diarrhoea 5.Has oedema 6.Has convulsions - V',
+    value: (row) => row.danger_signs ?? '',
+  },
+  { header: 'Any Disability - W', value: (row) => row.disability ?? '' },
+  { header: 'Immunization status up to date(Y/N) - X', value: (row) => row.immunization_status_up_to_date ?? '' },
+  { header: 'LLIN gievn to under 1 years(Y/N) - Y', value: (row) => row.llin_supplimentation_given ?? '' },
+  { header: 'Follow up for: 1=Nutrition service 2=Rehabilitation service - Z', value: (row) => row.follow_up ?? '' },
+  {
+    header: '1=referred from CU; 2= referred from another H/F; 3=Not applicable - AA',
+    value: (row) => row.referred_from ?? '',
+  },
+  {
+    header: '1=referred to CU; 2= referred to another H/F; 3=Not applicable - AB',
+    value: (row) => row.referred_to ?? '',
+  },
+  { header: 'Reason for referral ....specify - AC', value: (row) => row.reason_for_referral ?? '' },
+  { header: 'REMARKS - AD', value: (row) => row.remarks ?? '' },
+];

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

@@ -16,7 +16,7 @@ const ANCComponent: React.FC<ANCComponentProps> = ({ moh711Data, startDate, endD
   const location = useLocation();
   const navigateToRegister = (indicator: string) => {
     navigate(
-      `/moh-405-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-405-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
       {
         state: {
           from: location.pathname,
@@ -26,7 +26,7 @@ const ANCComponent: React.FC<ANCComponentProps> = ({ moh711Data, startDate, endD
     );
   };
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -152,7 +152,7 @@ const ANCComponent: React.FC<ANCComponentProps> = ({ moh711Data, startDate, endD
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

package/src/reports/moh-711/sections/cervical-cancer.component.tsx

@@ -21,11 +21,11 @@ const CervicalCancerComponent: React.FC<CervicalCancerComponentProps> = ({
 
   const navigateToRegister = (indicator: string) => {
     navigate(
-      `/moh-412-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-412-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
     );
   };
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -141,7 +141,7 @@ const CervicalCancerComponent: React.FC<CervicalCancerComponentProps> = ({
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -9,10 +9,9 @@ interface ChanisComponentProps {
 
 const ChanisComponent: React.FC<ChanisComponentProps> = ({ moh711Data }) => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
-          <th colSpan={6}></th>
           <tr>
             <th colSpan={6}>F. Child Health and Nutrition Information System</th>
           </tr>
@@ -360,7 +359,7 @@ const ChanisComponent: React.FC<ChanisComponentProps> = ({ moh711Data }) => {
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

package/src/reports/moh-711/sections/family-planning.component.tsx

@@ -9,7 +9,7 @@ interface FamilyPlanningComponentProps {
 
 const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh711Data }) => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -214,7 +214,7 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -9,7 +9,7 @@ interface GBVComponentProps {
 
 const GBVComponent: React.FC<GBVComponentProps> = ({ moh711Data }) => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -108,7 +108,7 @@ const GBVComponent: React.FC<GBVComponentProps> = ({ moh711Data }) => {
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -16,7 +16,7 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data, sta
   const location = useLocation();
   const navigateToRegister = (indicator: string) => {
     navigate(
-      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
       {
         state: {
           from: location.pathname,
@@ -27,7 +27,7 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data, sta
   };
 
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -58,11 +58,6 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data, sta
               {moh711Data.assisted_vaginal_delivery}
             </td>
           </tr>
-          <tr>
-            <td></td>
-            <td colSpan={2}></td>
-            <td></td>
-          </tr>
           <tr>
             <th colSpan={3}>Total Deliveries</th>
             <th>
@@ -319,7 +314,7 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data, sta
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

package/src/reports/moh-711/sections/medical-social-work.component.tsx

@@ -9,7 +9,7 @@ interface MedicalSocialWorkComponentProps {
 
 const MedicalSocialWorkComponent: React.FC<MedicalSocialWorkComponentProps> = ({ moh711Data }) => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -64,19 +64,9 @@ const MedicalSocialWorkComponent: React.FC<MedicalSocialWorkComponentProps> = ({
             <td>Referrals</td>
             <td>{moh711Data.mental_health_referral}</td>
           </tr>
-          <tr>
-            <td></td>
-            <td></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td></td>
-            <td></td>
-          </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -9,7 +9,7 @@ interface OtherComponentProps {
 
 const OtherComponent: React.FC<OtherComponentProps> = ({ moh711Data }) => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -40,7 +40,7 @@ const OtherComponent: React.FC<OtherComponentProps> = ({ moh711Data }) => {
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -9,7 +9,7 @@ interface PhysiotherapyComponentProps {
 
 const PhysiotherapyComponent: React.FC<PhysiotherapyComponentProps> = () => {
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -54,7 +54,7 @@ const PhysiotherapyComponent: React.FC<PhysiotherapyComponentProps> = () => {
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };
 

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

@@ -16,7 +16,7 @@ const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data, startDate, endD
   const location = useLocation();
   const navigateToRegister = (indicator: string) => {
     navigate(
-      `/moh-406-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-406-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
       {
         state: {
           from: location.pathname,
@@ -26,7 +26,7 @@ const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data, startDate, endD
     );
   };
   return (
-    <>
+    <div className={styles.section}>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
@@ -109,16 +109,18 @@ const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data, startDate, endD
           <tr>
             <td>7</td>
             <td colSpan={2}>Number of Cases of Fistula</td>
-            <td onClick={() => navigateToRegister('pnc_new_clients')}>{moh711Data.fistula_cases}</td>
+            <td onClick={() => navigateToRegister('fistula_cases')}>{moh711Data.fistula_cases}</td>
           </tr>
           <tr>
             <td>8</td>
             <td colSpan={2}>No referred from the Community unit to PNC</td>
-            <td onClick={() => navigateToRegister('pnc_new_clients')}>{moh711Data.referrals_from_community}</td>
+            <td onClick={() => navigateToRegister('referrals_from_community')}>
+              {moh711Data.referrals_from_community}
+            </td>
           </tr>
         </tbody>
       </table>
-    </>
+    </div>
   );
 };