@ampath/esm-reports-app 1.0.0-next.26 → 1.0.0-next.27

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

@@ -2,12 +2,23 @@ import React from 'react';
 
 import styles from '../moh711.scss';
 import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
 
 interface MaternityComponentProps {
   moh711Data: any;
+  startDate: string;
+  endDate: string;
+  locationUuids: string;
 }
 
-const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) => {
+const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data, startDate, endDate, locationUuids }) => {
+  const navigate = useNavigate();
+  const navigateToRegister = (indicator: string) => {
+    navigate(
+      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+    );
+  };
+
   return (
     <>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -21,22 +32,24 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) =
           <tr>
             <td>1</td>
             <td colSpan={2}>Normal Deliveries</td>
-            <td>{moh711Data.normal_deliveries}</td>
+            <td onClick={() => navigateToRegister('normal_deliveries')}>{moh711Data.normal_deliveries}</td>
           </tr>
           <tr>
             <td>2</td>
             <td colSpan={2}>Caesarean Sections</td>
-            <td>{moh711Data.caesarian_sections}</td>
+            <td onClick={() => navigateToRegister('caesarian_sections')}>{moh711Data.caesarian_sections}</td>
           </tr>
           <tr>
             <td>3</td>
             <td colSpan={2}>Breach Delivery</td>
-            <td>{moh711Data.breach_delivery}</td>
+            <td onClick={() => navigateToRegister('breach_delivery')}>{moh711Data.breach_delivery}</td>
           </tr>
           <tr>
             <td>4</td>
             <td colSpan={2}>Assisted Vaginal Deliveries(Vacuum Extraction)</td>
-            <td>{moh711Data.assisted_vaginal_delivery}</td>
+            <td onClick={() => navigateToRegister('assisted_vaginal_delivery')}>
+              {moh711Data.assisted_vaginal_delivery}
+            </td>
           </tr>
           <tr>
             <td></td>
@@ -56,119 +69,137 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) =
             <td rowSpan={2}>5</td>
             <td rowSpan={2}>No. of mothers given uterotonics within 1 minute</td>
             <td>Oxytocin</td>
-            <td>{moh711Data.oxytocin_uterotonic}</td>
+            <td onClick={() => navigateToRegister('oxytocin_uterotonic')}>{moh711Data.oxytocin_uterotonic}</td>
           </tr>
           <tr>
             <td>Carbatosin</td>
-            <td>{moh711Data.carbatocin_uterotonic}</td>
+            <td onClick={() => navigateToRegister('carbatocin_uterotonic')}>{moh711Data.carbatocin_uterotonic}</td>
           </tr>
           <tr>
             <td>6</td>
             <td colSpan={2}>Live Births</td>
-            <td>{moh711Data.live_birth}</td>
+            <td onClick={() => navigateToRegister('live_birth')}>{moh711Data.live_birth}</td>
           </tr>
           <tr>
             <td>7</td>
             <td colSpan={2}>No. of Low Birth Weight Babies (below 2500gms)</td>
-            <td>{moh711Data.low_birth_weight}</td>
+            <td onClick={() => navigateToRegister('low_birth_weight')}>{moh711Data.low_birth_weight}</td>
           </tr>
           <tr>
             <td>8</td>
             <td colSpan={2}>
               No. of Low APGAR Score(<strong>&le; 6 at 5 Min</strong>)
             </td>
-            <td>{moh711Data.low_apgar_score}</td>
+            <td onClick={() => navigateToRegister('low_apgar_score')}>{moh711Data.low_apgar_score}</td>
           </tr>
           <tr>
             <td>9</td>
             <td colSpan={2}>No. of Birth with diformities</td>
-            <td>{moh711Data.birth_with_deformity}</td>
+            <td onClick={() => navigateToRegister('birth_with_deformity')}>{moh711Data.birth_with_deformity}</td>
           </tr>
           <tr>
             <td>10</td>
             <td colSpan={2}>No. of Babies applied chlorhexidine for cord care</td>
