@ampath/esm-reports-app 1.0.0-next.71 → 1.0.0-next.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,93 @@
1
+ import React from 'react';
2
+ import { useSearchParams } from 'react-router-dom';
3
+ import { RegisterLayout, usePatientList } from '../../../common/report-register';
4
+ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
5
+ import classNames from 'classnames';
6
+
7
+ import styles from './tb-register.scss';
8
+ import { TBExportColumns } from './tb-register-columns';
9
+ import { getTBPatientList } from '../../../resources/moh-711.resource';
10
+
11
+ interface TbRegisterComponentProps {}
12
+
13
+ const TbRegisterComponent: React.FC<TbRegisterComponentProps> = () => {
14
+ const [searchParams] = useSearchParams();
15
+ const startDate = searchParams.get('startDate');
16
+ const endDate = searchParams.get('endDate');
17
+ const locationUuids = searchParams.get('locationUuids');
18
+ const indicator = searchParams.get('indicator');
19
+
20
+ const {
21
+ rows: patientlist,
22
+ total,
23
+ isTotalExact,
24
+ isLoading,
25
+ page,
26
+ pageSize,
27
+ onPageChange,
28
+ fetchAll,
29
+ } = usePatientList(
30
+ ({ startIndex, limit }) =>
31
+ getTBPatientList({
32
+ startDate: startDate!,
33
+ endDate: endDate!,
34
+ locationUuids: locationUuids!,
35
+ indicator: indicator!,
36
+ startIndex,
37
+ limit,
38
+ reportName: 'moh711Report',
39
+ }),
40
+ [startDate, endDate, locationUuids, indicator],
41
+ );
42
+ return (
43
+ <RegisterLayout
44
+ parentLabel="MOH-711 Report"
45
+ parentPath="/moh-711"
46
+ title="TB Register"
47
+ isLoading={isLoading}
48
+ isEmpty={patientlist.length === 0}
49
+ page={page}
50
+ pageSize={pageSize}
51
+ total={total}
52
+ isTotalExact={isTotalExact}
53
+ onPageChange={onPageChange}
54
+ fetchAll={fetchAll}
55
+ columns={TBExportColumns}
56
+ >
57
+ <div className={styles.tableContainer}>
58
+ <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
59
+ <TableHead>
60
+ <TableRow>
61
+ <TableHeader>Date</TableHeader>
62
+ <TableHeader>CR No</TableHeader>
63
+ <TableHeader>DOB</TableHeader>
64
+ <TableHeader>Gender</TableHeader>
65
+ <TableHeader>TB Screening</TableHeader>
66
+ <TableHeader>TCA</TableHeader>
67
+ </TableRow>
68
+ </TableHead>
69
+ <TableBody>
70
+ {patientlist?.length > 0 ? (
71
+ patientlist?.map((patient, i) => (
72
+ <TableRow key={patient.person_id || patient.id}>
73
+ <TableCell>{patient.date}</TableCell>
74
+ <TableCell>{patient.cr_id}</TableCell>
75
+ <TableCell>{patient.date_of_birth}</TableCell>
76
+ <TableCell>{patient.gender}</TableCell>
77
+ <TableCell>{patient.tb_screening}</TableCell>
78
+ <TableCell>{patient.rtc}</TableCell>
79
+ </TableRow>
80
+ ))
81
+ ) : (
82
+ <TableRow>
83
+ <TableCell colSpan={28}>No data available</TableCell>
84
+ </TableRow>
85
+ )}
86
+ </TableBody>
87
+ </Table>
88
+ </div>
89
+ </RegisterLayout>
90
+ );
91
+ };
92
+
93
+ export default TbRegisterComponent;
@@ -0,0 +1,64 @@
1
+ @use '@openmrs/esm-styleguide/src/vars' as *;
2
+
3
+
4
+ .tableContainer {
5
+ width: 100%;
6
+ }
7
+
8
+ /* Sized to content rather than to the frame, so a long value -- a full name,
9
+ say -- widens its own column instead of wrapping. `.tableScroll` in the
10
+ layout scrolls when the table outgrows the page. */
11
+
12
+ .table {
13
+ width: auto;
14
+ min-width: 100%;
15
+ margin: 0;
16
+ font-size: 0.75rem;
17
+ border-collapse: collapse;
18
+ }
19
+
20
+ .tableBordered td,
21
+ .tableBordered th {
22
+ padding: 0.125rem 0.5rem;
23
+ font-size: 0.75rem;
24
+ line-height: 1.3;
25
+ border: 1px solid $ui-04;
26
+ }
27
+
28
+ .tableBordered th {
29
+ font-weight: 600;
30
+ color: $color-gray-100;
31
+ background-color: $ui-01;
32
+ /* headings carry deliberate line breaks, so they wrap where the markup says */
33
+ white-space: normal;
34
+ }
35
+
36
+ .tableBordered td {
37
+ white-space: nowrap;
38
+ }
39
+
40
+ /* Long prose columns (diagnoses, referrals, comments) wrap inside a bounded
41
+ width instead of stretching the row past the fold. */
42
+ .tableBordered td.wrapCell {
43
+ white-space: normal;
44
+ min-width: 8rem;
45
+ max-width: 16rem;
46
+ overflow-wrap: anywhere;
47
+ }
48
+
49
+ .tableStriped tbody tr:nth-of-type(odd) {
50
+ background-color: $ui-01;
51
+ }
52
+
53
+ .tableStriped tbody tr:hover {
54
+ background-color: $brand-primary-10;
55
+ }
56
+
57
+ .textCentre {
58
+ text-align: center;
59
+ }
60
+
61
+ .verticalText {
62
+ writing-mode: vertical-rl;
63
+ transform: rotate(180deg);
64
+ }
@@ -2,12 +2,34 @@ import React from 'react';
2
2
 
