@kenyaemr/esm-billing-app 5.4.2-pre.2198 → 5.4.2-pre.2203

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-group-nav-slot"},{"component":"billDepositDashboardLink","name":"bill-deposit-dashboard-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-group-nav-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-group-nav-slot"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"}],"version":"5.4.2-pre.2198"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-group-nav-slot"},{"component":"billDepositDashboardLink","name":"bill-deposit-dashboard-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-group-nav-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-group-nav-slot"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"}],"version":"5.4.2-pre.2203"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2198",
+  "version": "5.4.2-pre.2203",
   "description": "Billing app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-billing-app.js",
   "main": "src/index.ts",

package/src/benefits-package/table/benefits-table.component.tsx

@@ -1,11 +1,12 @@
 import { Button, DataTableSkeleton } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
 import { getPatientUuidFromStore, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePreAuthRequests } from '../../hooks/use-pre-auth-requests';
 import GenericDataTable from './generic_data_table.component';
 import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { useFacilityClaims } from '../../claims/claims-management/table/use-facility-claims';
 
 const headers = [
   {
@@ -39,6 +40,12 @@ const BenefitsTable = () => {
   const patientUuid = getPatientUuidFromStore();
   const { isLoading, preAuthRequests } = usePreAuthRequests();
 
+  const { claims, mutate } = useFacilityClaims();
+
+  const claimsByUse = useMemo(() => {
+    return claims.filter((claim) => claim.use === 'preauthorization' && claim.patientId === patientUuid);
+  }, [claims]);
+
   if (isLoading) {
     return (
       <DataTableSkeleton
@@ -52,7 +59,7 @@ const BenefitsTable = () => {
       />
     );
   }
-
+  //
   const handleLaunchPreAuthForm = () => {
     launchPatientWorkspace('benefits-pre-auth-form', {
       workspaceTitle: 'Pre Auth Form',
@@ -63,10 +70,10 @@ const BenefitsTable = () => {
   return (
     <>
       <GenericDataTable
-        rows={preAuthRequests.map((r) => ({
+        rows={claimsByUse.map((r) => ({
           ...r,
-          lastUpdatedAt: formatDate(parseDate(r.lastUpdatedAt)),
-          provider: r.provider.name,
+          lastUpdatedAt: formatDate(parseDate(r.dateFrom)),
+          provider: r.provider.person.display,
         }))}
         headers={headers}
         title={t('preAuthRequests', 'Pre Auth Requests')}

package/src/benefits-package/table/generic_data_table.component.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 
 type GenericDataTableProps = {
   headers: Array<{ key: string; header: string }>;
-  rows: Array<Record<string, any>>;
+  rows: any;
   title: string;
   renderActionComponent?: () => ReactNode;
 };

package/src/billing.resource.ts

@@ -59,6 +59,10 @@ export const mapBillProperties = (bill: PatientInvoice): MappedBill => {
       .map((ref) => `${ref.paymentMode}: ${ref.value}`)
       .join(', '),
     adjustmentReason: bill?.adjustmentReason,
+    balance: bill?.balance,
+    totalPayments: bill?.totalPayments,
+    totalDeposits: bill?.totalDeposits,
+    totalExempted: bill?.totalExempted,
   };
 
   return mappedBill;
@@ -134,6 +138,10 @@ export const useBill = (billUuid: string) => {
       payments: bill?.payments,
       totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
       tenderedAmount: bill?.payments?.map((item) => item.amountTendered).reduce((prev, curr) => prev + curr, 0),
+      totalPayments: bill?.totalPayments,
+      totalDeposits: bill?.totalDeposits,
+      totalExempted: bill?.totalExempted,
+      balance: bill?.balance,
     };
 
     return mappedBill;

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,use,dateFrom,dateTo,claimedTotal,approvedTotal,status,externalId,responseUUID,provider:(display),patient:(display))';
+    'custom:(uuid,claimCode,use,dateFrom,dateTo,claimedTotal,approvedTotal,status,externalId,responseUUID,provider:(person:(display),display),patient:(uuid,display))';
   const url = `${restBaseUrl}/claim?v=${customPresentation}`;
 
   const { data, error, isLoading, mutate, isValidating } = useSWR<FetchResponse<{ results: Array<FacilityClaim> }>>(
@@ -14,13 +14,15 @@ export const useFacilityClaims = () => {
 
   const formatClaim = (
     claim: FacilityClaim,
-  ): FacilityClaim & { id: string; providerName: string; patientName: string } => ({
+  ): FacilityClaim & { id: string; providerName: string; patientName: string; patientId?: string } => ({
     ...claim,
     id: claim.uuid,
-    providerName: claim.provider?.display,
+    providerName: claim.provider?.person?.display,
     approvedTotal: claim.approvedTotal ?? 0,
     status: claim.status,
     patientName: claim.patient?.display,
+    insurer: claim.insurer ?? '',
+    patientId: claim.patient?.uuid,
   });
 
   const formattedClaims = data?.data.results.map(formatClaim) ?? [];

package/src/invoice/invoice.component.tsx

@@ -23,18 +23,14 @@ import { useBill, useDefaultFacility } from '../billing.resource';
 import { spaBasePath } from '../constants';
 import { convertToCurrency } from '../helpers';
 import { usePaymentsReconciler } from '../hooks/use-payments-reconciler';
-import { LineItem } from '../types';
+import { LineItem, MappedBill } from '../types';
 import InvoiceTable from './invoice-table.component';
 import { removeQueuedPatient, useShaFacilityStatus, useVisitQueueEntry } from './invoice.resource';
 import styles from './invoice.scss';
 import Payments from './payments/payments.component';
 import ReceiptPrintButton from './print-bill-receipt/receipt-print-button.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
-
-interface InvoiceDetailsProps {
-  label: string;
-  value: string | number;
-}
+import capitalize from 'lodash-es/capitalize';
 
 const Invoice: React.FC = () => {
   const { t } = useTranslation();
@@ -100,14 +96,6 @@ const Invoice: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bill?.lineItems?.length]);
 
-  const invoiceDetails = {
-    'Total Amount': convertToCurrency(bill?.totalAmount),
-    'Amount Tendered': convertToCurrency(bill?.tenderedAmount),
-    'Invoice Number': bill.receiptNumber,
-    'Date And Time': formatDatetime(parseDate(bill.dateCreated), { mode: 'standard', noToday: true }),
-    'Invoice Status': bill?.status,
-  };
-
   if (isLoadingPatient || isLoadingBill || isVisitLoading) {
     return (
       <div className={styles.invoiceContainer}>
@@ -197,13 +185,7 @@ const Invoice: React.FC = () => {
   return (
     <div className={styles.invoiceContainer}>
       {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
-      <div className={styles.detailsContainer}>
-        <section className={styles.details}>
-          {Object.entries(invoiceDetails).map(([key, val]) => (
-            <InvoiceDetails key={key} label={key} value={val} />
-          ))}
-        </section>
-      </div>
+      <InvoiceSummary bill={bill} />
       <div className={styles.actionArea}>
         <ReceiptPrintButton bill={bill} />
         <Button
@@ -256,10 +238,50 @@ const Invoice: React.FC = () => {
   );
 };
 
-function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+function InvoiceSummary({ bill }: { readonly bill: MappedBill }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className={styles.invoiceSummary}>
+        <span className={styles.invoiceSummaryTitle}>{t('invoiceSummary', 'Invoice Summary')}</span>
+      </div>
+      <div className={styles.invoiceSummaryContainer}>
+        <div className={styles.invoiceCard}>
+          <InvoiceSummaryItem label={t('invoiceNumber', 'Invoice Number')} value={bill.receiptNumber} />
+          <InvoiceSummaryItem
+            label={t('dateAndTime', 'Date And Time')}
+            value={formatDatetime(parseDate(bill.dateCreated), { mode: 'standard', noToday: true })}
+          />
+          <InvoiceSummaryItem label={t('invoiceStatus', 'Invoice Status')} value={bill?.status} />
+          <InvoiceSummaryItem label={t('cashPoint', 'Cash Point')} value={bill?.cashPointName} />
+          <InvoiceSummaryItem label={t('cashier', 'Cashier')} value={capitalize(bill?.cashier?.display)} />
+        </div>
+        <div className={styles.divider} />
+        <div className={styles.invoiceCard}>
+          <InvoiceSummaryItem label={t('totalAmount', 'Total Amount')} value={convertToCurrency(bill?.totalAmount)} />
+          <InvoiceSummaryItem
+            label={t('totalExempted', 'Total Exempted')}
+            value={convertToCurrency(bill?.totalExempted)}
+          />
+          <InvoiceSummaryItem
+            label={t('totalPayments', 'Total Payments')}
+            value={convertToCurrency(bill?.totalPayments)}
+          />
+          <InvoiceSummaryItem
+            label={t('totalDeposits', 'Total Deposits')}
+            value={convertToCurrency(bill?.totalDeposits)}
+          />
+          <InvoiceSummaryItem label={t('balance', 'Balance')} value={convertToCurrency(bill?.balance)} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function InvoiceSummaryItem({ label, value }: { readonly label: string; readonly value: string | number }) {
   return (
-    <div>
-      <h1 className={styles.label}>{label}</h1>
+    <div className={styles.invoiceSummaryItem}>
+      <span className={styles.label}>{label}</span>
       <span className={styles.value}>{value}</span>
     </div>
   );

package/src/invoice/invoice.scss

@@ -31,18 +31,6 @@
   row-gap: 1.5rem;
 }
 
-.label {
-  @include type.type-style('body-compact-02');
-  color: colors.$gray-70;
-  margin: layout.$spacing-01;
-}
-
-.value {
-  @include type.type-style('heading-03');
-  display: inline-block;
-  margin-top: layout.$spacing-04;
-}
-
 .backButton {
   margin: layout.$spacing-04;
 
@@ -109,3 +97,45 @@
     max-height: 2rem;
   }
 }
+
+.invoiceSummaryContainer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: layout.$spacing-05;
+  margin: 0 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
+  background-color: colors.$white;
+  padding: layout.$spacing-05;
+
+  .divider {
+    width: 1px;
+    background-color: colors.$gray-20;
+    margin: 0 layout.$spacing-05;
+  }
+}
+
+.invoiceSummaryItem {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$spacing-05;
+  justify-content: center;
+
+  .label {
+    @include type.type-style('legal-02');
+    color: colors.$gray-70;
+  }
+
+  .value {
+    @include type.type-style('heading-01');
+    color: colors.$gray-70;
+  }
+}
+
+.invoiceSummaryTitle {
+  @include type.type-style('heading-01');
+  color: colors.$gray-70;
+  margin: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
+  background-color: colors.$white;
+  display: block;
+  border-bottom: 1px solid colors.$gray-20;
+  padding: layout.$spacing-04;
+}

package/src/invoice/payments/invoice-breakdown/invoice-breakdown.scss

@@ -5,18 +5,18 @@
 .invoiceBreakdown {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  align-items: flex-end;
+  align-items: flex-start;
   margin: layout.$spacing-02 0;
 }
 
 .label {
-  @include type.type-style('heading-03');
+  @include type.type-style('legal-02');
   color: colors.$gray-100;
-  text-align: end;
+  text-align: start;
 }
 
 .value {
-  @extend .label;
+  @include type.type-style('heading-01');
   font-weight: bold;
   margin-left: layout.$spacing-03;
   text-align: start;

package/src/invoice/payments/payments.component.tsx

@@ -42,8 +42,8 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
   });
 
   const totalWaivedAmount = computeWaivedAmount(bill);
-  const totalAmountTendered = formValues?.reduce((curr: number, prev) => curr + Number(prev.amount), 0) ?? 0;
-  const amountDue = Number(bill.totalAmount) - (Number(bill.tenderedAmount) + Number(totalAmountTendered));
+  const totalAmountTendered = formValues?.reduce((curr: number, prev) => Number(prev.amount) + curr, 0) ?? 0;
+  const amountDue = bill.balance - totalAmountTendered;
 
   // selected line items amount due
   const selectedLineItemsAmountDue =
@@ -148,6 +148,10 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
         <div className={styles.divider} />
         <div className={styles.paymentTotals}>
           <InvoiceBreakDown label={t('totalAmount', 'Total Amount')} value={convertToCurrency(bill.totalAmount)} />
+          <InvoiceBreakDown
+            label={t('totalDeposits', 'Total Deposits')}
+            value={convertToCurrency(bill.totalDeposits)}
+          />
           <InvoiceBreakDown
             label={t('totalTendered', 'Total Tendered')}
             value={convertToCurrency(bill.tenderedAmount + totalAmountTendered)}

package/src/invoice/payments/payments.test.tsx

@@ -6,6 +6,8 @@ import { mockBill, mockedActiveSheet, mockLineItems, mockPaymentModes } from '..
 import { processBillPayment, usePaymentModes } from '../../billing.resource';
 import { useClockInStatus } from '../../payment-points/use-clock-in-status';
 import Payments from './payments.component';
+import { LineItem, PaymentMethod } from '../../types';
+
 const mockProcessBillPayment = processBillPayment as jest.MockedFunction<typeof processBillPayment>;
 const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
 const mockShowSnackbar = showSnackbar as jest.MockedFunction<typeof showSnackbar>;
@@ -18,6 +20,37 @@ jest.mock('../../billing.resource', () => ({
 jest.mock('../../payment-points/use-clock-in-status');
 const mockedUseClockInStatus = useClockInStatus as jest.Mock;
 
+// Update mockPaymentModes to include all required properties
+const updatedMockPaymentModes: PaymentMethod[] = mockPaymentModes.map((mode) => ({
+  ...mode,
+  retireReason: null,
+  auditInfo: {
+    dateCreated: '2024-01-01',
+    creator: {
+      uuid: 'user-1',
+      display: 'Test User',
+      links: [{ rel: 'self', uri: '/ws/rest/v1/user/user-1', resourceAlias: 'user' }],
+    },
+    dateChanged: null,
+    changedBy: null,
+  },
+  sortOrder: null,
+  resourceVersion: '1.8',
+}));
+
+// Update mockLineItems to include all required properties
+const updatedMockLineItems: LineItem[] = mockLineItems.map((item) => ({
+  ...item,
+  itemOrServiceConceptUuid: 'concept-uuid-1',
+  serviceTypeUuid: 'servicetype-uuid-1',
+  order: {
+    uuid: 'order-uuid-1',
+    display: item.billableService.split(':')[1],
+    links: [],
+    type: 'testorder',
+  },
+}));
+
 describe('Payment', () => {
   test('should display error when posting payment fails', async () => {
     const user = userEvent.setup();
@@ -33,7 +66,7 @@ describe('Payment', () => {
     };
     mockProcessBillPayment.mockRejectedValueOnce(mockFieldErrorResponse);
     mockUsePaymentModes.mockReturnValue({
-      paymentModes: mockPaymentModes,
+      paymentModes: updatedMockPaymentModes,
       isLoading: false,
       error: null,
       mutate: jest.fn(),
@@ -48,7 +81,7 @@ describe('Payment', () => {
       isClockedInCurrentPaymentPoint: false,
     });
 
-    render(<Payments bill={mockBill as any} selectedLineItems={mockLineItems} />);
+    render(<Payments bill={mockBill as any} selectedLineItems={updatedMockLineItems} />);
     const addPaymentMethod = screen.getByRole('button', { name: /Add payment option/i });
     await user.click(addPaymentMethod);
     await user.click(screen.getByRole('combobox', { name: /Payment method/i }));
@@ -72,8 +105,13 @@ describe('Payment', () => {
             display: 'BillLineItem',
             item: 'c15d25b9-12bb-441d-9241-cae541dd4575',
             lineItemOrder: 0,
-            order: null,
-            paymentStatus: 'PAID',
+            order: {
+              uuid: 'order-uuid-1',
+              display: 'Medical Certificate',
+              links: [],
+              type: 'testorder',
+            },
+            paymentStatus: 'PENDING',
             price: 500,
             priceName: 'Default',
             priceUuid: '',
@@ -82,14 +120,21 @@ describe('Payment', () => {
             uuid: '314c25fd-2c90-4a7f-9f98-c99cd3f153e8',
             voidReason: null,
             voided: false,
+            itemOrServiceConceptUuid: 'concept-uuid-1',
+            serviceTypeUuid: 'servicetype-uuid-1',
           },
           {
             billableService: '04be5832-5440-44d0-83d2-5c0dfd0ac7de',
             display: 'BillLineItem',
             item: '04be5832-5440-44d0-83d2-5c0dfd0ac7de',
             lineItemOrder: 1,
-            order: null,
-            paymentStatus: 'PAID',
+            order: {
+              uuid: 'order-uuid-1',
+              display: 'Registration New',
+              links: [],
+              type: 'testorder',
+            },
+            paymentStatus: 'PENDING',
             price: 100,
             priceName: 'Default',
             priceUuid: '',
@@ -98,14 +143,21 @@ describe('Payment', () => {
             uuid: '60365e7e-d29e-4f13-b64b-9aecb5d36031',
             voidReason: null,
             voided: false,
+            itemOrServiceConceptUuid: 'concept-uuid-1',
+            serviceTypeUuid: 'servicetype-uuid-1',
           },
           {
             billableService: '3f5d0684-a280-477e-a67b-2a956a1f6dca',
             display: 'BillLineItem',
             item: '3f5d0684-a280-477e-a67b-2a956a1f6dca',
             lineItemOrder: 2,
-            order: null,
-            paymentStatus: 'PAID',
+            order: {
+              uuid: 'order-uuid-1',
+              display: 'Registration Revist',
+              links: [],
+              type: 'testorder',
+            },
+            paymentStatus: 'PENDING',
             price: 50,
             priceName: 'Default',
             priceUuid: '',
@@ -114,6 +166,8 @@ describe('Payment', () => {
             uuid: '006ee634-f1cf-4552-b751-f721679527af',
             voidReason: null,
             voided: false,
+            itemOrServiceConceptUuid: 'concept-uuid-1',
+            serviceTypeUuid: 'servicetype-uuid-1',
           },
           {
             billableService: 'Hemoglobin',
@@ -153,12 +207,12 @@ describe('Payment', () => {
   test('should automatically focus on the payment method field when user clicks add payment options', async () => {
     const user = userEvent.setup();
     mockUsePaymentModes.mockReturnValue({
-      paymentModes: mockPaymentModes,
+      paymentModes: updatedMockPaymentModes,
       isLoading: false,
       error: null,
       mutate: jest.fn(),
     });
-    render(<Payments bill={mockBill as any} selectedLineItems={mockLineItems} />);
+    render(<Payments bill={mockBill as any} selectedLineItems={updatedMockLineItems} />);
     const addPaymentMethod = screen.getByRole('button', { name: /Add payment option/i });
     await user.click(addPaymentMethod);
 

package/src/prompt-payment/prompt-payment.modal.test.tsx

@@ -78,6 +78,10 @@ const mockMappedBill = [
     display: 'Bill #BILL-001',
     referenceCodes: 'REF-001',
     adjustmentReason: undefined,
+    balance: 50.0,
+    totalPayments: 50.0,
+    totalDeposits: 50.0,
+    totalExempted: 50.0,
   },
 ];
 

package/src/prompt-payment/prompt-payment.resource.tsx

@@ -49,12 +49,7 @@ export const checkPaymentMethodExclusion = (currentVisit: Visit | null, excluded
 };
 
 const calculateBillBalance = (bills: Array<MappedBill>): number => {
-  const flattenBills = bills.flatMap((bill) => bill.lineItems.filter((item) => item.paymentStatus !== 'EXEMPTED'));
-
-  const totalBill = flattenBills.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
-  const totalPayments = bills.flatMap((bill) => bill.payments).reduce((acc, curr) => acc + curr.amountTendered, 0);
-
-  return totalBill - totalPayments;
+  return bills.reduce((acc, curr) => acc + curr.balance, 0);
 };
 
 /**

package/src/types/index.ts

@@ -22,6 +22,10 @@ export interface MappedBill {
   display?: string;
   referenceCodes?: string;
   adjustmentReason?: string;
+  totalPayments?: number;
+  totalDeposits?: number;
+  totalExempted?: number;
+  balance?: number;
 }
 
 interface LocationLink {
@@ -137,6 +141,10 @@ export interface PatientInvoice {
   adjustmentReason: any;
   id: number;
   resourceVersion: string;
+  totalPayments?: number;
+  totalDeposits?: number;
+  totalExempted?: number;
+  balance?: number;
 }
 
 export interface PatientDetails {
@@ -547,10 +555,12 @@ export type FacilityClaim = {
   status: 'REJECTED' | 'ENTERED' | 'CHECKED' | 'VALUATED' | 'ERRORED';
   provider: {
     display: string;
+    person?: { display?: string };
   } | null;
-  patient?: { display: string };
+  patient?: { display: string; uuid?: string };
   externalId: string;
   responseUUID: string;
+  insurer?: string;
 };
 export type BillingPromptType = 'patient-chart' | 'billing-orders';
 

package/translations/en.json

@@ -24,6 +24,7 @@
   "attributeRequired": "Attribute required",
   "attributeRetired": "Attribute retired",
   "attributeRetiredReason": "Attribute retired reason",
+  "balance": "Balance",
   "benefits": "Benefits",
   "billableExemptionAdministration": "Exemption Administration",
   "billableServicesError": "Billable services error",
@@ -53,6 +54,7 @@
   "cancelItem": "Cancel item",
   "cancelled": "Cancelled",
   "cashier": "Cashier",
+  "cashPoint": "Cash Point",
   "cashPointName": "Cash Point Name",
   "chargeItem": "Charge items table",
   "chargeItems": "Charge Items",
@@ -81,6 +83,7 @@
   "createNewDeposit": "Create a new deposit for this patient",
   "creating": "Creating",
   "date": "Date of Claim",
+  "dateAndTime": "Date And Time",
   "dateCreated": "Date Created",
   "delete": "Delete",
   "deleteBill": "Delete Bill",
@@ -146,6 +149,9 @@
   "invalidJsonError": "Invalid JSON received for the schema.",
   "invoice": "Invoice",
   "invoiceError": "Invoice error",
+  "invoiceNumber": "Invoice Number",
+  "invoiceStatus": "Invoice Status",
+  "invoiceSummary": "Invoice Summary",
   "isPatientExemptedLegend": "Is patient exempted from payment?",
   "item": "Item",
   "items": "Items",
@@ -289,6 +295,9 @@
   "timesheet": "Timesheet",
   "total": "Total",
   "totalAmount": "Total Amount",
+  "totalDeposits": "Total Deposits",
+  "totalExempted": "Total Exempted",
+  "totalPayments": "Total Payments",
   "totalTendered": "Total Tendered",
   "transactionHistory": "Transaction History",
   "transactionList": "Transaction List",