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

package/src/reports/moh-731/sections/hiv-testing-and-pre-exposure.component.tsx

@@ -19,31 +19,31 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
 }) => {
   const navigate = useNavigate();
 
-  const navigateToRegister = (indicator: string, gender: string) => {
+  const navigateToRegister = (indicator: string, gender: string, label: string) => {
     navigate(
-      `/moh-366-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&gender=${gender}`,
+      `/moh-366-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&gender=${gender}&label=${encodeURIComponent(label)}&from=moh-731`,
     );
   };
 
-  const navigateToPrepRegister = (indicator: string, gender: string) => {
+  const navigateToPrepRegister = (indicator: string, gender: string, label: string) => {
     navigate(
-      `/prep-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&gender=${gender}`,
+      `/prep-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&gender=${gender}&label=${encodeURIComponent(label)}&from=moh-731`,
     );
   };
   return (
-    <table>
-      <tbody>
-        <div className={styles.flexRow}>
-          <div className={styles.flexColumn}>
+    <div className={styles.flexRow}>
+      <div className={styles.flexColumn}>
+        <table className={styles.block}>
+          <tbody>
             <tr>
-              <td className={styles.spaceAfter} style={{ fontWeight: 'bold' }}>
+              <td className={styles.blockTitle} colSpan={3}>
                 1.1 HIV Tests
               </td>
             </tr>
             <tr>
               <td className={styles.emptyColumn}></td>
               <td className={styles.subTitle}>Male</td>
-              <td className={styles.subTitle} style={{ paddingLeft: '60px' }}>
+              <td className={styles.subTitle}>
                 Female(Including <br /> PMTCT)
               </td>
             </tr>
@@ -51,24 +51,36 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Tests</td>
               <td className={styles.textBox}>
                 <span>HV01-01</span>
-                <div onClick={() => navigateToRegister('hiv_male', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('hiv_male', 'M', 'Tests')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.hiv_male}
                 </div>
               </td>
               <td>
                 <div className={classNames(styles.textBox, styles.textBox2)}>
                   <span>HV01-02</span>
-                  <div onClick={() => navigateToRegister('hiv_female', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('hiv_female', 'F', 'Tests')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.hiv_female}
                   </div>
                 </div>
               </td>
             </tr>
-            <tr className={styles.margin}>
+            <tr>
               <td>Tests_Facility</td>
               <td className={styles.textBox}>
                 <span>HV01-03</span>
-                <div onClick={() => navigateToRegister('hiv_setting_facility', '')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('hiv_setting_facility', '', 'Tests_Facility')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.hiv_setting_facility}
                 </div>
               </td>
@@ -77,7 +89,11 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Tests_Community</td>
               <td className={styles.textBox}>
                 <span>HV01-04</span>
-                <div onClick={() => navigateToRegister('hiv_setting_community', '')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('hiv_setting_community', '', 'Tests_Community')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.hiv_setting_community}
                 </div>
               </td>
@@ -86,31 +102,38 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Tested KVP</td>
               <td className={styles.textBox}>
                 <span>HV01-05</span>
-                <div onClick={() => navigateToRegister('hiv_setting_kvp', '')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('hiv_setting_kvp', '', 'Tested KVP')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.hiv_setting_kvp}
                 </div>
               </td>
             </tr>
-            ____________________________________________________________________
+          </tbody>
+        </table>
+        <hr className={styles.divider} />
+        <table className={styles.block}>
+          <tbody>
             <tr>
-              <td className={styles.spaceAfter} style={{ fontWeight: 'bold' }}>
+              <td className={styles.blockTitle} colSpan={3}>
                 1.3 No. Initiated on PrEP(NEW)
               </td>
             </tr>
             <tr>
               <td className={styles.emptyColumn}></td>
               <td className={styles.subTitle}>Male</td>
-              <td className={styles.subTitle} style={{ paddingLeft: '60px' }}>
-                Female
-              </td>
+              <td className={styles.subTitle}>Female</td>
             </tr>
             <tr>
               <td>General popn</td>
               <td className={styles.textBox}>
                 <span>HV01-19</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_new_male_general_pop', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_new_male_general_pop', 'M', 'General popn')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_new_male_general_pop}
                 </div>
@@ -119,8 +142,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-20</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_new_female_general_pop', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_new_female_general_pop', 'F', 'General popn')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_new_female_general_pop}
                   </div>
@@ -131,7 +155,11 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>MSM/MSW</td>
               <td className={styles.textBox}>
                 <span>HV01-21</span>
-                <div onClick={() => navigateToPrepRegister('prep_new_msm', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_new_msm', 'M', 'MSM/MSW')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_new_msm}
                 </div>
               </td>
@@ -143,7 +171,11 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-22</span>
-                  <div onClick={() => navigateToPrepRegister('prep_new_fsw', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_new_fsw', 'F', 'FSW')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.prep_new_fsw}
                   </div>
                 </div>
@@ -153,14 +185,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>PWID/PWUD</td>
               <td className={styles.textBox}>
                 <span>HV01-23</span>
-                <div onClick={() => navigateToPrepRegister('prep_new_pwud_male', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_new_pwud_male', 'M', 'PWID/PWUD')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_new_pwud_male}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-24</span>
-                  <div onClick={() => navigateToPrepRegister('prep_new_pwud_female', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_new_pwud_female', 'F', 'PWID/PWUD')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.prep_new_pwud_female}
                   </div>
                 </div>
@@ -171,8 +211,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td className={styles.textBox}>
                 <span>HV01-25</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_new_discordant_male', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_new_discordant_male', 'M', 'Discordant Couple')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_new_discordant_male}
                 </div>
@@ -181,8 +222,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-26</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_new_discordant_female', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_new_discordant_female', 'F', 'Discordant Couple')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_new_discordant_female}
                   </div>
@@ -194,8 +236,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td className={styles.textBox}>
                 <span>HV01-27</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_new_vulnerable_male', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_new_vulnerable_male', 'M', 'Vulnerable Pop.')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_new_vulnerable_male}
                 </div>
@@ -204,8 +247,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-28</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_new_vulnerable_female', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_new_vulnerable_female', 'F', 'Vulnerable Pop.')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_new_vulnerable_female}
                   </div>
@@ -216,14 +260,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>AYP (10-24yrs)</td>
               <td className={styles.textBox}>
                 <span>HV01-29</span>
-                <div onClick={() => navigateToPrepRegister('prep_new_ayp', 'F')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_new_ayp', 'F', 'AYP (10-24yrs)')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_new_ayp}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-30</span>
-                  <div onClick={() => navigateToPrepRegister('prep_new_ayp', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_new_ayp', 'F', 'AYP (10-24yrs)')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.prep_new_ayp}
                   </div>
                 </div>
@@ -236,71 +288,94 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-31</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_new_preg_breastfeeding', 'F')}
+                    onClick={() =>
+                      navigateToPrepRegister('prep_new_preg_breastfeeding', 'F', 'Pregnant and breastfeeding women')
+                    }
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_new_preg_breastfeeding}
                   </div>
                 </div>
               </td>
             </tr>
-            ____________________________________________________________________
+          </tbody>
+        </table>
+        <hr className={styles.divider} />
+        <table className={styles.block}>
+          <tbody>
             <tr>
-              <td className={styles.spaceAfter} style={{ fontWeight: 'bold' }}>
+              <td className={styles.blockTitle} colSpan={3}>
                 1.5 No. Seroconverted while on PrEP
               </td>
             </tr>
             <tr>
               <td className={styles.emptyColumn}></td>
               <td className={styles.subTitle}>Male</td>
-              <td className={styles.subTitle} style={{ paddingLeft: '60px' }}>
-                Female
-              </td>
+              <td className={styles.subTitle}>Female</td>
             </tr>
             <tr>
               <td>HIV Positive</td>
               <td className={styles.textBox}>
                 <span>HV01-45</span>
-                <div onClick={() => navigateToPrepRegister('seroconverted_male', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('seroconverted_male', 'M', 'HIV Positive')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.seroconverted_male}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-46</span>
-                  <div onClick={() => navigateToPrepRegister('seroconverted_female', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('seroconverted_female', 'F', 'HIV Positive')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.seroconverted_female}
                   </div>
                 </div>
               </td>
             </tr>
-            ____________________________________________________________________
-          </div>
-          <div className={styles.flexColumn}>
+          </tbody>
+        </table>
+        <hr className={styles.divider} />
+      </div>
+      <div className={styles.flexColumn}>
+        <table className={styles.block}>
+          <tbody>
             <tr>
-              <td className={styles.spaceAfter} style={{ fontWeight: 'bold' }}>
+              <td className={styles.blockTitle} colSpan={3}>
                 1.2 HIV Positive Results
               </td>
             </tr>
             <tr>
               <td className={styles.emptyColumn}></td>
               <td className={styles.subTitle}>Male</td>
-              <td className={styles.subTitle} style={{ paddingLeft: '60px' }}>
-                Female
-              </td>
+              <td className={styles.subTitle}>Female</td>
             </tr>
             <tr>
               <td>Positive_2-9</td>
               <td className={styles.textBox}>
                 <span>HV01-06</span>
-                <div onClick={() => navigateToRegister('male_2_9', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('male_2_9', 'M', 'Positive_2-9')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.male_2_9}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-07</span>
-                  <div onClick={() => navigateToRegister('female_2_9', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('female_2_9', 'F', 'Positive_2-9')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.female_2_9}
                   </div>
                 </div>
@@ -310,14 +385,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Positive_10-14</td>
               <td className={styles.textBox}>
                 <span>HV01-08</span>
-                <div onClick={() => navigateToRegister('male_10_14', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('male_10_14', 'M', 'Positive_10-14')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.male_10_14}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-09</span>
-                  <div onClick={() => navigateToRegister('female_10_14', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('female_10_14', 'F', 'Positive_10-14')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.female_10_14}
                   </div>
                 </div>
@@ -327,14 +410,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Positive_15-19</td>
               <td className={styles.textBox}>
                 <span>HV01-10</span>
-                <div onClick={() => navigateToRegister('male_15_19', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('male_15_19', 'M', 'Positive_15-19')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.male_15_19}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-11</span>
-                  <div onClick={() => navigateToRegister('female_15_19', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('female_15_19', 'F', 'Positive_15-19')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.female_15_19}
                   </div>
                 </div>
@@ -344,14 +435,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Positive_20-24</td>
               <td className={styles.textBox}>
                 <span>HV01-12</span>
-                <div onClick={() => navigateToRegister('male_20_24', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('male_20_24', 'M', 'Positive_20-24')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.male_20_24}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-13</span>
-                  <div onClick={() => navigateToRegister('female_20_24', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('female_20_24', 'F', 'Positive_20-24')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.female_20_24}
                   </div>
                 </div>
@@ -361,14 +460,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>Positive_25+</td>
               <td className={styles.textBox}>
                 <span>HV01-14</span>
-                <div onClick={() => navigateToRegister('male_25_above', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToRegister('male_25_above', 'M', 'Positive_25+')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.male_25_above}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-15</span>
-                  <div onClick={() => navigateToRegister('female_25_above', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToRegister('female_25_above', 'F', 'Positive_25+')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.female_25_above}
                   </div>
                 </div>
@@ -381,7 +488,7 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={styles.rectangle}></div>
               </td>
             </tr>
-            <tr style={{ paddingTop: '10px', paddingBottom: '10px' }}>
+            <tr>
               <td>Discordant</td>
               <td className={styles.textBox}>
                 <span>HV01-17</span>
@@ -407,26 +514,29 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 </div>
               </td>
             </tr>
-            ____________________________________________________________________
+          </tbody>
+        </table>
+        <hr className={styles.divider} />
+        <table className={styles.block}>
+          <tbody>
             <tr>
-              <td className={styles.spaceAfter} style={{ fontWeight: 'bold' }}>
+              <td className={styles.blockTitle} colSpan={3}>
                 1.4 No. on PrEP Diagnosed with STI
               </td>
             </tr>
             <tr>
               <td className={styles.emptyColumn}></td>
               <td className={styles.subTitle}>Male</td>
-              <td className={styles.subTitle} style={{ paddingLeft: '60px' }}>
-                Female
-              </td>
+              <td className={styles.subTitle}>Female</td>
             </tr>
             <tr>
               <td>General popn</td>
               <td className={styles.textBox}>
                 <span>HV01-32</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_sti_male_general_pop', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_sti_male_general_pop', 'M', 'General popn')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_sti_male_general_pop}
                 </div>
@@ -435,8 +545,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-33</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_sti_female_general_pop', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_sti_female_general_pop', 'F', 'General popn')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_sti_female_general_pop}
                   </div>
@@ -447,7 +558,11 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>MSM/MSW</td>
               <td className={styles.textBox}>
                 <span>HV01-34</span>
-                <div onClick={() => navigateToPrepRegister('prep_sti_msm', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_sti_msm', 'M', 'MSM/MSW')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_sti_msm}
                 </div>
               </td>
@@ -455,26 +570,40 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
             </tr>
             <tr>
               <td>FSW</td>
-              <td className={styles.textBox}>
-                <span>HV01-35</span>
-                <div onClick={() => navigateToPrepRegister('prep_sti_fsw', 'F')} className={styles.rectangle}>
-                  {MOH731Data.prep_sti_fsw}
+              <td></td>
+              <td>
+                <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
+                  <span>HV01-35</span>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_sti_fsw', 'F', 'FSW')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
+                    {MOH731Data.prep_sti_fsw}
+                  </div>
                 </div>
               </td>
-              <td></td>
             </tr>
             <tr>
               <td>PWID/PWUD</td>
               <td className={styles.textBox}>
                 <span>HV01-36</span>
-                <div onClick={() => navigateToPrepRegister('prep_sti_pwud_male', 'M')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_sti_pwud_male', 'M', 'PWID/PWUD')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_sti_pwud_male}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-37</span>
-                  <div onClick={() => navigateToPrepRegister('prep_sti_pwud_female', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_sti_pwud_female', 'F', 'PWID/PWUD')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.prep_sti_pwud_female}
                   </div>
                 </div>
@@ -485,8 +614,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td className={styles.textBox}>
                 <span>HV01-38</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_sti_discordant_male', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_sti_discordant_male', 'M', 'Discordant Couple')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_sti_discordant_male}
                 </div>
@@ -495,8 +625,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-39</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_sti_discordant_female', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_sti_discordant_female', 'F', 'Discordant Couple')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_sti_discordant_female}
                   </div>
@@ -508,8 +639,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td className={styles.textBox}>
                 <span>HV01-40</span>
                 <div
-                  onClick={() => navigateToPrepRegister('prep_sti_vulnerable_male', 'M')}
+                  onClick={() => navigateToPrepRegister('prep_sti_vulnerable_male', 'M', 'Vulnerable Pop.')}
                   className={styles.rectangle}
+                  title="Click to open linelist"
                 >
                   {MOH731Data.prep_sti_vulnerable_male}
                 </div>
@@ -518,8 +650,9 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-41</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_sti_vulnerable_female', 'F')}
+                    onClick={() => navigateToPrepRegister('prep_sti_vulnerable_female', 'F', 'Vulnerable Pop.')}
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_sti_vulnerable_female}
                   </div>
@@ -530,14 +663,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
               <td>AYP(10-24 yrs)</td>
               <td className={styles.textBox}>
                 <span>HV01-42</span>
-                <div onClick={() => navigateToPrepRegister('prep_sti_ayp', 'F')} className={styles.rectangle}>
+                <div
+                  onClick={() => navigateToPrepRegister('prep_sti_ayp', 'F', 'AYP(10-24 yrs)')}
+                  className={styles.rectangle}
+                  title="Click to open linelist"
+                >
                   {MOH731Data.prep_sti_ayp}
                 </div>
               </td>
               <td>
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-43</span>
-                  <div onClick={() => navigateToPrepRegister('prep_sti_ayp', 'F')} className={styles.rectangle}>
+                  <div
+                    onClick={() => navigateToPrepRegister('prep_sti_ayp', 'F', 'AYP(10-24 yrs)')}
+                    className={styles.rectangle}
+                    title="Click to open linelist"
+                  >
                     {MOH731Data.prep_sti_ayp}
                   </div>
                 </div>
@@ -550,19 +691,22 @@ const HivTestingandPreExposusreProphylaxis: React.FC<HivTestingandPreExposusrePr
                 <div className={classNames(`${styles.textBox}`, `${styles.textBox2}`)}>
                   <span>HV01-44</span>
                   <div
-                    onClick={() => navigateToPrepRegister('prep_sti_preg_breastfeeding', 'F')}
+                    onClick={() =>
+                      navigateToPrepRegister('prep_sti_preg_breastfeeding', 'F', 'Pregnant and breastfeeding women')
+                    }
                     className={styles.rectangle}
+                    title="Click to open linelist"
                   >
                     {MOH731Data.prep_sti_preg_breastfeeding}
                   </div>
                 </div>
               </td>
             </tr>
-            ____________________________________________________________________
-          </div>
-        </div>
-      </tbody>
-    </table>
+          </tbody>
+        </table>
+        <hr className={styles.divider} />
+      </div>
+    </div>
   );
 };