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

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

@@ -1,17 +1,15 @@
-import { Button, Loading, TableCell, TableRow } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
+import { TableCell, 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 classNames from 'classnames';
 import { getMoh405PatientList } from '../../../resources/moh-711.resource';
 import { moh405Columns } from './type';
+import { moh405ExportColumns } from './moh-405.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh405Register: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
   const location = useLocation();
 
@@ -21,42 +19,43 @@ const Moh405Register: React.FC = () => {
   const indicator = searchParams.get('indicator');
   const reportName = location.state?.reportName || '';
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          reportName,
-        };
-
-        const data = await getMoh405PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, reportName]);
-  function navigateBack() {
-    navigate('/moh-711');
-  }
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh405PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, reportName],
+  );
   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 405 ANC Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh405ExportColumns}
+    >
       <div className={styles.tableContainer}>
         <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
           <thead>
@@ -351,52 +350,52 @@ const Moh405Register: React.FC = () => {
           </thead>
           <tbody>
             <tr>
-              <td className={styles.textCenter}>(a)</td>
-              <td className={styles.textCenter}>(b)</td>
-              <td className={styles.textCenter}>(c)</td>
-              <td className={styles.textCenter}>(d)</td>
-              <td className={styles.textCenter}>(e)</td>
-              <td className={styles.textCenter}>(f)</td>
-              <td className={styles.textCenter}>(g)</td>
-              <td className={styles.textCenter}>(h)</td>
-              <td className={styles.textCenter}>(i)</td>
-              <td className={styles.textCenter}>(j)</td>
-              <td className={styles.textCenter}>(k)</td>
-              <td className={styles.textCenter}>(l)</td>
-              <td className={styles.textCenter}>(m)</td>
-              <td className={styles.textCenter}>(n)</td>
-              <td className={styles.textCenter}>(o)</td>
-              <td className={styles.textCenter}>(p)</td>
-              <td className={styles.textCenter}>(q)</td>
-              <td className={styles.textCenter}>(r)</td>
-              <td className={styles.textCenter}>(s)</td>
-              <td className={styles.textCenter}>(t)</td>
-              <td className={styles.textCenter}>(u)</td>
-              <td className={styles.textCenter}>(v)</td>
-              <td className={styles.textCenter}>(w)</td>
-              <td className={styles.textCenter}>(x)</td>
-              <td className={styles.textCenter}>(y)</td>
-              <td className={styles.textCenter}>(z)</td>
-              <td className={styles.textCenter}>(aa)</td>
-              <td className={styles.textCenter}>(ab)</td>
-              <td className={styles.textCenter}>(ac)</td>
-              <td className={styles.textCenter}>(ad)</td>
-              <td className={styles.textCenter}>(ae)</td>
-              <td className={styles.textCenter}>(af)</td>
-              <td className={styles.textCenter}>(ag)</td>
-              <td className={styles.textCenter}>(ah)</td>
-              <td className={styles.textCenter}>(ai)</td>
-              <td className={styles.textCenter}>(aj)</td>
-              <td className={styles.textCenter}>(ak)</td>
-              <td className={styles.textCenter}>(al)</td>
-              <td className={styles.textCenter}>(am)</td>
-              <td className={styles.textCenter}>(an)</td>
-              <td className={styles.textCenter}>(ao)</td>
-              <td className={styles.textCenter}>(ap)</td>
-              <td className={styles.textCenter}>(aq)</td>
-              <td className={styles.textCenter}>(ar)</td>
-              <td className={styles.textCenter}>(as)</td>
-              <td className={styles.textCenter}>(at)</td>
+              <td className={styles.textCentre}>(a)</td>
+              <td className={styles.textCentre}>(b)</td>
+              <td className={styles.textCentre}>(c)</td>
+              <td className={styles.textCentre}>(d)</td>
+              <td className={styles.textCentre}>(e)</td>
+              <td className={styles.textCentre}>(f)</td>
+              <td className={styles.textCentre}>(g)</td>
+              <td className={styles.textCentre}>(h)</td>
+              <td className={styles.textCentre}>(i)</td>
+              <td className={styles.textCentre}>(j)</td>
+              <td className={styles.textCentre}>(k)</td>
+              <td className={styles.textCentre}>(l)</td>
+              <td className={styles.textCentre}>(m)</td>
+              <td className={styles.textCentre}>(n)</td>
+              <td className={styles.textCentre}>(o)</td>
+              <td className={styles.textCentre}>(p)</td>
+              <td className={styles.textCentre}>(q)</td>
+              <td className={styles.textCentre}>(r)</td>
+              <td className={styles.textCentre}>(s)</td>
+              <td className={styles.textCentre}>(t)</td>
+              <td className={styles.textCentre}>(u)</td>
+              <td className={styles.textCentre}>(v)</td>
+              <td className={styles.textCentre}>(w)</td>
+              <td className={styles.textCentre}>(x)</td>
+              <td className={styles.textCentre}>(y)</td>
+              <td className={styles.textCentre}>(z)</td>
+              <td className={styles.textCentre}>(aa)</td>
+              <td className={styles.textCentre}>(ab)</td>
+              <td className={styles.textCentre}>(ac)</td>
+              <td className={styles.textCentre}>(ad)</td>
+              <td className={styles.textCentre}>(ae)</td>
+              <td className={styles.textCentre}>(af)</td>
+              <td className={styles.textCentre}>(ag)</td>
+              <td className={styles.textCentre}>(ah)</td>
+              <td className={styles.textCentre}>(ai)</td>
+              <td className={styles.textCentre}>(aj)</td>
+              <td className={styles.textCentre}>(ak)</td>
+              <td className={styles.textCentre}>(al)</td>
+              <td className={styles.textCentre}>(am)</td>
+              <td className={styles.textCentre}>(an)</td>
+              <td className={styles.textCentre}>(ao)</td>
+              <td className={styles.textCentre}>(ap)</td>
+              <td className={styles.textCentre}>(aq)</td>
+              <td className={styles.textCentre}>(ar)</td>
+              <td className={styles.textCentre}>(as)</td>
+              <td className={styles.textCentre}>(at)</td>
             </tr>
             {patientlist?.length > 0 ? (
               patientlist.map((patient, rowIndex) => (
@@ -514,7 +513,7 @@ const Moh405Register: React.FC = () => {
           </tbody>
         </table>
       </div>
-    </>
+    </RegisterLayout>
   );
 };
 

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

@@ -0,0 +1,120 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 405 as the register prints it: one column per cell, in the order they appear.
+ *
+ * The last 10 columns are rendered by the table but have no headings above
+ * them -- the header row is 46 columns wide against 56 of data. They carry
+ * their field names rather than headings borrowed from neighbouring columns.
+ */
+export const moh405ExportColumns: RegisterColumn[] = [
+  { header: 'Date of visit', value: (row) => row.date_of_visit ?? '' },
+  { header: '(New Client) - ANC Number - NUPI', value: (row) => row.anc_number ?? '' },
+  { header: 'ANC Number/NUPI (Re Visit)', value: (row) => row.anc_number_NUPI ?? '' },
+  { header: 'AMRSID', value: (row) => row.amrsID ?? '' },
+  { header: 'Number of Visits (1st,2nd,3rd, 4th ….)', value: (row) => row.number_of_anc_visits ?? '' },
+  { header: 'Full Name (First, Middle, Surname)', value: (row) => row.full_names ?? '' },
+  { header: 'Date of Birth (DD/MM/YYYY) - Age', value: (row) => row.date_of_birth ?? '' },
+  { header: 'Subcounty/ County', value: (row) => row.subcounty_county ?? '' },
+  { header: 'Village/Estate/ Landmark - Phone Number', value: (row) => row.village_estate_landmark ?? '' },
+  {
+    header:
+      'Marital Status NM=Never Married/Single MM=Married Monogamous MP=Married Polygamous W=Widowed D=Divorced S=Separated',
+    value: (row) => row.marital_status ?? '',
+  },
+  { header: 'Parity', value: (row) => row.parity ?? '' },
+  { header: 'Gravidae', value: (row) => row.gravidae ?? '' },
+  { header: 'Date of Last Menstrual Period (LMP) - (dd/mm/yyyy)', value: (row) => row.last_lmp_date ?? '' },
+  { header: 'Expected Date of Delivery (EDD) - (dd/mm/yyyy)', value: (row) => row.edd ?? '' },
+  { header: 'Gestation in Weeks', value: (row) => row.gestation_in_weeks ?? '' },
+  { header: 'MUAC 1= Green, 2=Yellow, 3=Red', value: (row) => row.muac ?? '' },
+  { header: 'Height (cm)', value: (row) => row.height ?? '' },
+  { header: 'Weight (kg)', value: (row) => row.weight ?? '' },
+  { header: 'Blood Pressure', value: (row) => row.blood_pressure ?? '' },
+  { header: 'Breast Exam 1=normal 2=abnormal', value: (row) => row.breast_exam ?? '' },
+  {
+    header: 'FGM (Y/N) - FGM associated complications: 1=Scarring 2=Keloids 3=Dyspaneuria 4=UTI 5 = NA',
+    value: (row) => row.fgm ?? '',
+  },
+  { header: 'Laboratory - Haemoglobin (Level/ ND/NA)', value: (row) => row.haemoglobin ?? '' },
+  {
+    header:
+      'Laboratory - Blood Sugar Testing for Diabetes: 1=RBS< 11.1 mmol/L, No Diabetes, 2=RBS>11.1 mmol/L, Has Diabetes, 3=No RBS done',
+    value: (row) => row.blood_sugar_test ?? '',
+  },
+  { header: 'Laboratory - Blood group and rhesus (Y/N)', value: (row) => row.blood_group_rhesus ?? '' },
+  { header: 'Laboratory - Urinalysis (Y/N)', value: (row) => row.urinalysis ?? '' },
+  {
+    header: 'Laboratory - Type of Test RPR/ VDRL/ Duo Test/ NA - Test Results (P/N/NA)',
+    value: (row) => row.rpr_vdrl_duo ?? '',
+  },
+  {
+    header: 'Laboratory - Hepatitis B virus Sceening Result (P/N/ND) - Treatment (Y/N/NA)',
+    value: (row) => row.hepatitisB ?? '',
+  },
+  {
+    header: 'Laboratory - TB Screening: Codes (1-5) - 1=Presumed TB 2=No Signs 3=On TB Treatment 4=On TPT 5=Not Done',
+    value: (row) => row.tb_screening ?? '',
+  },
+  {
+    header: 'Laboratory - HIV Testing (Initial or Retest, Known Poitive or Revisit) - (I/R/KP/ND/Rev)',
+    value: (row) => row.hiv_test_type ?? '',
+  },
+  {
+    header: 'Laboratory - HIV Test 1 - Kit Name - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_1_kit_name ?? '',
+  },
+  {
+    header: 'Laboratory - HIV Test 2 - Kit Name - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_2_kit_name ?? '',
+  },
+  {
+    header: 'Laboratory - HIV Test 3 - Kit Name - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_3_kit_name ?? '',
+  },
+  { header: 'Laboratory - HIV Results - (N/P/Ic/U/N A)', value: (row) => row.hiv_results ?? '' },
+  {
+    header: 'Maternal HAART - N = New on ART. OA = On ART NA = Not Applicable',
+    value: (row) => row.maternal_haart ?? '',
+  },
+  { header: 'Infant Prophylaxis - AN = AZT&NVP A = AZT N = NVP NA', value: (row) => row.infant_prophylaxis ?? '' },
+  { header: 'Partner HIV Testing - N/P/KP/NA', value: (row) => row.partner_hiv_testing ?? '' },
+  {
+    header:
+      'Other Conditions and Treatment - 1=Hypertension; 2=Diabetes; 3=Epilepsy; 4=Malaria in Pregnancy; 5=STIs/RTI; 6=Others (Specify) 7=None Record all that apply - Treatment (Y/N/NA)',
+    value: (row) => row.other_conditions ?? '',
+  },
+  { header: 'Deworming - (Y/N/NA)', value: (row) => row.deworming ?? '' },
+  { header: 'IPT 1-3 - (1,2,3,N,NA)', value: (row) => row.ipt_1_3 ?? '' },
+  {
+    header: 'TT Dose - 1=TT Dose 1st dose 2=2nd dose 3=3rd dose 4=4th dose 5=5th dose NA=None',
+    value: (row) => row.tt_dose ?? '',
+  },
+  {
+    header:
+      'Supplementation - Given Supplementation 1=Combined IFAs 2=Iron 3=Folate 4=Iron+Folate Separately 5=Calcium',
+    value: (row) => row.supplementation ?? '',
+  },
+  { header: 'LLITNs - Received LLITNs (Y/N)', value: (row) => row.llitns ?? '' },
+  {
+    header: 'Referrrals - From - 1=From Community Unit 2=Another Health Facility 3=Not Applicable',
+    value: (row) => row.referrals_from ?? '',
+  },
+  {
+    header:
+      'Referrrals - To - 1=To Community Unit 2=HIV preventive services 3=Another Health Facility 4=Not Applicable',
+    value: (row) => row.referrals_to ?? '',
+  },
+  { header: 'Referrrals - Reason 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: 'Fgm complications', value: (row) => row.fgm_complications ?? '' },
+  { header: 'Rpr vdrl duo results', value: (row) => row.rpr_vdrl_duo_results ?? '' },
+  { header: 'Hepatitis B treatment', value: (row) => row.hepatitisB_treatment ?? '' },
+  { header: 'Hiv test 1 expiry date', value: (row) => row.hiv_test_1_expiry_date ?? '' },
+  { header: 'Hiv test 2 expiry date', value: (row) => row.hiv_test_2_expiry_date ?? '' },
+  { header: 'Hiv test 3 expiry date', value: (row) => row.hiv_test_3_expiry_date ?? '' },
+  { header: 'Other conditions treatment', value: (row) => row.other_conditions_treatment ?? '' },
+];

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

@@ -1,18 +1,14 @@
-import { Button, Loading } from '@carbon/react';
-import React, { useEffect, useState } from '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 classNames from 'classnames';
 import { getMoh406PatientList } from '../../../resources/moh-711.resource';
 import { moh406Columns } from './type';
+import { moh406ExportColumns } from './moh-406.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh406Register: React.FC = () => {
-  const navigate = useNavigate();
-
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
   const location = useLocation();
 
@@ -22,42 +18,43 @@ const Moh406Register: React.FC = () => {
   const indicator = searchParams.get('indicator');
   const reportName = location.state?.reportName || '';
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          reportName,
-        };
-
-        const data = await getMoh406PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, reportName]);
-  function navigateBack() {
-    navigate('/moh-711');
-  }
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh406PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, reportName],
+  );
   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 406 Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh406ExportColumns}
