@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.445

package/src/billing/dashboard/v3/facility-bills/facility-bills.component.tsx

@@ -0,0 +1,306 @@
+import React, { useEffect, useMemo } from 'react';
+import { useState } from 'react';
+import { type FacilityBillsDto, BillingView, ClaimProviderStatus } from '../types';
+import {
+  Button,
+  ComboBox,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextInput,
+} from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { fetchFacilityBills } from '../../../billing-claims.resource';
+import styles from './facility-bills.component.scss';
+import EmptyState from '../shared/empty-state.component';
+import { type PatientBill } from '../../v2/types';
+import PatientVisitDetailsComponent from '../patient-bill-details/patient-visit-details';
+import { type TagColor } from 'src/types/types';
+
+interface facilityBillsProps {
+  billingDate: string;
+  locationUuid: string;
+  onDateChange?: (value: string) => void;
+}
+const FacilityBillsV3: React.FC<facilityBillsProps> = ({ billingDate, locationUuid, onDateChange }) => {
+  const [facilityBills, setFacilityBills] = useState<PatientBill[]>([]);
+  const [currentView, setCurrentView] = useState<BillingView>(BillingView.Bills);
+  const [selectedPatientUuid, setSelectedPatientUuid] = useState<string>('');
+  const [search, setSearch] = useState<string>('');
+  const [selectedStatus, setSelectedStatus] = useState<string>('');
+  const [searchString, setSearchString] = useState<string>();
+  const [loading,setLoading] = useState<boolean>(false);
+  const statusOptions = Object.values(ClaimProviderStatus).map((s) => {
+    return {
+      text: s,
+      id: s,
+    };
+  });
+  const filtedFacilityBills = useMemo(() => filterFacilityBills(facilityBills), [facilityBills, selectedStatus,searchString]);
+  useEffect(() => {
+    if (locationUuid && billingDate) {
+      getFacilityBills();
+    }
+  }, [billingDate, locationUuid]);
+  if(loading){
+      return <><InlineLoading  description='Fetching data.. please wait!...'/></>
+  }
+  async function getFacilityBills() {
+    setLoading(true);
+    const facilityBillsPayload = generateFacilityBillsPayload();
+    try {
+      const data = await fetchFacilityBills(facilityBillsPayload);
+      if (data) {
+        setFacilityBills(data);
+      } else {
+        setFacilityBills([]);
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching facility bills',
+        subtitle: 'An error occurred while fetehcing facility bills, please reload or contact support',
+      });
+    }finally{
+      setLoading(false);
+    }
+  }
+  function generateFacilityBillsPayload(): FacilityBillsDto {
+    return {
+      locationUuid: locationUuid ?? '',
+      billingDate: billingDate,
+    };
+  }
+
+  function toggleView(newView: BillingView, patientUuid: string) {
+    setCurrentView(newView);
+    setSelectedPatientUuid(patientUuid);
+  }
+  function formatStatusColumn(status: string | null | undefined) {
+    if (status == null || status === '') {
+      return '—';
+    }
+    const statusArr = String(status)
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+
+    if (statusArr.length > 0) {
+      const hasPostedBill = statusArr.some((s) => {
+        return s === 'POSTED';
+      });
+      if (hasPostedBill) {
+        return 'PARTIALLY PAID';
+      }
+      const hasPendingBill = statusArr.some((s) => s === 'PENDING');
+      if (hasPendingBill) {
+        return 'PENDING';
+      }
+
+      return 'PAID';
+    }
+    return String(status);
+  }
+
+  const formatDate = (date?: string | null) => {
+    if (!date) return '—';
+
+    return new Intl.DateTimeFormat('en-KE', {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    }).format(new Date(date));
+  };
+
+  function statusChangeHandler(selectedStatus: { selectedItem: { id: string; text: string } }) {
+    let status = '';
+    if (selectedStatus && selectedStatus.selectedItem) {
+      status = selectedStatus.selectedItem.id;
+    }
+
+    setSelectedStatus(status);
+  }
+  const getTagTypeByStatus = (status: string): TagColor => {
+    let type: TagColor;
+    switch (status) {
+      case ClaimProviderStatus.Submitted:
+        type = 'green';
+        break;
+      case ClaimProviderStatus.SubmissionReady:
+        type = 'gray';
+        break;
+      case ClaimProviderStatus.FailedToSubmit:
+        type = 'blue';
+        break;
+      case ClaimProviderStatus.Draft:
+        type = 'gray';
+        break;
+      case ClaimProviderStatus.Closed:
+        type = 'gray';
+        break;
+      case ClaimProviderStatus.TimeBarred:
+        type = 'red';
+        break;
+      default:
+        type = 'gray';
+    }
+    return type;
+  };
+
+  const handlBillsSearch = (searchTerm: string) => {
+    setSearchString(searchTerm);
+  };
+
+  function filterFacilityBills(facilityBills: PatientBill[]) {
+    return facilityBills.filter((b) => {
+      if(!selectedStatus || selectedStatus === 'ALL'){
+        return true;
+      }
+      return b.claim_status === selectedStatus;
+    }).filter((b)=>{
+      if(!searchString){
+        return true;
+      }
+       const searchVal = searchString ? searchString.toLowerCase(): '';
+       return b?.patient_name.trim().toLowerCase().includes(searchVal) || b.cr_id?.trim().toLowerCase().includes(searchVal);
+    });
+  }
+  function handleResetFilters(){
+     setSearchString('')
+     setSelectedStatus('ALL');
+  }
+  function handleRefresh(){
+      getFacilityBills();
+  }
+
+  return (
+    <>
+      <div className={styles.filterRow}>
+        <div className={styles.filter}>
+          <ComboBox
+            onChange={statusChangeHandler}
+            id="queue-status-combobox"
+            items={[
+              {
+                text: 'ALL',
+                id: 'ALL',
+              },
+              ...statusOptions,
+            ]}
+            itemToString={(item) => (item ? item.text : '')}
+            titleText="Claim Status"
+            value={selectedStatus}
+          />
+        </div>
+        <div className={styles.filter}>
+          <TextInput
+            id="queue-search"
+            labelText="Name/Identifier"
+            onChange={(e) => handlBillsSearch (e.target.value)}
+            placeholder="Enter patient name or identifier to filter"
+            value={searchString}
+          />
+        </div>
+         <div className={styles.actionCol}>
+             <Button kind='secondary' onClick={handleResetFilters}>Reset Filters</Button>
+             <Button kind='tertiary' onClick={handleRefresh}>Refresh</Button>
+         </div>
+      </div>
+      {currentView === BillingView.Bills ? (
+        (filtedFacilityBills ?? []).length === 0 ? (
+          <EmptyState message="No bills." />
+        ) : (
+          <>
+            {filtedFacilityBills.length === 0 ? (
+              <EmptyState message="No bills match your search." />
+            ) : (
+              <Table aria-label="facility bills" size="sm">
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>No</TableHeader>
+                    <TableHeader>Date</TableHeader>
+                    <TableHeader>Patient</TableHeader>
+                    <TableHeader>Provider Status</TableHeader>
+                    <TableHeader>Payer Status</TableHeader>
+                    <TableHeader>Service Type</TableHeader>
+                    <TableHeader>Cash Status</TableHeader>
+                    <TableHeader>Identifier</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {filtedFacilityBills.map((fb, index) => {
+                    return (
+                      <TableRow key={fb.patient_uuid}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>{formatDate(fb.visit_start_date)}</TableCell>
+                        <TableCell>
+                          <div
+                            className={styles.clickableData}
+                            onClick={() => toggleView(BillingView.BillDetails, fb.patient_uuid)}
+                          >
+                            {fb.patient_name}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Tag type={getTagTypeByStatus(fb?.claim_status ?? '')}>{fb.claim_status}</Tag>
+                        </TableCell>
+                         <TableCell>
+                          { fb.payer_status }
+                        </TableCell>
+                         <TableCell>
+                          { fb.service_type }
+                        </TableCell>
+                        <TableCell>
+                          {(() => {
+                            const s = formatStatusColumn(fb.paid_status);
+                            const type = s === 'PAID' ? 'green' : s === 'PENDING' ? 'gray' : 'blue';
+                            return (
+                              <Tag size="sm" type={type}>
+                                {s}
+                              </Tag>
+                            );
+                          })()}
+                        </TableCell>
+                        <TableCell>{fb.cr_id}</TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </>
+        )
+      ) : (
+        <></>
+      )}
+      {currentView === BillingView.BillDetails && selectedPatientUuid ? (
+        <>
+          <div>
+            <Button kind="primary" onClick={() => toggleView(BillingView.Bills, '')}>
+              Back
+            </Button>
+          </div>
+          <div>
+            <PatientVisitDetailsComponent
+              locationUuid={locationUuid}
+              billingDate={billingDate}
+              patientUuid={selectedPatientUuid}
+            />
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default FacilityBillsV3;

package/src/billing/dashboard/v3/facility-bills/preauths-datatables/pending-preauths.component.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo, useState } from "react";
+import {
+    Button,
+    DataTable,
+    DataTableRow,
+    InlineLoading,
+    Pagination,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@carbon/react';
+import { usePagination } from '@openmrs/esm-framework';
+import { useFacilityPreauths } from "../../../../billing-claims.resource";
+
+interface PendingPreauthsProps {
+    locationUuid: string,
+    billingDate: string
+}
+const PendingPreauths: React.FC<PendingPreauthsProps> = ({ locationUuid, billingDate }) => {
+    const { facilityPreauths, isLoading, error } = useFacilityPreauths(locationUuid, billingDate);
+    const rows = facilityPreauths ?? [];
+
+    const tableRows = useMemo(
+        () =>
+            rows.map((preauth) => ({
+                id: preauth.order_no,
+                orderNo: preauth.order_no,
+                patientName: preauth.patient_name,
+                crNumber: preauth.cr_no,
+                interventionCode: preauth.intervention_code,
+                status: preauth.status,
+                billDate: preauth.bill_date,
+                consentToken: preauth.consent_token ?? 'None',
+                normalPreauth: preauth.normal_preauth ? 'Yes' : 'No',
+                electivePreauth: preauth.elective_preauth ? 'Yes' : 'No',
+            })),
+        [rows],
+    );
+
+    const [currentPageSize, setPageSize] = useState(10);
+    const pageSizes = [10, 20, 30];
+    const { goTo, results: paginatedRows, currentPage } = usePagination(tableRows, currentPageSize);
+
+    const headers = [
+        { key: 'orderNo', id: 'orderNo', header: 'Order #' },
+        { key: 'patientName', id: 'patientName', header: 'Patient' },
+        { key: 'crNumber', id: 'crNumber', header: 'CR number' },
+        { key: 'interventionCode', id: 'interventionCode', header: 'Intervention' },
+        { key: 'status', id: 'status', header: 'Status' },
+        { key: 'billDate', id: 'billDate', header: 'Bill date' },
+        { key: 'consentToken', id: 'consentToken', header: 'Consent token' },
+        { key: 'normalPreauth', id: 'normalPreauth', header: 'Normal preauth' },
+        { key: 'electivePreauth', id: 'electivePreauth', header: 'Elective preauth' },
+        { key: 'action', id: 'action', header: 'Action' },
+    ];
+
+    if (isLoading) {
+        return <InlineLoading description="Loading pending preauthorisations" />;
+    }
+
+    if (error) {
+        return <div>Failed to load pending preauthorisations.</div>;
+    }
+
+    if (!rows.length) {
+        return <div>No pending preauthorisations found.</div>;
+    }
+
+    function handleAddPreauth(_row: DataTableRow<any[]>): void {
+        // Prefer the Preauthorizations tab raise queue (PreauthList).
+    }
+
+    return (
+        <>
+            <DataTable rows={paginatedRows} headers={headers}>
+                {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+                    <Table size="sm" useZebraStyles aria-label="pending preauthorisations" {...getTableProps()}>
+                        <TableHead>
+                            <TableRow>
+                                {headers.map((header) => (
+                                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                                        {header.header}
+                                    </TableHeader>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows.map((row) => (
+                                <TableRow key={row.id} {...getRowProps({ row })}>
+                                    {row.cells.map((cell) => {
+                                        if (cell.info.header === 'action') {
+                                            return (
+                                                <TableCell key={cell.id} {...getCellProps({ cell })}>
+                                                    <Button kind="primary" size="sm" onClick={() => handleAddPreauth(row)}>
+                                                        Add preauth
+                                                    </Button>
+                                                </TableCell>
+                                            );
+                                        }
+
+                                        return (
+                                            <TableCell key={cell.id} {...getCellProps({ cell })}>
+                                                {cell.value}
+                                            </TableCell>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                )}
+            </DataTable>
+            <Pagination
+                backwardText="Previous page"
+                forwardText="Next page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={tableRows.length}
+                onChange={({ page, pageSize }) => {
+                    if (pageSize !== currentPageSize) setPageSize(pageSize);
+                    if (page !== currentPage) goTo(page);
+                }}
+            />
+        </>
+    );
+}
+
+export default PendingPreauths;

package/src/billing/dashboard/v3/facility-bills/preauths-datatables/preauth-preview-table.component.tsx

@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { Renew } from '@carbon/react/icons';
+import { showSnackbar, usePagination } from '@openmrs/esm-framework';
+import {
+  isAwaitingDoctorApproval,
+  resendPreauthDoctorConsent,
+  type PreauthPreviewRow,
+} from '../../../../../claims/claims.resource';
+
+interface PreauthPreviewTableProps {
+  rows: PreauthPreviewRow[];
+  locationUuid: string;
+  loading?: boolean;
+  onRefresh: () => void;
+}
+
+const PreauthPreviewTable: React.FC<PreauthPreviewTableProps> = ({
+  rows,
+  locationUuid,
+  loading,
+  onRefresh,
+}) => {
+  const [resendingId, setResendingId] = useState<string | null>(null);
+  const [currentPageSize, setPageSize] = useState(10);
+  const pageSizes = [10, 20, 30];
+
+  const tableRows = useMemo(
+    () =>
+      rows.map((r) => ({
+        id: r.id,
+        patient: r.memberName || '—',
+        memberId: r.memberIdentifier || '—',
+        intervention: r.interventionCode
+          ? `${r.interventionCode}${r.interventionName ? ` · ${r.interventionName}` : ''}`
+          : '—',
+        preauthType: r.preauthType || '—',
+        status: r.status || '—',
+        doctor: r.doctorName || '—',
+        token: r.preauthToken || r.consentToken || '—',
+        serviceStart: r.serviceStart
+          ? r.serviceStart.replace('T', ' ').slice(0, 19)
+          : '—',
+        raw: r,
+      })),
+    [rows],
+  );
+
+  const { goTo, results: paginatedRows, currentPage } = usePagination(tableRows, currentPageSize);
+
+  const headers = [
+    { key: 'patient', header: 'Patient' },
+    { key: 'memberId', header: 'Member ID' },
+    { key: 'intervention', header: 'Intervention' },
+    { key: 'preauthType', header: 'Type' },
+    { key: 'status', header: 'Status' },
+    { key: 'doctor', header: 'Doctor' },
+    { key: 'token', header: 'Preauth token' },
+    { key: 'serviceStart', header: 'Service start' },
+    { key: 'action', header: 'Action' },
+  ];
+
+  const handleResend = useCallback(
+    async (row: PreauthPreviewRow) => {
+      if (!row.practitionerRegistrationNumber) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Missing doctor registration',
+          subtitle: 'No practitioner registration number on this preauth doctor profile.',
+        });
+        return;
+      }
+      if (!row.interventionCode) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Missing intervention',
+          subtitle: 'Cannot resend doctor consent without an intervention code.',
+        });
+        return;
+      }
+      setResendingId(row.id);
+      try {
+        await resendPreauthDoctorConsent({
+          practitionerRegistrationNumber: row.practitionerRegistrationNumber,
+          consentToken: row.consentToken,
+          interventionCode: row.interventionCode,
+          locationUuid,
+        });
+        showSnackbar({
+          kind: 'success',
+          title: 'Doctor consent resent',
+          subtitle: 'The doctor should receive another SMS approval request.',
+        });
+        onRefresh();
+      } catch (e) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Resend failed',
+          subtitle: String(e ?? 'Could not resend doctor consent'),
+        });
+      } finally {
+        setResendingId(null);
+      }
+    },
+    [locationUuid, onRefresh],
+  );
+
+  if (loading) {
+    return <InlineLoading description="Loading preauthorisations…" />;
+  }
+
+  if (!rows.length) {
+    return <div>No preauthorisations in this status for the selected date.</div>;
+  }
+
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '0.5rem' }}>
+        <Button kind="ghost" size="sm" renderIcon={Renew} onClick={onRefresh}>
+          Refresh
+        </Button>
+      </div>
+      <DataTable rows={paginatedRows} headers={headers}>
+        {({ rows: dtRows, headers: dtHeaders, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+          <Table size="sm" useZebraStyles aria-label="preauthorisations" {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {dtHeaders.map((header) => (
+                  <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {dtRows.map((row) => {
+                const source = tableRows.find((r) => r.id === row.id)?.raw;
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => {
+                      if (cell.info.header === 'status') {
+                        return (
+                          <TableCell key={cell.id} {...getCellProps({ cell })}>
+                            <Tag
+                              size="sm"
+                              type={
+                                isAwaitingDoctorApproval(source)
+                                  ? 'magenta'
+                                  : String(cell.value).includes('FINAL')
+                                    ? 'green'
+                                    : 'blue'
+                              }
+                            >
+                              {String(cell.value)}
+                            </Tag>
+                          </TableCell>
+                        );
+                      }
+                      if (cell.info.header === 'preauthType') {
+                        return (
+                          <TableCell key={cell.id} {...getCellProps({ cell })}>
+                            <Tag size="sm" type="purple">
+                              {String(cell.value)}
+                            </Tag>
+                          </TableCell>
+                        );
+                      }
+                      if (cell.info.header === 'action') {
+                        const canResend = source && isAwaitingDoctorApproval(source);
+                        return (
+                          <TableCell key={cell.id} {...getCellProps({ cell })}>
+                            {canResend ? (
+                              <Button
+                                kind="tertiary"
+                                size="sm"
+                                disabled={resendingId === source.id}
+                                onClick={() => handleResend(source)}
+                              >
+                                {resendingId === source.id ? (
+                                  <InlineLoading description="Resending…" />
+                                ) : (
+                                  'Resend doctor consent'
+                                )}
+                              </Button>
+                            ) : (
+                              '—'
+                            )}
+                          </TableCell>
+                        );
+                      }
+                      return (
+                        <TableCell key={cell.id} {...getCellProps({ cell })}>
+                          {cell.value}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        page={currentPage}
+        pageSize={currentPageSize}
+        pageSizes={pageSizes}
+        totalItems={tableRows.length}
+        onChange={({ page, pageSize }) => {
+          if (pageSize !== currentPageSize) setPageSize(pageSize);
+          if (page !== currentPage) goTo(page);
+        }}
+      />
+    </>
+  );
+};
+
+export default PreauthPreviewTable;