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

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,14 @@
+import React from 'react';
+import styles from './card.scss';
+import { useConfig } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../helpers';
+
+export default function Card({ count, title }) {
+  const { defaultCurrency } = useConfig();
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>{title}</h1>
+      <span className={styles.count}>{convertToCurrency(count, defaultCurrency)}</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,44 @@
+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';
+import { useConfig } from '@openmrs/esm-framework';
+
+const mockUseBills = useBills as jest.Mock;
+const mockUseConfig = useConfig 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 });
+    mockUseConfig.mockImplementation(() => ({ defaultCurrency: 'USD' }));
+    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: cumulativeTotal,
+    pendingBills: pendingTotal,
+    paidBills: 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;

package/src/modal/require-payment-modal.component.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { useBills } from '../billing.resource';
+import { convertToCurrency } from '../helpers';
+import styles from './require-payment.scss';
+import { useConfig } from '@openmrs/esm-framework';
+
+type RequirePaymentModalProps = {
+  closeModal: () => void;
+  patientUuid: string;
+};
+
+const RequirePaymentModal: React.FC<RequirePaymentModalProps> = ({ closeModal, patientUuid }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
+  const { bills, isLoading, error } = useBills(patientUuid);
+  const lineItems = bills.filter((bill) => bill?.status !== 'PAID').flatMap((bill) => bill?.lineItems);
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('patientBillingAlert', 'Patient Billing Alert')} />
+      <ModalBody>
+        <p className={styles.bodyShort02}>
+          {t(
+            'billPaymentRequiredMessage',
+            'The current patient has pending bill. Advice patient to settle bill before receiving services',
+          )}
+        </p>
+        {isLoading && (
+          <InlineLoading
+            status="active"
+            iconDescription="Loading"
+            description={t('inlineLoading', 'Loading bill items...')}
+          />
+        )}
+        <StructuredListWrapper isCondensed>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head>{t('item', 'Item')}</StructuredListCell>
+              <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
+              <StructuredListCell head>{t('unitPrice', 'Unit price')}</StructuredListCell>
+              <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            {lineItems.map((lineItem) => {
+              return (
+                <StructuredListRow>
+                  <StructuredListCell>{lineItem.billableService || lineItem.item}</StructuredListCell>
+                  <StructuredListCell>{lineItem.quantity}</StructuredListCell>
+                  <StructuredListCell>{convertToCurrency(lineItem.price, defaultCurrency)}</StructuredListCell>
+                  <StructuredListCell>
+                    {convertToCurrency(lineItem.quantity * lineItem.price, defaultCurrency)}
+                  </StructuredListCell>
+                </StructuredListRow>
+              );
+            })}
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={closeModal}>
+          {t('ok', 'OK')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default RequirePaymentModal;

package/src/modal/require-payment.scss

@@ -0,0 +1,6 @@
+@use '@carbon/type';
+
+.bodyShort02 {
+  margin-bottom: 0.5rem;
+  @include type.type-style('body-compact-02');
+}

package/src/root.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
+import Invoice from './invoice/invoice.component';
+
+const RootComponent: React.FC = () => {
+  const baseName = window.getOpenmrsSpaBase() + 'home/billing';
+
+  return (
+    <BrowserRouter basename={baseName}>
+      <Routes>
+        <Route path="/" element={<BillingDashboard />} />
+        <Route path="/patient/:patientUuid/:billUuid" element={<Invoice />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default RootComponent;

package/src/root.scss

@@ -0,0 +1,30 @@
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.caption01 {
+  @include type.type-style('legal-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.text01 {
+  color: $ui-05;
+}

package/src/routes.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": ">=2.24.0",
+    "fhir2": "^1.2.0"
+  },
+  "pages": [
+    {
+      "component": "billableServicesHome",
+      "route":"billable-services"
+    }
+  ],
+  "extensions": [
+    {
+      "component": "billingDashboardLink",
+      "name": "billing-dashboard-link",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "billing",
+        "title": "billing",
+        "slot": "billing-dashboard-slot"
+      },
+      "featureFlag": "billing"
+    },
+    {
+      "component": "root",
+      "name": "billing-dashboard-root",
+      "slot": "billing-dashboard-slot"
+    },
+    {
+      "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 history"
+      },
+      "featureFlag": "billing"
+    },
+    {
+      "name": "billing-checkin-form",
+      "slot": "extra-visit-attribute-slot",
+      "component": "billingCheckInForm"
+    },
+    {
+      "slot": "system-admin-page-card-link-slot",
+      "component": "billableServicesCardLink",
+      "name": "billable-services-admin-card-link"
+    },
+    {
+      "name": "require-billing-modal",
+      "component": "requirePaymentModal"
+    },
+    {
+      "name": "patient-banner-billing-tags",
+      "component": "visitAttributeTags",
+      "slot": "patient-banner-tags-slot",
+      "order": 2
+    },
+    {
+      "name": "billing-home-tiles-ext",
+      "slot": "billing-home-tiles-slot",
+      "component": "serviceMetrics"
+    }
+  ]
+}