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

package/e2e/core/test.ts

@@ -0,0 +1,20 @@
+import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { api } from '../fixtures';
+
+// This file sets up our custom test harness using the custom fixtures.
+// See https://playwright.dev/docs/test-fixtures#creating-a-fixture for details.
+// If a spec intends to use one of the custom fixtures, the special `test` function
+// exported from this file must be used instead of the default `test` function
+// provided by playwright.
+
+export interface CustomTestFixtures {
+  loginAsAdmin: Page;
+}
+
+export interface CustomWorkerFixtures {
+  api: APIRequestContext;
+}
+
+export const test = base.extend<CustomTestFixtures, CustomWorkerFixtures>({
+  api: [api, { scope: 'worker' }],
+});

package/e2e/fixtures/api.ts

@@ -0,0 +1,26 @@
+import { APIRequestContext, PlaywrightWorkerArgs, WorkerFixture } from '@playwright/test';
+
+/**
+ * A fixture which initializes an [`APIRequestContext`](https://playwright.dev/docs/api/class-apirequestcontext)
+ * that is bound to the configured OpenMRS API server. The context is automatically authenticated
+ * using the configured admin account.
+ *
+ * Use the request context like this:
+ * ```ts
+ * test('your test', async ({ api }) => {
+ *   const res = await api.get('patient/1234');
+ *   await expect(res.ok()).toBeTruthy();
+ * });
+ * ```
+ */
+export const api: WorkerFixture<APIRequestContext, PlaywrightWorkerArgs> = async ({ playwright }, use) => {
+  const ctx = await playwright.request.newContext({
+    baseURL: `${process.env.E2E_BASE_URL}/ws/rest/v1/`,
+    httpCredentials: {
+      username: process.env.E2E_USER_ADMIN_USERNAME,
+      password: process.env.E2E_USER_ADMIN_PASSWORD,
+    },
+  });
+
+  await use(ctx);
+};

package/e2e/fixtures/index.ts

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

package/e2e/pages/home-page.ts

@@ -0,0 +1,9 @@
+import { Page } from '@playwright/test';
+
+export class HomePage {
+  constructor(readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto(`home`);
+  }
+}

package/e2e/pages/index.ts

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

package/e2e/specs/sample-test.spec.ts

@@ -0,0 +1,11 @@
+import test from '@playwright/test';
+import { HomePage } from '../pages';
+import { expect } from '@playwright/test';
+
+// This test is a sample E2E test. You can delete it.
+
+test('Sample test', async ({ page }) => {
+  const homePage = new HomePage(page);
+  await homePage.goto();
+  await expect(homePage.page.getByRole('link', { name: 'Home' })).toBeVisible();
+});

package/e2e/support/github/Dockerfile

