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

package/src/reports/moh-740/moh-740.resource.ts

@@ -0,0 +1,54 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../../utils/get-base-url';
+import {
+  type Moh740Resp,
+  type Moh740Dto,
+  type Moh740Data,
+  type Moh740RegisterDto,
+  type Moh740RegisterResp,
+  type Moh270Patient,
+  type Moh222Patient,
+} from './types';
+
+const baseMoh740Url = 'moh-740-report';
+
+export async function fetchMoh740Report(params: Moh740Dto): Promise<Moh740Data | null> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const moh740Url = `${etlBaseUrl}/${baseMoh740Url}?endDate=${params.endDate}&locationUuids=${params.locationUuid}`;
+  const resp = await openmrsFetch(moh740Url);
+
+  /* Without this a 404 or a 500 falls through to `null`, which the report then
+     renders as "no report generated yet" -- indistinguishable from never
+     having pressed Generate. Throwing lets the failure reach the snackbar. */
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch the MOH-740 report: ${resp.status} ${resp.statusText}`);
+  }
+
+  const data: Moh740Resp = await resp.json();
+
+  return data?.result?.[0] ?? null;
+}
+
+export async function fetchMoh740Register(params: Moh740RegisterDto): Promise<Moh270Patient[] | Moh222Patient[] | Error> {
+  if(!params?.locationUuid || !params.endDate){
+       throw new Error('Missing params');
+  }
+  const etlBaseUrl = await getEtlBaseUrl();
+  
+  const p = {
+    endDate: params.endDate,
+    indicators: params.indicators,
+    locationUuids: params.locationUuid,
+  };
+  const queryString = new URLSearchParams(p).toString();
+  const moh740RegisterUrl = `${etlBaseUrl}/${baseMoh740Url}/patient-list`;
+  const resp = await openmrsFetch(`${moh740RegisterUrl}?${queryString}`);
+
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch the MOH-740 register: ${resp.status} ${resp.statusText}`);
+  }
+
+  const data: Moh740RegisterResp = await resp.json();
+
+  return data?.result ?? [];
+}

package/src/reports/moh-740/registers/moh-222-daily-register/moh-222-daily-register.scss

@@ -0,0 +1,20 @@
+.registerHeader{
+    display: flex;
+    flex-direction: column;
+    column-gap: 5px;
+    width: 100%;
+    .registerFilter{
+        display: flex;
+         width: 100%;
+    }
+    .registerToolbar{
+        width: 100%;
+    }
+   
+}
+ .exportRow{
+        padding: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+}

