@ampath/esm-reports-app 1.0.0-next.8 → 1.0.0-next.80

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

@@ -1,41 +1,162 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
-h3 {
-    text-align: center;
+/* MOH-710 laid out for A4, on the same scale as MOH-711, MOH-740 and MOH-745.
+   Its 106 rows across eleven tables run to about two pages, so this is a
+   flowing document: the blocks share their edges, and a lettered section is
+   kept whole across a page break. */
+
+$ink: #000;
+$bar: #d9d9d9;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+/* Masthead */
+
+.mainTitleBox {
+  padding: $pad;
+  text-align: center;
+  border: $rule;
 }
 
-.container {
-    border: 1px solid #ccc;
-    margin: 0 2rem;
-    margin-top: 0.5px;
+.ministry {
+  font-size: $meta;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+/* Facility and period strip, joined to the masthead above */
+
+.location {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: 2mm $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.line,
+.shortLine {
+  display: inline-block;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  border-bottom: $rule;
+}
+
+.line {
+  width: 26mm;
+}
+
+.shortLine {
+  width: 14mm;
+}
+
+/* A lettered section, kept off a page break so a table never splits from the
+   heading that names it. Sections share edges rather than sitting apart. */
+
+.container {
+  border: $rule;
+  border-top: none;
+  break-inside: avoid;
+  page-break-inside: avoid;
 }
 
 .title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+  padding: 1.5mm $pad;
+  font-size: $text;
+  font-weight: 700;
+  color: $ink;
+  text-align: left;
+  background-color: $bar;
+  border-bottom: $rule;
+  break-after: avoid;
+  page-break-after: avoid;
 }
+
+.tableContainer {
+  overflow-x: auto;
+  padding: $pad;
+
+  & + .tableContainer {
+    padding-top: 0;
+  }
+}
+
 .table {
-  width: auto;
+  width: 100%;
   border-collapse: collapse;
-  
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid #dee2e6;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
+}
+
+.tableBordered th {
+  font-weight: 700;
+  color: $ink;
+  background-color: #f0f0f0;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
-}
+  background-color: #fafafa;
+}
+
+@media screen {
+  .tableStriped tbody tr:hover {
+    background-color: $brand-primary-10;
+  }
+}
+
+/* Sign-off, enclosed by the form rather than floating beneath it. Three fields
+   across the sheet, so its rules can be wider than the header strip's five. */
+
+.signOff {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+
+  .line {
+    width: 45mm;
+  }
+
+  .shortLine {
+    width: 25mm;
+  }
+}
+
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
+}

package/src/reports/moh-710/registers/moh-413/moh-413-columns.ts

@@ -0,0 +1,22 @@
+import { type RegisterColumn } from '../../../../common/report-register';
+
+/**
+ * MOH 204A as the register prints it: one column per cell, in the order they appear.
+ */
+export const Moh413xportColumns: RegisterColumn[] = [
+  { header: 'Date (DD/MM/YYYY) - A', value: (row) => row.date ?? '' },
+  {
+    header: 'NEMIS Number - B',
+    value: (row) => row.cr_id ?? '',
+  },
+  { header: 'Name of girl - C', value: (row) => row.child_names ?? '' },
+  { header: 'Date of Birth - D', value: (row) => row.date_of_birth ?? '' },
+  { header: 'Name of School - E', value: (row) => row.name_of_school ?? '' },
+  { header: 'Class - F', value: (row) => row.date_first_seen ?? '' },
+  { header: 'Name of Parent/Guardian - F', value: (row) => row.parent_name ?? '' },
+  { header: 'Parent/Guardian Telephone Number - G', value: (row) => row.parent_phone_number ?? '' },
+  { header: 'Physical Address - H', value: (row) => row.address ?? '' },
+  { header: 'HPV Vaccine Dose 1 - I', value: (row) => row.hpv_1 ?? '' },
+  { header: 'HPV Vaccine Dose 2 -J', value: (row) => row.hpv_2 ?? '' },
+  { header: 'Remarks - K', value: (row) => row.remarks ?? '' },
+];

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

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { RegisterLayout, usePatientList } from '../../../../common/report-register';
+import { getMoh413PatientList } from '../../../../resources/moh-710.resource';
+import classNames from 'classnames';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import dayjs from 'dayjs';
+import { useSession } from '@openmrs/esm-framework';
+
+import styles from './moh-413.scss';
+import { Moh413xportColumns } from './moh-413-columns';
+import { ReportFiltersComponent, type ReportPeriod } from '../../../../common/report-filters';
+
+interface Moh413ComponentProps {}
+
+const Moh413Component: React.FC<Moh413ComponentProps> = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const session = useSession();
+  const from = searchParams.get('from');
+  const isDrilldown = Boolean(from);
+  const [generatedPeriod, setGeneratedPeriod] = useState<{ startDate: string; endDate: string } | null>(() => {
+    const startDate = searchParams.get('startDate');
+    const endDate = searchParams.get('endDate');
+    return !isDrilldown && startDate && endDate ? { startDate, endDate } : null;
+  });
+  const isGenerated = isDrilldown || Boolean(generatedPeriod);
+
+  const startDate = generatedPeriod?.startDate ?? searchParams.get('startDate');
+  const endDate = generatedPeriod?.endDate ?? searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids') ?? session?.sessionLocation?.uuid ?? '';
+  const indicator = searchParams.get('indicator');
+
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) => {
+      if (!isDrilldown && !generatedPeriod) {
+        return Promise.resolve({ results: [], total: 0, isTotalExact: true });
+      }
+
+      return getMoh413PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        startIndex,
+        limit,
+      });
+    },
+    [startDate, endDate, locationUuids, indicator, isDrilldown, generatedPeriod],
+  );
+
+  const generate = ({ startDate, endDate }: ReportPeriod) => {
+    setGeneratedPeriod({ startDate, endDate });
+    setSearchParams((currentParams) => {
+      const nextParams = new URLSearchParams(currentParams);
+      nextParams.set('startDate', startDate);
+      nextParams.set('endDate', endDate);
+      if (!nextParams.has('locationUuids') && locationUuids) {
+        nextParams.set('locationUuids', locationUuids);
+      }
+      return nextParams;
+    });
+  };
+
+  return (
+    <>
+      {!isDrilldown && (
+        <ReportFiltersComponent
+          reportName="MOH 413 Register"
+          mode="range"
+          onGenerate={generate}
+          isLoading={isLoading}
+          isReportGenerated={Boolean(generatedPeriod)}
+          generatedPeriod={generatedPeriod ?? undefined}
+          backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        />
+      )}
+      <RegisterLayout
+        parentLabel={isDrilldown ? 'MOH-710 Report' : 'All registers'}
+        parentPath={isDrilldown ? '/moh-710' : '/?tab=registers'}
+        title="MOH 413 Register"
+        isLoading={isLoading}
+        isEmpty={isGenerated && patientlist.length === 0}
+        page={page}
+        pageSize={pageSize}
+        total={total}
+        isTotalExact={isTotalExact}
+        onPageChange={onPageChange}
+        fetchAll={isGenerated ? fetchAll : undefined}
+        columns={Moh413xportColumns}
+      >
+        {isGenerated && (
+          <div className={styles.tableContainer}>
+            <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+              <TableHead>
+                <TableRow>
+                  {Moh413xportColumns.map((column, index) => (
+                    <TableHeader key={`${column.header}-${index}`}>{column.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {patientlist?.length > 0 ? (
+                  patientlist?.map((patient, i) => (
+                    <TableRow key={patient.person_id || patient.id}>
+                      {Moh413xportColumns.map((column, index) => {
+                        const value = column.value(patient, i);
+                        return (
+                          <TableCell key={`${column.header}-${index}`}>
+                            {[0, 3, 5].includes(index) && value
+                              ? dayjs(String(value)).format('YYYY-MM-DD')
+                              : String(value ?? '')}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={Moh413xportColumns.length}>No data available</TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RegisterLayout>
+    </>
+  );
+};
+
+export default Moh413Component;

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

@@ -0,0 +1,64 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+
+.tableContainer {
+  width: 100%;
+}
+
+/* Sized to content rather than to the frame, so a long value -- a full name,
+   say -- widens its own column instead of wrapping. `.tableScroll` in the
+   layout scrolls when the table outgrows the page. */
+
+.table {
+  width: auto;
+  min-width: 100%;
+  margin: 0;
+  font-size: 0.75rem;
+  border-collapse: collapse;
+}
+
+.tableBordered td,
+.tableBordered th {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  border: 1px solid $ui-04;
+}
+
+.tableBordered th {
+  font-weight: 600;
+  color: $color-gray-100;
+  background-color: $ui-01;
+  /* headings carry deliberate line breaks, so they wrap where the markup says */
+  white-space: normal;
+}
+
+.tableBordered td {
+  white-space: nowrap;
+}
+
+/* Long prose columns (diagnoses, referrals, comments) wrap inside a bounded
+   width instead of stretching the row past the fold. */
+.tableBordered td.wrapCell {
+  white-space: normal;
+  min-width: 8rem;
+  max-width: 16rem;
+  overflow-wrap: anywhere;
+}
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: $ui-01;
+}
+
+.tableStriped tbody tr:hover {
+  background-color: $brand-primary-10;
+}
+
+.textCentre {
+  text-align: center;
+}
+
+.verticalText {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}

package/src/reports/moh-710/registers/moh-510/moh-510.columns.ts

@@ -0,0 +1,40 @@
+import { type RegisterColumn } from '../../../../common/report-register/register-columns';
+
+/**
+ * MOH 204A as the register prints it: one column per cell, in the order they appear.
+ */
+export const moh510ExportColumns: RegisterColumn[] = [
+  { header: 'Date (DD/MM/YYYY) - A', value: (row) => row.date ?? '' },
+  {
+    header: "Child's Number - B",
+    value: (row) => row.child_number ?? '',
+  },
+  { header: "Child's Names - C", value: (row) => row.child_names ?? '' },
+  { header: 'Sex - D', value: (row) => row.sex ?? '' },
+  { header: 'Date of Birth - E', value: (row) => row.date_of_birth ?? '' },
+  { header: 'Date first Seen - F', value: (row) => row.date_first_seen ?? '' },
+  { header: "Father's Full Names/Guardian - G", value: (row) => row.father_names ?? '' },
+  { header: "Mother's Full Names/Guardian - H", value: (row) => row.mother_names ?? '' },
+  { header: 'Village /Estate / Landmark - I', value: (row) => row.village_estate_landmark ?? '' },
+  { header: 'Telephone No. - J', value: (row) => row.phone_number ?? '' },
+  { header: 'BCG - K', value: (row) => row.bcg ?? '' },
+  { header: 'Polio birth Dose - L', value: (row) => row.polio_birth_dose ?? '' },
+  { header: 'OPV 1 - M', value: (row) => row.opv_1 ?? '' },
+  { header: 'OPV 2 - N', value: (row) => row.opv_2 ?? '' },
+  { header: 'OPV 3 - O', value: (row) => row.opv_3 ?? '' },
+  { header: 'IPV - P', value: (row) => row.ipv ?? '' },
+  { header: 'DPT / Hep.B / Hib.1 - Q', value: (row) => row.dpt_hep_1 ?? '' },
+  { header: 'DPT / Hep.B / Hib.2 - R', value: (row) => row.dpt_hep_2 ?? '' },
+  { header: 'DPT / Hep.B / Hib.3 - S', value: (row) => row.dpt_hep_3 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) T - AB', value: (row) => row.pneumococcal_1 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) U - AB', value: (row) => row.pneumococcal_2 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) V - AB', value: (row) => row.pneumococcal_3 ?? '' },
+  { header: 'Rota1 - W', value: (row) => row.rotavirus_1 ?? '' },
+  { header: 'Rota2 - X', value: (row) => row.rotavirus_2 ?? '' },
+  { header: 'Vitamin A(6-11 months) - Y', value: (row) => row.vitamin_a_6_11_months ?? '' },
+  { header: 'MR1 - Z', value: (row) => row.measles_rubella_1 ?? '' },
+  { header: 'Yellow Fever - AA', value: (row) => row.yellow_fever ?? '' },
+  { header: 'Fully Immunized Child - AB', value: (row) => row.fully_immunized_child ?? '' },
+  { header: 'MR2 - AC', value: (row) => row.measles_rubella_2 ?? '' },
+  { header: 'Remarks - AD', value: (row) => row.remarks ?? '' },
+];

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

@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+
+import styles from './moh-510.scss';
+import { useSearchParams } from 'react-router-dom';
+import { RegisterLayout, usePatientList } from '../../../../common/report-register';
+import { getMoh510PatientList } from '../../../../resources/moh-710.resource';
+import { moh510ExportColumns } from './moh-510.columns';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { useSession } from '@openmrs/esm-framework';
+import { ReportFiltersComponent, type ReportPeriod } from '../../../../common/report-filters';
+
+interface Moh510RegisterComponentProps {}
+
+const Moh510RegisterComponent: React.FC<Moh510RegisterComponentProps> = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const session = useSession();
+  const from = searchParams.get('from');
+  const isDrilldown = Boolean(from);
+  const [generatedPeriod, setGeneratedPeriod] = useState<{ startDate: string; endDate: string } | null>(() => {
+    const startDate = searchParams.get('startDate');
+    const endDate = searchParams.get('endDate');
+    return !isDrilldown && startDate && endDate ? { startDate, endDate } : null;
+  });
+  const isGenerated = isDrilldown || Boolean(generatedPeriod);
+
+  const startDate = generatedPeriod?.startDate ?? searchParams.get('startDate');
+  const endDate = generatedPeriod?.endDate ?? searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids') ?? session?.sessionLocation?.uuid ?? '';
+  const indicator = searchParams.get('indicator');
+
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) => {
+      if (!isDrilldown && !generatedPeriod) {
+        return Promise.resolve({ results: [], total: 0, isTotalExact: true });
+      }
+
+      return getMoh510PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        startIndex,
+        limit,
+      });
+    },
+    [startDate, endDate, locationUuids, indicator, isDrilldown, generatedPeriod],
+  );
+
+  const generate = ({ startDate, endDate }: ReportPeriod) => {
+    setGeneratedPeriod({ startDate, endDate });
+    setSearchParams((currentParams) => {
+      const nextParams = new URLSearchParams(currentParams);
+      nextParams.set('startDate', startDate);
+      nextParams.set('endDate', endDate);
+      if (!nextParams.has('locationUuids') && locationUuids) {
+        nextParams.set('locationUuids', locationUuids);
+      }
+      return nextParams;
+    });
+  };
+
+  return (
+    <>
+      {!isDrilldown && (
+        <ReportFiltersComponent
+          reportName="MOH-510 Register"
+          mode="range"
+          onGenerate={generate}
+          isLoading={isLoading}
+          isReportGenerated={Boolean(generatedPeriod)}
+          generatedPeriod={generatedPeriod ?? undefined}
+          backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        />
+      )}
+      <RegisterLayout
+        parentLabel={isDrilldown ? 'MOH-710 Report' : 'All registers'}
+        parentPath={isDrilldown ? '/moh-710' : '/?tab=registers'}
+        title="MOH-510 Register"
+        isLoading={isLoading}
+        isEmpty={isGenerated && patientlist.length === 0}
+        page={page}
+        pageSize={pageSize}
+        total={total}
+        isTotalExact={isTotalExact}
+        onPageChange={onPageChange}
+        fetchAll={isGenerated ? fetchAll : undefined}
+        columns={moh510ExportColumns}
+      >
+        {isGenerated && (
+          <div className={styles.tableContainer}>
+            <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>Date (DD/MM/YYYY)</TableHeader>
+                  <TableHeader>Serial Number</TableHeader>
+                  <TableHeader>Child's Number</TableHeader>
+                  <TableHeader>Child's Names</TableHeader>
+                  <TableHeader>Sex</TableHeader>
+                  <TableHeader>Date of Birth</TableHeader>
+                  <TableHeader>Date first Seen</TableHeader>
+                  <TableHeader>Father's Full Names/Guardian</TableHeader>
+                  <TableHeader>Mother's Full Names/Guardian</TableHeader>
+                  <TableHeader>Village /Estate / Landmark</TableHeader>
+                  <TableHeader>Telephone No.</TableHeader>
+                  <TableHeader>BCG</TableHeader>
+                  <TableHeader>Polio birth Dose</TableHeader>
+                  <TableHeader>OPV 1</TableHeader>
+                  <TableHeader>OPV 2</TableHeader>
+                  <TableHeader>OPV 3</TableHeader>
+                  <TableHeader>IPV</TableHeader>
+                  <TableHeader>DPT / Hep.B / Hib.1</TableHeader>
+                  <TableHeader>DPT / Hep.B / Hib.2</TableHeader>
+                  <TableHeader>DPT / Hep.B / Hib.3</TableHeader>
+                  <TableHeader>PCV 10 (Pneumococcal) 1</TableHeader>
+                  <TableHeader>PCV 10 (Pneumococcal) 2</TableHeader>
+                  <TableHeader>PCV 10 (Pneumococcal) 3</TableHeader>
+                  <TableHeader>Rota1</TableHeader>
+                  <TableHeader>Rota2</TableHeader>
+                  <TableHeader>Vitamin A(6-11 months)</TableHeader>
+                  <TableHeader>MR1</TableHeader>
+                  <TableHeader>Yellow Fever</TableHeader>
+                  <TableHeader>Fully Immunized Child</TableHeader>
+                  <TableHeader>MR2</TableHeader>
+                  <TableHeader>Remarks</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {patientlist?.length > 0 ? (
+                  patientlist?.map((patient, i) => (
+                    <TableRow key={patient.person_id || patient.id}>
+                      <TableCell>
+                        {patient.date ? dayjs(patient.encounter_datetime).format('YYYY-MM-DD') : ''}
+                      </TableCell>
+                      <TableCell>{i + 1}</TableCell>
+                      <TableCell>{patient.child_number}</TableCell>
+                      <TableCell>{patient.child_names}</TableCell>
+                      <TableCell>{patient.sex}</TableCell>
+                      <TableCell>{patient.date_of_birth}</TableCell>
+                      <TableCell>{patient.date_first_seen}</TableCell>
+                      <TableCell>{patient.father_names}</TableCell>
+                      <TableCell>{patient.mother_names}</TableCell>
+                      <TableCell>{patient.village_estate_landmark}</TableCell>
+                      <TableCell>{patient.phone_number}</TableCell>
+                      <TableCell>{patient.bcg_encounter_datetime}</TableCell>
+                      <TableCell>{patient.polio_birth_dose_encounter_datetime}</TableCell>
+                      <TableCell>{patient.opv_1_encounter_datetime}</TableCell>
+                      <TableCell>{patient.opv_2_encounter_datetime}</TableCell>
+                      <TableCell>{patient.opv_3_encounter_datetime}</TableCell>
+                      <TableCell>{patient.ipv_encounter_datetime}</TableCell>
+                      <TableCell>{patient.dpt_hep_1_encounter_datetime}</TableCell>
+                      <TableCell>{patient.dpt_hep_2_encounter_datetime}</TableCell>
+                      <TableCell>{patient.dpt_hep_3_encounter_datetime}</TableCell>
+                      <TableCell>{patient.pneumococcal_1_encounter_datetime}</TableCell>
+                      <TableCell>{patient.pneumococcal_2_encounter_datetime}</TableCell>
+                      <TableCell>{patient.pneumococcal_3_encounter_datetime}</TableCell>
+                      <TableCell>{patient.rotavirus_1_encounter_datetime}</TableCell>
+                      <TableCell>{patient.rotavirus_2_encounter_datetime}</TableCell>
+                      <TableCell>{patient.vitamin_a_6_11_months_encounter_datetime}</TableCell>
+                      <TableCell>{patient.measles_rubella_1_encounter_datetime}</TableCell>
+                      <TableCell>{patient.yellow_fever_encounter_datetime}</TableCell>
+                      <TableCell>{patient.fully_immunized_child_encounter_datetime}</TableCell>
+                      <TableCell>{patient.measles_rubella_2_encounter_datetime}</TableCell>
+                      <TableCell>{patient.remarks}</TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={28}>No data available</TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RegisterLayout>
+    </>
+  );
+};
+
+export default Moh510RegisterComponent;