-            <td>{moh711Data.chlorhexidine_applied}</td>
+            <td onClick={() => navigateToRegister('chlorhexidine_applied')}>{moh711Data.chlorhexidine_applied}</td>
           </tr>
           <tr>
             <td>11</td>
             <td colSpan={2}>No. of Neonates given Vit "K"</td>
-            <td>{moh711Data.vitamin_k}</td>
+            <td onClick={() => navigateToRegister('vitamin_k')}>{moh711Data.vitamin_k}</td>
           </tr>
           <tr>
             <td>12</td>
             <td colSpan={2}>No. of Babies given tetracycline at birth</td>
-            <td>{moh711Data.tetracycline_given}</td>
+            <td onClick={() => navigateToRegister('tetracycline_given')}>{moh711Data.tetracycline_given}</td>
           </tr>
           <tr>
             <td>13</td>
             <td colSpan={2}>Pre-Term babies</td>
-            <td>{moh711Data.pre_term_babies}</td>
+            <td onClick={() => navigateToRegister('pre_term_babies')}>{moh711Data.pre_term_babies}</td>
           </tr>
           <tr>
             <td>14</td>
             <td colSpan={2}>No. of Babies discharge Alive</td>
-            <td>{moh711Data.discharge_alive}</td>
+            <td onClick={() => navigateToRegister('discharge_alive')}>{moh711Data.discharge_alive}</td>
           </tr>
           <tr>
             <td>15</td>
             <td colSpan={2}>No. of Infants initiated on breast feeding within 1 hour after birth</td>
-            <td>{moh711Data.bf_within_1_hour}</td>
+            <td onClick={() => navigateToRegister('bf_within_1_hour')}>{moh711Data.bf_within_1_hour}</td>
           </tr>
           <tr>
             <td>16</td>
             <td colSpan={2}>Total Deliveries from HIV +ve Women</td>
-            <td>{moh711Data.deliveries_from_positive_women}</td>
+            <td onClick={() => navigateToRegister('deliveries_from_positive_women')}>
+              {moh711Data.deliveries_from_positive_women}
+            </td>
           </tr>
           <tr>
             <td>17</td>
             <td rowSpan={3}>Perinatal Deaths</td>
             <td>Fresh Still Birth</td>
-            <td>{moh711Data.fresh_still_birth}</td>
+            <td onClick={() => navigateToRegister('fresh_still_birth')}>{moh711Data.fresh_still_birth}</td>
           </tr>
           <tr>
             <td>18</td>
             <td>Macerated still Birth</td>
-            <td>{moh711Data.macerated_still_birth}</td>
+            <td onClick={() => navigateToRegister('macerated_still_birth')}>{moh711Data.macerated_still_birth}</td>
           </tr>
           <tr>
             <td>19</td>
             <td>Deaths 0-7 days</td>
-            <td>{moh711Data.perinatal_deaths_0_7_days}</td>
+            <td onClick={() => navigateToRegister('perinatal_deaths_0_7_days')}>
+              {moh711Data.perinatal_deaths_0_7_days}
+            </td>
           </tr>
           <tr>
             <td>20</td>
             <td colSpan={2}>Neonatal deaths 0-28 Days</td>
-            <td>{moh711Data.neonatal_deaths_0_28_days}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_0_28_days')}>
+              {moh711Data.neonatal_deaths_0_28_days}
+            </td>
           </tr>
           <tr>
             <td>21</td>
             <td colSpan={2}>Maternal deaths 10-14 Years</td>
-            <td>{moh711Data.maternal_deaths_10_14_years}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_10_14_years')}>
+              {moh711Data.maternal_deaths_10_14_years}
+            </td>
           </tr>
           <tr>
             <td>22</td>
             <td colSpan={2}>Maternal deaths 15-19 Years</td>
-            <td>{moh711Data.maternal_deaths_15_19_years}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_15_19_years')}>
+              {moh711Data.maternal_deaths_15_19_years}
+            </td>
           </tr>
           <tr>
             <td>23</td>
             <td colSpan={2}>Maternal deaths 20-24 Years</td>
-            <td>{moh711Data.maternal_deaths_20_24_years}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_20_24_years')}>
+              {moh711Data.maternal_deaths_20_24_years}
+            </td>
           </tr>
           <tr>
             <td>24</td>
             <td colSpan={2}>Maternal deaths 25+ Years</td>
