@kenyaemr/esm-billing-app 5.4.2-pre.2841 → 5.4.2-pre.2850

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},{"component":"billingAdmin","route":"billing-admin"}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slots":["homepage-dashboard-slot"],"meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","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","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":"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":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["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"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"},{"name":"payments-points-dashboard-link","component":"paymentPointDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"cashier-points","title":"Payment Point","slot":"payment-point-dashboard-slot"}},{"name":"payment-points-dashboard","component":"paymentPoints","slot":"payment-point-dashboard-slot"},{"name":"payment-mode-dashboard-link","component":"paymentModeLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-modes","title":"Payment Mode","slot":"payment-mode-dashboard-slot"}},{"name":"payment-mode-dashboard","component":"paymentModeDashboard","slot":"payment-mode-dashboard-slot"},{"name":"bill-deposit-dashboard-link","component":"billDepositDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"bill-deposit","title":"Bill Deposit","slot":"billing-deposit-dashboard-slot"}},{"name":"bill-deposit-dashboard","component":"billDepositDashboard","slot":"billing-deposit-dashboard-slot"},{"name":"billable-exemptions-dashboard-link","component":"billableExemptionsLink","slot":"billing-admin-dashboard-slot","meta":{"name":"billable-exemptions","title":"Billable Exemptions","slot":"billing-exemptions-dashboard-slot"}},{"name":"billable-exemptions-dashboard","component":"billableExemptions","slot":"billing-exemptions-dashboard-slot"},{"name":"clinical-charges-dashboard-link","component":"clinicalChargesLink","slot":"billing-admin-dashboard-slot","meta":{"name":"clinical-charges","title":"Clinical Charges","slot":"clinical-charges-dashboard-slot"}},{"name":"clinical-charges-dashboard","component":"clinicalCharges","slot":"clinical-charges-dashboard-slot"},{"name":"payment-history-dashboard-link","component":"paymentHistoryLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-history","title":"Payment History","slot":"payment-history-dashboard-slot"}},{"name":"payment-history-dashboard","component":"paymentHistoryDashboard","slot":"payment-history-dashboard-slot"},{"name":"patient-billing-dashboard-link","component":"patientBillingLink","slot":"billing-admin-dashboard-slot","meta":{"name":"patient-billing","title":"Patient Billing","slot":"patient-billing-dashboard-slot"}},{"name":"patient-billing-dashboard","component":"patientBilling","slot":"patient-billing-dashboard-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":"commodityForm","title":"Charge Commodity 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"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","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":"claim-summary-modal","component":"claimSummaryModal"},{"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"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2841"}
+{"$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},{"component":"billingAdmin","route":"billing-admin"}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slots":["homepage-dashboard-slot"],"meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","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","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":"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":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["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"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"},{"name":"payments-points-dashboard-link","component":"paymentPointDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"cashier-points","title":"Payment Point","slot":"payment-point-dashboard-slot"}},{"name":"payment-points-dashboard","component":"paymentPoints","slot":"payment-point-dashboard-slot"},{"name":"payment-mode-dashboard-link","component":"paymentModeLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-modes","title":"Payment Mode","slot":"payment-mode-dashboard-slot"}},{"name":"payment-mode-dashboard","component":"paymentModeDashboard","slot":"payment-mode-dashboard-slot"},{"name":"bill-deposit-dashboard-link","component":"billDepositDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"bill-deposit","title":"Bill Deposit","slot":"billing-deposit-dashboard-slot"}},{"name":"bill-deposit-dashboard","component":"billDepositDashboard","slot":"billing-deposit-dashboard-slot"},{"name":"billable-exemptions-dashboard-link","component":"billableExemptionsLink","slot":"billing-admin-dashboard-slot","meta":{"name":"billable-exemptions","title":"Billable Exemptions","slot":"billing-exemptions-dashboard-slot"}},{"name":"billable-exemptions-dashboard","component":"billableExemptions","slot":"billing-exemptions-dashboard-slot"},{"name":"clinical-charges-dashboard-link","component":"clinicalChargesLink","slot":"billing-admin-dashboard-slot","meta":{"name":"clinical-charges","title":"Clinical Charges","slot":"clinical-charges-dashboard-slot"}},{"name":"clinical-charges-dashboard","component":"clinicalCharges","slot":"clinical-charges-dashboard-slot"},{"name":"payment-history-dashboard-link","component":"paymentHistoryLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-history","title":"Payment History","slot":"payment-history-dashboard-slot"}},{"name":"payment-history-dashboard","component":"paymentHistoryDashboard","slot":"payment-history-dashboard-slot"},{"name":"patient-billing-dashboard-link","component":"patientBillingLink","slot":"billing-admin-dashboard-slot","meta":{"name":"patient-billing","title":"Patient Billing","slot":"patient-billing-dashboard-slot"}},{"name":"patient-billing-dashboard","component":"patientBilling","slot":"patient-billing-dashboard-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":"commodityForm","title":"Charge Commodity 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"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","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":"claim-summary-modal","component":"claimSummaryModal"},{"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"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2850"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2841",
+  "version": "5.4.2-pre.2850",
   "description": "Billing app for KenyaEMR",
   "keywords": [
     "openmrs"

package/src/claims/claims-management/table/claim-summary-modal/claim-summary.modal.tsx

@@ -1,13 +1,38 @@
-import { Button, ModalBody, ModalFooter, ModalHeader, Tag } from '@carbon/react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from '@carbon/react';
 import { formatDate, parseDate } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FacilityClaim } from '../../../../types';
 import { useFacilityClaims } from '../use-facility-claims';
-import { statusColors } from '../../../utils';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
 import styles from './claim-summary.scss';
 import upperCase from 'lodash-es/upperCase';
+import Capitalize from 'lodash-es/capitalize';
+import { useCurrencyFormatting } from '../../../../helpers/currency';
+
+type ProvidedItem = {
+  uuid: string;
+  originUuid: string;
+  price: number;
+  dateOfServed: string | null;
+  status: string;
+  numberOfConsumptions: number;
+  item: {
+    uuid: string;
+    display: string;
+  };
+};
 
 type ExtendedClaim = FacilityClaim & {
   id: string;
@@ -25,18 +50,43 @@ type ExtendedClaim = FacilityClaim & {
       birthdate: string;
     };
   };
+  visit?: {
+    uuid: string;
+    display: string;
+    startDatetime: string;
+    stopDatetime: string;
+    encounters: Array<{
+      diagnoses: Array<{
+        uuid: string;
+        diagnosis: {
+          coded?: {
+            display: string;
+            name?: {
+              display: string;
+            };
+          };
+          display?: string;
+        };
+      }>;
+    }>;
+  };
+  bill: {
+    uuid: string;
+    providedItems?: Array<ProvidedItem>;
+  };
 };
 
 export const ClaimSummaryModal = ({ closeModal, claimId }: { closeModal: () => void; claimId: string }) => {
   const { t } = useTranslation();
   const { claims } = useFacilityClaims();
+  const { format: formatCurrency } = useCurrencyFormatting();
 
   const claim = claims.find((claim) => claim.id === claimId) as ExtendedClaim | undefined;
 
   if (!claim) {
     return (
       <React.Fragment>
-        <ModalHeader closeModal={closeModal}>{t('claimSummary', 'Claim Summary')}</ModalHeader>
+        <ModalHeader closeModal={closeModal}>{t('claimInvoice', 'Claim Invoice')}</ModalHeader>
         <ModalBody>
           <p>{t('claimNotFound', 'Claim not found')}</p>
         </ModalBody>
@@ -49,96 +99,177 @@ export const ClaimSummaryModal = ({ closeModal, claimId }: { closeModal: () => v
     );
   }
 
+  const diagnoses =
+    claim.visit?.encounters?.flatMap((encounter) => {
+      if (!encounter.diagnoses || encounter.diagnoses.length === 0) {
+        return [];
+      }
+
+      return encounter.diagnoses
+        .map((d) => {
+          let displayName = '';
+
+          if (d.diagnosis?.coded?.display) {
+            displayName = d.diagnosis.coded.display;
+          } else if (d.diagnosis?.coded?.name?.display) {
+            displayName = d.diagnosis.coded.name.display;
+          } else if (d.diagnosis?.display) {
+            displayName = d.diagnosis.display;
+          } else if (typeof d.diagnosis === 'string') {
+            displayName = d.diagnosis;
+          }
+
+          return {
+            uuid: d.uuid,
+            display: displayName,
+          };
+        })
+        .filter((d) => d.display);
+    }) || [];
+
+  const lineItemsHeaders = [
+    { key: 'item', header: t('item', 'Item') },
+    { key: 'quantity', header: t('quantity', 'Quantity') },
+    { key: 'unitPrice', header: t('unitPrice', 'Unit Price') },
+    { key: 'total', header: t('total', 'Total') },
+  ];
+
+  const providedItems = claim.bill?.providedItems || [];
+
+  const lineItemsRows =
+    providedItems.length > 0
+      ? providedItems.map((item, index) => ({
+          id: `${index}`,
+          item: item.item?.display || '-',
+          quantity: item.numberOfConsumptions || 1,
+          unitPrice: formatCurrency(item.price || 0),
+          total: formatCurrency((item.price || 0) * (item.numberOfConsumptions || 1)),
+        }))
+      : [];
+
+  const calculatedTotal = providedItems.reduce((sum, item) => {
+    return sum + (item.price || 0) * (item.numberOfConsumptions || 1);
+  }, 0);
+
+  const displayTotal = calculatedTotal > 0 ? calculatedTotal : claim.claimedTotal || 0;
+
   return (
     <React.Fragment>
-      <ModalHeader closeModal={closeModal}>{t('claimSummary', 'Claim Summary')}</ModalHeader>
       <ModalBody>
-        <div className={styles.container}>
-          <CardHeader title={t('patientInformation', 'Patient Information')}>
-            <div />
-          </CardHeader>
-          <div className={styles.section}>
-            <div className={styles.grid}>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('patientName', 'Patient Name')}</span>
-                <span className={styles.value}>{upperCase(claim.patient?.person?.display) || '-'}</span>
-              </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('gender', 'Gender')}</span>
-                <span className={styles.value}>{claim.patient?.person?.gender || '-'}</span>
-              </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('age', 'Age')}</span>
-                <span className={styles.value}>
-                  {claim.patient?.person?.age ? `${claim.patient.person.age} years` : '-'}
-                </span>
-              </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('birthdate', 'Birthdate')}</span>
-                <span className={styles.value}>
+        <div className={styles.invoiceContainer}>
+          <div className={styles.invoiceHeader}>
+            <div className={styles.invoiceTitle}>
+              <h3>{t('claimSummary', 'CLAIM SUMMARY')}</h3>
+            </div>
+            <div className={styles.claimNumber}>
+              <span className={styles.claimNumberLabel}>{t('claimNo', 'Claim No.')}</span>
+              <span className={styles.claimNumberValue}>{claim.claimCode || 'N/A'}</span>
+            </div>
+          </div>
+
+          <div className={styles.infoGrid}>
+            <div className={styles.infoBlock}>
+              <h4 className={styles.blockTitle}>{t('billTo', 'BILL TO')}</h4>
+              <div className={styles.infoContent}>
+                <p className={styles.primaryInfo}>
+                  {upperCase(claim.patient?.person?.display || claim.patientName) || '-'}
+                </p>
+                <p className={styles.secondaryInfo}>
+                  {claim.patient?.person?.gender} • {claim.patient?.person?.age} years
+                </p>
+                <p className={styles.secondaryInfo}>
+                  {t('dob', 'DOB')}:{' '}
                   {claim.patient?.person?.birthdate
                     ? formatDate(parseDate(claim.patient.person.birthdate), { time: false, noToday: true })
                     : '-'}
