@kenyaemr/esm-ward-app 8.5.3-pre.87 → 8.5.3-pre.92

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.
package/dist/routes.json CHANGED
@@ -1 +1 @@
1
- {"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardView","name":"ward-view","slot":"ward-view-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"name":"admission-requests-workspace-siderail-button","component":"admissionRequestsWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"name":"create-admission-request-workspace-siderail-button","component":"createAdmissionEncounterWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"},{"component":"patientDischargeDocumentPreview","name":"patient-discharge-document-preview-modal"},{"component":"wardPatientWorkspaceBanner","name":"ward-patient-workspace-banner","slot":"ward-workspace-patient-banner-slot"},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"pending-admission-requests","width":"wider"},{"name":"create-admission-encounter-workspace","component":"createAdmissionEncounterWorkspace","title":"admitPatient","type":"patient-search-workspace","width":"wider"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle"},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward patient","width":"extra-wide"},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form"},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","width":"extra-wide","canMaximize":true,"type":"ward-patient-discharge"},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","width":"wider"},{"name":"cancel-admission-request-workspace","component":"cancelAdmissionRequestWorkspace","title":"cancelAdmissionRequest","type":"cancel-admission-request"}],"workspaceGroups":[{"name":"ward-patient","members":["ward-patient-workspace","ward-patient-notes-workspace","patient-transfer-swap-workspace","patient-discharge-workspace","ward-patient-clinical-forms-workspace","add-drug-order","order-basket","add-lab-order"]},{"name":"ward-patient-admission-requests","members":["admission-requests-workspace","create-admission-encounter-workspace"]}],"version":"8.5.3-pre.87"}
1
+ {"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardView","name":"ward-view","slot":"ward-view-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"name":"admission-requests-workspace-siderail-button","component":"admissionRequestsWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"name":"create-admission-request-workspace-siderail-button","component":"createAdmissionEncounterWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"},{"component":"patientDischargeDocumentPreview","name":"patient-discharge-document-preview-modal"},{"component":"wardPatientWorkspaceBanner","name":"ward-patient-workspace-banner","slot":"ward-workspace-patient-banner-slot"},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"pending-admission-requests","width":"wider"},{"name":"create-admission-encounter-workspace","component":"createAdmissionEncounterWorkspace","title":"admitPatient","type":"patient-search-workspace","width":"wider"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle"},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward patient","width":"extra-wide"},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form"},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","width":"extra-wide","canMaximize":true,"type":"ward-patient-discharge"},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","width":"wider"},{"name":"cancel-admission-request-workspace","component":"cancelAdmissionRequestWorkspace","title":"cancelAdmissionRequest","type":"cancel-admission-request"}],"workspaceGroups":[{"name":"ward-patient","members":["ward-patient-workspace","ward-patient-notes-workspace","patient-transfer-swap-workspace","patient-discharge-workspace","ward-patient-clinical-forms-workspace","add-drug-order","order-basket","add-lab-order"]},{"name":"ward-patient-admission-requests","members":["admission-requests-workspace","create-admission-encounter-workspace"]}],"version":"8.5.3-pre.92"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kenyaemr/esm-ward-app",
3
- "version": "8.5.3-pre.87",
3
+ "version": "8.5.3-pre.92",
4
4
  "description": "Ward and bed management module for O3",
5
5
  "browser": "dist/kenyaemr-esm-ward-app.js",
6
6
  "main": "src/index.ts",