package/src/reports/moh-740/registers/moh-222-daily-register/moh-222-daily-register.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import { type Moh222Patient } from '../../types';
+import styles from '../../../../common/report-register/register-table.scss';
+import moh222Styles from './moh-222-daily-register.scss';
+import classNames from 'classnames';
+import { Button, Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { Download } from '@carbon/react/icons';
+import { useSearchParams } from 'react-router-dom';
+import ReportFiltersComponent from '../../../../common/report-filters/report-filters.component';
+import { type ReportPeriod } from '../../../../common/report-filters/types';
+import { useGeneratedLocation } from '../../../../common/report-placeholder/use-generated-location';
+import { fetchMoh740Register } from '../../moh-740.resource';
+import { useSession } from '@openmrs/esm-framework';
+import { showReportError } from '../../../../common/report-error/show-report-error';
+import dayjs from 'dayjs';
+import { columnsToCsv, downloadCsv } from '../../../../common/report-register/rows-to-csv';
+import { MOH_222_COLUMNS } from '../moh-740.columns';
+const Moh222DailyRegister = () => {
+  const [rows, setRows] = useState<Moh222Patient[] | any>([]);
+  const [isExporting, setIsExporting] = useState(false);
+  const [searchParams ] = useSearchParams();
+  const startDate = searchParams.get('startDate') ?? '';
+  const endDate = searchParams.get('endDate') ?? '';
+  const locationUuids = searchParams.get('locationUuids') ??'';
+  const indicator = searchParams.get('indicator') ?? '';
+  const [isLoading,setIsLoading] = useState<boolean>(false);
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+  const session = useSession();
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh222Location');
+  const isGenerated = rows !== null && isForCurrentLocation;
+  const columns = MOH_222_COLUMNS;
+  useEffect(()=>{
+     if(startDate && endDate && locationUuids){
+            generate({startDate: startDate,endDate: endDate, label: ''})
+     }
+  },[startDate,endDate,locationUuids,indicator]);
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+      setIsLoading(true);
+      setPeriod({ startDate, endDate });
+      let indicators = '';
+      let locationUuid = '';
+      const selectedDate =  dayjs(startDate).endOf('month')
+      const registerStartDate = selectedDate.format('YYYY-MM-DD');
+      try {
+        if(!indicator){
+           indicators = 'cumulative_all';
+        }else{
+           indicators = indicator;
+        }
+        if(!locationUuids){
+          locationUuid = session.sessionLocation?.uuid ?? '';
+        }else{
+          locationUuid = locationUuids;
+        }
+        const resp  = await fetchMoh740Register({ locationUuid: locationUuid, endDate: registerStartDate,indicators: indicators});
+        if(resp){
+            setRows(resp);
+        }
+        markGenerated(locationUuids);
+      } catch (error) {
+        showReportError('The MOH 222 register', error);
+      } finally {
+        setIsLoading(false);
+      }
+  };
+    const exportCsv = async () => {
+      setIsExporting(true);
+  
+      try {
+        const slug = ['moh-222-dailly-register', period.startDate, period.endDate]
+          .filter(Boolean)
+          .join('-')
+          .toLowerCase();
+        downloadCsv(columnsToCsv(rows, columns, { subHeaderRow: [] }), `${slug}.csv`);
+      } catch (error) {
+        showReportError('the register export', error);
+      } finally {
+        setIsExporting(false);
+      }
+    };
+  return (
+    <div className={styles.tableContainer}>
+      <div>
+          <ReportFiltersComponent
+            reportName="MOH 222 Daily Register"
+            mode="both"
+            onGenerate={generate}
+            isLoading={isLoading}
+            isReportGenerated={isGenerated}
+            generatedPeriod={period}
+            defaultTab="monthly"
+            backLink={{ label: 'All registers', to: '/?tab=registers' }}
+          />
+      </div>
+      <div>
+      <div className={moh222Styles.exportRow}>
+      <div className={styles.toolbar}>
+            <Button kind="tertiary" size="sm" renderIcon={Download} onClick={exportCsv} disabled={isExporting}>
+              {isExporting ? 'Preparing…' : 'Export CSV'}
+            </Button>
+      </div>
+      </div>
+      </div>
+      
+     
+      <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Patient No</TableHeader>
+            <TableHeader>Patient Name</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>D.O.B</TableHeader>
+            <TableHeader>Sex(M/F)</TableHeader>
+            <TableHeader>Visit for the month</TableHeader>
+            <TableHeader>Weight(Kg)</TableHeader>
+            <TableHeader>Height(cm)</TableHeader>
+            <TableHeader>BMI</TableHeader>
+            <TableHeader>Waist Circumference</TableHeader>
+            <TableHeader>BP(mmHg)</TableHeader>
+            <TableHeader>HTN</TableHeader>
+            <TableHeader>Diabetes</TableHeader>
+            <TableHeader>Both Diabetes and Hypetention(HTN)</TableHeader>
+            <TableHeader>RBS(mmol/L)</TableHeader>
+            <TableHeader>FBS(mmol/L)</TableHeader>
+            <TableHeader>HbA1C(%) within 3 months</TableHeader>
+            <TableHeader>Complications/Co-morbidities at enrollment(2)</TableHeader>
+            <TableHeader>Treatment</TableHeader>
+            <TableHeader>Diabetic Foot Screening</TableHeader>
+            <TableHeader>Diabetic Foot(New,Known,Nill)</TableHeader>
+            <TableHeader>Foot Risk Assessment</TableHeader>
+            <TableHeader>Footcare Outcome</TableHeader>
+            <TableHeader>Screened for TB</TableHeader>
+            <TableHeader>TB Status after Screening</TableHeader>
+            <TableHeader>Active SHA(Y/N)</TableHeader>
+            <TableHeader>TCA Date</TableHeader>
+            <TableHeader>Remarks</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((p, index) => (
+            <TableRow key={p.patient_uuid}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{p.encounter_date}</TableCell>
+              <TableCell>{p.amrs_universal_id}</TableCell>
+              <TableCell>
+                <Link href={`${window.spaBase}/patient/${p.patient_uuid}/chart/`}>{p.person_name}</Link>
+              </TableCell>
+              <TableCell>{p.age}</TableCell>
+              <TableCell>{p.birthdate}</TableCell>
+              <TableCell>{p.gender}</TableCell>
+              <TableCell>{p.visit_for_the_month}</TableCell>
+              <TableCell>{p.weight}</TableCell>
+              <TableCell>{p.height}</TableCell>
+              <TableCell>{p.bmi}</TableCell>
+              <TableCell>{p.waist_circumference}</TableCell>
+              <TableCell>{p.bp}</TableCell>
+              <TableCell>{p.htn}</TableCell>
+              <TableCell>{p.diabetes}</TableCell>
+              <TableCell>{p.both_htn_and_diabetic}</TableCell>
+              <TableCell>{p.rbs}</TableCell>
+              <TableCell>{p.fbs}</TableCell>
+              <TableCell>{p.hba1c}</TableCell>
+              <TableCell>{p.complications_at_enrollment}</TableCell>
+              <TableCell>{p.treatment}</TableCell>
+              <TableCell>{p.diabetic_foot_screening}</TableCell>
+              <TableCell>{p.diabetic_foot}</TableCell>
+              <TableCell>{p.foot_risk_assessment}</TableCell>
+              <TableCell>{p.footcare_outcome}</TableCell>
+              <TableCell>{p.screened_for_tb}</TableCell>
+              <TableCell>{p.tbs_status}</TableCell>
+              <TableCell>{p.covered_by_shif ? 'Y' : 'N'}</TableCell>
+              <TableCell>{p.rtc_date}</TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+export default Moh222DailyRegister;

package/src/reports/moh-740/registers/moh-270-permanent-register/moh-270-permanent-register.scss

@@ -0,0 +1,6 @@
+ .exportRow{
+        padding: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+}

package/src/reports/moh-740/registers/moh-270-permanent-register/moh-270-permanent-register.tsx

@@ -0,0 +1,151 @@
+import { Button, Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React, { useEffect, useState } from 'react';
+import { type Moh270Patient } from '../../types';
+import styles from '../../../../common/report-register/register-table.scss';
+import moh270Styles from './moh-270-permanent-register.scss';
+import { Download } from '@carbon/react/icons';
+import classNames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+import { useSession } from '@openmrs/esm-framework';
+import { useGeneratedLocation } from '../../../../common/report-placeholder/use-generated-location';
+import { type ReportPeriod } from '../../../../common/report-filters/types';
+import dayjs from 'dayjs';
+import { fetchMoh740Register } from '../../moh-740.resource';
+import { showReportError } from '../../../../common/report-error/show-report-error';
+import ReportFiltersComponent from '../../../../common/report-filters/report-filters.component';
+import { columnsToCsv, downloadCsv } from '../../../../common/report-register/rows-to-csv';
+import { MOH_270_COLUMNS } from '../moh-740.columns';
+const Moh270DailyRegister = () => {
+    const [rows, setRows] = useState<Moh270Patient[] | any>([]);
+    const [isExporting, setIsExporting] = useState(false);
+    const [searchParams ] = useSearchParams();
+    const startDate = searchParams.get('startDate') ?? '';
+    const endDate = searchParams.get('endDate') ?? '';
+    const locationUuids = searchParams.get('locationUuids') ??'';
+    const indicator = searchParams.get('indicator') ?? '';
+    const [isLoading,setIsLoading] = useState<boolean>(false);
+    const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+    const session = useSession();
+    const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh270Location');
+    const isGenerated = rows !== null && isForCurrentLocation;
+    const columns = MOH_270_COLUMNS;
+    useEffect(()=>{
+       if(startDate && endDate && locationUuids){
+              generate({startDate: startDate,endDate: endDate, label: ''})
+       }
+    },[startDate,endDate,locationUuids,indicator]);
+    const generate = async ({ startDate, endDate }: ReportPeriod) => {
+        setIsLoading(true);
+        setPeriod({ startDate, endDate });
+        let indicators = '';
+        let locationUuid = '';
+        const selectedDate =  dayjs(startDate).endOf('month')
+        const registerStartDate = selectedDate.format('YYYY-MM-DD');
+        try {
+          if(!indicator){
+             indicators = 'cumulative_all';
+          }else{
+             indicators = indicator;
+          }
+          if(!locationUuids){
+            locationUuid = session.sessionLocation?.uuid ?? '';
+          }else{
+            locationUuid = locationUuids;
+          }
+          const resp  = await fetchMoh740Register({ locationUuid: locationUuid, endDate: registerStartDate,indicators: indicators});
+          if(resp){
+              setRows(resp);
+          }
+          markGenerated(locationUuids);
+        } catch (error) {
+          showReportError('The MOH 270 register', error);
+        } finally {
+          setIsLoading(false);
+        }
+    }
+    const exportCsv = async () => {
+          setIsExporting(true);
+      
+          try {
+            const slug = ['moh-270-permanent-register', period.startDate, period.endDate]
+              .filter(Boolean)
+              .join('-')
+              .toLowerCase();
+            downloadCsv(columnsToCsv(rows, columns, { subHeaderRow: [] }), `${slug}.csv`);
+          } catch (error) {
+            showReportError('the register export', error);
+          } finally {
+            setIsExporting(false);
+          }
+    };
+  return (
+    <div className={styles.tableContainer}>
+       <ReportFiltersComponent
+        reportName="MOH 270 Permanent Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="monthly"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+      />
+      <div className={moh270Styles.exportRow}>
+      <div className={styles.toolbar}>
+            <Button kind="tertiary" size="sm" renderIcon={Download} onClick={exportCsv} disabled={isExporting}>
+              {isExporting ? 'Preparing…' : 'Export CSV'}
+            </Button>
+      </div>
+      </div>
+      <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Encounter Date</TableHeader>
+            <TableHeader>RTC Date</TableHeader>
+            <TableHeader>Patient No</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>D.O.B</TableHeader>
+            <TableHeader>Sex(M/F)</TableHeader>
+            <TableHeader>Telephone No</TableHeader>
+            <TableHeader>Sub County</TableHeader>
+            <TableHeader>Village/Estate</TableHeader>
+            <TableHeader>Landmark</TableHeader>
+            <TableHeader>Treatment supporter</TableHeader>
+            <TableHeader>Diagnosis at enrolment</TableHeader>
+            <TableHeader>Year of diagnosis</TableHeader>
+            <TableHeader>Complications/Co-morbidities at enrollment(2)</TableHeader>
+            <TableHeader>SHA(Y/N)</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((p, index) => (
+            <TableRow key={p.patient_uuid}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{p?.enrollment_date ?? ''}</TableCell>
+              <TableCell>{p?.encounter_date ?? ''}</TableCell>
+              <TableCell>{p?.rtc_date ?? ''}</TableCell>
+              <TableCell>{p.amrs_universal_id}</TableCell>
+              <TableCell>
+                <Link href={`${window.spaBase}/patient/${p.patient_uuid}/chart/`}>{p.person_name}</Link>
+              </TableCell>
+              <TableCell>{p.birthdate}</TableCell>
+              <TableCell>{p.gender}</TableCell>
+              <TableCell>{p.phone_number}</TableCell>
+              <TableCell>{p.sub_county}</TableCell>
+              <TableCell>{p.ward}</TableCell>
+              <TableCell>{p.landmark}</TableCell>
+              <TableCell>{p.contact_of_the_treatment_supporter_and_relationship ?? ''}</TableCell>
+              <TableCell>{p.diagnosis_at_enrollment ?? ''}</TableCell>
+              <TableCell>{p.year_of_diagnosis ?? ''}</TableCell>
+              <TableCell>{p.complications_at_enrollment ?? ''}</TableCell>
+              <TableCell>{p.covered_by_shif ? 'Y' : 'N'}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+export default Moh270DailyRegister;

package/src/reports/moh-740/registers/moh-740-patient-list.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { type Moh222Patient, type Moh270Patient } from '../types';
+import { fetchMoh740Register } from '../moh-740.resource';
+import Moh270DailyRegister from './moh-270-permanent-register/moh-270-permanent-register';
+import { Moh740Rgisters } from '../shared/utils/indicator-register-map';
+import Moh222DailyRegister from './moh-222-daily-register/moh-222-daily-register';
+import { MOH_222_COLUMNS, MOH_270_COLUMNS } from './moh-740.columns';
+import { RegisterLayout } from '../../../common/report-register';
+import { showReportError } from '../../../common/report-error';
+
+interface Moh740PatientListProps {
+  locationUuid: string;
+  reportingMonth: string;
+  indicators: string;
+  register: string;
+  /** Puts the report back; these registers are a view on its own route */
+  onBack: () => void;
+}
+
+const Moh740PatientList: React.FC<Moh740PatientListProps> = ({
+  locationUuid,
+  reportingMonth,
+  indicators,
+  register,
+  onBack,
+}) => {
+  const [moh270patientList, setMoh270PatientList] = useState<Moh270Patient[]>([]);
+  const [loading, setIsLoading] = useState<boolean>(false);
+  const [moh222PatientList, setMoh222PatientList] = useState<Moh222Patient[]>([]);
+
+  const isDaily = register === Moh740Rgisters.DailyRegister;
+
+
+
+  if (!locationUuid || !reportingMonth || !indicators) {
+    return <></>;
+  }
+
+  const rows: Array<Record<string, any>> = isDaily ? moh222PatientList : moh270patientList;
+
+  return (
+    <RegisterLayout
+      parentLabel="MOH-740 Report"
+      onBack={onBack}
+      title={isDaily ? 'Daily Activity Register - MOH 222' : 'Permanent Register - MOH 270'}
+      isLoading={loading}
+      isEmpty={rows.length === 0}
+      columns={isDaily ? MOH_222_COLUMNS : MOH_270_COLUMNS}
+      fetchAll={async () => rows}
+    >
+      {isDaily ? (
+        <Moh222DailyRegister/>
+      ) : (
+        <Moh270DailyRegister/>
+      )}
+    </RegisterLayout>
+  );
+};
+
+export default Moh740PatientList;

package/src/reports/moh-740/registers/moh-740.columns.ts

@@ -0,0 +1,54 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/** MOH 222, in the order the register prints its columns */
+export const MOH_222_COLUMNS: RegisterColumn[] = [
+  { header: 'No', value: (_row, index) => index + 1 },
+  { header: 'Date', value: (r) => r.encounter_date ?? '' },
+  { header: 'Patient No', value: (r) => r.amrs_universal_id ?? '' },
+  { header: 'Patient Name', value: (r) => r.person_name ?? '' },
+  { header: 'Age', value: (r) => r.age ?? '' },
+  { header: 'D.O.B', value: (r) => r.birthdate ?? '' },
+  { header: 'Sex(M/F)', value: (r) => r.gender ?? '' },
+  { header: 'Visit for the month', value: (r) => r.visit_for_the_month ?? '' },
+  { header: 'Weight(Kg)', value: (r) => r.weight ?? '' },
+  { header: 'Height(cm)', value: (r) => r.height ?? '' },
+  { header: 'BMI', value: (r) => r.bmi ?? '' },
+  { header: 'Waist Circumference', value: (r) => r.waist_circumference ?? '' },
+  { header: 'BP(mmHg)', value: (r) => r.bp ?? '' },
+  { header: 'HTN', value: (r) => r.htn ?? '' },
+  { header: 'Diabetes', value: (r) => r.diabetes ?? '' },
+  { header: 'Both Diabetes and Hypetention(HTN)', value: (r) => r.both_htn_and_diabetic ?? '' },
+  { header: 'RBS(mmol/L)', value: (r) => r.rbs ?? '' },
+  { header: 'FBS(mmol/L)', value: (r) => r.fbs ?? '' },
+  { header: 'HbA1C(%) within 3 months', value: (r) => r.hba1c ?? '' },
+  { header: 'Complications/Co-morbidities at enrollment(2)', value: (r) => r.complications_at_enrollment ?? '' },
+  { header: 'Treatment', value: (r) => r.treatment ?? '' },
+  { header: 'Diabetic Foot Screening', value: (r) => r.diabetic_foot_screening ?? '' },
+  { header: 'Diabetic Foot(New,Known,Nill)', value: (r) => r.diabetic_foot ?? '' },
+  { header: 'Foot Risk Assessment', value: (r) => r.foot_risk_assessment ?? '' },
+  { header: 'Footcare Outcome', value: (r) => r.footcare_outcome ?? '' },
+  { header: 'Screened for TB', value: (r) => r.screened_for_tb ?? '' },
+  { header: 'TB Status after Screening', value: (r) => r.tbs_status ?? '' },
+  { header: 'Active SHA(Y/N)', value: (r) => (r.covered_by_shif ? 'Y' : 'N') },
+];
+
+/** MOH 270, in the order the register prints its columns */
+export const MOH_270_COLUMNS: RegisterColumn[] = [
+  { header: 'No', value: (_row, index) => index + 1 },
+  { header: 'Date', value: (r) => r.encounter_date ?? '' },
+  { header: 'Encounter Date', value: (r) => r.encounter_date ?? '' },
+  { header: 'RTC Date', value: (r) => r.rtc_date ?? ''},
+  { header: 'Patient No', value: (r) => r.amrs_universal_id ?? '' },
+  { header: 'Name', value: (r) => r.person_name ?? '' },
+  { header: 'D.O.B', value: (r) => r.birthdate ?? '' },
+  { header: 'Sex(M/F)', value: (r) => r.gender ?? '' },
+  { header: 'Telephone No', value: (r) => r.phone_number ?? '' },
+  { header: 'Sub County', value: (r) => r.sub_county ?? '' },
+  { header: 'Village/Estate', value: (r) => r.ward ?? '' },
+  { header: 'Landmark', value: (r) => r.landmark ?? '' },
+  { header: 'Treatment supporter', value: (r) => r.contact_of_the_treatment_supporter_and_relationship ?? '' },
+  { header: 'Diagnosis at enrolment', value: (r) => r.diagnosis_at_enrolment ?? '' },
+  { header: 'Year of diagnosis', value: (r) => r.diagnosis_year ?? '' },
+  { header: 'Complications/Co-morbidities at enrollment(2)', value: (r) => r.complications_at_enrollment ?? '' },
+  { header: 'SHA(Y/N)', value: (r) => (r.covered_by_shif ? 'Y' : 'N') },
+];

package/src/reports/moh-740/shared/data-cell/data-cell.scss

@@ -0,0 +1,6 @@
+.dataCell{
+    color: blue;
+}
+.dataCell:hover{
+    cursor: pointer;
+}

package/src/reports/moh-740/shared/data-cell/data-cell.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './data-cell.scss';
+interface DataCellProps {
+  value: number;
+  indicator: string;
+  indicatorSelected: (indicator: string) => void;
+}
+const DataCell: React.FC<DataCellProps> = ({ value, indicator, indicatorSelected }) => {
+  const handleCellClicked = () => {
+    indicatorSelected(indicator);
+  };
+  if (!value || value < 0) {
+    return 0;
+  }
+  return (
+    <>
+      <span onClick={handleCellClicked} className={styles.dataCell}>
+        {value ?? 0}
+      </span>
+    </>
+  );
+};
+export default DataCell;