+    >
       <div className={styles.tableContainer}>
         <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
           <thead>
@@ -388,49 +385,49 @@ const Moh406Register: React.FC = () => {
           </thead>
           <tbody>
             <tr>
-              <td className={styles.textCenter}>(a)</td>
-              <td className={styles.textCenter}>(b)</td>
-              <td className={styles.textCenter}>(c)</td>
-              <td className={styles.textCenter}>(d)</td>
-              <td className={styles.textCenter}>(e)</td>
-              <td className={styles.textCenter}>(f)</td>
-              <td className={styles.textCenter}>(g)</td>
-              <td className={styles.textCenter}>(h)</td>
-              <td className={styles.textCenter}>(i)</td>
-              <td className={styles.textCenter}>(j)</td>
-              <td className={styles.textCenter}>(k)</td>
-              <td className={styles.textCenter}>(l)</td>
-              <td className={styles.textCenter}>(m)</td>
-              <td className={styles.textCenter}>(n)</td>
-              <td className={styles.textCenter}>(o)</td>
-              <td className={styles.textCenter}>(p)</td>
-              <td className={styles.textCenter}>(q)</td>
-              <td className={styles.textCenter}>(r)</td>
-              <td className={styles.textCenter}>(s)</td>
-              <td className={styles.textCenter}>(t)</td>
-              <td className={styles.textCenter}>(u)</td>
-              <td className={styles.textCenter}>(v)</td>
-              <td className={styles.textCenter}>(w)</td>
-              <td className={styles.textCenter}>(x)</td>
-              <td className={styles.textCenter}>(y)</td>
-              <td className={styles.textCenter}>(z)</td>
-              <td className={styles.textCenter}>(aa)</td>
-              <td className={styles.textCenter}>(ab)</td>
-              <td className={styles.textCenter}>(ac)</td>
-              <td className={styles.textCenter}>(ad)</td>
-              <td className={styles.textCenter}>(ae)</td>
-              <td className={styles.textCenter}>(af)</td>
-              <td className={styles.textCenter}>(ag)</td>
-              <td className={styles.textCenter}>(ah)</td>
-              <td className={styles.textCenter}>(ai)</td>
-              <td className={styles.textCenter}>(aj)</td>
-              <td className={styles.textCenter}>(ak)</td>
-              <td className={styles.textCenter}>(al)</td>
-              <td className={styles.textCenter}>(am)</td>
-              <td className={styles.textCenter}>(an)</td>
-              <td className={styles.textCenter}>(ao)</td>
-              <td className={styles.textCenter}>(ap)</td>
-              <td className={styles.textCenter}>(aq)</td>
+              <td className={styles.textCentre}>(a)</td>
+              <td className={styles.textCentre}>(b)</td>
+              <td className={styles.textCentre}>(c)</td>
+              <td className={styles.textCentre}>(d)</td>
+              <td className={styles.textCentre}>(e)</td>
+              <td className={styles.textCentre}>(f)</td>
+              <td className={styles.textCentre}>(g)</td>
+              <td className={styles.textCentre}>(h)</td>
+              <td className={styles.textCentre}>(i)</td>
+              <td className={styles.textCentre}>(j)</td>
+              <td className={styles.textCentre}>(k)</td>
+              <td className={styles.textCentre}>(l)</td>
+              <td className={styles.textCentre}>(m)</td>
+              <td className={styles.textCentre}>(n)</td>
+              <td className={styles.textCentre}>(o)</td>
+              <td className={styles.textCentre}>(p)</td>
+              <td className={styles.textCentre}>(q)</td>
+              <td className={styles.textCentre}>(r)</td>
+              <td className={styles.textCentre}>(s)</td>
+              <td className={styles.textCentre}>(t)</td>
+              <td className={styles.textCentre}>(u)</td>
+              <td className={styles.textCentre}>(v)</td>
+              <td className={styles.textCentre}>(w)</td>
+              <td className={styles.textCentre}>(x)</td>
+              <td className={styles.textCentre}>(y)</td>
+              <td className={styles.textCentre}>(z)</td>
+              <td className={styles.textCentre}>(aa)</td>
+              <td className={styles.textCentre}>(ab)</td>
+              <td className={styles.textCentre}>(ac)</td>
+              <td className={styles.textCentre}>(ad)</td>
+              <td className={styles.textCentre}>(ae)</td>
+              <td className={styles.textCentre}>(af)</td>
+              <td className={styles.textCentre}>(ag)</td>
+              <td className={styles.textCentre}>(ah)</td>
+              <td className={styles.textCentre}>(ai)</td>
+              <td className={styles.textCentre}>(aj)</td>
+              <td className={styles.textCentre}>(ak)</td>
+              <td className={styles.textCentre}>(al)</td>
+              <td className={styles.textCentre}>(am)</td>
+              <td className={styles.textCentre}>(an)</td>
+              <td className={styles.textCentre}>(ao)</td>
+              <td className={styles.textCentre}>(ap)</td>
+              <td className={styles.textCentre}>(aq)</td>
             </tr>
             {patientlist?.length > 0 ? (
               patientlist.map((patient, index) => (
@@ -518,7 +515,7 @@ const Moh406Register: React.FC = () => {
               ))
             ) : (
               <tr>
-                <td colSpan={moh406Columns.length} className={styles.textCenter}>
+                <td colSpan={moh406Columns.length} className={styles.textCentre}>
                   No data available
                 </td>
               </tr>
@@ -526,7 +523,7 @@ const Moh406Register: React.FC = () => {
           </tbody>
         </table>
       </div>
-    </>
+    </RegisterLayout>
   );
 };