-            <td>{moh711Data.maternal_deaths_25_above_years}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_25_above_years')}>
+              {moh711Data.maternal_deaths_25_above_years}
+            </td>
           </tr>
           <tr>
             <td>25</td>
             <td colSpan={2}>Maternal Deaths Audited Within 7 Days</td>
-            <td>{moh711Data.maternal_deaths_audited_within_7_days}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_audited_within_7_days')}>
+              {moh711Data.maternal_deaths_audited_within_7_days}
+            </td>
           </tr>
           <tr>
             <td>26</td>
             <td colSpan={2}>No. of Neonatal deaths audited within 7 days</td>
-            <td>{moh711Data.neonatal_deaths_audited_within_7_days}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_audited_within_7_days')}>
+              {moh711Data.neonatal_deaths_audited_within_7_days}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -185,42 +216,42 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) =
           <tr>
             <td>27</td>
             <td>A.P.H (Ante partum Haemorrage)</td>
-            <td>{moh711Data.ante_partum_haemorrage}</td>
+            <td onClick={() => navigateToRegister('ante_partum_haemorrage')}>{moh711Data.ante_partum_haemorrage}</td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td>28</td>
             <td>P.P.H (Post Partum Haemorrage)</td>
-            <td>{moh711Data.post_partum_haemorrage}</td>
+            <td onClick={() => navigateToRegister('post_partum_haemorrage')}>{moh711Data.post_partum_haemorrage}</td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td>29</td>
             <td>Eclampsia</td>
-            <td>{moh711Data.eclampsia}</td>
+            <td onClick={() => navigateToRegister('eclampsia')}>{moh711Data.eclampsia}</td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td>30</td>
             <td>Ruptured Uterus</td>
-            <td>{moh711Data.ruptured_uterus}</td>
+            <td onClick={() => navigateToRegister('ruptured_uterus')}>{moh711Data.ruptured_uterus}</td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td>31</td>
             <td>Obstructed Labour</td>
-            <td>{moh711Data.obstructed_labour}</td>
+            <td onClick={() => navigateToRegister('obstructed_labour')}>{moh711Data.obstructed_labour}</td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td>32</td>
             <td>Sepsis</td>
-            <td>{moh711Data.sepsis}</td>
+            <td onClick={() => navigateToRegister('sepsis')}>{moh711Data.sepsis}</td>
             <td></td>
             <td></td>
           </tr>
@@ -230,7 +261,9 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) =
               Number of Mothers with delivery complications associated
               <br /> with FGM
             </td>
-            <td>{moh711Data.fgm_delivery_complications}</td>
+            <td onClick={() => navigateToRegister('fgm_delivery_complications')}>
+              {moh711Data.fgm_delivery_complications}
+            </td>
             <td></td>
             <td></td>
           </tr>
@@ -249,27 +282,33 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh711Data }) =
             <td>34</td>
             <td rowSpan={3}>Causes of neonatal deaths</td>
             <td>No. of neonatal deaths due to Sepsis</td>
-            <td>{moh711Data.neonatal_deaths_sepsis}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_sepsis')}>{moh711Data.neonatal_deaths_sepsis}</td>
           </tr>
           <tr>
             <td>35</td>
             <td>No. of neonatal deaths due to Prematurity</td>
-            <td>{moh711Data.neonatal_deaths_prematurity}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_prematurity')}>
+              {moh711Data.neonatal_deaths_prematurity}
+            </td>
           </tr>
           <tr>
             <td>36</td>
             <td>No. of neonatal deaths due to Asphyxia</td>
-            <td>{moh711Data.neonatal_deaths_asphyxia}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_asphyxia')}>
+              {moh711Data.neonatal_deaths_asphyxia}
+            </td>
           </tr>
           <tr>
             <td>37</td>
             <td colSpan={2}>No. of Neonates initiated on Kangaroo Mother Care</td>
-            <td>{moh711Data.kangaroo_mother_care}</td>
+            <td onClick={() => navigateToRegister('kangaroo_mother_care')}>{moh711Data.kangaroo_mother_care}</td>
           </tr>
           <tr>
             <td>38</td>
             <td colSpan={2}>Maternal Referrals From Community Unit</td>
