@openmrs/esm-billing-app 1.0.1-pre.14

package/src/invoice/printable-invoice/printable-invoice-header.component.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type PatientDetails } from '../../types';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useDefaultFacility } from '../../billing.resource';
+import styles from './printable-invoice-header.scss';
+
+interface PrintableInvoiceHeaderProps {
+  patientDetails: PatientDetails;
+}
+
+const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails }) => {
+  const { t } = useTranslation();
+  const { logo } = useConfig();
+  const { data } = useDefaultFacility();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.printableHeader}>
+        <p className={styles.heading}>{t('invoice', 'Invoice')}</p>
+        {logo?.src ? (
+          <img className={styles.img} src={logo.src} alt={logo.alt} />
+        ) : logo?.name ? (
+          logo.name
+        ) : (
+          // OpenMRS Logo
+          <svg
+            className={styles.img}
+            role="img"
+            width={110}
+            height={40}
+            viewBox="0 0 380 119"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M40.29 40.328a27.755 27.755 0 0 1 19.688-8.154c7.669 0 14.613 3.102 19.647 8.116l.02-18.54A42.835 42.835 0 0 0 59.978 17c-7.089 0-13.813 1.93-19.709 4.968l.021 18.36ZM79.645 79.671a27.744 27.744 0 0 1-19.684 8.154c-7.67 0-14.614-3.101-19.651-8.116l-.02 18.54A42.857 42.857 0 0 0 59.96 103a42.833 42.833 0 0 0 19.672-4.751l.013-18.578ZM40.328 79.696c-5.038-5.037-8.154-11.995-8.154-19.685 0-7.669 3.102-14.612 8.116-19.65l-18.54-.02A42.85 42.85 0 0 0 17 60.012a42.819 42.819 0 0 0 4.752 19.672l18.576.013ZM79.634 40.289a27.753 27.753 0 0 1 8.154 19.688 27.744 27.744 0 0 1-8.117 19.646l18.542.02a42.842 42.842 0 0 0 4.749-19.666c0-7.09-1.714-13.779-4.751-19.675l-18.577-.013ZM156.184 60.002c0-8.748-6.118-15.776-15.025-15.776-8.909 0-15.025 7.028-15.025 15.776 0 8.749 6.116 15.78 15.025 15.78 8.907 0 15.025-7.031 15.025-15.78Zm-34.881 0c0-11.482 8.318-19.958 19.856-19.958 11.536 0 19.855 8.477 19.855 19.959 0 11.484-8.319 19.964-19.855 19.964-11.538 0-19.856-8.48-19.856-19.965ZM179.514 75.54c5.507 0 9.05-4.14 9.05-9.482 0-5.341-3.543-9.483-9.05-9.483-5.505 0-9.046 4.142-9.046 9.483 0 5.342 3.541 9.482 9.046 9.482ZM166.22 53.306h4.248v3.704h.11c2.344-2.725 5.449-4.36 9.154-4.36 8.014 0 13.408 5.67 13.408 13.408 0 7.63-5.613 13.406-12.752 13.406-4.58 0-8.231-2.29-9.81-5.178h-.11V90.87h-4.248V53.306ZM217.773 63.768c-.163-4.305-3-7.193-7.686-7.193-4.685 0-7.79 2.888-8.335 7.193h16.021Zm3.653 10.412c-3.001 3.868-6.596 5.284-11.339 5.284-8.01 0-12.914-5.993-12.914-13.406 0-7.901 5.559-13.407 13.08-13.407 7.196 0 12.096 4.906 12.096 13.354v1.362h-20.597c.325 4.413 3.704 8.173 8.335 8.173 3.65 0 6.105-1.307 8.12-3.868l3.219 2.508ZM227.854 59.356c0-2.346-.216-4.36-.216-6.05h4.031c0 1.363.11 2.777.11 4.195h.11c1.144-2.505 4.306-4.85 8.5-4.85 6.705 0 9.699 4.252 9.699 10.41v15.748h-4.248v-15.31c0-4.253-1.856-6.924-5.833-6.924-5.503 0-7.903 3.979-7.903 9.811V78.81h-4.25V59.356ZM259.211 41.008h6.708L278.8 70.791h.107l12.982-29.782h6.549v37.99h-4.506V47.124h-.106L280.192 79h-2.738l-13.629-31.875h-.107V79h-4.507V41.01ZM312.392 57.752h4.023c4.992 0 11.487 0 11.487-6.282 0-5.47-4.776-6.276-9.177-6.276h-6.333v12.558Zm-4.506-16.744h9.711c7.352 0 15.132 1.072 15.132 10.462 0 5.527-3.594 9.125-9.495 10.037L334.018 79h-5.525l-10.304-17.063h-5.797V79h-4.506V41.01ZM358.123 47.712c-1.506-2.413-4.187-3.486-6.926-3.486-3.973 0-8.1 1.88-8.1 6.385 0 3.49 1.931 5.047 7.994 6.98 5.903 1.878 11.377 3.809 11.377 11.267 0 7.567-6.495 11.11-13.36 11.11-4.402 0-9.125-1.45-11.7-5.262l3.862-3.165c1.61 2.794 4.83 4.24 8.105 4.24 3.862 0 8.263-2.253 8.263-6.601 0-4.669-3.165-5.474-9.928-7.728-5.366-1.771-9.442-4.134-9.442-10.463 0-7.298 6.277-10.945 12.929-10.945 4.241 0 7.836 1.178 10.625 4.45l-3.699 3.218Z"
+            />
+          </svg>
+        )}
+      </div>
+
+      <div className={styles.printableBody}>
+        <div className={styles.billDetails}>
+          <p className={styles.itemHeading}>{t('billedTo', 'Billed to')}</p>
+          <p className={styles.itemLabel}>{patientDetails?.name}</p>
+          <p className={styles.itemLabel}>{patientDetails?.county}</p>
+          <p className={styles.itemLabel}>
+            {patientDetails?.subCounty}
+            {patientDetails?.city ? `, ${patientDetails?.city}` : null}
+          </p>
+        </div>
+
+        <div className={styles.facilityDetails}>
+          <p className={styles.facilityName}>{data?.display}</p>
+          <p className={styles.itemLabel}>Kenya</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrintableInvoiceHeader;

