@kenyaemr/esm-billing-app 5.4.1-pre.2093 → 5.4.1-pre.2099

package/src/claims/claims-management/table/preauth-table.tmp.component.tsx

@@ -1,237 +1,15 @@
-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 React from 'react';
+import ClaimsTable from './claim-table.component';
 
 const PreauthTableTemporary: 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;
-
-    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: '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('emptyPreauthState', 'There are no preauth to display')}
-          headerTitle={t('emptyPreauthHeader', 'No Preauths')}
-        />
-      </div>
-    );
-  }
-  const handleClaimAction = (claimId: string, modalType: 'retry' | 'update') => {
-    const dispose = showModal('manage-claim-request-modal', {
-      closeModal: () => dispose(),
-      claimId,
-      modalType,
-    });
-  };
-
   return (
-    <div className={styles.dataTableSkeleton}>
-      <div className={styles.tableHeader}>
-        <CardHeader title={t('preathsRequests', 'Preauth Requests')}>{''}</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 row={row} />
-                          ) : cell.info.header === 'action' ? (
-                            <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>
-                          ) : cell.info.header === 'dateFrom' ? (
-                            formatDate(parseDate(cell.value))
-                          ) : cell.info.header === 'approvedTotal' ? (
-                            ['APPROVED'].includes(rowStatus) ? (
-                              row.cells.find((c) => c.info.header === 'claimedTotal')?.value || cell.value
-                            ) : (
-                              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>
+    <ClaimsTable
+      title="preauthsRequests"
+      emptyStateText="emptyPreauthState"
+      emptyStateHeader="emptyPreauthHeader"
+      includeClaimCode={false}
+    />
   );
 };
 
 export default PreauthTableTemporary;
-const ClaimStatus = ({ row }: { row: any }) => {
-  const { claims } = useFacilityClaims();
-  const { t } = useTranslation();
-
-  const claim = claims.find((claim) => claim.id === row.id);
-
-  const getTagType = (status) => {
-    switch (status) {
-      case 'ENTERED':
-        return 'blue';
-      case 'ERRORED':
-        return 'red';
-      case 'REJECTED':
-        return 'red';
-      case 'CHECKED':
-        return 'green';
-      case 'VALUATED':
-        return 'purple';
-      default:
-        return 'gray';
-    }
-  };
-
-  return (
-    <div className={styles.claimStatus}>
-      <Tag type={getTagType(claim.status)}>{claim.status}</Tag>
-    </div>
-  );
-};

package/src/claims/claims-management/table/use-facility-claims.ts

@@ -4,7 +4,7 @@ import { FacilityClaim } from '../../../types';
 
 export const useFacilityClaims = () => {
   const customPresentation =
-    'custom:(uuid,claimCode,dateFrom,dateTo,claimedTotal,approvedTotal,status,externalId,provider:(display),patient:(display))';
+    'custom:(uuid,claimCode,dateFrom,dateTo,claimedTotal,approvedTotal,status,externalId,responseUUID,provider:(display),patient:(display))';
   const url = `${restBaseUrl}/claim?v=${customPresentation}`;
 
   const { data, error, isLoading, mutate, isValidating } = useSWR<FetchResponse<{ results: Array<FacilityClaim> }>>(

package/src/claims/dashboard/form/claims-form.component.tsx

@@ -411,7 +411,6 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
                   name="provider"
                   render={({ field }) => (
                     <ComboBox
-                      {...field}
                       id="provider"
                       invalid={shouldShowError('provider')}
                       invalidText={errors.provider?.message}
@@ -419,11 +418,16 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
                       titleText={t('provider', 'Provider')}
                       items={providers}
                       itemToString={(item) => item?.display?.split('-')?.at(-1)?.trim() ?? ''}
-                      selectedItem={providers?.find((p) => p?.uuid === field.value)}
+                      initialSelectedItem={
+                        field.value && providers ? providers.find((p) => p.uuid === field.value) : null
+                      }
                       onChange={({ selectedItem }) => {
-                        field.onChange(selectedItem?.display?.split('-')?.at(-1)?.trim() ?? '');
+                        field.onChange(selectedItem?.uuid || '');
                         setValidationEnabled(true);
                       }}
+                      name={field.name}
+                      onBlur={field.onBlur}
+                      ref={field.ref}
                     />
                   )}
                 />

package/src/claims/dashboard/form/claims-form.resource.ts

@@ -91,8 +91,8 @@ export const usePackages = () => {
   };
 };
 
-export const updateClaimStatus = (externalId: string) => {
-  const url = `/ws/rest/v1/insuranceclaims/claim/update-status?externalId=${externalId}`;
+export const updateClaimStatus = (responseUUID: string) => {
+  const url = `/ws/rest/v1/insuranceclaims/claim/update-status?externalId=${responseUUID}`;
   return openmrsFetch(url, {
     method: 'GET',
   });

package/src/claims/utils.ts

@@ -0,0 +1,7 @@
+export const statusColors = {
+  ENTERED: 'blue',
+  ERRORED: 'red',
+  REJECTED: 'red',
+  CHECKED: 'green',
+  VALUATED: 'purple',
+};

package/src/types/index.ts

@@ -548,6 +548,7 @@ export type FacilityClaim = {
   } | null;
   patient?: { display: string };
   externalId: string;
+  responseUUID: string;
 };
 export type BillingPromptType = 'patient-chart' | 'billing-orders';
 
@@ -568,3 +569,40 @@ export interface Filter {
   cashiers?: Array<string>;
   status?: string;
 }
+export interface DataTableRow {
+  id: string;
+  cells: Array<Cell>;
+}
+
+export interface Cell {
+  id: string;
+  value: any;
+  info: Info;
+}
+
+export interface Info {
+  header: string;
+}
+
+export interface Claim {
+  id: string;
+  status: string;
+  claimCode?: string;
+  providerName?: string;
+  patientName?: string;
+  claimedTotal?: number | string;
+  approvedTotal?: number | string;
+  dateFrom: string;
+}
+
+export interface Header {
+  key: string;
+  header: string;
+}
+
+export interface TableProps {
+  title: string;
+  emptyStateText: string;
+  emptyStateHeader: string;
+  includeClaimCode?: boolean;
+}