3
3
  import styles from '../moh711.scss';
4
4
  import classNames from 'classnames';
5
+ import { useLocation, useNavigate } from 'react-router-dom';
5
6
 
6
7
  interface FamilyPlanningComponentProps {
7
8
  moh711Data: any;
9
+ startDate: string;
10
+ endDate: string;
11
+ locationUuids: string;
8
12
  }
9
13
 
10
- const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh711Data }) => {
14
+ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({
15
+ moh711Data,
16
+ startDate,
17
+ endDate,
18
+ locationUuids,
19
+ }) => {
20
+ const navigate = useNavigate();
21
+ const location = useLocation();
22
+ const navigateToRegister = (indicator: string) => {
23
+ navigate(
24
+ `/moh-512-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
25
+ {
26
+ state: {
27
+ from: location.pathname,
28
+ reportName: 'moh711Report',
29
+ },
30
+ },
31
+ );
32
+ };
11
33
  return (
12
34
  <div className={styles.section}>
13
35
  <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -29,72 +51,107 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
29
51
  <tr>
30
52
  <td>1</td>
31
53
  <td colSpan={2}>No. of 1st Ever Users of Contraceptive</td>
32
- <td>{moh711Data.first_users_contraceptive_new}</td>
33
- <td className={styles.greyBackground}>{moh711Data.first_users_contraceptive_revisit}</td>
54
+ <td onClick={() => navigateToRegister('first_users_contraceptive_new')}>
55
+ {moh711Data.first_users_contraceptive_new}
56
+ </td>
57
+ <td
58
+ className={styles.greyBackground}
59
+ onClick={() => navigateToRegister('first_users_contraceptive_revisit')}
60
+ >
61
+ {moh711Data.first_users_contraceptive_revisit}
62
+ </td>
34
63
  </tr>
35
64
  <tr>
36
65
  <td>2</td>
37
66
  <td rowSpan={3}>Pills</td>
38
67
  <td>Progestine only pills</td>
39
- <td>{moh711Data.pills_progestine_new}</td>
40
- <td>{moh711Data.pills_progestine_revisit}</td>
68
+ <td onClick={() => navigateToRegister('pills_progestine_new')}>{moh711Data.pills_progestine_new}</td>
69
+ <td onClick={() => navigateToRegister('pills_progestine_revisit')}>{moh711Data.pills_progestine_revisit}</td>
41
70
  </tr>
42
71
  <tr>
43
72
  <td>3</td>
44
73
  <td>Pills Combined oral contraceptive</td>
45
- <td>{moh711Data.pills_combined_oral_contraceptive_new}</td>
46
- <td>{moh711Data.pills_combined_oral_contraceptive_revisit}</td>
74
+ <td onClick={() => navigateToRegister('pills_combined_oral_contraceptive_new')}>
75
+ {moh711Data.pills_combined_oral_contraceptive_new}
76
+ </td>
77
+ <td onClick={() => navigateToRegister('pills_combined_oral_contraceptive_revisit')}>
78
+ {moh711Data.pills_combined_oral_contraceptive_revisit}
79
+ </td>
47
80
  </tr>
48
81
  <tr>
49
82
  <td>4</td>
50
83
  <td>Emergency contraceptive pill</td>
51
- <td>{moh711Data.emergency_contraceptive_pill_new}</td>
52
- <td className={styles.greyBackground}>{moh711Data.emergency_contraceptive_pill_revisit}</td>
84
+ <td onClick={() => navigateToRegister('emergency_contraceptive_pill_new')}>
85
+ {moh711Data.emergency_contraceptive_pill_new}
86
+ </td>
87
+ <td
88
+ className={styles.greyBackground}
89
+ onClick={() => navigateToRegister('emergency_contraceptive_pill_revisit')}
90
+ >
91
+ {moh711Data.emergency_contraceptive_pill_revisit}
92
+ </td>
53
93
  </tr>
54
94
  <tr>
55
95
  <td>5</td>
56
96
  <td rowSpan={2}>Injectables</td>
57
97
  <td>FP Injections DMPA- IM</td>
58
- <td>{moh711Data.fp_injections_dmpa_im_new}</td>
59
- <td>{moh711Data.fp_injections_dmpa_im_revisit}</td>
98
+ <td onClick={() => navigateToRegister('fp_injections_dmpa_im_new')}>{moh711Data.fp_injections_dmpa_im_new}</td>
99
+ <td onClick={() => navigateToRegister('fp_injections_dmpa_im_revisit')}>
100
+ {moh711Data.fp_injections_dmpa_im_revisit}
101
+ </td>
60
102
  </tr>
61
103
  <tr>
62
104
  <td>6</td>
63
105
  <td>FP Injections DMPA- SC</td>
64
- <td>{moh711Data.fp_injections_dmpa_sc_new}</td>
65
- <td>{moh711Data.fp_injections_dmpa_sc_revisit}</td>
106
+ <td onClick={() => navigateToRegister('fp_injections_dmpa_sc_new')}>{moh711Data.fp_injections_dmpa_sc_new}</td>
107
+ <td onClick={() => navigateToRegister('fp_injections_dmpa_sc_revisit')}>
108
+ {moh711Data.fp_injections_dmpa_sc_revisit}
109
+ </td>
66
110
  </tr>
67
111
  <tr>
68
112
  <td>7</td>
69
113
  <td rowSpan={3}>Condoms</td>
70
114
  <td>No. of clients received (Male condoms)</td>
71
- <td>{moh711Data.male_condoms_new}</td>
72
- <td>{moh711Data.male_condoms_revisit}</td>
115
+ <td onClick={() => navigateToRegister('male_condoms_new')}>{moh711Data.male_condoms_new}</td>
116
+ <td onClick={() => navigateToRegister('male_condoms_revisit')}>{moh711Data.male_condoms_revisit}</td>
73
117
  </tr>
74
118
  <tr>
75
119
  <td>8</td>
76
120
  <td>No. of clients received (Female condoms)</td>
77
- <td>{moh711Data.female_condoms_new}</td>
78
- <td>{moh711Data.female_condoms_revisit}</td>
121
+ <td onClick={() => navigateToRegister('female_condoms_new')}>{moh711Data.female_condoms_new}</td>
122
+ <td onClick={() => navigateToRegister('female_condoms_revisit')}>{moh711Data.female_condoms_revisit}</td>
79
123
  </tr>
80
124
  <tr>
81
125
  <td>9</td>
82
126
  <td>No. of clients received (Both Male and Female condoms)</td>
83
- <td>{moh711Data.male_and_female_condoms_new}</td>
84
- <td>{moh711Data.male_and_female_condoms_revisit}</td>
127
+ <td onClick={() => navigateToRegister('male_and_female_condoms_new')}>
128
+ {moh711Data.male_and_female_condoms_new}
129
+ </td>
130
+ <td onClick={() => navigateToRegister('male_and_female_condoms_revisit')}>
131
+ {moh711Data.male_and_female_condoms_revisit}
132
+ </td>
85
133
  </tr>
86
134
  <tr>
87
135
  <td>10</td>
88
136
  <td rowSpan={2}>Natural FP</td>
89
137
  <td>No. of clients counselled Natural FP</td>
90
- <td>{moh711Data.counselled_for_natural_family_planning_new}</td>
91
- <td className={styles.greyBackground}>{moh711Data.counselled_for_natural_family_planning_revisit}</td>
138
+ <td onClick={() => navigateToRegister('counselled_for_natural_family_planning_new')}>
139
+ {moh711Data.counselled_for_natural_family_planning_new}
140
+ </td>
141
+ <td
142
+ className={styles.greyBackground}
143
+ onClick={() => navigateToRegister('counselled_for_natural_family_planning_revisit')}
144
+ >
145
+ {moh711Data.counselled_for_natural_family_planning_revisit}
146
+ </td>
92
147
  </tr>
93
148
  <tr>
94
149
  <td>11</td>
95
150
  <td>No. of clients given cycle beads</td>
96
- <td>{moh711Data.cycle_beads_new}</td>
97
- <td className={styles.greyBackground}>{moh711Data.cycle_beads_revisit}</td>
151
+ <td onClick={() => navigateToRegister('cycle_beads_new')}>{moh711Data.cycle_beads_new}</td>
152
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('cycle_beads_revisit')}>
153
+ {moh711Data.cycle_beads_revisit}
154
+ </td>
98
155
  </tr>
99
156
  </tbody>
100
157
  </table>
@@ -112,40 +169,63 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
112
169
  <td>12</td>
113
170
  <td rowSpan={2}>Implants</td>
114
171
  <td>1 Rod</td>
115
- <td>{moh711Data.implants_insertion_1_rod_first_time}</td>
116
- <td>{moh711Data.implants_insertion_1_rod_re_insertion}</td>
172
+ <td onClick={() => navigateToRegister('implants_insertion_1_rod_first_time')}>
173
+ {moh711Data.implants_insertion_1_rod_first_time}
174
+ </td>
175
+ <td onClick={() => navigateToRegister('implants_insertion_1_rod_re_insertion')}>
176
+ {moh711Data.implants_insertion_1_rod_re_insertion}
177
+ </td>
117
178
  </tr>
118
179
  <tr>
119
180
  <td>13</td>
120
181
  <td>2 Rods</td>
121
- <td>{moh711Data.implants_insertion_2_rod_first_time}</td>
122
- <td>{moh711Data.implants_insertion_2_rod_re_insertion}</td>
182
+ <td onClick={() => navigateToRegister('implants_insertion_2_rod_first_time')}>
183
+ {moh711Data.implants_insertion_2_rod_first_time}
184
+ </td>
185
+ <td onClick={() => navigateToRegister('implants_insertion_2_rod_re_insertion')}>
186
+ {moh711Data.implants_insertion_2_rod_re_insertion}
187
+ </td>
123
188
  </tr>
124
189
  <tr>
125
190
  <td>14</td>
126
191
  <td rowSpan={2}>I.U.C.D insertion</td>
127
192
  <td>Hormonal</td>
128
- <td>{moh711Data.iucd_hormonal_first_time}</td>
129
- <td>{moh711Data.iucd_hormonal_re_insertion}</td>
193
+ <td onClick={() => navigateToRegister('iucd_hormonal_first_time')}>{moh711Data.iucd_hormonal_first_time}</td>
194
+ <td onClick={() => navigateToRegister('iucd_hormonal_re_insertion')}>
195
+ {moh711Data.iucd_hormonal_re_insertion}
196
+ </td>
130
197
  </tr>
131
198
  <tr>
132
199
  <td>15</td>
133
200
  <td>Non Hormonal</td>
134
- <td>{moh711Data.iucd_non_hormonal_first_time}</td>
135
- <td>{moh711Data.iucd_non_hormonal_re_insertion}</td>
201
+ <td onClick={() => navigateToRegister('iucd_non_hormonal_first_time')}>
202
+ {moh711Data.iucd_non_hormonal_first_time}
203
+ </td>
204
+ <td onClick={() => navigateToRegister('iucd_non_hormonal_re_insertion')}>
205
+ {moh711Data.iucd_non_hormonal_re_insertion}
206
+ </td>
136
207
  </tr>
137
208
  <tr>
138
209
  <td>16</td>
139
210
  <td rowSpan={2}>Voluntary surgical contraception</td>
140
211
  <td>BTL</td>
141
- <td>{moh711Data.surgical_contraception_btl_first_time}</td>
142
- <td className={styles.greyBackground}>{moh711Data.surgical_contraception_btl_re_insertion}</td>
212
+ <td onClick={() => navigateToRegister('surgical_contraception_btl_first_time')}>
213
+ {moh711Data.surgical_contraception_btl_first_time}
214
+ </td>
215
+ <td
216
+ className={styles.greyBackground}
217
+ onClick={() => navigateToRegister('surgical_contraception_btl_re_insertion')}
218
+ >
219
+ {moh711Data.surgical_contraception_btl_re_insertion}
220
+ </td>
143
221
  </tr>
144
222
  <tr>
145
223
  <td>17</td>
146
224
  <td>Vasectomy</td>
147
- <td>{moh711Data.vasectomy_insertion} </td>
148
- <td className={styles.greyBackground}>{moh711Data.vasectomy_re_insertion}</td>
225
+ <td onClick={() => navigateToRegister('vasectomy_insertion')}>{moh711Data.vasectomy_insertion}</td>
226
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('vasectomy_re_insertion')}>
227
+ {moh711Data.vasectomy_re_insertion}
228
+ </td>
149
229
  </tr>
150
230
  <tr>
151
231
  <th colSpan={3}></th>
@@ -156,14 +236,18 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
156
236
  <td>18</td>
157
237
  <td rowSpan={2}>Removals</td>
158
238
  <td>I.U.C.D</td>
159
- <td>{moh711Data.iucd_removals_new}</td>
160
- <td className={styles.greyBackground}>{moh711Data.iucd_removals_revisit}</td>
239
+ <td onClick={() => navigateToRegister('iucd_removals_new')}>{moh711Data.iucd_removals_new}</td>
240
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('iucd_removals_revisit')}>
241
+ {moh711Data.iucd_removals_revisit}
242
+ </td>
161
243
  </tr>
162
244
  <tr>
163
245
  <td>19</td>
164
246
  <td>Implants</td>
165
- <td>{moh711Data.implants_removal_new}</td>
166
- <td className={styles.greyBackground}>{moh711Data.implants_removal_revisit}</td>
247
+ <td onClick={() => navigateToRegister('implants_removal_new')}>{moh711Data.implants_removal_new}</td>
248
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('implants_removal_revisit')}>
249
+ {moh711Data.implants_removal_revisit}
250
+ </td>
167
251
  </tr>
168
252
  <tr>
169
253
  <td>20</td>
@@ -172,45 +256,66 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
172
256
  other FP services)
173
257
  </td>
174
258
  <td>Adolescent clients (10-14 yrs) Receiving FP Services</td>
175
- <td>{moh711Data.fp_adolescent_10_14_new}</td>
176
- <td>{moh711Data.fp_adolescent_10_14_revisit}</td>
259
+ <td onClick={() => navigateToRegister('fp_adolescent_10_14_new')}>{moh711Data.fp_adolescent_10_14_new}</td>
260
+ <td onClick={() => navigateToRegister('fp_adolescent_10_14_revisit')}>
261
+ {moh711Data.fp_adolescent_10_14_revisit}
262
+ </td>
177
263
  </tr>
178
264
  <tr>
179
265
  <td>21</td>
180
266
  <td>Adolescent clients (15-19 Yrs) Receiving FP Services</td>
181
- <td>{moh711Data.fp_adolescent_15_19_new}</td>
182
- <td>{moh711Data.fp_adolescent_15_19_revisit}</td>
267
+ <td onClick={() => navigateToRegister('fp_adolescent_15_19_new')}>{moh711Data.fp_adolescent_15_19_new}</td>
268
+ <td onClick={() => navigateToRegister('fp_adolescent_15_19_revisit')}>
269
+ {moh711Data.fp_adolescent_15_19_revisit}
270
+ </td>
183
271
  </tr>
184
272
  <tr>
185
273
  <td>22</td>
186
274
  <td>Adolescent clients (20-24 Yrs) Receiving FP Services</td>
187
- <td>{moh711Data.fp_adolescent_20_24_new}</td>
188
- <td>{moh711Data.fp_adolescent_20_24_revisit}</td>
275
+ <td onClick={() => navigateToRegister('fp_adolescent_20_24_new')}>{moh711Data.fp_adolescent_20_24_new}</td>
276
+ <td onClick={() => navigateToRegister('fp_adolescent_20_24_revisit')}>
277
+ {moh711Data.fp_adolescent_20_24_revisit}
278
+ </td>
189
279
  </tr>
190
280
  <tr>
191
281
  <td>23</td>
192
282
  <td>Adults 25+ receiving FP Services</td>
193
- <td>{moh711Data.fp_adolescent_25_plus_new}</td>
194
- <td>{moh711Data.fp_adolescent_25_plus_revisit}</td>
283
+ <td onClick={() => navigateToRegister('fp_adolescent_25_plus_new')}>{moh711Data.fp_adolescent_25_plus_new}</td>
284
+ <td onClick={() => navigateToRegister('fp_adolescent_25_plus_revisit')}>
285
+ {moh711Data.fp_adolescent_25_plus_revisit}
286
+ </td>
195
287
  </tr>
196
288
  <tr>
197
289
  <td>24</td>
198
290
  <td rowSpan={2}>No. of clients receiving immediate post partum FP Method</td>
199
291
  <td>within 48 Hours</td>
200
- <td>{moh711Data.post_partum_fp_48_hours_new}</td>
201
- <td className={styles.greyBackground}>{moh711Data.post_partum_fp_48_hours_revisit}</td>
292
+ <td onClick={() => navigateToRegister('post_partum_fp_48_hours_new')}>
293
+ {moh711Data.post_partum_fp_48_hours_new}
294
+ </td>
295
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('post_partum_fp_48_hours_revisit')}>
296
+ {moh711Data.post_partum_fp_48_hours_revisit}
297
+ </td>
202
298
  </tr>
203
299
  <tr>
204
300
  <td>25</td>
205
301
  <td>3 days to 6 weeks</td>
206
- <td>{moh711Data.post_partum_fp_3days_6_weeks_new}</td>
207
- <td className={styles.greyBackground}>{moh711Data.post_partum_fp_3days_6_weeks_revisit}</td>
302
+ <td onClick={() => navigateToRegister('post_partum_fp_3days_6_weeks_new')}>
303
+ {moh711Data.post_partum_fp_3days_6_weeks_new}
304
+ </td>
305
+ <td
306
+ className={styles.greyBackground}
307
+ onClick={() => navigateToRegister('post_partum_fp_3days_6_weeks_revisit')}
308
+ >
309
+ {moh711Data.post_partum_fp_3days_6_weeks_revisit}
310
+ </td>
208
311
  </tr>
209
312
  <tr>
210
313
  <td>26</td>
211
314
  <td colSpan={2}>No. of clients receiving post abortion FP Method</td>
212
- <td>{moh711Data.post_abortion_fp_new}</td>
213
- <td className={styles.greyBackground}>{moh711Data.post_abortion_fp_revisit}</td>
315
+ <td onClick={() => navigateToRegister('post_abortion_fp_new')}>{moh711Data.post_abortion_fp_new}</td>
316
+ <td className={styles.greyBackground} onClick={() => navigateToRegister('post_abortion_fp_revisit')}>
317
+ {moh711Data.post_abortion_fp_revisit}
318
+ </td>
214
319
  </tr>
215
320
  </tbody>
216
321
  </table>
@@ -2,12 +2,29 @@ import React from 'react';
2
2
 
3
3
  import styles from '../moh711.scss';
4
4
  import classNames from 'classnames';
5
+ import { useLocation, useNavigate } from 'react-router-dom';
5
6
 
6
7
  interface TBScreeningProps {
7
8
  moh711Data: any;
9
+ startDate: string;
10
+ endDate: string;
11
+ locationUuids: string;
8
12
  }
9
13
 
10
- const TBScreeningComponent: React.FC<TBScreeningProps> = ({ moh711Data }) => {
14
+ const TBScreeningComponent: React.FC<TBScreeningProps> = ({ moh711Data, startDate, endDate, locationUuids }) => {
15
+ const navigate = useNavigate();
16
+ const location = useLocation();
17
+ const navigateToRegister = (indicator: string) => {
18
+ navigate(
19
+ `/tb-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-711`,
20
+ {
21
+ state: {
22
+ from: location.pathname,
23
+ reportName: 'moh711Report',
24
+ },
25
+ },
26
+ );
27
+ };
11
28
  return (
12
29
  <div className={styles.section}>
13
30
  <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -23,30 +40,50 @@ const TBScreeningComponent: React.FC<TBScreeningProps> = ({ moh711Data }) => {
23
40
  <tr>
24
41
  <td>1</td>
25
42
  <td>Total Number of people screened</td>
26
- <td></td>
27
- <td></td>
28
- <td></td>
43
+ <td onClick={() => navigateToRegister('total_screened_for_tb_0_to_14')}>
44
+ {moh711Data.total_screened_for_tb_0_to_14 ?? 0}
45
+ </td>
46
+ <td onClick={() => navigateToRegister('total_screened_for_tb_15_above')}>
47
+ {moh711Data.total_screened_for_tb_15_above ?? 0}
48
+ </td>
49
+ <td onClick={() => navigateToRegister('total_screened_for_tb')}>{moh711Data.total_screened_for_tb ?? 0}</td>
29
50
  </tr>
30
51
  <tr>
31
52
  <td>2</td>
32
53
  <td>Total Number of presumptive TB cases</td>
33
- <td></td>
34
- <td></td>
35
- <td></td>
54
+ <td onClick={() => navigateToRegister('total_presumptive_tb_cases_0_14')}>
55
+ {moh711Data.total_presumptive_tb_cases_0_14 ?? 0}
56
+ </td>
57
+ <td onClick={() => navigateToRegister('total_presumptive_tb_cases_15_above')}>
58
+ {moh711Data.total_presumptive_tb_cases_15_above ?? 0}
59
+ </td>
60
+ <td onClick={() => navigateToRegister('total_presumptive_tb_cases')}>
61
+ {moh711Data.total_presumptive_tb_cases ?? 0}
62
+ </td>
36
63
  </tr>
37
64
  <tr>
38
65
  <td>3</td>
39
66
  <td>Total Number of already on TB treatment</td>
40
- <td></td>
41
- <td></td>
42
- <td></td>
67
+ <td onClick={() => navigateToRegister('already_on_tb_treatment_0_14')}>
68
+ {moh711Data.already_on_tb_treatment_0_14 ?? 0}
69
+ </td>
70
+ <td onClick={() => navigateToRegister('already_on_tb_treatment_15_above')}>
71
+ {moh711Data.already_on_tb_treatment_15_above ?? 0}
72
+ </td>
73
+ <td onClick={() => navigateToRegister('already_on_tb_treatment')}>
74
+ {moh711Data.already_on_tb_treatment ?? 0}
75
+ </td>
43
76
  </tr>
44
77
  <tr>
45
78
  <td>4</td>
46
79
  <td>Total Number of people not screened</td>
47
- <td></td>
48
- <td></td>
49
- <td></td>
80
+ <td onClick={() => navigateToRegister('not_screened_for_tb_0_14')}>
81
+ {moh711Data.not_screened_for_tb_0_14 ?? 0}
82
+ </td>
83
+ <td onClick={() => navigateToRegister('not_screened_for_tb_15_above')}>
84
+ {moh711Data.not_screened_for_tb_15_above ?? 0}
85
+ </td>
86
+ <td onClick={() => navigateToRegister('not_screened_for_tb')}>{moh711Data.not_screened_for_tb ?? 0}</td>
50
87
  </tr>
51
88
  </tbody>
52
89
  </table>
@@ -1,5 +1,6 @@
1
1
  import { openmrsFetch } from '@openmrs/esm-framework';
2
2
  import { buildEtlUrl } from '../utils/get-base-url';
3
+ import { PAGE_SIZE, toPatientListPage, pageParams, type PatientListParams } from './patient-list-page';
3
4
 
4
5
  interface Moh710Params {
5
6
  locationUuids: string;
@@ -32,13 +33,14 @@ export async function getMoh710(params: Moh710Params): Promise<any> {
32
33
  }
33
34
  }
34
35
 
35
- export async function getMoh710PatientList(params: Moh710Params): Promise<any> {
36
+ export async function getMoh510PatientList(params: PatientListParams): Promise<any> {
36
37
  const url = await buildEtlUrl('moh-510-patient-list', {
37
38
  locationUuids: params.locationUuids || '',
38
39
  startDate: params.startDate || '',
39
40
  endDate: params.endDate || '',
40
41
  indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
41
42
  reportName: params.reportName || 'moh710Report',
43
+ ...pageParams(params),
42
44
  });
43
45
 
44
46
  try {
@@ -50,8 +52,34 @@ export async function getMoh710PatientList(params: Moh710Params): Promise<any> {
50
52
  }
51
53
 
52
54
  const data = await response.json();
53
- return data;
55
+ return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
54
56
  } catch (error: any) {
55
- throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
57
+ throw new Error(`An error occurred while fetching the MOH-510 REgister: ${error.message}`);
58
+ }
59
+ }
60
+
61
+ export async function getMoh413PatientList(params: PatientListParams): Promise<any> {
62
+ const url = await buildEtlUrl('moh-413-patient-list', {
63
+ locationUuids: params.locationUuids || '',
64
+ startDate: params.startDate || '',
65
+ endDate: params.endDate || '',
66
+ indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
67
+ reportName: params.reportName || 'moh710Report',
68
+ ...pageParams(params),
69
+ });
70
+
71
+ try {
72
+ const response = await openmrsFetch(url);
73
+
74
+ if (!response.ok) {
75
+ const errorText = await response.text();
76
+ throw new Error(`Failed to fetch moh-413: ${response.status} - ${errorText}`);
77
+ }
78
+
79
+ const data = await response.json();
80
+
81
+ return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
82
+ } catch (error: any) {
83
+ throw new Error(`An error occurred while fetching the MOH-413 Register: ${error.message}`);
56
84
  }
57
85
  }