@kenyaemr/esm-billing-app 5.4.1-pre.2092 → 5.4.1-pre.2096

package/src/claims/claims-management/table/claims-list-table.component.tsx

@@ -1,208 +1,266 @@
-import {
-  DataTable,
-  DataTableSkeleton,
-  OverflowMenu,
-  OverflowMenuItem,
-  Pagination,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Tag,
-} from '@carbon/react';
-import { formatDate, isDesktop, parseDate, showModal, useLayoutType, usePagination } from '@openmrs/esm-framework';
-import { CardHeader, EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ClaimsPreAuthFilter } from '../../../types';
-import ClaimsFilterHeader from '../header/filter-header.component';
-import styles from './claims-list-table.scss';
-import { useFacilityClaims } from './use-facility-claims';
+// import {
+//   DataTable,
+//   DataTableSkeleton,
+//   OverflowMenu,
+//   OverflowMenuItem,
+//   Pagination,
+//   Table,
+//   TableBody,
+//   TableCell,
+//   TableContainer,
+//   TableHead,
+//   TableHeader,
+//   TableRow,
+//   Tag,
+// } from '@carbon/react';
+// import { formatDate, isDesktop, parseDate, showModal, useLayoutType, usePagination } from '@openmrs/esm-framework';
+// import { CardHeader, EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+// import React, { useMemo, useState } from 'react';
+// import { useTranslation } from 'react-i18next';
+// import { ClaimsPreAuthFilter } from '../../../types';
+// import ClaimsFilterHeader from '../header/filter-header.component';
+// import styles from './claims-list-table.scss';
+// import { useFacilityClaims } from './use-facility-claims';
+// import { statusColors } from '../../utils';
 