@@ -48,12 +48,11 @@ const InpatientForms: FC<InpatientFormsProps> = ({ patientUuid, patient }) => {
48
48
  if (!currentVisit) {
49
49
  return launchStartVisitPrompt();
50
50
  }
51
- const filledFormEncounter = currentVisit?.encounters?.find((en) => en?.form?.uuid === form.uuid);
52
51
  launchWorkspace('patient-form-entry-workspace', {
53
52
  workspaceTitle: form.label,
54
53
  mutateForm: () => {},
55
54
  formInfo: {
56
- encounterUuid: filledFormEncounter?.uuid ?? '',
55
+ encounterUuid: '',
57
56
  formUuid: form.uuid,
58
57
  additionalProps: {},
59
58
  },
@@ -4,6 +4,7 @@ import {
4
4
  OverflowMenu,
5
5
  OverflowMenuItem,
6
6
  Pagination,
7
+ Search,
7
8
  Table,
8
9
  TableBody,
9
10
  TableCell,
@@ -30,6 +31,8 @@ import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
30
31
  import { HyperLinkPatientCell } from './patient-cells';
31
32
  import { EmptyState } from './table-state-components';
32
33
  const AdmittedPatients = () => {
34
+ const [search, setSearch] = useState('');
35
+
33
36
  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
34
37
  const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
35
38
  const { t } = useTranslation();
@@ -80,7 +83,10 @@ const AdmittedPatients = () => {
80
83
  }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
81
84
 
82
85
  const [pageSize, setPageSize] = useState(5);
83
- const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
86
+ const searchResults = useMemo(() => {
87
+ return patients?.filter((pat) => pat?.patient?.person?.display?.toLowerCase().includes(search.toLowerCase()));
88
+ }, [patients, search]);
89
+ const { paginated, results, totalPages, currentPage, goTo } = usePagination(searchResults, pageSize);
84
90
  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
85
91
  const tableRows = useMemo(() => {
86
92
  return results.map((patient, index) => {
@@ -152,52 +158,55 @@ const AdmittedPatients = () => {
152
158
  return <EmptyState message={t('noAdmittedPatientsinCurrentward', 'No admitted patients in the current ward')} />;
153
159
 
154
160
  return (
155
- <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
156
- {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
157
- <TableContainer>
158
- <Table {...getTableProps()} aria-label="sample table">
159
- <TableHead>
160
- <TableRow>
161
- {headers.map((header) => (
162
- <TableHeader
163
- key={header.key}
164
- {...getHeaderProps({
165
- header,
166
- })}>
167
- {header.header}
168
- </TableHeader>
169
- ))}
170
- </TableRow>
171
- </TableHead>
172
- <TableBody>
173
- {rows.map((row) => {
174
- return (
175
- <TableRow key={row.id} {...getRowProps({ row })}>
176
- {row.cells.map((cell) => (
177
- <TableCell key={cell.id} {...getCellProps({ cell })}>
178
- {cell.value}
179
- </TableCell>
180
- ))}
181
- </TableRow>
182
- );
183
- })}
184
- </TableBody>
185
- </Table>
186
- {paginated && !isLoading && (
187
- <Pagination
188
- page={currentPage}
189
- pageSize={pageSize}
190
- pageSizes={pageSizes}
191
- totalItems={(patients ?? []).length}
192
- onChange={({ page, pageSize }) => {
193
- goTo(page);
194
- setPageSize(pageSize);
195
- }}
196
- />
197
- )}
198
- </TableContainer>
199
- )}
200
- </DataTable>
161
+ <div>
162
+ <Search value={search} onChange={(e) => setSearch(e.target.value)} />
163
+ <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
164
+ {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
165
+ <TableContainer>
166
+ <Table {...getTableProps()} aria-label="sample table">
167
+ <TableHead>
168
+ <TableRow>
169
+ {headers.map((header) => (
170
+ <TableHeader
171
+ key={header.key}
172
+ {...getHeaderProps({
173
+ header,
174
+ })}>
175
+ {header.header}
176
+ </TableHeader>
177
+ ))}
178
+ </TableRow>
179
+ </TableHead>
180
+ <TableBody>
181
+ {rows.map((row) => {
182
+ return (
183
+ <TableRow key={row.id} {...getRowProps({ row })}>
184
+ {row.cells.map((cell) => (
185
+ <TableCell key={cell.id} {...getCellProps({ cell })}>
186
+ {cell.value}
187
+ </TableCell>
188
+ ))}
189
+ </TableRow>
190
+ );
191
+ })}
192
+ </TableBody>
193
+ </Table>
194
+ {paginated && !isLoading && (
195
+ <Pagination
196
+ page={currentPage}
197
+ pageSize={pageSize}
198
+ pageSizes={pageSizes}
199
+ totalItems={(patients ?? []).length}
200
+ onChange={({ page, pageSize }) => {
201
+ goTo(page);
202
+ setPageSize(pageSize);
203
+ }}
204
+ />
205
+ )}
206
+ </TableContainer>
207
+ )}
208
+ </DataTable>
209
+ </div>
201
210
  );
202
211
  };
203
212
 
@@ -3,6 +3,8 @@ import {
3
3
  DataTableSkeleton,
4
4
  OverflowMenu,
5
5
  OverflowMenuItem,
6
+ Pagination,
7
+ Search,
6
8
  Table,
7
9
  TableBody,
8
10
  TableCell,
@@ -10,25 +12,30 @@ import {
10
12
  TableHead,
11
13
  TableHeader,
12
14
  TableRow,
13
- Pagination,
14
15
  } from '@carbon/react';
15
16
  import { formatDatetime, launchWorkspace, parseDate, useAppContext, usePagination } from '@openmrs/esm-framework';
17
+ import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
16
18
  import dayjs from 'dayjs';
17
19
  import React, { useMemo, useState } from 'react';
18
20
  import { useTranslation } from 'react-i18next';
19
21
  import { type WardPatient, type WardPatientWorkspaceProps, type WardViewContext } from '../types';
20
22
  import { getOpenmrsId } from '../ward-view/ward-view.resource';
21
23
  import AdmitPatientButton from '../ward-workspace/admit-patient-button.component';
22
- import { EmptyState, ErrorState } from './table-state-components';
23
- import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
24
24
  import { HyperLinkPatientCell } from './patient-cells';
25
+ import { EmptyState, ErrorState } from './table-state-components';
25
26
 
26
27
  const AwaitingAdmissionPatients = () => {
27
28
  const { t } = useTranslation();
29
+ const [search, setSearch] = useState('');
28
30
  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
29
31
  const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
30
32
  const [pageSize, setPageSize] = useState(5);
31
- const { paginated, results, totalPages, currentPage, goTo } = usePagination(inpatientRequests, pageSize);
33
+ const searchResults = useMemo(() => {
34
+ return inpatientRequests?.filter((req) =>
35
+ req.patient?.person?.display.toLowerCase().includes(search.toLowerCase()),
36
+ );
37
+ }, [inpatientRequests, search]);
38
+ const { paginated, results, totalPages, currentPage, goTo } = usePagination(searchResults, pageSize);
32
39
  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
33
40
 
34
41
  const headers = [
@@ -109,52 +116,55 @@ const AwaitingAdmissionPatients = () => {
109
116
  if (!inpatientRequests || !inpatientRequests.length)
110
117
  return <EmptyState message={t('noPatientInAdmisionQueue', 'No patients in admission queue')} />;
111
118
  return (
112
- <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
113
- {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
114
- <TableContainer>
115
- <Table {...getTableProps()} aria-label="sample table">
116
- <TableHead>
117
- <TableRow>
118
- {headers.map((header) => (
119
- <TableHeader
120
- key={header.key}
121
- {...getHeaderProps({
122
- header,
123
- })}>
124
- {header.header}
125
- </TableHeader>
126
- ))}
127
- </TableRow>
128
- </TableHead>
129
- <TableBody>
130
- {rows.map((row) => {
131
- return (
132
- <TableRow key={row.id} {...getRowProps({ row })}>
133
- {row.cells.map((cell) => (
134
- <TableCell key={cell.id} {...getCellProps({ cell })}>
135
- {cell.value}
136
- </TableCell>
137
- ))}
138
- </TableRow>
139
- );
140
- })}
141
- </TableBody>
142
- </Table>
143
- {paginated && !isLoading && (
144
- <Pagination
145
- page={currentPage}
146
- pageSize={pageSize}
147
- pageSizes={pageSizes}
148
- totalItems={(inpatientRequests ?? []).length}
149
- onChange={({ page, pageSize }) => {
150
- goTo(page);
151
- setPageSize(pageSize);
152
- }}
153
- />
154
- )}
155
- </TableContainer>
156
- )}
157
- </DataTable>
119
+ <div>
120
+ <Search value={search} onChange={(e) => setSearch(e.target.value)} />
121
+ <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
122
+ {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
123
+ <TableContainer>
124
+ <Table {...getTableProps()} aria-label="sample table">
125
+ <TableHead>
126
+ <TableRow>
127
+ {headers.map((header) => (
128
+ <TableHeader
129
+ key={header.key}
130
+ {...getHeaderProps({
131
+ header,
132
+ })}>
133
+ {header.header}
134
+ </TableHeader>
135
+ ))}
136
+ </TableRow>
137
+ </TableHead>
138
+ <TableBody>
139
+ {rows.map((row) => {
140
+ return (
141
+ <TableRow key={row.id} {...getRowProps({ row })}>
142
+ {row.cells.map((cell) => (
143
+ <TableCell key={cell.id} {...getCellProps({ cell })}>
144
+ {cell.value}
145
+ </TableCell>
146
+ ))}
147
+ </TableRow>
148
+ );
149
+ })}
150
+ </TableBody>
151
+ </Table>
152
+ {paginated && !isLoading && (
153
+ <Pagination
154
+ page={currentPage}
155
+ pageSize={pageSize}
156
+ pageSizes={pageSizes}
157
+ totalItems={(inpatientRequests ?? []).length}
158
+ onChange={({ page, pageSize }) => {
159
+ goTo(page);
160
+ setPageSize(pageSize);
161
+ }}
162
+ />
163
+ )}
164
+ </TableContainer>
165
+ )}
166
+ </DataTable>
167
+ </div>
158
168
  );
159
169
  };
160
170
 
@@ -3,6 +3,7 @@ import {
3
3
  OverflowMenu,
4
4
  OverflowMenuItem,
5
5
  Pagination,
6
+ Search,
6
7
  Table,
7
8
  TableBody,
8
9
  TableCell,
@@ -33,6 +34,7 @@ import { EmptyState } from './table-state-components';
33
34
 
34
35
  const DischargeInPatients = () => {
35
36
  const { t } = useTranslation();
37
+ const [search, setSearch] = useState('');
36
38
  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
37
39
  const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
38
40
  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
@@ -86,7 +88,10 @@ const DischargeInPatients = () => {
86
88
  }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
87
89
 
88
90
  const [pageSize, setPageSize] = useState(5);
89
- const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
91
+ const searchResults = useMemo(() => {
92
+ return patients?.filter((pat) => pat?.patient?.person?.display?.toLowerCase().includes(search.toLowerCase()));
93
+ }, [patients, search]);
94
+ const { paginated, results, totalPages, currentPage, goTo } = usePagination(searchResults, pageSize);
90
95
  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
91
96
 
92
97
  const tableRows = useMemo(() => {
@@ -147,52 +152,55 @@ const DischargeInPatients = () => {
147
152
  if (!patients.length) return <EmptyState message={t('noDischargeInpatients', 'No Discharge in patients')} />;
148
153
 
149
154
  return (
150
- <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
151
- {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
152
- <TableContainer>
153
- <Table {...getTableProps()} aria-label="sample table">
154
- <TableHead>
155
- <TableRow>
156
- {headers.map((header) => (
157
- <TableHeader
158
- key={header.key}
159
- {...getHeaderProps({
160
- header,
161
- })}>
162
- {header.header}
163
- </TableHeader>
164
- ))}
165
- </TableRow>
166
- </TableHead>
167
- <TableBody>
168
- {rows.map((row) => {
169
- return (
170
- <TableRow key={row.id} {...getRowProps({ row })}>
171
- {row.cells.map((cell) => (
172
- <TableCell key={cell.id} {...getCellProps({ cell })}>
173
- {cell.value}
174
- </TableCell>
175
- ))}
176
- </TableRow>
177
- );
178
- })}
179
- </TableBody>
180
- </Table>
181
- {paginated && !isLoading && (
182
- <Pagination
183
- page={currentPage}
184
- pageSize={pageSize}
185
- pageSizes={pageSizes}
186
- totalItems={(patients ?? []).length}
187
- onChange={({ page, pageSize }) => {
188
- goTo(page);
189
- setPageSize(pageSize);
190
- }}
191
- />
192
- )}
193
- </TableContainer>
194
- )}
195
- </DataTable>
155
+ <div>
156
+ <Search value={search} onChange={(e) => setSearch(e.target.value)} />
157
+ <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
158
+ {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
159
+ <TableContainer>
160
+ <Table {...getTableProps()} aria-label="sample table">
161
+ <TableHead>
162
+ <TableRow>
163
+ {headers.map((header) => (
164
+ <TableHeader
165
+ key={header.key}
166
+ {...getHeaderProps({
167
+ header,
168
+ })}>
169
+ {header.header}
170
+ </TableHeader>
171
+ ))}
172
+ </TableRow>
173
+ </TableHead>
174
+ <TableBody>
175
+ {rows.map((row) => {
176
+ return (
177
+ <TableRow key={row.id} {...getRowProps({ row })}>
178
+ {row.cells.map((cell) => (
179
+ <TableCell key={cell.id} {...getCellProps({ cell })}>
180
+ {cell.value}
181
+ </TableCell>
182
+ ))}
183
+ </TableRow>
184
+ );
185
+ })}
186
+ </TableBody>
187
+ </Table>
188
+ {paginated && !isLoading && (
189
+ <Pagination
190
+ page={currentPage}
191
+ pageSize={pageSize}
192
+ pageSizes={pageSizes}
193
+ totalItems={(patients ?? []).length}
194
+ onChange={({ page, pageSize }) => {
195
+ goTo(page);
196
+ setPageSize(pageSize);
197
+ }}
198
+ />
199
+ )}
200
+ </TableContainer>
201
+ )}
202
+ </DataTable>
203
+ </div>
196
204
  );
197
205
  };
198
206