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

package/src/bills-table/bills-table.scss

@@ -0,0 +1,181 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.billListContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :has(.filterEmptyState) {
+    border-bottom: none;
+  }
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--list-box__menu) {
+    min-width: max-content;
+  }
+
+  :global(.cds--list-box) {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.menu {
+  margin-left: layout.$spacing-03;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  &:global(.cds--inline-loading) {
+    max-height: 1rem;
+  }
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  flex: 1;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/bills-table/bills-table.test.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useBills } from '../billing.resource';
+import BillsTable from './bills-table.component';
+
+const mockbills = useBills as jest.Mock;
+
+const mockBillsData = [
+  { uuid: '1', patientName: 'John Doe', identifier: '12345678', visitType: 'Checkup', patientUuid: 'uuid1' },
+  { uuid: '2', patientName: 'Mary Smith', identifier: '98765432', visitType: 'Wake up', patientUuid: 'uuid2' },
+];
+
+jest.mock('../billing.resource', () => ({
+  ...jest.requireActual('../billing.resource'),
+  useBills: jest.fn(() => ({
+    bills: mockBillsData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  ErrorState: jest.fn(() => (
+    <div>
+      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.
+    </div>
+  )),
+  useConfig: jest.fn(() => ({ bills: { pageSizes: [10, 20, 30, 40, 50], pageSize: 10 } })),
+  usePagination: jest.fn().mockImplementation((data) => ({
+    currentPage: 1,
+    goTo: () => {},
+    results: data,
+    paginated: false,
+  })),
+}));
+
+describe('BillsTable', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  xit('renders data table with pending bills', () => {
+    render(<BillsTable />);
+
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
+    const expectedColumnHeaders = [/Visit time/, /Identifier/, /Name/, /Billing service/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const patientNameLink = screen.getByText('John Doe');
+    expect(patientNameLink).toBeInTheDocument();
+    expect(patientNameLink.tagName).toBe('A');
+  });
+
+  it('displays empty state when there are no bills', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    expect(screen.getByText(/there are no bills to display/i)).toBeInTheDocument();
+  });
+
+  it('should not display the table when the data is loading', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: undefined,
+      isLoading: true,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    const expectedColumnHeaders = [/Visit time/, /Identifier/, /Name/, /Billing service/, /Department/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.queryByRole('columnheader', { name: new RegExp(header, 'i') })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display the error state when there is error', () => {
+    mockbills.mockImplementationOnce(() => ({
+      activeVisits: undefined,
+      isLoading: false,
+      isValidating: false,
+      error: 'Error in fetching data',
+    }));
+
+    render(<BillsTable />);
+
+    expect(screen.getByText(/sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  test('should filter bills by search term and bill payment status', async () => {
+    render(<BillsTable />);
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'John Doe');
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Mary Smith')).not.toBeInTheDocument();
+
+    await user.clear(searchInput);
+    await user.type(searchInput, 'Mary Smith');
+
+    expect(screen.getByText('Mary Smith')).toBeInTheDocument();
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+
+    // Should filter the table when bill payment status combobox is changed
+    const billCategorySelect = screen.getByRole('combobox');
+    expect(billCategorySelect).toBeInTheDocument();
+    await user.click(billCategorySelect, { name: 'All bills' });
+    expect(mockbills).toHaveBeenCalledWith('', '');
+
+    await user.click(screen.getByText('Pending bills'));
+    expect(screen.getByText('Pending bills')).toBeInTheDocument();
+    expect(mockbills).toHaveBeenCalledWith('', 'PENDING');
+  });
+
+  test('should show the loading spinner while retrieving data', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: undefined,
+      isLoading: true,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    const dataTableSkeleton = screen.getByRole('table');
+    expect(dataTableSkeleton).toBeInTheDocument();
+    expect(dataTableSkeleton).toHaveClass('cds--skeleton cds--data-table cds--data-table--zebra');
+  });
+
+  test('should render patient name as a link', async () => {
+    render(<BillsTable />);
+
+    const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
+    expect(patientNameLink).toBeInTheDocument();
+    expect(patientNameLink).toHaveAttribute('href', '/openmrs/spa/home/billing/patient/uuid1/1');
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,3 @@
+export interface BillingConfig {}
+
+export const configSchema = {};

package/src/dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const dashboardMeta = {
+  slot: 'patient-chart-billing-dashboard-slot',
+  columns: 1,
+  title: 'Billing history',
+  path: 'Billing history',
+};

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '@carbon/react';
+declare type SideNavProps = object;

package/src/helpers/functions.ts

@@ -0,0 +1,63 @@
+import { type Payment, type LineItem } from '../types';
+
+// amount already paid
+export function calculateTotalAmountTendered(payments: Array<Payment>) {
+  return Array.isArray(payments)
+    ? payments.reduce((totalAmount, item) => {
+        // Ensure that "amount" property is present and numeric
+        if (typeof item.amount === 'number' && item.voided !== true) {
+          return totalAmount + item.amount;
+        }
+        return totalAmount;
+      }, 0)
+    : 0;
+}
+
+// balance
+export function calculateTotalBalance(lineItems: Array<LineItem>, payments: Array<Payment>) {
+  return Math.min(this.calculateTotalAmount(lineItems) - this.calculateTotalAmountTendered(payments));
+}
+
+// total bill
+export function calculateTotalAmount(lineItems: Array<LineItem>) {
+  return Array.isArray(lineItems)
+    ? lineItems.reduce((totalAmount, item) => {
+        // Ensure that "price" and "quantity" properties are present and numeric
+        if (typeof item.price === 'number' && typeof item.quantity === 'number' && item.voided !== true) {
+          return totalAmount + item.price * item.quantity;
+        }
+        return totalAmount;
+      }, 0)
+    : 0;
+}
+
+export const convertToCurrency = (amountToConvert: number) => {
+  const formatter = new Intl.NumberFormat('en-KE', {
+    style: 'currency',
+    currency: 'KES',
+    minimumFractionDigits: 2,
+  });
+
+  let formattedAmount = formatter.format(Math.abs(amountToConvert));
+
+  if (amountToConvert < 0) {
+    formattedAmount = `(${formattedAmount})`;
+  }
+
+  return formattedAmount;
+};
+
+export const getGender = (gender: string, t) => {
+  switch (gender) {
+    case 'male':
+      return t('male', 'Male');
+    case 'female':
+      return t('female', 'Female');
+    case 'other':
+      return t('other', 'Other');
+    case 'unknown':
+      return t('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './functions';

package/src/index.ts

@@ -0,0 +1,56 @@
+import { configSchema } from './config-schema';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { createLeftPanelLink } from './left-panel-link.component';
+import { dashboardMeta } from './dashboard.meta';
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import BillableServiceHome from './billable-services/billable-services-home.component';
+import BillableServicesCardLink from './billable-services-admin-card-link.component';
+import BillHistory from './bill-history/bill-history.component';
+import BillingCheckInForm from './billing-form/billing-checkin-form.component';
+import BillingForm from './billing-form/billing-form.component';
+import RequirePaymentModal from './modal/require-payment-modal.component';
+import RootComponent from './root.component';
+import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
+import BillableServicesDashboard from './billable-services/dashboard/dashboard.component';
+import ServiceMetrics from './billable-services/dashboard/service-metrics.component';
+
+const moduleName = '@openmrs/esm-billing-app';
+
+const options = {
+  featureName: 'billing',
+  moduleName,
+};
+
+// t('billing', 'Billing')
+export const billingDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'billing',
+    title: 'Billing',
+  }),
+  options,
+);
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const billingSummaryDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...dashboardMeta, moduleName }),
+  options,
+);
+
+export const billingServicesTiles = getSyncLifecycle(ServiceMetrics, {
+  featureName: 'billing-home-tiles',
+  moduleName,
+});
+
+export const billableServicesCardLink = getSyncLifecycle(BillableServicesCardLink, options);
+export const billableServicesHome = getSyncLifecycle(BillableServiceHome, options);
+export const billingCheckInForm = getSyncLifecycle(BillingCheckInForm, options);
+export const billingForm = getSyncLifecycle(BillingForm, options);
+export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
+export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
+export const root = getSyncLifecycle(RootComponent, options);
+export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);

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

@@ -0,0 +1,185 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import fuzzy from 'fuzzy';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  TableSelectRow,
+  Tile,
+  type DataTableHeader,
+  type DataTableRow,
+} from '@carbon/react';
+import { isDesktop, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { type LineItem, type MappedBill } from '../types';
+import styles from './invoice-table.scss';
+
+type InvoiceTableProps = {
+  bill: MappedBill;
+  isSelectable?: boolean;
+  isLoadingBill?: boolean;
+  onSelectItem?: (selectedLineItems: LineItem[]) => void;
+};
+
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+  const { t } = useTranslation();
+  const { lineItems } = bill;
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const [selectedLineItems, setSelectedLineItems] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+
+  const filteredLineItems = useMemo(() => {
+    if (!debouncedSearchTerm) {
+      return lineItems;
+    }
+
+    return debouncedSearchTerm
+      ? fuzzy
+          .filter(debouncedSearchTerm, lineItems, {
+            extract: (lineItem: LineItem) => `${lineItem.item}`,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : lineItems;
+  }, [debouncedSearchTerm, lineItems]);
+
+  const tableHeaders: Array<typeof DataTableHeader> = [
+    { header: 'No', key: 'no' },
+    { header: 'Bill item', key: 'billItem' },
+    { header: 'Bill code', key: 'billCode' },
+    { header: 'Status', key: 'status' },
+    { header: 'Quantity', key: 'quantity' },
+    { header: 'Price', key: 'price' },
+    { header: 'Total', key: 'total' },
+  ];
+
+  const tableRows: Array<typeof DataTableRow> = useMemo(
+    () =>
+      filteredLineItems?.map((item, index) => {
+        return {
+          no: `${index + 1}`,
+          id: `${item.uuid}`,
+          billItem: item.item || item.billableService,
+          billCode: bill.receiptNumber,
+          status: bill.status,
+          quantity: item.quantity,
+          price: item.price,
+          total: item.price * item.quantity,
+        };
+      }) ?? [],
+    [bill.receiptNumber, bill.status, filteredLineItems],
+  );
+
+  if (isLoadingBill) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton
+          columnCount={tableHeaders.length}
+          showHeader={false}
+          showToolbar={false}
+          size={responsiveSize}
+          zebra
+        />
+      </div>
+    );
+  }
+
+  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
+    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
+    let newSelectedLineItems;
+
+    if (checked) {
+      newSelectedLineItems = [...selectedLineItems, matchingRow];
+    } else {
+      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
+    }
+    setSelectedLineItems(newSelectedLineItems);
+    onSelectItem(newSelectedLineItems);
+  };
+
+  return (
+    <div className={styles.invoiceContainer}>
+      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+          <TableContainer
+            description={
+              <span className={styles.tableDescription}>
+                <span>{t('itemsToBeBilled', 'Items to be billed')}</span>
+              </span>
+            }
+            title={t('lineItems', 'Line items')}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar {...getToolbarProps()} className={styles.tableToolbar} size={responsiveSize}>
+                <TableToolbarContent className={styles.headerContainer}>
+                  <TableToolbarSearch
+                    className={styles.searchbox}
+                    expanded
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                    placeholder={t('searchThisTable', 'Search this table')}
+                    size={responsiveSize}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <Table {...getTableProps()} aria-label="Invoice line items" className={styles.table}>
+              <TableHead>
+                <TableRow>
+                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {rows.length > 1 && isSelectable && (
+                      <TableSelectRow
+                        aria-label="Select row"
+                        {...getSelectionProps({ row })}
+                        onChange={(checked: boolean) => handleRowSelection(row, checked)}
+                      />
+                    )}
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {filteredLineItems?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>
+                {t('noMatchingItemsToDisplay', 'No matching items to display')}
+              </p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InvoiceTable;