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

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import ReportFiltersComponent from '../../common/report-filters/report-filters.component';
 
 import styles from './moh-710.scss';
@@ -6,19 +7,42 @@ import classNames from 'classnames';
 import { useSession } from '@openmrs/esm-framework';
 import { getMoh710 } from '../../resources/moh-710.resource';
 import { Loading } from '@carbon/react';
+import { type ReportFilters } from '../moh-705a/type';
 
 const Moh710Report: React.FC = () => {
   let errorMessage: string = '';
-  const [moh710Data, setMoh710Data] = useState<any>([]);
+  const [moh710Data, setMoh710Data] = useState<any>(() => {
+    const saved = sessionStorage.getItem('moh710Data');
+    return saved ? JSON.parse(saved) : [];
+  });
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const [startDate, setStartDate] = useState<string>(() => {
+    return sessionStorage.getItem('moh710StartDate') || '';
+  });
+
+  const [endDate, setEndDate] = useState<string>(() => {
+    return sessionStorage.getItem('moh710EndDate') || '';
+  });
+  useEffect(() => {
+    sessionStorage.setItem('moh710Data', JSON.stringify(moh710Data));
+  }, [moh710Data]);
+
+  useEffect(() => {
+    sessionStorage.setItem('moh710StartDate', startDate);
+  }, [startDate]);
+
+  useEffect(() => {
+    sessionStorage.setItem('moh710EndDate', endDate);
+  }, [endDate]);
 
   const session = useSession();
   const locationUuids = session?.sessionLocation?.uuid;
+  const location = useLocation();
 
-  const fetchMoh710ReportData = 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);
@@ -27,16 +51,27 @@ const Moh710Report: 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 fetchMoh710ReportData = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
+    setIsLoading(true);
+
+    const { startDate, endDate } = getReportParams(filters);
+
     const params = {
       locationUuids: locationUuids || '',
       startDate,
@@ -53,6 +88,18 @@ const Moh710Report: React.FC = () => {
       throw new Error(`Failed to fetch MOH-710 report data: ${error instanceof Error ? error.message : String(error)}`);
     }
   };