-                </span>
+                </p>
+              </div>
+            </div>
+
+            <div className={styles.infoBlock}>
+              <h4 className={styles.blockTitle}>{t('provider', 'PROVIDER')}</h4>
+              <div className={styles.infoContent}>
+                <p className={styles.primaryInfo}>{claim.providerName || '-'}</p>
               </div>
             </div>
           </div>
 
-          <CardHeader title={t('claimInformation', 'Claim Information')}>
-            <div />
-          </CardHeader>
-          <div className={styles.section}>
-            <div className={styles.grid}>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('claimNumber', 'Claim Number')}</span>
-                <span className={styles.value}>{t('CO-01878', 'CO-01878')}</span>
+          <div className={styles.visitSection}>
+            <h4 className={styles.sectionTitle}>{t('visitInformation', 'VISIT INFORMATION')}</h4>
+            <div className={styles.visitGrid}>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('visitType', 'Visit Type')}</span>
+                <div className={styles.visitValueContainer}>
+                  <span className={styles.visitValue}>{claim.visitType?.display || claim.use || '-'}</span>
+                </div>
               </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('dateFrom', 'Date From')}</span>
-                <span className={styles.value}>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('dateFrom', 'Service From')}</span>
+                <span className={styles.visitValue}>
                   {claim.dateFrom ? formatDate(parseDate(claim.dateFrom), { time: false, noToday: true }) : '-'}
                 </span>
               </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('dateTo', 'Date To')}</span>