-const ClaimsManagementTable: React.FC = () => {
-  const { claims, isLoading } = useFacilityClaims();
-  const { t } = useTranslation();
-  const [filters, setFilters] = useState<ClaimsPreAuthFilter>({
-    status: 'all',
-  });
-  const status = useMemo(
-    () => [
-      { value: 'all', label: t('all', 'All') },
-      { value: 'ENTERED', label: t('entered', 'Entered') },
-      { value: 'ERRORED', label: t('errored', 'Errored') },
-      { value: 'REJECTED', label: t('rejected', 'Rejected') },
-      { value: 'CHECKED', label: t('checked', 'Checked') },
-      { value: 'VALUATED', label: t('valuated', 'Valuated') },
-    ],
-    [t],
-  );
-  const [pageSize, setPageSize] = useState(5);
-  const filterClaims = (claim) => {
-    const status = filters?.status;
-    const search = filters?.search?.toLowerCase();
-    const fromDate = filters?.fromDate ? new Date(filters.fromDate) : null;
-    const toDate = filters?.toDate ? new Date(filters.toDate) : null;
-
-    const patientName = claim.patientName?.toLowerCase();
-    const providerName = claim.providerName?.toLowerCase();
-    const timeStamp = new Date(claim.dateFrom);
-    const preauthStatus = claim.status;
-
-    // Check status (allow 'all' to bypass the filter)
-    const statusMatch = status === 'all' || preauthStatus === status;
-
-    // Check search filter (patient name or provider name contains the search term)
-    const searchMatch = !search || patientName?.includes(search) || providerName?.includes(search);
-
-    // Check date range filter (timestamp is between fromDate and toDate if provided)
-    const dateMatch = (!fromDate || timeStamp >= fromDate) && (!toDate || timeStamp <= toDate);
-
-    // Return true if all conditions match
-    return statusMatch && searchMatch && dateMatch;
-  };
-
-  const filteredClaims = claims.filter(filterClaims);
-  const { paginated, goTo, results, currentPage } = usePagination(filteredClaims, pageSize);
-  const { pageSizes } = usePaginationInfo(pageSize, claims.length, currentPage, results.length);
-  const responsiveSize = isDesktop(useLayoutType()) ? 'sm' : 'lg';
-  const layout = useLayoutType();
-  const size = layout === 'tablet' ? 'lg' : 'md';
-
-  const headers = [
-    { key: 'claimCode', header: t('claimCode', 'Claim Code') },
-    { key: 'status', header: t('status', 'Status') },
-    { key: 'providerName', header: t('provider', 'Provider') },
-    { key: 'patientName', header: t('patient', 'Patient') },
-    { key: 'claimedTotal', header: t('claimedAmount', 'Claimed Amount') },
-    { key: 'approvedTotal', header: t('approvedTotal', 'Approved Total') },
-    { key: 'dateFrom', header: t('dateCreated', 'Date Created') },
-    { key: 'action', header: t('action', 'Action') },
-  ];
-
-  if (isLoading) {
-    return (
-      <div className={styles.dataTableSkeleton}>
-        <DataTableSkeleton
-          headers={headers}
-          showToolbar={false}
-          showHeader={false}
-          columnCount={Object.keys(headers).length}
-          zebra
-          rowCount={pageSize}
-        />
-      </div>
-    );
-  }
-
-  if (claims.length === 0) {
-    return (
-      <div className={styles.claimsTable}>
-        <EmptyState
-          displayText={t('emptyClaimsState', 'There are no claims to display')}
-          headerTitle={t('emptyClaimsHeader', 'No Claims')}
-        />
-      </div>
-    );
-  }
-
-  const handleRetry = (claimId: string) => {
-    const dispose = showModal('retry-claim-request-modal', {
-      closeModal: () => dispose(),
-      claimId,
-    });
-  };
+// const ClaimsManagementTable: React.FC = () => {
+//   const { claims, isLoading } = useFacilityClaims();
+//   const { t } = useTranslation();
+//   const [filters, setFilters] = useState<ClaimsPreAuthFilter>({
+//     status: 'all',
+//   });
+//   const status = useMemo(
+//     () => [
+//       { value: 'all', label: t('all', 'All') },
+//       { value: 'ENTERED', label: t('entered', 'Entered') },
+//       { value: 'ERRORED', label: t('errored', 'Errored') },
+//       { value: 'REJECTED', label: t('rejected', 'Rejected') },
+//       { value: 'CHECKED', label: t('checked', 'Checked') },
+//       { value: 'VALUATED', label: t('valuated', 'Valuated') },
+//       { value: 'APPROVED', label: t('approved', 'Approved') },
+//     ],
+//     [t],
+//   );
+//   const [pageSize, setPageSize] = useState(5);
+//   const filterClaims = (claim) => {
+//     const status = filters?.status;
+//     const search = filters?.search?.toLowerCase();
+//     const fromDate = filters?.fromDate ? new Date(filters.fromDate) : null;
+//     const toDate = filters?.toDate ? new Date(filters.toDate) : null;
 
-  return (
-    <div className={styles.dataTableSkeleton}>
-      <div className={styles.tableHeader}>
-        <CardHeader title={t('claims', 'Claims')}>{''}</CardHeader>
-        <ClaimsFilterHeader filters={filters} onFilterChanged={setFilters} statusOptions={status} />
-      </div>
-      <DataTable rows={results} headers={headers} isSortable useZebraStyles>
-        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-          <TableContainer className={styles.claimsTable}>
-            <Table {...getTableProps()} aria-label="sample table">
-              <TableHead>
-                <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      key={header.key}
-                      {...getHeaderProps({
-                        header,
-                      })}>
-                      {header.header}
-                    </TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => {
-                  const rowStatus = row.cells.find((cell) => cell.info.header === 'status')?.value;
-                  return (
-                    <TableRow
-                      {...getRowProps({
-                        row,
-                      })}>
-                      {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>
-                          {cell.info.header === 'status' ? (
-                            <ClaimStatus cell={cell} row={row} />
-                          ) : cell.info.header === 'action' && ['ENTERED', 'ERRORED'].includes(rowStatus) ? (
-                            <OverflowMenu size={size} flipped>
-                              <OverflowMenuItem
-                                itemText={t('retryRequest', 'Retry request')}
-                                onClick={() => handleRetry(row.id)}
-                              />
-                            </OverflowMenu>
-                          ) : cell.info.header === 'dateFrom' ? (
-                            formatDate(parseDate(cell.value))
-                          ) : (
-                            cell.value
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-            {paginated && !isLoading && (
-              <Pagination
-                forwardText=""
-                backwardText=""
-                page={currentPage}
-                pageSize={pageSize}
-                pageSizes={pageSizes}
-                totalItems={filteredClaims.length}
-                size={responsiveSize}
-                onChange={({ page: newPage, pageSize }) => {
-                  if (newPage !== currentPage) {
-                    goTo(newPage);
-                  }
-                  setPageSize(pageSize);
-                }}
-              />
-            )}
-          </TableContainer>
-        )}
-      </DataTable>
-    </div>
-  );
-};
+//     const patientName = claim.patientName?.toLowerCase();
+//     const providerName = claim.providerName?.toLowerCase();
+//     const timeStamp = new Date(claim.dateFrom);
+//     const preauthStatus = claim.status;
 
-export default ClaimsManagementTable;
+//     // Check status (allow 'all' to bypass the filter)
+//     const statusMatch = status === 'all' || preauthStatus === status;
+
+//     // Check search filter (patient name or provider name contains the search term)
+//     const searchMatch = !search || patientName?.includes(search) || providerName?.includes(search);
+
+//     // Check date range filter (timestamp is between fromDate and toDate if provided)
+//     const dateMatch = (!fromDate || timeStamp >= fromDate) && (!toDate || timeStamp <= toDate);
+
+//     // Return true if all conditions match
+//     return statusMatch && searchMatch && dateMatch;
+//   };
+
+//   const filteredClaims = claims.filter(filterClaims);
+//   const { paginated, goTo, results, currentPage } = usePagination(filteredClaims, pageSize);
+//   const { pageSizes } = usePaginationInfo(pageSize, claims.length, currentPage, results.length);
+//   const responsiveSize = isDesktop(useLayoutType()) ? 'sm' : 'lg';
+//   const layout = useLayoutType();
+//   const size = layout === 'tablet' ? 'lg' : 'md';
+
+//   const headers = [
+//     { key: 'claimCode', header: t('claimCode', 'Claim Code') },
+//     { key: 'status', header: t('status', 'Status') },
+//     { key: 'providerName', header: t('provider', 'Provider') },
+//     { key: 'patientName', header: t('patient', 'Patient') },
+//     { key: 'claimedTotal', header: t('claimedAmount', 'Claimed Amount') },
+//     { key: 'approvedTotal', header: t('approvedTotal', 'Approved Total') },
+//     { key: 'dateFrom', header: t('dateCreated', 'Date Created') },
+//     { key: 'action', header: t('action', 'Action') },
+//   ];
+
+//   if (isLoading) {
+//     return (
+//       <div className={styles.dataTableSkeleton}>
+//         <DataTableSkeleton
+//           headers={headers}
+//           showToolbar={false}
+//           showHeader={false}
+//           columnCount={Object.keys(headers).length}
+//           zebra
+//           rowCount={pageSize}
+//         />
+//       </div>
+//     );
+//   }
+
+//   if (claims.length === 0) {
+//     return (
+//       <div className={styles.claimsTable}>
+//         <EmptyState
+//           displayText={t('emptyClaimsState', 'There are no claims to display')}
+//           headerTitle={t('emptyClaimsHeader', 'No Claims')}
+//         />
+//       </div>
+//     );
+//   }
+
+//   const handleClaimAction = (claimId: string, modalType: 'retry' | 'update') => {
+//     const dispose = showModal('manage-claim-request-modal', {
+//       closeModal: () => dispose(),
+//       claimId,
+//       modalType,
+//     });
+//   };
+
+//   const renderStatusCell = (row) => {
+//     return <ClaimStatus row={row} />;
+//   };
+
+//   const renderActionCell = (row, rowStatus, size) => {
+//     return (
+//       <OverflowMenu size={size} flipped>
+//         {['ENTERED', 'ERRORED'].includes(rowStatus) && (
+//           <OverflowMenuItem
+//             itemText={t('retryRequest', 'Retry request')}
+//             onClick={() => handleClaimAction(row.id, 'retry')}
+//           />
+//         )}
+//         <OverflowMenuItem
+//           itemText={t('updateStatus', 'Update status')}
+//           onClick={() => handleClaimAction(row.id, 'update')}
+//         />
+//       </OverflowMenu>
+//     );
+//   };
 
-const ClaimStatus = ({ cell, row }: { cell: { value: string }; row: any }) => {
-  const { claims } = useFacilityClaims();
+//   const renderDateFromCell = (cellValue) => {
+//     return formatDate(parseDate(cellValue));
+//   };
 
-  const claim = claims.find((claim) => claim.id === row.id);
+//   const renderApprovedTotalCell = (row, rowStatus, cellValue) => {
+//     if (['APPROVED'].includes(rowStatus)) {
+//       const claimedTotal = row.cells.find((c) => c.info.header === 'claimedTotal')?.value;
+//       return claimedTotal || cellValue;
+//     }
+//     return cellValue;
+//   };
+
+//   const renderCellContent = (cell, row, rowStatus) => {
+//     const header = cell.info.header;
+
+//     if (header === 'status') {
+//       return renderStatusCell(row);
+//     }
+
+//     if (header === 'action') {
+//       return renderActionCell(row, rowStatus, size);
+//     }
+
+//     if (header === 'dateFrom') {
+//       return renderDateFromCell(cell.value);
+//     }
+
+//     if (header === 'approvedTotal') {
+//       return renderApprovedTotalCell(row, rowStatus, cell.value);
+//     }
+
+//     return cell.value;
+//   };
+
+//   return (
+//     <div className={styles.dataTableSkeleton}>
+//       <div className={styles.tableHeader}>
+//         <CardHeader title={t('claims', 'Claims')}>{''}</CardHeader>
+//         <ClaimsFilterHeader filters={filters} onFilterChanged={setFilters} statusOptions={status} />
+//       </div>
+//       <DataTable rows={results} headers={headers} isSortable useZebraStyles>
+//         {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+//           <TableContainer className={styles.claimsTable}>
+//             <Table {...getTableProps()} aria-label="sample table">
+//               <TableHead>
+//                 <TableRow>
+//                   {headers.map((header) => (
+//                     <TableHeader
+//                       key={header.key}
+//                       {...getHeaderProps({
+//                         header,
+//                       })}>
+//                       {header.header}
+//                     </TableHeader>
+//                   ))}
+//                 </TableRow>
+//               </TableHead>
+//               <TableBody>
+//                 {rows.map((row) => {
+//                   const rowStatus = row.cells.find((cell) => cell.info.header === 'status')?.value;
+//                   return (
+//                     <TableRow {...getRowProps({ row })}>
+//                       {row.cells.map((cell) => (
+//                         <TableCell key={cell.id}>{renderCellContent(cell, row, rowStatus)}</TableCell>
+//                       ))}
+//                     </TableRow>
+//                   );
+//                 })}
+//               </TableBody>
+//             </Table>
+//             {paginated && !isLoading && (
+//               <Pagination
+//                 forwardText=""
+//                 backwardText=""
+//                 page={currentPage}
+//                 pageSize={pageSize}
+//                 pageSizes={pageSizes}
+//                 totalItems={filteredClaims.length}
+//                 size={responsiveSize}
+//                 onChange={({ page: newPage, pageSize }) => {
+//                   if (newPage !== currentPage) {
+//                     goTo(newPage);
+//                   }
+//                   setPageSize(pageSize);
+//                 }}
+//               />
+//             )}
+//           </TableContainer>
+//         )}
+//       </DataTable>
+//     </div>
+//   );
+// };
+
+// export default ClaimsManagementTable;
+// const ClaimStatus = ({ row }: { row: any }) => {
+//   const { claims } = useFacilityClaims();
+//   const { t } = useTranslation();
+
+//   const claim = claims.find((claim) => claim.id === row.id);
+
+//   // Default to 'gray' if status not found in the mapping
+//   const tagType = statusColors[claim.status] || 'gray';
+
+//   return (
+//     <div className={styles.claimStatus}>
+//       <Tag type={tagType}>{claim.status}</Tag>
+//     </div>
+//   );
+// };
+import React from 'react';
+import ClaimsTable from './claim-table.component';
+
+const ClaimsManagementTable: React.FC = () => {
   return (
-    <div className={styles.claimStatus}>
-      <p>{cell.value}</p>
-      {claim.externalId && <Tag type="blue">{claim.externalId}</Tag>}
-    </div>
+    <ClaimsTable
+      title="claims"
+      emptyStateText="emptyClaimsState"
+      emptyStateHeader="emptyClaimsHeader"
+      includeClaimCode={true}
+    />
   );
 };
+
+export default ClaimsManagementTable;

package/src/claims/claims-management/table/manage-claim-request.modal.tsx

@@ -0,0 +1,111 @@
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { retryClaim, updateClaimStatus } from '../../dashboard/form/claims-form.resource';
+import { useFacilityClaims } from './use-facility-claims';
+
+export const ManageClaimRequest = ({
+  closeModal,
+  claimId,
+  modalType = 'retry',
+}: {
+  closeModal: () => void;
+  claimId: string;
+  modalType: 'retry' | 'update';
+}) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { claims, mutate } = useFacilityClaims();
+
+  const claim = claims.find((claim) => claim.id === claimId);
+
+  const handleRetryClaim = () => {
+    retryClaim(claim.externalId)
+      .then(() => {
+        mutate();
+        showSnackbar({
+          kind: 'success',
+          title: t('success', 'Success'),
+          subtitle: t('succcessfullRetry', 'Claim sent successfully'),
+          timeoutInMs: 3000,
+        });
+      })
+      .catch(() => {
+        showSnackbar({
+          kind: 'error',
+          title: t('error', 'Error'),
+          subtitle: t('retryClaimError', 'Request Failed, Please try later'),
+          timeoutInMs: 2500,
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+        closeModal();
+      });
+  };
+
+  const handleUpdateStatus = () => {
+    setIsSubmitting(true);
+    updateClaimStatus(claim.responseUUID)
+      .then(() => {
+        mutate();
+        showSnackbar({
+          kind: 'success',
+          title: t('success', 'Success'),
+          subtitle: t('successfulUpdate', 'Claim status updated successfully'),
+          timeoutInMs: 3000,
+        });
+      })
+      .catch(() => {
+        showSnackbar({
+          kind: 'error',
+          title: t('error', 'Error'),
+          subtitle: t('updateStatusError', 'Status update failed, Please try later'),
+          timeoutInMs: 2500,
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+        closeModal();
+      });
+  };
+
+  const handleSubmit = () => {
+    if (modalType === 'retry') {
+      handleRetryClaim();
+    } else {
+      handleUpdateStatus();
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ModalHeader closeModal={closeModal}>
+        {modalType === 'retry' ? t('retryClaim', 'Retry Claim') : t('updateClaimStatus', 'Update Claim Status')}
+      </ModalHeader>
+      <ModalBody>
+        {modalType === 'retry'
+          ? t('retryClaimMessage', `Are you sure you want to retry making the request for ${claim.claimCode}?`)
+          : t('updateStatusMessage', `You are updating claim status for ${claim.claimCode}:`)}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} type="button">
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" onClick={handleSubmit}>
+          {isSubmitting ? (
+            <>
+              <InlineLoading withOverlay={false} small />
+              {modalType === 'retry' ? t('retrying', 'Retrying') : t('updating', 'Updating')}
+            </>
+          ) : modalType === 'retry' ? (
+            t('retry', 'Retry')
+          ) : (
+            t('update', 'Update')
+          )}
+        </Button>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};