@@ -0,0 +1,34 @@
+# syntax=docker/dockerfile:1.3
+FROM --platform=$BUILDPLATFORM node:18-alpine as dev
+
+ARG APP_SHELL_VERSION=next
+
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY . .
+
+RUN npm_config_legacy_peer_deps=true npm install -g openmrs@${APP_SHELL_VERSION:-next}
+ARG CACHE_BUST
+RUN npm_config_legacy_peer_deps=true openmrs assemble --manifest --mode config --config spa-assemble-config.json --target ./spa
+
+FROM --platform=$BUILDPLATFORM openmrs/openmrs-reference-application-3-frontend:nightly as frontend
+FROM nginx:1.23-alpine
+
+RUN apk update && \
+  apk upgrade && \
+  # add more utils for sponge to support our startup script
+  apk add --no-cache moreutils
+
+# clear any default files installed by nginx
+RUN rm -rf /usr/share/nginx/html/*
+
+COPY --from=frontend /etc/nginx/nginx.conf /etc/nginx/nginx.conf
+# this assumes that NOTHING in the framework is in a subdirectory
+COPY --from=frontend /usr/share/nginx/html/* /usr/share/nginx/html/
+COPY --from=frontend /usr/local/bin/startup.sh /usr/local/bin/startup.sh
+RUN chmod +x /usr/local/bin/startup.sh
+
+COPY --from=dev /app/spa/ /usr/share/nginx/html/
+
+CMD ["/usr/local/bin/startup.sh"]

package/e2e/support/github/docker-compose.yml

@@ -0,0 +1,24 @@
+# This docker compose file is used to create a backend environment for the e2e.yml workflow.
+version: "3.7"
+
+services:
+  gateway:
+    image: openmrs/openmrs-reference-application-3-gateway:${TAG:-nightly}
+    ports:
+      - "8080:80"
+
+  frontend:
+    build:
+      context: .
+    environment:
+      SPA_PATH: /openmrs/spa
+      API_URL: /openmrs
+
+  backend:
+    image: openmrs/openmrs-reference-application-3-backend:nightly-with-data
+    depends_on:
+      - db
+
+  # MariaDB
+  db:
+    image: openmrs/openmrs-reference-application-3-db:nightly-with-data

package/e2e/support/github/run-e2e-docker-env.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash -eu
+
+# get the dir containing the script
+script_dir=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+# create a temporary working directory
+working_dir=$(mktemp -d "${TMPDIR:-/tmp/}openmrs-e2e-frontends.XXXXXXXXXX")
+# get a list of all the apps in this workspace
+apps=$(yarn workspaces list --json | jq -r 'if ((.location == ".") or (.location | test("form-engine-app")) or (.location | test("-app") | not)) then halt else .name end')
+# this array will hold all of the packed app names
+app_names=()
+
+echo "Creating packed archives of apps..."
+# for each app
+for app in $apps
+do
+  # @openmrs/esm-whatever -> _openmrs_esm_whatever
+  app_name=$(echo "$app" | tr '[:punct:]' '_');
+  # add to our array
+  app_names+=("$app_name.tgz");
+  # run yarn pack for our app and add it to the working directory
+  yarn workspace "$app" pack -o "$working_dir/$app_name.tgz" >/dev/null;
+done;
+echo "Created packed app archives"
+
+echo "Creating dynamic spa-assemble-config.json..."
+# dynamically assemble our list of frontend modules, prepending the login app and
+# primary navigation apps; apps will all be in the /app directory of the Docker
+# container
+jq -n \
+  --arg apps "$apps" \
+  --arg app_names "$(echo ${app_names[@]})" \
+  '{"@openmrs/esm-primary-navigation-app": "next", "@openmrs/esm-home-app": "next"} + (
+    ($apps | split("\n")) as $apps | ($app_names | split(" ") | map("/app/" + .)) as $app_files
+    | [$apps, $app_files]
+    | transpose
+    | map({"key": .[0], "value": .[1]})
+    | from_entries
+  )' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+echo "Created dynamic spa-assemble-config.json"
+
+echo "Copying Docker configuration..."
+cp "$script_dir/Dockerfile" "$working_dir/Dockerfile"
+cp "$script_dir/docker-compose.yml" "$working_dir/docker-compose.yml"
+
+cd $working_dir
+echo "Starting Docker containers..."
+# CACHE_BUST to ensure the assemble step is always run
+docker compose build --build-arg CACHE_BUST=$(date +%s) frontend
+docker compose up -d

package/example.env

@@ -0,0 +1,6 @@
+# This is an example environment file for configuring dynamic values.
+E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_USER_ADMIN_USERNAME=admin
+E2E_USER_ADMIN_PASSWORD=Admin123
+E2E_LOGIN_DEFAULT_LOCATION_UUID=44c3efb0-2583-4c80-a79e-1f756a03c0a1
+# The above location UUID is for the "Outpatient Clinic" location in the reference application

package/i18next-parser.config.js

@@ -0,0 +1,89 @@
+module.exports = {
+  contextSeparator: "_",
+  // Key separator used in your translation keys
+
+  createOldCatalogs: false,
+  // Save the \_old files
+
+  defaultNamespace: "translations",
+  // Default namespace used in your i18next config
+
+  defaultValue: "",
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: ".",
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
+
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
+
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JavascriptLexer"],
+  },
+
+  lineEnding: "auto",
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ["en", "am", "es", "fr", "km", "he"],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ":",
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: "$NAMESPACE/$LOCALE.json",
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: "_",
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: undefined,
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog
+
+  useKeysAsDefaultValue: false,
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+};

package/jest.config.js

@@ -0,0 +1,34 @@
+/**
+ * @returns {Promise<import('jest').Config>}
+ */
+const path = require('path');
+
+module.exports = {
+  collectCoverageFrom: [
+    '**/src/**/*.component.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+    '!**/e2e/**',
+  ],
+  transform: {
+    '^.+\\.(j|t)sx?$': '@swc/jest',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
+  moduleNameMapper: {
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '^dexie$': require.resolve('dexie'),
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '^react-i18next$': path.resolve(__dirname, '__mocks__', 'react-i18next.js'),
+    '^uuid$': path.resolve(__dirname, 'node_modules', 'uuid', 'dist', 'index.js'),
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
+  testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  testTimeout: 20000,
+};

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@openmrs/esm-billing-app",
+  "version": "1.0.1-pre.14",
+  "description": "Billing frontend module for use in O3",
+  "browser": "dist/openmrs-esm-billing-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-billing-app#readme",
+  "scripts": {
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "build": "webpack --mode production",
+    "ci:prepublish": "lerna publish from-package --no-git-reset --yes --dist-tag next",
+    "ci:publish": "lerna publish from-package --yes --no-git-reset --yes",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx --max-warnings=0",
+    "postinstall": "husky install",
+    "prettier": "prettier --config prettier.config.js --write \"src/**/*.{ts,tsx,css,scss}\" \"e2e/**/*.ts\"",
+    "release": "lerna version --no-git-tag-version",
+    "serve": "webpack serve --mode=development",
+    "start": "openmrs develop",
+    "test-e2e": "playwright test",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc",
+    "verify": "turbo lint && turbo typescript && turbo test --color --concurrency=5"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-billing-app#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-billing-app/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.48.1",
+    "@hookform/resolvers": "^3.3.4",
+    "classnames": "^2.5.1",
+    "fuzzy": "^0.1.3",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.49.3",
+    "react-to-print": "^2.14.15",
+    "zod": "^3.22.4"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "@openmrs/esm-patient-common-lib": "6.x",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-i18next": "11.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@playwright/test": "^1.41.1",
+    "@swc/cli": "^0.3.2",
+    "@swc/core": "^1.3.106",
+    "@swc/jest": "^0.2.31",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "babel-preset-minify": "^0.5.2",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.9.1",
+    "d3-selection": "^3.0.0",
+    "dayjs": "^1.11.10",
+    "dotenv": "^16.4.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.6",
+    "i18next": "^23.7.20",
+    "i18next-parser": "^8.12.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lerna": "^8.0.2",
+    "lodash": "^4.17.21",
+    "openmrs": "next",
+    "pinst": "^3.0.0",
+    "prettier": "^3.2.4",
+    "pretty-quick": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.1",
+    "react-router-dom": "^6.21.3",
+    "rxjs": "^6.6.7",
+    "sass": "^1.70.0",
+    "swc-loader": "^0.2.3",
+    "swr": "^2.2.4",
+    "turbo": "^1.11.3",
+    "typescript": "^4.9.5",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
+  "packageManager": "yarn@4.0.2",
+  "stableVersion": "1.0.0"
+}

package/playwright.config.ts

@@ -0,0 +1,32 @@
+import { devices, PlaywrightTestConfig } from '@playwright/test';
+import * as dotenv from 'dotenv';
+dotenv.config();
+
+// See https://playwright.dev/docs/test-configuration.
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/specs',
+  timeout: 3 * 60 * 1000,
+  expect: {
+    timeout: 40 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  globalSetup: require.resolve('./e2e/core/global-setup'),
+  use: {
+    baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    storageState: 'e2e/storageState.json',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+};
+
+export default config;

package/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  semi: true,
+  bracketSameLine: true,
+};

package/src/bill-history/bill-history.component.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import {
+  EmptyDataIllustration,
+  ErrorState,
+  launchPatientWorkspace,
+  usePaginationInfo,
+} from '@openmrs/esm-patient-common-lib';
+import { useBills } from '../billing.resource';
+import InvoiceTable from '../invoice/invoice-table.component';
+import styles from './bill-history.scss';
+
+interface BillHistoryProps {
+  patientUuid: string;
+}
+
+const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
+  const PAGE_SIZE = 10;
+  const { t } = useTranslation();
+  const { bills, isLoading, error } = useBills(patientUuid);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const { paginated, goTo, results, currentPage } = usePagination(bills, PAGE_SIZE);
+  const { pageSizes } = usePaginationInfo(PAGE_SIZE, bills?.length, currentPage, results?.length);
+
+  const headerData = [
+    {
+      header: t('visitTime', 'Visit time'),
+      key: 'visitTime',
+    },
+    {
+      header: t('identifier', 'Identifier'),
+      key: 'identifier',
+    },
+    {
+      header: t('billedItems', 'Billed Items'),
+      key: 'billedItems',
+    },
+    {
+      header: t('billTotal', 'Bill total'),
+      key: 'billTotal',
+    },
+  ];
+
+  const setBilledItems = (bill) =>
+    bill.lineItems.reduce((acc, item) => acc + (acc ? ' & ' : '') + (item.billableService || item.item || ''), '');
+
+  const rowData = results?.map((bill) => ({
+    id: bill.uuid,
+    uuid: bill.uuid,
+    billTotal: bill.totalAmount,
+    visitTime: bill.dateCreated,
+    identifier: bill.identifier,
+    billedItems: setBilledItems(bill),
+  }));
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton showHeader={false} showToolbar={false} zebra size={responsiveSize} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  if (bills.length === 0) {
+    return (
+      <Layer className={styles.emptyStateContainer}>
+        <Tile className={styles.tile}>
+          <div className={styles.illo}>
+            <EmptyDataIllustration />
+          </div>
+          <p className={styles.content}>There are no bills to display.</p>
+          <Button onClick={() => launchPatientWorkspace('billing-form')} kind="ghost">
+            {t('launchBillForm', 'Launch bill form')}
+          </Button>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <div className={styles.billHistoryContainer}>
+      <DataTable isSortable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles>
+        {({
+          rows,
+          headers,
+          getExpandHeaderProps,
+          getTableProps,
+          getTableContainerProps,
+          getHeaderProps,
+          getRowProps,
+        }) => (
+          <TableContainer {...getTableContainerProps}>
+            <Table className={styles.table} {...getTableProps()} aria-label="Bill list">
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => {
+                  const currentBill = bills?.find((bill) => bill.uuid === row.id);
+
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableExpandRow>
+                      {row.isExpanded ? (
+                        <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 1}>
+                          <div className={styles.container} key={i}>
+                            <InvoiceTable bill={currentBill} isSelectable={false} />
+                          </div>
+                        </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {paginated && (
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={PAGE_SIZE}
+          pageSizes={pageSizes}
+          totalItems={bills.length}
+          className={styles.pagination}
+          size={responsiveSize}
+          onChange={({ page: newPage }) => {
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default BillHistory;