@ampath/esm-reports-app 1.0.0-next.76 → 1.0.0-next.78

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

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
+import { useSession } from '@openmrs/esm-framework';
+
+import styles from './moh-407.scss';
+import { Moh407xportColumns } from './moh-407.columns';
+import { getMoh407PatientList } from '../../../resources/moh-711.resource';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { ReportFiltersComponent, type ReportPeriod } from '../../../common/report-filters';
+
+interface Moh407RegisterComponentProps {}
+
+const Moh407RegisterComponent: React.FC<Moh407RegisterComponentProps> = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  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 reportName = location.state?.reportName || 'moh711Report';
+
+  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 getMoh407PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+        from,
+      });
+    },
+    [startDate, endDate, locationUuids, indicator, reportName, from, 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 407 Register"
+          mode="range"
+          onGenerate={generate}
+          isLoading={isLoading}
+          isReportGenerated={Boolean(generatedPeriod)}
+          generatedPeriod={generatedPeriod ?? undefined}
+          backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        />
+      )}
+      <RegisterLayout
+        parentLabel={isDrilldown ? 'MOH-711 Report' : 'All registers'}
+        parentPath={isDrilldown ? '/moh-711' : '/?tab=registers'}
+        title="MOH 407 Register"
+        isLoading={isLoading}
+        isEmpty={isGenerated && patientlist.length === 0}
+        page={page}
+        pageSize={pageSize}
+        total={total}
+        isTotalExact={isTotalExact}
+        onPageChange={onPageChange}
+        fetchAll={isGenerated ? fetchAll : undefined}
+        columns={Moh407xportColumns}
+      >
+        {isGenerated && (
+          <div className={styles.tableContainer}>
+            <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+              <TableHead>
+                <TableRow>
+                  <TableHeader aria-rowspan={2}>Serial Number</TableHeader>
+                  <TableHeader aria-rowspan={2}>Date</TableHeader>
+                  <TableHeader aria-rowspan={2}>National Identification Number</TableHeader>
+                  <TableHeader aria-rowspan={2}>Patient Names</TableHeader>
+                  <TableHeader aria-rowspan={2}>Patient Visit</TableHeader>
+                  <TableHeader aria-rowspan={2}>Residence</TableHeader>
+                  <TableHeader aria-rowspan={2}>Sex</TableHeader>
+                  <TableHeader colSpan={2}>Age</TableHeader>
+                  <TableHeader aria-rowspan={2}>Pregnant or Breastfeeding</TableHeader>
+                  <TableHeader>Nutritional Assessment</TableHeader>
+                  <TableHeader aria-rowspan={2}>Nutrition Status</TableHeader>
+                  <TableHeader aria-rowspan={2}>Serostatus</TableHeader>
+                  <TableHeader aria-rowspan={2}>Medical Condition</TableHeader>
+                  <TableHeader aria-rowspan={2}>Food Secure</TableHeader>
+                  <TableHeader aria-rowspan={2}>Nutrition Intervention</TableHeader>
+                  <TableHeader aria-rowspan={2}>Remarks</TableHeader>
+                </TableRow>
+                <TableRow>
+                  <TableHeader>Years</TableHeader>
+                  <TableHeader>Months</TableHeader>
+                  <TableHeader>Figure for z score</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {patientlist.length > 0 ? (
+                  patientlist.map((patient, index) => (
+                    <TableRow key={patient.person_id || patient.id || index}>
+                      {Moh407xportColumns.map((column, columnIndex) => (
+                        <TableCell key={`${column.header}-${columnIndex}`}>
+                          {String(column.value(patient, (page - 1) * pageSize + index) ?? '')}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={Moh407xportColumns.length}>No data available</TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RegisterLayout>
+    </>
+  );
+};
+
+export default Moh407RegisterComponent;

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

@@ -0,0 +1,24 @@
+import { type RegisterColumn } from '../../../common/report-register/register-columns';
+
+/**
+ * MOH 407 columns, flattened from the register's two-row table header.
+ */
+export const Moh407xportColumns: RegisterColumn[] = [
+  { header: 'Serial Number', value: (_row, index) => index + 1 },
+  { header: 'Date', value: (row) => row.date ?? '' },
+  { header: 'National Identification Number', value: (row) => row.national_identification_number ?? '' },
+  { header: 'Patient Names', value: (row) => row.patient_names ?? '' },
+  { header: 'Patient Visit', value: (row) => row.patient_visit ?? '' },
+  { header: 'Residence', value: (row) => row.residence ?? '' },
+  { header: 'Sex', value: (row) => row.sex ?? '' },
+  { header: 'Age - Years', value: (row) => row.age_years ?? '' },
+  { header: 'Age - Months', value: (row) => row.age_months ?? '' },
+  { header: 'Pregnant or Breastfeeding', value: (row) => row.pregnant_or_breastfeeding ?? '' },
+  { header: 'Nutritional Assessment - Figure for z score', value: (row) => row.z_score ?? '' },
+  { header: 'Nutrition Status', value: (row) => row.nutrition_status ?? '' },
+  { header: 'Serostatus', value: (row) => row.serostatus ?? '' },
+  { header: 'Medical Condition', value: (row) => row.medical_condition ?? '' },
+  { header: 'Food Secure', value: (row) => row.food_secure ?? '' },
+  { header: 'Nutrition Intervention', value: (row) => row.nutrition_intervention ?? '' },
+  { header: 'Remarks', value: (row) => row.remarks ?? '' },
+];

package/src/reports/moh-711/registers/moh-407.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-711/registers/moh-512.component.tsx

@@ -1,22 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
 import { RegisterLayout, usePatientList } from '../../../common/report-register';
 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 styles from './moh-512.scss';
 import { moh512ExportColumns } from './moh-512-columns';
 import { getMoh512PatientList } from '../../../resources/moh-711.resource';
+import { ReportFiltersComponent, type ReportPeriod } from '../../../common/report-filters';
 
 interface Moh512RegisterComponentProps {}
 
 const Moh512RegisterComponent: React.FC<Moh512RegisterComponentProps> = () => {
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
+  const session = useSession();
 
-  const startDate = searchParams.get('startDate');
-  const endDate = searchParams.get('endDate');
-  const locationUuids = searchParams.get('locationUuids');
+  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 reportName = location.state?.reportName || '';
 
@@ -30,8 +43,12 @@ const Moh512RegisterComponent: React.FC<Moh512RegisterComponentProps> = () => {
     onPageChange,
     fetchAll,
   } = usePatientList(
-    ({ startIndex, limit }) =>
-      getMoh512PatientList({
+    ({ startIndex, limit }) => {
+      if (!isDrilldown && !generatedPeriod) {
+        return Promise.resolve({ results: [], total: 0, isTotalExact: true });
+      }
+
+      return getMoh512PatientList({
         startDate,
         endDate,
         locationUuids,
@@ -39,10 +56,24 @@ const Moh512RegisterComponent: React.FC<Moh512RegisterComponentProps> = () => {
         reportName,
         startIndex,
         limit,
-      }),
-    [startDate, endDate, locationUuids, indicator, reportName],
+      });
+    },
+    [startDate, endDate, locationUuids, indicator, reportName, 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;
+    });
+  };
+
   const columns = [
     { key: 'date', label: 'Date' },
     { key: 'cr_id', label: 'Client Number' },
@@ -89,52 +120,71 @@ const Moh512RegisterComponent: React.FC<Moh512RegisterComponentProps> = () => {
   ];
 
   return (
-    <RegisterLayout
-      parentLabel="MOH-711 Report"
-      parentPath="/moh-711"
-      title="MOH 512 Register"
-      isLoading={isLoading}
-      isEmpty={patientlist.length === 0}
-      page={page}
-      pageSize={pageSize}
-      total={total}
-      isTotalExact={isTotalExact}
-      onPageChange={onPageChange}
-      fetchAll={fetchAll}
-      columns={moh512ExportColumns}
-    >
-      <div className={styles.tableContainer}>
-        <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
-          <TableHead>
-            <TableRow>
-              {columns.map((column) => (
-                <TableHeader key={column.key}>{column.label}</TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={columns.length}>Loading register...</TableCell>
-              </TableRow>
-            ) : patientlist.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={columns.length}>No records found.</TableCell>
-              </TableRow>
-            ) : (
-              patientlist.map((patient, index) => (
-                <TableRow key={patient.person_id || patient.id || index}>
+    <>
+      {!isDrilldown && (
+        <ReportFiltersComponent
+          reportName="MOH 512 Register"
+          mode="range"
+          onGenerate={generate}
+          isLoading={isLoading}
+          isReportGenerated={Boolean(generatedPeriod)}
+          generatedPeriod={generatedPeriod ?? undefined}
+          backLink={{ label: 'All registers', to: '/?tab=registers' }}
+        />
+      )}
+      <RegisterLayout
+        parentLabel={isDrilldown ? 'MOH-711 Report' : 'All registers'}
+        parentPath={isDrilldown ? '/moh-711' : '/?tab=registers'}
+        title="MOH 512 Register"
+        isLoading={isLoading}
+        isEmpty={isGenerated && patientlist.length === 0}
+        page={page}
+        pageSize={pageSize}
+        total={total}
+        isTotalExact={isTotalExact}
+        onPageChange={onPageChange}
+        fetchAll={isGenerated ? fetchAll : undefined}
+        columns={moh512ExportColumns}
+      >
+        {isGenerated && (
+          <div className={styles.tableContainer}>
+            <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
+              <TableHead>
+                <TableRow>
                   {columns.map((column) => (
-                    <TableCell key={column.key}>{patient[column.key] ?? ''}</TableCell>
+                    <TableHeader key={column.key}>{column.label}</TableHeader>
                   ))}
                 </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-    </RegisterLayout>
+              </TableHead>
+
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={columns.length}>Loading register...</TableCell>
+                  </TableRow>
+                ) : patientlist.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={columns.length}>No records found.</TableCell>
+                  </TableRow>
+                ) : (
+                  patientlist.map((patient, index) => (
+                    <TableRow key={patient.person_id || patient.id || index}>
+                      {columns.map((column) => (
+                        <TableCell key={column.key}>
+                          {column.key === 'date' && patient[column.key]
+                            ? dayjs(patient[column.key]).format('YYYY-MM-DD')
+                            : (patient[column.key] ?? '')}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RegisterLayout>
+    </>
   );
 };
 

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

@@ -3,6 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import { RegisterLayout, usePatientList } from '../../../common/report-register';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
 
 import styles from './tb-register.scss';
 import { TBExportColumns } from './tb-register-columns';
@@ -70,9 +71,11 @@ const TbRegisterComponent: React.FC<TbRegisterComponentProps> = () => {
             {patientlist?.length > 0 ? (
               patientlist?.map((patient, i) => (
                 <TableRow key={patient.person_id || patient.id}>
-                  <TableCell>{patient.date}</TableCell>
+                  <TableCell>{patient.date ? dayjs(patient.date).format('YYYY-MM-DD') : ''}</TableCell>
                   <TableCell>{patient.cr_id}</TableCell>
-                  <TableCell>{patient.date_of_birth}</TableCell>
+                  <TableCell>
+                    {patient.date_of_birth ? dayjs(patient.date_of_birth).format('YYYY-MM-DD') : ''}
+                  </TableCell>
                   <TableCell>{patient.gender}</TableCell>
                   <TableCell>{patient.tb_screening}</TableCell>
                   <TableCell>{patient.rtc}</TableCell>

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

@@ -1,15 +1,38 @@
 import React from 'react';
+import { Button } from '@carbon/react';
+import { useNavigate } from 'react-router-dom';
 
 import styles from '../moh711.scss';
 import classNames from 'classnames';
 
 interface ChanisComponentProps {
   moh711Data: any;
+  startDate: string;
+  endDate: string;
+  locationUuids: string;
 }
 
-const ChanisComponent: React.FC<ChanisComponentProps> = ({ moh711Data }) => {
+const ChanisComponent: React.FC<ChanisComponentProps> = ({ moh711Data, startDate, endDate, locationUuids }) => {
+  const navigate = useNavigate();
+
+  const openRegister = () => {
+    const params = new URLSearchParams({
+      startDate,
+      endDate,
+      locationUuids,
+      from: 'moh-711',
+    });
+
+    navigate(`/moh-407-register?${params}`, {
+      state: { from: '/moh-711', reportName: 'moh711Report' },
+    });
+  };
+
   return (
     <div className={styles.section}>
+      <Button kind="ghost" size="sm" onClick={openRegister}>
+        Open MOH 407 Register
+      </Button>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>

package/src/resources/moh-711.resource.ts

@@ -39,8 +39,8 @@ export async function getMoh711(params: Moh711Params): Promise<any> {
 
 export async function getMoh406PatientList(params: PatientListParams): Promise<PatientListPage> {
   const endPoint = (() => {
-    if (params.from && params.from?.toLowerCase() === "moh-717") {
-      return "moh-717-patient-list";
+    if (params.from && params.from?.toLowerCase() === 'moh-717') {
+      return 'moh-717-patient-list';
     }
     return 'moh-406-patient-list';
   })();
@@ -70,8 +70,8 @@ export async function getMoh406PatientList(params: PatientListParams): Promise<P
 
 export async function getMoh405PatientList(params: PatientListParams): Promise<PatientListPage> {
   const endPoint = (() => {
-    if (params.from && params.from?.toLowerCase() === "moh-717") {
-      return "moh-717-patient-list";
+    if (params.from && params.from?.toLowerCase() === 'moh-717') {
+      return 'moh-717-patient-list';
     }
     return 'moh-405-patient-list';
   })();
@@ -101,8 +101,8 @@ export async function getMoh405PatientList(params: PatientListParams): Promise<P
 
 export async function getMoh333PatientList(params: PatientListParams): Promise<PatientListPage> {
   const endPoint = (() => {
-    if (params.from && params.from?.toLowerCase() === "moh-717") {
-      return "moh-717-patient-list";
+    if (params.from && params.from?.toLowerCase() === 'moh-717') {
+      return 'moh-717-patient-list';
     }
     return 'moh-333-patient-list';
   })();
@@ -130,31 +130,6 @@ export async function getMoh333PatientList(params: PatientListParams): Promise<P
   }
 }
 
-// export async function getMoh510PatientList(params: PatientListParams): Promise<PatientListPage> {
-//   const url = await buildEtlUrl('moh-510-patient-list', {
-//     locationUuids: params.locationUuids || '',
-//     startDate: params.startDate || '',
-//     endDate: params.endDate || '',
-//     indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
-//     ...pageParams(params),
-//     reportName: params.reportName || '',
-//   });
-//   try {
-//     const response = await openmrsFetch(url);
-
-//     if (!response.ok) {
-//       const errorText = await response.text();
-//       throw new Error(`Failed to fetch patient list: ${response.status} - ${errorText}`);
-//     }
-
-//     const data = await response.json();
-
-//     return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
-//   } catch (error: any) {
-//     throw new Error(`An error occurred while fetching the MOH-705 patient list: ${error.message}`);
-//   }
-// }
-
 export async function getMoh511PatientList(params: PatientListParams): Promise<PatientListPage> {
   const url = await buildEtlUrl('moh-511-patient-list', {
     locationUuids: params.locationUuids || '',
@@ -229,3 +204,28 @@ export async function getMoh512PatientList(params: PatientListParams): Promise<P
     throw new Error(`An error occurred while fetching the MOH-512 patient list: ${error.message}`);
   }
 }
+
+export async function getMoh407PatientList(params: PatientListParams): Promise<PatientListPage> {
+  const url = await buildEtlUrl('moh-407-patient-list', {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
+    reportName: params.reportName || 'moh711Report',
+    ...pageParams(params),
+  });
+  try {
+    const response = await openmrsFetch(url);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-407 patient list: ${error.message}`);
+  }
+}

package/src/root.component.tsx

@@ -33,6 +33,7 @@ import Moh270DailyRegister from './reports/moh-740/registers/moh-270-permanent-r
 import Moh512RegisterComponent from './reports/moh-711/registers/moh-512.component';
 import TbRegisterComponent from './reports/moh-711/registers/tb-register.component';
 import Moh413Component from './reports/moh-710/registers/moh-413/moh-413.component';
+import Moh407RegisterComponent from './reports/moh-711/registers/moh-407-register.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/reports';
@@ -73,6 +74,7 @@ const RootComponent: React.FC = () => {
           <Route path="/moh-512-register" element={<Moh512RegisterComponent />} />
           <Route path="/tb-register" element={<TbRegisterComponent />} />
           <Route path="/moh-413-register" element={<Moh413Component />} />
+          <Route path="/moh-407-register" element={<Moh407RegisterComponent />} />
         </Routes>
       </div>
     </BrowserRouter>