package/src/invoice/printable-invoice/printable-invoice-header.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: 0 1rem 2rem;
+  border-bottom: 1px solid #ebedf2;
+  margin-bottom: 2rem;
+}
+
+.printableBody {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.printableHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.img {
+  display: flex;
+  margin-left: auto;
+}
+
+.billDetails {
+  display: flex;
+  width: 50%;
+  flex-direction: column;
+}
+
+.facilityDetails {
+  display: flex;
+  flex-flow: column wrap;
+  text-align: right;
+}
+
+.heading {
+  font-size: 40px;
+  text-transform: uppercase;
+  margin-bottom: layout.$spacing-05;
+}
+
+.facilityName {
+  @include type.type-style('heading-compact-02');
+  font-weight: bold;
+  color: colors.$green-70;
+}
+
+.itemHeading {
+  @include type.type-style('body-compact-02');
+  margin-bottom: 0.25rem;
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+
+.itemLabel {
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+}

package/src/invoice/printable-invoice/printable-invoice-header.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useDefaultFacility } from '../../billing.resource';
+import PrintableInvoiceHeader from './printable-invoice-header.component';
+
+const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
+const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
+
+jest.mock('../../billing.resource', () => ({
+  useDefaultFacility: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useConfig: jest.fn(),
+}));
+const testProps = {
+  patientDetails: {
+    name: 'John Doe',
+    county: 'Nairobi',
+    subCounty: 'Westlands',
+    city: 'Nairobi',
+    age: '45',
+    gender: 'Male',
+  },
+};
+
+describe('PrintableInvoiceHeader', () => {
+  test('should render PrintableInvoiceHeader component', () => {
+    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const header = screen.getByText('Invoice');
+    expect(header).toBeInTheDocument();
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Nairobi')).toBeInTheDocument();
+    expect(screen.getByText('Westlands, Nairobi')).toBeInTheDocument();
+    expect(screen.getByText('MTRH')).toBeInTheDocument();
+    expect(screen.getByText('Kenya')).toBeInTheDocument();
+  });
+
+  test('should display the logo when logo is provided', () => {
+    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const logo = screen.getByAltText('logo');
+    expect(logo).toBeInTheDocument();
+  });
+
+  test('should display the default logo when logo is not provided', () => {
+    mockUseConfig.mockReturnValue({ logo: {} });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const logo = screen.getByRole('img');
+    expect(logo).toBeInTheDocument();
+  });
+});

package/src/invoice/printable-invoice/printable-invoice.component.tsx

@@ -0,0 +1,146 @@
+import React, { useMemo } from 'react';
+import {
+  DataTable,
+  Table,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeader,
+  TableCell,
+  DataTableSkeleton,
+} from '@carbon/react';
+import { age, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { getGender } from '../../helpers';
+import { type MappedBill } from '../../types';
+import { useTranslation } from 'react-i18next';
+import PrintableFooter from './printable-footer.component';
+import PrintableInvoiceHeader from './printable-invoice-header.component';
+import styles from './printable-invoice.scss';
+
+type PrintableInvoiceProps = {
+  bill: MappedBill;
+  patient: fhir.Patient;
+  isLoading: boolean;
+};
+
+const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, isLoading }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const headerData = [
+    { header: 'Inventory item', key: 'billItem' },
+    { header: 'Quantity', key: 'quantity' },
+    { header: 'Unit price', key: 'price' },
+    { header: 'Total', key: 'total' },
+  ];
+
+  const rowData =
+    bill?.lineItems?.map((item) => {
+      return {
+        id: `${item.uuid}`,
+        billItem: item.item,
+        quantity: item.quantity,
+        price: item.price,
+        total: item.price * item.quantity,
+      };
+    }) ?? [];
+
+  const invoiceTotal = {
+    'Total Amount': bill?.totalAmount,
+    'Amount Tendered': bill?.tenderedAmount,
+    'Discount Amount': 0,
+    'Amount due': bill?.totalAmount - bill?.tenderedAmount,
+  };
+
+  const patientDetails = useMemo(() => {
+    return {
+      name: `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
+      age: age(patient?.birthDate),
+      gender: getGender(patient?.gender, t),
+      city: patient?.address?.[0].city,
+      county: patient?.address?.[0].district,
+      subCounty: patient?.address?.[0].state,
+    };
+  }, [patient, t]);
+
+  const invoiceDetails = {
+    'Invoice #': bill.receiptNumber,
+    'Invoice date': bill.dateCreated,
+    Status: bill.status,
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton
+          columnCount={headerData?.length ?? 0}
+          showHeader={false}
+          showToolbar={false}
+          size={responsiveSize}
+          zebra
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <PrintableInvoiceHeader patientDetails={patientDetails} />
+      <div className={styles.printableInvoiceContainer}>
+        <div className={styles.detailsContainer}>
+          {Object.entries(invoiceDetails).map(([key, val]) => (
+            <div key={key} className={styles.item}>
+              <p className={styles.itemHeading}>{key}</p>
+              <span>{val}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className={styles.itemsContainer}>
+          <div className={styles.tableContainer}>
+            <DataTable isSortable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles={false}>
+              {({ rows, headers, getRowProps, getTableProps }) => (
+                <TableContainer>
+                  <Table {...getTableProps()} aria-label="Invoice line items">
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader key={header.key}>{header.header}</TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow
+                          key={row.id}
+                          {...getRowProps({
+                            row,
+                          })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+          </div>
+
+          <div className={styles.totalContainer}>
+            {Object.entries(invoiceTotal).map(([key, val]) => (
+              <p key={key} className={styles.itemTotal}>
+                <span className={styles.itemHeading}>{key}</span>: <span className={styles.itemLabel}>{val}</span>
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+      <PrintableFooter />
+    </div>
+  );
+};
+
+export default PrintableInvoice;

package/src/invoice/printable-invoice/printable-invoice.scss

@@ -0,0 +1,50 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.printableInvoiceContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.itemsContainer {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-05;
+}
+
+.detailsContainer {
+  margin: layout.$spacing-05 0;
+  width: 20%;
+}
+
+.tableContainer {
+  min-height: 50vh;
+}
+
+.totalContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  margin: layout.$spacing-04;
+}
+
+.itemHeading {
+  @include type.type-style('body-compact-02');
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+  margin-bottom: layout.$spacing-02;
+}
+
+.itemTotal {
+  border-top: solid 0.1pt colors.$cool-gray-30;
+  padding: layout.$spacing-02;
+}
+
+.itemLabel {
+  float: right;
+}

package/src/left-panel-link.component.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import last from 'lodash-es/last';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+export function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'billing';
+  }
+
+  return (
+    <ConfigurableLink
+      to={spaBasePath + '/' + name}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );

package/src/left-panel-link.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { LinkExtension, createLeftPanelLink } from './left-panel-link.component';
+import userEvent from '@testing-library/user-event';
+
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+
+describe('LinkExtension Component', () => {
+  const renderWithRouter = (component, { route = '/' } = {}) => {
+    window.history.pushState({}, 'Test page', route);
+    return render(component, { wrapper: MemoryRouter });
+  };
+
+  test('renders correctly', () => {
+    const config = { name: 'billing', title: 'Billing' };
+    renderWithRouter(<LinkExtension config={config} />, {
+      route: '/billing/6eb8d678-514d-46ad-9554-51e48d96d567',
+    });
+
+    expect(screen.getByText('Billing')).toBeInTheDocument();
+  });
+});
+
+describe('createLeftPanelLink Function', () => {
+  const user = userEvent.setup();
+  test('returns a component that renders LinkExtension', () => {
+    const config = { name: 'billing', title: 'Billing' };
+    const TestComponent = createLeftPanelLink(config);
+
+    render(<TestComponent />);
+    expect(screen.getByText('Billing')).toBeInTheDocument();
+    const testLink = screen.getByRole('link', { name: 'Billing' });
+    user.click(testLink);
+    expect(window.location.pathname).toBe('/billing/6eb8d678-514d-46ad-9554-51e48d96d567');
+    // expect(testLink).toHaveClass('active-left-nav-link');
+  });
+});

package/src/metrics-cards/card.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './card.scss';
+
+export default function Card({ count, title }) {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>{title}</h1>
+      <span className={styles.count}>{count}</span>
+    </div>
+  );
+}

package/src/metrics-cards/card.scss

@@ -0,0 +1,20 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+  flex: 1;
+}
+
+.title {
+  @include type.type-style('heading-compact-02');
+}
+
+.count {
+  @include type.type-style('heading-05');
+  display: inline-block;
+  font-weight: 300;
+  margin-top: layout.$spacing-05;
+}

package/src/metrics-cards/metrics-cards.component.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useBills } from '../billing.resource';
+import { useBillMetrics } from './metrics.resource';
+import Card from './card.component';
+import styles from './metrics-cards.scss';
+
+export default function MetricsCards() {
+  const { t } = useTranslation();
+  const { bills, isLoading, error } = useBills('');
+  const { cumulativeBills, pendingBills, paidBills } = useBillMetrics(bills);
+
+  const cards = useMemo(
+    () => [
+      { title: 'Cumulative Bills', count: cumulativeBills },
+      { title: 'Pending Bills', count: pendingBills },
+      { title: 'Paid Bills', count: paidBills },
+    ],
+    [cumulativeBills, pendingBills, paidBills],
+  );
+
+  if (isLoading) {
+    return (
+      <section className={styles.container}>
+        <InlineLoading status="active" iconDescription="Loading" description="Loading bill metrics..." />
+      </section>
+    );
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('billMetrics', 'Bill metrics')} error={error} />;
+  }
+  return (
+    <section className={styles.container}>
+      {cards.map((card) => (
+        <Card key={card.title} title={card.title} count={card.count} />
+      ))}
+    </section>
+  );
+}

package/src/metrics-cards/metrics-cards.scss

@@ -0,0 +1,12 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  display: flex;
+  margin: layout.$spacing-05;
+  justify-content: space-between;
+  column-gap: layout.$spacing-09;
+  row-gap: layout.$spacing-05;
+  flex-flow: row wrap;
+}

package/src/metrics-cards/metrics-cards.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { billsSummary } from '../../__mocks__/bills.mock';
+import { useBills } from '../billing.resource';
+import MetricsCards from './metrics-cards.component';
+
+const mockUseBills = useBills as jest.Mock;
+
+jest.mock('../billing.resource', () => ({
+  useBills: jest.fn(),
+}));
+
+describe('MetricsCards', () => {
+  test('renders loading state', () => {
+    mockUseBills.mockReturnValue({ isLoading: true, bills: [], error: null });
+    renderMetricsCards();
+    expect(screen.getByText(/Loading bill metrics.../i)).toBeInTheDocument();
+  });
+
+  test('renders error state', () => {
+    mockUseBills.mockReturnValue({ isLoading: false, bills: [], error: new Error('Internal server error') });
+    renderMetricsCards();
+    expect(
+      screen.getByText(
+        /Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test('renders metrics cards', () => {
+    mockUseBills.mockReturnValue({ isLoading: false, bills: billsSummary, error: null });
+    renderMetricsCards();
+    expect(screen.getByRole('heading', { name: /cumulative bills/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /pending bills/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /paid bills/i })).toBeInTheDocument();
+  });
+});
+
+function renderMetricsCards() {
+  render(<MetricsCards />);
+}

package/src/metrics-cards/metrics.resource.ts

@@ -0,0 +1,45 @@
+import { calculateTotalAmount, convertToCurrency } from '../helpers';
+import { type MappedBill } from '../types';
+
+/**
+ * A custom hook for calculating bill metrics.
+ *
+ * This hook takes in an array of bills and calculates the total amount for different
+ * bill statuses (cumulative, pending, paid) using provided helper functions.
+ *
+ * @param {Array<Object>} bills - An array of bill objects. Each bill object should have a `status` and `lineItems` properties.
+ *
+ * @returns {{
+ *   cumulativeBills: string,
+ *   pendingBills: string,
+ *   paidBills: string
+ * }}
+ */
+
+export const useBillMetrics = (bills: Array<MappedBill>) => {
+  const { paidTotal, pendingTotal, cumulativeTotal } = calculateBillTotals(bills);
+  return {
+    cumulativeBills: convertToCurrency(cumulativeTotal),
+    pendingBills: convertToCurrency(pendingTotal),
+    paidBills: convertToCurrency(paidTotal),
+  };
+};
+
+const calculateBillTotals = (bills: Array<MappedBill>) => {
+  let paidTotal = 0;
+  let pendingTotal = 0;
+  let cumulativeTotal = 0;
+
+  bills.forEach((bill) => {
+    if (bill.status === 'PAID') {
+      paidTotal += bill.totalAmount;
+    } else if (bill.status === 'PENDING') {
+      pendingTotal += bill.totalAmount;
+    }
+    cumulativeTotal += bill.totalAmount; // Add to cumulative total regardless of status
+  });
+
+  return { paidTotal, pendingTotal, cumulativeTotal };
+};
+
+export default calculateBillTotals;