-            <td>{moh711Data.referrals_from_community}</td>
+            <td onClick={() => navigateToRegister('referrals_from_community')}>
+              {moh711Data.referrals_from_community}
+            </td>
           </tr>
         </tbody>
       </table>

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

@@ -2,12 +2,22 @@ import React from 'react';
 
 import styles from '../moh711.scss';
 import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
 
 interface PNCComponentProps {
   moh711Data: any;
+  startDate: string;
+  endDate: string;
+  locationUuids: string;
 }
 
-const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data }) => {
+const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data, startDate, endDate, locationUuids }) => {
+  const navigate = useNavigate();
+  const navigateToRegister = (indicator: string) => {
+    navigate(
+      `/moh-406-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+    );
+  };
   return (
     <>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -26,62 +36,78 @@ const PNCComponent: React.FC<PNCComponentProps> = ({ moh711Data }) => {
             <td>1</td>
             <td rowSpan={2}>No. of PNC Clients</td>
             <td>New</td>
-            <td>{moh711Data.pnc_new_clients}</td>
+            <td onClick={() => navigateToRegister('pnc_new_clients')}>{moh711Data.pnc_new_clients}</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Revisit</td>
-            <td>{moh711Data.pnc_revisit_clients}</td>
+            <td onClick={() => navigateToRegister('pnc_revisit_clients')}>{moh711Data.pnc_revisit_clients}</td>
           </tr>
           <tr>
             <td>3</td>
             <td colSpan={2}>No of Women counselled on Post Partum FP</td>
-            <td>{moh711Data.women_couselled_on_post_partum_fp}</td>
+            <td onClick={() => navigateToRegister('women_couselled_on_post_partum_fp')}>
+              {moh711Data.women_couselled_on_post_partum_fp}
+            </td>
           </tr>
           <tr>
             <td>4</td>
             <td colSpan={2}>No of Clients who received Post Partum FP</td>
-            <td>{moh711Data.women_received_post_partum_fp}</td>
+            <td onClick={() => navigateToRegister('women_received_post_partum_fp')}>
+              {moh711Data.women_received_post_partum_fp}
+            </td>
           </tr>
           <tr>
             <td>5</td>
             <td rowSpan={3}>No. of Mothers receiving Postpartum Care</td>
             <td>within 48 hours</td>
-            <td>{moh711Data.mothers_post_partum_care_48_hours}</td>
+            <td onClick={() => navigateToRegister('mothers_post_partum_care_48_hours')}>
+              {moh711Data.mothers_post_partum_care_48_hours}
+            </td>
           </tr>
           <tr>
             <td></td>
             <td>Between 3 days to 6 weeks</td>
-            <td>{moh711Data.mothers_post_partum_care_3_6_weeks}</td>
+            <td onClick={() => navigateToRegister('mothers_post_partum_care_3_6_weeks')}>
+              {moh711Data.mothers_post_partum_care_3_6_weeks}
+            </td>
           </tr>
           <tr>
             <td></td>
             <td>After 6 weeks</td>
-            <td>{moh711Data.mothers_post_partum_care_after_6_weeks}</td>
+            <td onClick={() => navigateToRegister('mothers_post_partum_care_after_6_weeks')}>
+              {moh711Data.mothers_post_partum_care_after_6_weeks}
+            </td>
           </tr>
           <tr>
             <td rowSpan={3}>6</td>
             <td rowSpan={3}>No. of Babies received Postpartum Care</td>
             <td>Within 48 hours</td>
-            <td>{moh711Data.infants_post_partum_care_48_hours}</td>
+            <td onClick={() => navigateToRegister('infants_post_partum_care_48_hours')}>
+              {moh711Data.infants_post_partum_care_48_hours}
+            </td>
           </tr>
           <tr>
             <td>Between 3 days to 6 weeks</td>
-            <td>{moh711Data.infants_post_partum_care_3_6_weeks}</td>
+            <td onClick={() => navigateToRegister('infants_post_partum_care_3_6_weeks')}>
+              {moh711Data.infants_post_partum_care_3_6_weeks}
+            </td>
           </tr>
           <tr>
             <td>After 6 weeks</td>
-            <td>{moh711Data.infants_post_partum_care_after_6_weeks}</td>
+            <td onClick={() => navigateToRegister('infants_post_partum_care_after_6_weeks')}>
+              {moh711Data.infants_post_partum_care_after_6_weeks}
+            </td>
           </tr>
           <tr>
             <td>7</td>
             <td colSpan={2}>Number of Cases of Fistula</td>
-            <td>{moh711Data.fistula_cases}</td>
+            <td onClick={() => navigateToRegister('pnc_new_clients')}>{moh711Data.fistula_cases}</td>
           </tr>
           <tr>
             <td>8</td>
             <td colSpan={2}>No referred from the Community unit to PNC</td>
-            <td>{moh711Data.referrals_from_community}</td>
+            <td onClick={() => navigateToRegister('pnc_new_clients')}>{moh711Data.referrals_from_community}</td>
           </tr>
         </tbody>
       </table>

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

@@ -17,18 +17,20 @@ import MortuaryComponent from './sections/mortuary.component';
 import MedicalRecordsComponent from './sections/medical-records.component';
 import FinanceComponent from './sections/finance.component';
 import PreparedbyComponent from './sections/preparedby.component';
+import { type ReportFilters } from '../moh-705a/type';
 
 const Moh717Report: React.FC = () => {
   let errorMessage: string = '';
   const [moh717ReportData, setMoh717ReportData] = useState<any>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [startDate, setStartDate] = useState<string>('');
+  const [endDate, setEndDate] = useState<string>('');
 
   const session = useSession();
   const locationUuid = session?.sessionLocation?.uuid;
-  const fetchMoh717ReportData = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
-    setIsLoading(true);
-    let startDate = filters.startDate;
-    let endDate = filters.endDate;
+
+  const getReportParams = (filters: ReportFilters) => {
+    let { startDate: sDate, endDate: eDate } = filters;
 
     if (filters.month) {
       const [year, monthIndex] = filters.month.split('-').map(Number);
@@ -37,16 +39,27 @@ const Moh717Report: React.FC = () => {
       const end = new Date(year, monthIndex, 0);
 
       const formatLocalDate = (d: Date) => {
-        const year = d.getFullYear();
-        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
         const day = String(d.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
+        return `${y}-${m}-${day}`;
       };
 
-      startDate = formatLocalDate(start);
-      endDate = formatLocalDate(end);
+      sDate = formatLocalDate(start);
+      eDate = formatLocalDate(end);
     }
 
+    setStartDate(sDate || '');
+    setEndDate(eDate || '');
+
+    return { startDate: sDate, endDate: eDate };
+  };
+
+  const fetchMoh717ReportData = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
+    setIsLoading(true);
+
+    const { startDate, endDate } = getReportParams(filters);
+
     const params = {
       locationUuids: locationUuid || '',
       startDate,
@@ -118,7 +131,12 @@ const Moh717Report: React.FC = () => {
         <InpatientComponent moh717ReportData={moh717ReportData} />
         <div className={styles.sectionContainer}>
           <div className={styles.left}>
-            <MaternityComponent moh717ReportData={moh717ReportData} />
+            <MaternityComponent
+              moh717ReportData={moh717ReportData}
+              startDate={startDate}
+              endDate={endDate}
+              locationUuids={locationUuid!}
+            />
           </div>
           <div className={styles.right}>
             <OperationsComponent moh717ReportData={moh717ReportData} />

package/src/reports/moh-717/moh717.scss

@@ -147,4 +147,8 @@ h3 {
 
 span {
     font-weight: bold;
+}
+
+.buttonContainer {
+    margin: 1rem;
 }

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

@@ -2,12 +2,27 @@ import React from 'react';
 
 import styles from '../moh717.scss';
 import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
 
 interface MaternityComponentProps {
   moh717ReportData: any;
+  startDate: string;
+  endDate: string;
+  locationUuids: string;
 }
 
-const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh717ReportData }: { moh717ReportData: any }) => {
+const MaternityComponent: React.FC<MaternityComponentProps> = ({
+  moh717ReportData,
+  startDate,
+  endDate,
+  locationUuids,
+}) => {
+  const navigate = useNavigate();
+  const navigateToRegister = (indicator?: string) => {
+    navigate(
+      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+    );
+  };
   return (
     <>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -23,62 +38,72 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({ moh717ReportDat
           <tr>
             <td>B.2.1</td>
             <td>Normal Deliveries</td>
-            <td>{moh717ReportData.normal_deliveries}</td>
+            <td onClick={() => navigateToRegister('normal_deliveries')}>{moh717ReportData.normal_deliveries}</td>
           </tr>
           <tr>
             <td>B.2.2</td>
             <td>Caesarian Sections</td>
-            <td>{moh717ReportData.caesarian_sections}</td>
+            <td onClick={() => navigateToRegister('caesarian_sections')}>{moh717ReportData.caesarian_sections}</td>
           </tr>
           <tr>
             <td>B.2.3</td>
             <td>Breach Deliveries</td>
-            <td>{moh717ReportData.breach_deliveries}</td>
+            <td onClick={() => navigateToRegister('breach_deliveries')}>{moh717ReportData.breach_deliveries}</td>
           </tr>
           <tr>
             <td>B.2.4</td>
             <td>Assisted Vaginal Delivery</td>
-            <td>{moh717ReportData.assisted_vaginal_deliveries}</td>
+            <td onClick={() => navigateToRegister('assisted_vaginal_deliveries')}>
+              {moh717ReportData.assisted_vaginal_deliveries}
+            </td>
           </tr>
           <tr>
             <td>B.2.5a</td>
             <td>BBA (Born before arrival)</td>
-            <td>{moh717ReportData.born_before_arrival}</td>
+            <td onClick={() => navigateToRegister('born_before_arrival')}>{moh717ReportData.born_before_arrival}</td>
           </tr>
           <tr>
             <td>B.2.5b</td>
             <td>Maternal deaths</td>
-            <td>{moh717ReportData.maternal_deaths}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths')}>{moh717ReportData.maternal_deaths}</td>
           </tr>
           <tr>
             <td>B.2.6</td>
             <td>Maternal Deaths Audited</td>
-            <td>{moh717ReportData.maternal_deaths_audited_within_7_days}</td>
+            <td onClick={() => navigateToRegister('maternal_deaths_audited_within_7_days')}>
+              {moh717ReportData.maternal_deaths_audited_within_7_days}
+            </td>
           </tr>
           <tr>
             <td>B.2.7</td>
             <td>Live births</td>
-            <td>{moh717ReportData.live_births}</td>
+            <td onClick={() => navigateToRegister('live_births')}>{moh717ReportData.live_births}</td>
           </tr>
           <tr>
             <td>B.2.8</td>
             <td>Still births</td>
-            <td>{moh717ReportData.still_births}</td>
+            <td onClick={() => navigateToRegister('still_births')}>{moh717ReportData.still_births}</td>
           </tr>
           <tr>
             <td>B.2.9</td>
             <td>Neonatal deaths</td>
-            <td>{moh717ReportData.neonatal_deaths_0_28_days}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_0_28_days')}>
+              {moh717ReportData.neonatal_deaths_0_28_days}
+            </td>
           </tr>
           <tr>
             <td>B.2.10</td>
             <td>Neonatal deaths Audits</td>
-            <td>{moh717ReportData.neonatal_deaths_audits}</td>
+            <td onClick={() => navigateToRegister('neonatal_deaths_audits')}>
+              {moh717ReportData.neonatal_deaths_audits}
+            </td>
           </tr>
           <tr>
             <td>B.2.11</td>
             <td>Low Birth Weight babies (under 2500gms)</td>
-            <td>{moh717ReportData.low_birth_weight_less_2500gms}</td>
+            <td onClick={() => navigateToRegister('low_birth_weight_less_2500gms')}>
+              {moh717ReportData.low_birth_weight_less_2500gms}
+            </td>
           </tr>
           <tr>
             <td>B.2.12</td>