+
+  const navigateToRegister = (indicator: string) => {
+    navigate(
+      `/moh-511-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      {
+        state: {
+          from: location.pathname,
+          reportName: 'moh710Report',
+        },
+      },
+    );
+  };
   return (
     <>
       <ReportFiltersComponent
@@ -81,7 +128,6 @@ const Moh710Report: React.FC = () => {
       <h3>KHIS Aggregate</h3>
       <div className={styles.container}>
         <p className={styles.title}>A. Child Immunization</p>
-        <p className={styles.sectionTitle}>&lt; 1 Years&gt; 1 Years</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -94,103 +140,183 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>BCG doses Administered</td>
-                <td>{moh710Data.bcg_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.bcg_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('bcg_vaccine_age_less_than_1yr')}>
+                  {moh710Data.bcg_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('bcg_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.bcg_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>OPV Birth doses Administered</td>
-                <td>{moh710Data.opv_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.opv_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('opv_vaccine_age_less_than_1yr')}>
+                  {moh710Data.opv_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('opv_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.opv_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>OPV1 doses Administered</td>
-                <td>{moh710Data.opv1_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.opv1_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('opv1_vaccine_age_less_than_1yr')}>
+                  {moh710Data.opv1_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('opv1_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.opv1_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>OPV2 doses Administered</td>
-                <td>{moh710Data.opv2_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.opv2_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('opv2_vaccine_age_less_than_1yr')}>
+                  {moh710Data.opv2_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('opv2_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.opv2_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>OPV3 doses Administered</td>
-                <td>{moh710Data.opv3_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.opv3_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('opv3_vaccine_age_less_than_1yr')}>
+                  {moh710Data.opv3_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('opv3_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.opv3_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>IPV 1 doses Administered</td>
-                <td>{moh710Data.ipv1_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.ipv1_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('ipv1_vaccine_age_less_than_1yr')}>
+                  {moh710Data.ipv1_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('ipv1_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.ipv1_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>IPV 2 doses Administered</td>
-                <td>{moh710Data.ipv2_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.ipv2_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('ipv2_vaccine_age_less_than_1yr')}>
+                  {moh710Data.ipv2_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('ipv2_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.ipv2_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>DPT/Hep+HiB 1 doses Administered</td>
-                <td>{moh710Data.dpt_hep_vaccine1_age_less_than_1yr}</td>
-                <td>{moh710Data.dpt_hep_vaccine1_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine1_age_less_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine1_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine1_age_greater_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine1_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>DPT/Hep+HiB2 doses Administered</td>
-                <td>{moh710Data.dpt_hep_vaccine2_age_less_than_1yr}</td>
-                <td>{moh710Data.dpt_hep_vaccine2_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine2_age_less_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine2_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine2_age_greater_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine2_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>DPT/Hep+HiB3 doses Administered</td>
-                <td>{moh710Data.dpt_hep_vaccine3_age_less_than_1yr}</td>
-                <td>{moh710Data.dpt_hep_vaccine3_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine3_age_less_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine3_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('dpt_hep_vaccine3_age_greater_than_1yr')}>
+                  {moh710Data.dpt_hep_vaccine3_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Pneumococal 1 doses Administered</td>
-                <td>{moh710Data.pneumococal_vaccine1_age_less_than_1yr}</td>
-                <td>{moh710Data.pneumococal_vaccine1_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine1_age_less_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine1_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine1_age_greater_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine1_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Pneumococal 2 doses Administered</td>
-                <td>{moh710Data.pneumococal_vaccine2_age_less_than_1yr}</td>
-                <td>{moh710Data.pneumococal_vaccine2_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine2_age_less_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine2_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine2_age_greater_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine2_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Pneumococal 3 doses Administered</td>
-                <td>{moh710Data.pneumococal_vaccine3_age_less_than_1yr}</td>
-                <td>{moh710Data.pneumococal_vaccine3_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine3_age_less_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine3_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('pneumococal_vaccine3_age_greater_than_1yr')}>
+                  {moh710Data.pneumococal_vaccine3_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Rotavirus 1 doses Administered</td>
-                <td>{moh710Data.rotavirus_vaccine1_age_less_than_1yr}</td>
-                <td>{moh710Data.rotavirus_vaccine1_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine1_age_less_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine1_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine1_age_greater_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine1_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Rotavirus 2 doses Administered</td>
-                <td>{moh710Data.rotavirus_vaccine2_age_less_than_1yr}</td>
-                <td>{moh710Data.rotavirus_vaccine2_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine2_age_less_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine2_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine2_age_greater_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine2_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Rotavirus 3 doses Administered</td>
-                <td>{moh710Data.rotavirus_vaccine3_age_less_than_1yr}</td>
-                <td>{moh710Data.rotavirus_vaccine3_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine3_age_less_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine3_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('rotavirus_vaccine3_age_greater_than_1yr')}>
+                  {moh710Data.rotavirus_vaccine3_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Vitamin A at 6 - 11 months(100, 000 IU)</td>
-                <td>{moh710Data.vitaminA_vaccine_age_less_than_1yr}</td>
-                <td>{moh710Data.vitaminA_vaccine_age_greater_than_1yr}</td>
+                <td onClick={() => navigateToRegister('vitaminA_vaccine_age_less_than_1yr')}>
+                  {moh710Data.vitaminA_vaccine_age_less_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('vitaminA_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.vitaminA_vaccine_age_greater_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Yellow fever doses Administered</td>
-                <td>{moh710Data.yellow_fever_vaccine_age_greater_than_1yr}</td>
-                <td>{moh710Data.yellow_fever_vaccine_age_less_than_1yr}</td>
+                <td onClick={() => navigateToRegister('yellow_fever_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.yellow_fever_vaccine_age_greater_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('yellow_fever_vaccine_age_less_than_1yr')}>
+                  {moh710Data.yellow_fever_vaccine_age_less_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Measles-Rubella 1 doses Administered</td>
-                <td>{moh710Data.measles_vaccine_age_greater_than_1yr}</td>
-                <td>{moh710Data.measles_vaccine_age_less_than_1yr}</td>
+                <td onClick={() => navigateToRegister('measles_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.measles_vaccine_age_greater_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('measles_vaccine_age_less_than_1yr')}>
+                  {moh710Data.measles_vaccine_age_less_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Typhoid Conjugate Vaccine (TCV) doses Administered</td>
-                <td>{moh710Data.typhoid_conjugate_vaccine_age_greater_than_1yr}</td>
-                <td>{moh710Data.typhoid_conjugate_vaccine_age_less_than_1yr}</td>
+                <td onClick={() => navigateToRegister('typhoid_conjugate_vaccine_age_greater_than_1yr')}>
+                  {moh710Data.typhoid_conjugate_vaccine_age_greater_than_1yr}
+                </td>
+                <td onClick={() => navigateToRegister('typhoid_conjugate_vaccine_age_less_than_1yr')}>
+                  {moh710Data.typhoid_conjugate_vaccine_age_less_than_1yr}
+                </td>
               </tr>
               <tr>
                 <td>Fully Immunized Children(FIC) under 1 year</td>
@@ -203,7 +329,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>B. Vitamin A and Measles Rubella</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -215,15 +340,19 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>Vitamin A at 12 to 59 months (200, 000 IU)</td>
-                <td>{moh710Data.vitaminA_12_59_months}</td>
+                <td onClick={() => navigateToRegister('vitaminA_12_59_months')}>{moh710Data.vitaminA_12_59_months}</td>
               </tr>
               <tr>
                 <td>Measles-Rubella 2 DoseAdm (at 1 1/2-2years)</td>
-                <td>{moh710Data.measles_rubella_1_2_years}</td>
+                <td onClick={() => navigateToRegister('measles_rubella_1_2_years')}>
+                  {moh710Data.measles_rubella_1_2_years}
+                </td>
               </tr>
               <tr>
                 <td>Measles-Rubella 2 Dose Administered &gt;2 yrs</td>
-                <td>{moh710Data.measles_rubella_greater_2_years}</td>
+                <td onClick={() => navigateToRegister('measles_rubella_greater_2_years')}>
+                  {moh710Data.measles_rubella_greater_2_years}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -231,7 +360,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>C. Tetanus Toxoid</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -248,7 +376,6 @@ const Moh710Report: React.FC = () => {
             </tbody>
           </table>
         </div>
-        <p className={styles.sectionTitle}>1st Dose2nd Dose3rd Dose4th Dose5th Dose</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -264,11 +391,11 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>Tetanus Toxoid for Pregnant women</td>
-                <td>{moh710Data.tetanus_toxoid1}</td>
-                <td>{moh710Data.tetanus_toxoid2}</td>
-                <td>{moh710Data.tetanus_toxoid3}</td>
-                <td>{moh710Data.tetanus_toxoid4}</td>
-                <td>{moh710Data.tetanus_toxoid5}</td>
+                <td onClick={() => navigateToRegister('tetanus_toxoid1')}>{moh710Data.tetanus_toxoid1}</td>
+                <td onClick={() => navigateToRegister('tetanus_toxoid2')}>{moh710Data.tetanus_toxoid2}</td>
+                <td onClick={() => navigateToRegister('tetanus_toxoid3')}>{moh710Data.tetanus_toxoid3}</td>
+                <td onClick={() => navigateToRegister('tetanus_toxoid4')}>{moh710Data.tetanus_toxoid4}</td>
+                <td onClick={() => navigateToRegister('tetanus_toxoid5')}>{moh710Data.tetanus_toxoid5}</td>
               </tr>
             </tbody>
           </table>
@@ -276,7 +403,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>D. HPV</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -288,16 +414,17 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>HPV Vaccine Dose1(10-14years)</td>
-                <td>{moh710Data.hpv_vaccine1_10_14_years}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine1_10_14_years')}>
+                  {moh710Data.hpv_vaccine1_10_14_years}
+                </td>
               </tr>
               <tr>
                 <td>HPV Vaccine Dose 2</td>
-                <td>{moh710Data.hpv_vaccine2}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine2')}>{moh710Data.hpv_vaccine2}</td>
               </tr>
             </tbody>
           </table>
         </div>
-        <p className={styles.sectionTitle}>At 10 yearsAbove 10 years</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -310,13 +437,17 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>HPV Vaccine 1</td>
-                <td>{moh710Data.hpv_vaccine1_10_years}</td>
-                <td>{moh710Data.hpv_vaccine1_greater_10_years}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine1_10_years')}>{moh710Data.hpv_vaccine1_10_years}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine1_greater_10_years')}>
+                  {moh710Data.hpv_vaccine1_greater_10_years}
+                </td>
               </tr>
               <tr>
                 <td>HPV Vaccine 2</td>
-                <td>{moh710Data.hpv_vaccine2_10_years}</td>
-                <td>{moh710Data.hpv_vaccine2_greater_10_years}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine2_10_years')}>{moh710Data.hpv_vaccine2_10_years}</td>
+                <td onClick={() => navigateToRegister('hpv_vaccine2_greater_10_years')}>
+                  {moh710Data.hpv_vaccine2_greater_10_years}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -324,7 +455,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>E. Adverse Events</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -341,7 +471,6 @@ const Moh710Report: React.FC = () => {
             </tbody>
           </table>
         </div>
-        <p className={styles.sectionTitle}>&lt1 Years &gt;1Years</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -363,7 +492,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>F. Special Clinics COVID 19</p>
-        <p className={styles.sectionTitle}>12 - 17 Yrs18-59 Years60+ Years</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -377,9 +505,15 @@ const Moh710Report: React.FC = () => {
             <tbody>
               <tr>
                 <td>COVID 19 Reporting</td>
-                <td>{moh710Data.covid_19_vaccine_12_17}</td>
-                <td>{moh710Data.covid_19_vaccine_18_59}</td>
-                <td>{moh710Data.covid_19_vaccine_60_above}</td>
+                <td onClick={() => navigateToRegister('covid_19_vaccine_12_17')}>
+                  {moh710Data.covid_19_vaccine_12_17}
+                </td>
+                <td onClick={() => navigateToRegister('covid_19_vaccine_18_59')}>
+                  {moh710Data.covid_19_vaccine_18_59}
+                </td>
+                <td onClick={() => navigateToRegister('covid_19_vaccine_60_above')}>
+                  {moh710Data.covid_19_vaccine_60_above}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -387,7 +521,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>Section B Logistics Dose Balance</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>
@@ -641,7 +774,6 @@ const Moh710Report: React.FC = () => {
       </div>
       <div className={styles.container}>
         <p className={styles.title}>Section B: HPV Logistics Dose Balance</p>
-        <p className={styles.sectionTitle}>default</p>
         <div className={styles.tableContainer}>
           <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
             <thead>

package/src/reports/moh-710/moh-710.scss

@@ -31,11 +31,15 @@ h3 {
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid #dee2e6;
+  border: 1px solid black;
   padding: 0.3rem;
   font-size: small;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
   background-color: #f9f9f9;
+}
+
+.buttonContainer {
+    margin: 1rem;
 }