-                <span className={styles.value}>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('dateTo', 'Service To')}</span>
+                <span className={styles.visitValue}>
                   {claim.dateTo ? formatDate(parseDate(claim.dateTo), { time: false, noToday: true }) : '-'}
                 </span>
               </div>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('visitType', 'Visit Type')}</span>
-                <span className={styles.value}>{claim.visitType?.display || claim.use || '-'}</span>
-              </div>
             </div>
           </div>
 
-          <CardHeader title={t('providerInformation', 'Provider Information')}>
-            <div />
-          </CardHeader>
-          <div className={styles.section}>
-            <div className={styles.grid}>
-              <div className={styles.field}>
-                <span className={styles.label}>{t('providerName', 'Provider Name')}</span>
-                <span className={styles.value}>{claim.providerName || '-'}</span>
-              </div>
+          {diagnoses.length > 0 && (
+            <div className={styles.diagnosesSection}>
+              <h4 className={styles.sectionTitle}>{t('diagnoses', 'DIAGNOSES')}</h4>
+              <ul className={styles.diagnosesList}>
+                {diagnoses.map((diagnosis) => (
+                  <li key={diagnosis.uuid} className={styles.diagnosisItem}>
+                    {Capitalize(diagnosis.display)}
+                  </li>
+                ))}
+              </ul>
             </div>
+          )}
+
+          <div className={styles.lineItemsSection}>
+            <h4 className={styles.sectionTitle}>{t('servicesProvided', 'SERVICES PROVIDED')}</h4>
+            {providedItems.length === 0 ? (
+              <p className={styles.noItems}>{t('noLineItems', 'No line items available')}</p>
+            ) : lineItemsRows.length > 0 ? (
+              <DataTable rows={lineItemsRows} headers={lineItemsHeaders}>
+                {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                  <Table {...getTableProps()} size="md" useZebraStyles={false}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow {...getRowProps({ row })} key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </DataTable>
+            ) : (
+              <p className={styles.noItems}>{t('noLineItems', 'No line items available')}</p>
+            )}
           </div>
 
-          <CardHeader title={t('financialSummary', 'Financial Summary')}>
-            <div />
-          </CardHeader>
-          <div className={styles.section}>
-            <div className={styles.totalContainer}>
-              <span className={styles.totalLabel}>{t('claimedAmount', 'Claimed Amount')}</span>
-              <span className={styles.totalValue}>
-                {claim.claimedTotal ? `KES ${claim.claimedTotal.toLocaleString()}` : 'KES 0'}
-              </span>
-            </div>
-            <div className={styles.totalContainer}>
-              <span className={styles.totalLabel}>{t('approvedAmount', 'Approved Amount')}</span>
-              <span className={styles.totalValue}>
-                {claim.approvedTotal ? `KES ${claim.approvedTotal.toLocaleString()}` : 'KES 0'}
-              </span>
+          <div className={styles.financialSummary}>
+            <h4 className={styles.sectionTitle}>{t('total', 'TOTAL')}</h4>
+            <div className={styles.summaryRow}>
+              <span className={styles.summaryLabel}>{t('claimedAmount', 'Claimed Amount')}</span>
+              <span className={styles.summaryValue}>{formatCurrency(displayTotal)}</span>
             </div>
           </div>
         </div>

package/src/claims/claims-management/table/claim-summary-modal/claim-summary.scss

@@ -1,54 +1,252 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/colors';
-.container {
+
+.invoiceContainer {
   padding: layout.$spacing-05;
+  background-color: colors.$white;
+  max-width: 1000px;
+  margin: 0 auto;
 }
 
-.section {
-  margin-top: layout.$spacing-06;
-  background-color: colors.$white;
-  padding: layout.$spacing-05;
+.invoiceHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 2px solid colors.$gray-20;
   margin-bottom: layout.$spacing-06;
 }
 
-.grid {
+.invoiceTitle {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+
+  h3 {
+    @include type.type-style('heading-03');
+    font-weight: 600;
+    color: colors.$gray-100;
+    margin: 0;
+    letter-spacing: 0.5px;
+  }
+}
+
+.claimNumber {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: layout.$spacing-02;
+}
+
+.claimNumberLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.claimNumberValue {
+  @include type.type-style('heading-compact-02');
+  color: colors.$blue-60;
+  font-weight: 600;
+}
+
+.infoGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+  gap: layout.$spacing-06;
+  margin-bottom: layout.$spacing-06;
+}
+
+.infoBlock {
+  padding: layout.$spacing-04;
+  border-radius: 4px;
+}
+
+.blockTitle {
+  @include type.type-style('label-02');
+  color: colors.$gray-100;
+  text-transform: uppercase;
+  margin: 0 0 layout.$spacing-04 0;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.infoContent {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.primaryInfo {
+  @include type.type-style('body-short-02');
+  font-weight: 600;
+  color: colors.$gray-70;
+  margin: 0;
+  padding-bottom: layout.$spacing-02;
+}
+
+.secondaryInfo {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+  margin: 0;
+  padding-bottom: layout.$spacing-02;
+}
+
+.visitSection {
+  margin-bottom: layout.$spacing-06;
+}
+
+.sectionTitle {
+  @include type.type-style('label-02');
+  font-weight: 600;
+  color: colors.$gray-70;
+  text-transform: uppercase;
+  margin: 0 0 layout.$spacing-04 0;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+  letter-spacing: 0.5px;
+}
+
+.visitGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   gap: layout.$spacing-05;
-  margin-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-04;
 }
 
-.field {
+.visitField {
   display: flex;
   flex-direction: column;
   gap: layout.$spacing-02;
 }
 
-.label {
+.visitLabel {
   @include type.type-style('label-01');
+  color: colors.$gray-70;
   font-weight: 600;
-  text-transform: uppercase;
 }
 
-.value {
+.visitValue {
   @include type.type-style('body-short-01');
+  color: colors.$gray-100;
+}
+
+.diagnosesSection {
+  margin-bottom: layout.$spacing-06;
+}
+
+.diagnosesList {
+  list-style: none;
+  padding: 0;
+  margin: layout.$spacing-04 0 0 0;
 }
 
-.totalContainer {
+.diagnosisItem {
+  @include type.type-style('body-short-01');
+  padding: layout.$spacing-03;
+  margin-bottom: layout.$spacing-02;
+  color: colors.$gray-100;
+}
+
+.lineItemsSection {
+  margin-bottom: layout.$spacing-06;
+
+  :global(.cds--data-table) {
+    margin-top: layout.$spacing-04;
+  }
+
+  :global(.cds--table-header-label) {
+    @include type.type-style('label-01');
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  :global(.cds--data-table td) {
+    @include type.type-style('body-short-01');
+  }
+}
+
+.noItems {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+  font-style: italic;
+  margin-top: layout.$spacing-04;
+  text-align: center;
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+  border-radius: 4px;
+}
+
+.financialSummary {
+  margin-top: layout.$spacing-06;
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+  border-radius: 4px;
+  border: 1px solid colors.$gray-20;
+}
+
+.summaryRow {
   display: flex;
   justify-content: space-between;
-  padding: layout.$spacing-05;
-  border-radius: layout.$spacing-02;
+  align-items: center;
+  padding: layout.$spacing-03 0;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.summaryLabel {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+}
+
+.summaryValue {
+  @include type.type-style('body-short-01');
+  font-weight: 600;
+  color: colors.$gray-100;
+}
+
+.totalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: layout.$spacing-04;
   margin-top: layout.$spacing-03;
+  border-top: 2px solid colors.$gray-70;
 }
 
 .totalLabel {
-  @include type.type-style('body-short-01');
+  @include type.type-style('heading-compact-01');
   font-weight: 600;
+  color: colors.$gray-100;
+  text-transform: uppercase;
 }
 
 .totalValue {
-  @include type.type-style('heading-compact-01');
+  @include type.type-style('heading-03');
+  font-weight: 700;
+  color: colors.$blue-60;
+}
+
+.billReference {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-03;
+  background-color: colors.$blue-10;
+  border-radius: 4px;
+  border-left: 3px solid colors.$blue-60;
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.referenceLabel {
+  @include type.type-style('label-01');
+  font-weight: 600;
+  color: colors.$gray-70;
+}
+
+.referenceValue {
+  @include type.type-style('code-01');
+  color: colors.$blue-60;
   font-weight: 600;
 }