@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/src/bill-administration/payment-history/filters/bill-filter.ts

@@ -0,0 +1,42 @@
+import { Filter, MappedBill } from '../../../types';
+
+const createPaymentMethodFilter =
+  (paymentMethods: Array<string>) =>
+  (bill: MappedBill): MappedBill => {
+    // If no payment methods specified, return original bill
+    if (!paymentMethods || paymentMethods.length === 0) {
+      return bill;
+    }
+
+    // Create a new bill object with filtered payments
+    return {
+      ...bill,
+      payments: bill.payments.filter((payment) =>
+        paymentMethods.some((method) => payment.instanceType.name.toLowerCase() === method.toLowerCase()),
+      ),
+    };
+  };
+
+const createServiceTypesFilter =
+  (serviceUuids: Array<string>) =>
+  (bill: MappedBill): boolean => {
+    if (!serviceUuids || serviceUuids.length === 0) {
+      return true;
+    }
+    return bill.lineItems.some((item) => serviceUuids.includes(item.serviceTypeUuid));
+  };
+
+// Main filtering function
+export const filterBills = (bills: Array<MappedBill>, filters: Filter): Array<MappedBill> => {
+  const { paymentMethods = [], serviceTypes = [], cashiers = [], status } = filters;
+  const billsWithFilteredPayments = bills.map(createPaymentMethodFilter(paymentMethods));
+
+  const otherFilters = [
+    createServiceTypesFilter(serviceTypes),
+    (bill: MappedBill) => !cashiers.length || cashiers.includes(bill.cashier.uuid),
+    (bill: MappedBill) => !status || bill.status === status,
+    (bill: MappedBill) => bill.payments.length > 0,
+  ];
+
+  return billsWithFilteredPayments.filter((bill) => otherFilters.every((filterFn) => filterFn(bill)));
+};

package/src/bill-administration/payment-history/filters/cashier-filter.component.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { MultiSelect } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { usePaymentFilterContext } from '../usePaymentFilterContext';
+import { usePaymentTransactionHistory } from '../usePaymentTransactionHistory';
+
+interface MultiSelectItem {
+  id: string;
+  text: string;
+  isSelectAll?: boolean;
+}
+
+export const CashierFilter: React.FC = () => {
+  const { t } = useTranslation();
+  const { filters, setFilters } = usePaymentFilterContext();
+  const { bills, isLoading } = usePaymentTransactionHistory(filters);
+  const uniqueCashiers = Array.from(
+    new Map(bills.map((transaction) => [transaction.cashier.uuid, transaction.cashier])).values(),
+  );
+
+  const cashierSelectOptions: MultiSelectItem[] = [
+    {
+      id: 'select-all',
+      text: t('allCashiers', 'All Cashiers'),
+      isSelectAll: true,
+    },
+    ...uniqueCashiers.map((cashier) => ({
+      id: cashier.uuid,
+      text: cashier.display,
+    })),
+  ];
+
+  const handleCashierSelection = (selectedItems: MultiSelectItem[]) => {
+    const selectedNames = selectedItems.map((item) => item.id);
+    setFilters({ ...filters, cashiers: selectedNames });
+  };
+
+  const initialSelectedItems = filters?.cashiers?.map((cashierName) => ({
+    id: uniqueCashiers.find((cashier) => cashier.display === cashierName)?.uuid ?? cashierName,
+    text: cashierName,
+  }));
+
+  if (uniqueCashiers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div style={{ width: '15rem' }}>
+      <MultiSelect
+        id="cashier-filter"
+        label={t('cashier', 'Cashier')}
+        titleText={t('cashier', 'Cashier')}
+        items={cashierSelectOptions}
+        initialSelectedItems={initialSelectedItems}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+        onChange={(event) => handleCashierSelection(event.selectedItems)}
+      />
+    </div>
+  );
+};

package/src/bill-administration/payment-history/filters/date-ranger-filter.component.tsx

@@ -0,0 +1,38 @@
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../payment-history.scss';
+import { usePaymentFilterContext } from '../usePaymentFilterContext';
+
+export const DateRangeFilter = () => {
+  const { t } = useTranslation();
+  const { dateRange, setDateRange } = usePaymentFilterContext();
+
+  const handleDateRangeChange = ([start, end]: Array<Date>) => {
+    if (start && end) {
+      setDateRange([start, end]);
+    }
+  };
+
+  return (
+    <DatePicker
+      maxDate={new Date()}
+      datePickerType="range"
+      className={styles.dateRangePicker}
+      value={[...dateRange]}
+      onChange={handleDateRangeChange}>
+      <DatePickerInput
+        id="date-picker-input-id-start"
+        placeholder="mm/dd/yyyy"
+        labelText={t('startDate', 'Start date')}
+        size="md"
+      />
+      <DatePickerInput
+        id="date-picker-input-id-finish"
+        placeholder="mm/dd/yyyy"
+        labelText={t('endDate', 'End date')}
+        size="md"
+      />
+    </DatePicker>
+  );
+};

package/src/bill-administration/payment-history/filters/filter-dashboard.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+
+.filterContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+  align-items: center;
+}
+
+.filterDashboard {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
+}

package/src/bill-administration/payment-history/filters/filter-dashboard.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Filter } from './filter.component';
+import { TimesheetsFilter } from './timesheets-filter.component';
+import { DateRangeFilter } from './date-ranger-filter.component';
+import styles from './filter-dashboard.scss';
+
+export const FilterDashboard = () => {
+  return (
+    <div className={styles.filterDashboard}>
+      <div className={styles.filterContainer}>
+        <DateRangeFilter />
+        <Filter />
+        <TimesheetsFilter />
+      </div>
+    </div>
+  );
+};

package/src/bill-administration/payment-history/filters/filter.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CashierFilter } from './cashier-filter.component';
+import { PaymentTypeFilter } from './payment-type-filter.component';
+import { ServiceTypeFilter } from './service-type-filter.component';
+import styles from './filter.scss';
+
+export const Filter = () => {
+  return (
+    <div className={styles.filterContainer}>
+      <ServiceTypeFilter />
+      <PaymentTypeFilter />
+      <CashierFilter />
+    </div>
+  );
+};

package/src/bill-administration/payment-history/filters/filter.scss

@@ -0,0 +1,5 @@
+.filterContainer {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
+}

package/src/bill-administration/payment-history/filters/payment-type-filter.component.tsx

@@ -0,0 +1,61 @@
+import { MultiSelect, SkeletonIcon } from '@carbon/react';
+import React from 'react';
+import { usePaymentModes } from '../../../billing.resource';
+import styles from '../payment-history.scss';
+import { useTranslation } from 'react-i18next';
+import { usePaymentFilterContext } from '../usePaymentFilterContext';
+
+interface PaymentTypeFilterProps {}
+
+export const PaymentTypeFilter: React.FC<PaymentTypeFilterProps> = () => {
+  const { t } = useTranslation();
+  const { isLoading, paymentModes } = usePaymentModes(false);
+  const { filters, setFilters } = usePaymentFilterContext();
+  const handleSelectionChange = (selectedItems: Array<{ id: string; text: string }>) => {
+    // Handle "Select All" case
+    if (selectedItems.some((item) => item.id === 'select-all')) {
+      const allPaymentTypes = paymentModes.map((mode) => mode.name);
+      setFilters({ ...filters, paymentMethods: allPaymentTypes });
+      return;
+    }
+
+    // Handle normal selection
+    const selectedPaymentTypes = selectedItems.map((item) => item.text);
+    setFilters({ ...filters, paymentMethods: selectedPaymentTypes });
+  };
+
+  if (isLoading) {
+    return <SkeletonIcon className={styles.skeletonIcon} />;
+  }
+
+  const multiSelectItems = [
+    {
+      id: 'select-all',
+      text: t('allPaymentModes', 'All Payment Modes'),
+      isSelectAll: true,
+    },
+    ...paymentModes.map((method) => ({
+      id: method.uuid,
+      text: method.name,
+      isSelectAll: false,
+    })),
+  ];
+
+  return (
+    <div style={{ width: '15rem' }}>
+      <MultiSelect
+        label={t('paymentType', 'Payment Type')}
+        id="payment-type-filter"
+        titleText={t('paymentType', 'Payment Type')}
+        items={multiSelectItems}
+        initialSelectedItems={filters.paymentMethods.map((type) => ({
+          id: paymentModes.find((mode) => mode.name === type)?.uuid ?? type,
+          text: type,
+        }))}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+        onChange={(event) => handleSelectionChange(event.selectedItems)}
+      />
+    </div>
+  );
+};

package/src/bill-administration/payment-history/filters/service-type-filter.component.tsx

@@ -0,0 +1,65 @@
+import { MultiSelect, SkeletonIcon } from '@carbon/react';
+import React from 'react';
+import styles from '../payment-history.scss';
+import { useBillsServiceTypes } from '../useBillServiceTypes';
+import { useTranslation } from 'react-i18next';
+import { usePaymentFilterContext } from '../usePaymentFilterContext';
+import { usePaymentTransactionHistory } from '../usePaymentTransactionHistory';
+
+export const ServiceTypeFilter = () => {
+  const { t } = useTranslation();
+  const { filters, setFilters } = usePaymentFilterContext();
+  const { bills: filteredBills } = usePaymentTransactionHistory(filters);
+  const { billsServiceTypes, isLoading } = useBillsServiceTypes(filteredBills);
+
+  if (isLoading) {
+    return <SkeletonIcon className={styles.skeletonIcon} />;
+  }
+
+  const initialSelectedItems = filters.serviceTypes.map((type) => ({
+    id: type,
+    text: type,
+  }));
+
+  const serviceTypeSelectOptions = [
+    {
+      id: 'select-all',
+      text: 'Select All',
+      isSelectAll: true,
+    },
+    ...billsServiceTypes.map((type) => ({
+      id: type.uuid,
+      text: type.display,
+    })),
+  ];
+
+  const handleServiceTypeSelection = (selectedItems: Array<{ id: string; text: string }>) => {
+    if (selectedItems.some((item) => item.id === 'select-all')) {
+      const allServiceTypes = billsServiceTypes.map((type) => type.uuid);
+      setFilters({ ...filters, serviceTypes: allServiceTypes });
+      return;
+    }
+
+    const selectedServiceTypes = selectedItems.map((item) => item.id);
+    setFilters({ ...filters, serviceTypes: selectedServiceTypes });
+  };
+
+  if (billsServiceTypes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div style={{ width: '15rem' }}>
+      <MultiSelect
+        id="service-type-filter"
+        label={t('serviceType', 'Service Type')}
+        titleText={t('serviceType', 'Service Type')}
+        items={serviceTypeSelectOptions}
+        initialSelectedItems={initialSelectedItems}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+        onChange={(event) => handleServiceTypeSelection(event.selectedItems)}
+      />
+    </div>
+  );
+};

package/src/bill-administration/payment-history/filters/timesheets-filter.component.tsx

@@ -0,0 +1,68 @@
+import { Form, Select, SelectItem } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+import styles from '../payment-history.scss';
+import { usePaymentFilterContext } from '../usePaymentFilterContext';
+import { usePaymentTransactionHistory } from '../usePaymentTransactionHistory';
+import { useTimeSheets } from '../../payment-points/payment-points.resource';
+
+const schema = z.object({
+  timesheet: z.string(),
+});
+
+type FormData = z.infer<typeof schema>;
+
+export const TimesheetsFilter = () => {
+  const { filters, setFilters } = usePaymentFilterContext();
+  const { bills } = usePaymentTransactionHistory(filters);
+  const { cashiers } = filters;
+  const { timesheets } = useTimeSheets();
+  const billsCashierUUIDs = bills
+    .map((bill) => bill.cashier)
+    .filter((cashier) => cashiers.includes(cashier.uuid))
+    .map((c) => c.uuid);
+
+  const uniqueBillsCashiersUUIDS = Array.from(new Set(billsCashierUUIDs));
+  const selectedCashiersTimesheets = timesheets
+    .sort((a, b) => new Date(b.clockIn).getTime() - new Date(a.clockIn).getTime())
+    .filter((sheet) => {
+      return uniqueBillsCashiersUUIDS.includes(sheet.cashier.uuid);
+    });
+
+  const { t } = useTranslation();
+  const form = useForm<FormData>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: {
+      timesheet: undefined,
+    },
+  });
+
+  const { register } = form;
+
+  if (selectedCashiersTimesheets.length === 0) {
+    return null;
+  }
+
+  return (
+    <Form {...form}>
+      <Select
+        id="timesheet"
+        {...register('timesheet')}
+        labelText={t('timesheet', 'Timesheet')}
+        className={styles.timesheetsFilter}>
+        <SelectItem value={undefined} text={'No timesheet'} />
+        {selectedCashiersTimesheets.map((sheet) => (
+          <SelectItem
+            value={sheet.uuid}
+            text={`${sheet.display} ${uniqueBillsCashiersUUIDS.length > 1 ? `(${sheet.cashier.display})` : ''}`}
+          />
+        ))}
+      </Select>
+    </Form>
+  );
+};

package/src/bill-administration/payment-history/payment-dashboard.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Dashboard, CloudMonitoring } from '@carbon/react/icons';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, Layer } from '@carbon/react';
+import styles from './payment-dashboard.scss';
+import { useTranslation } from 'react-i18next';
+import { PaymentFilterProvider } from './usePaymentFilterContext';
+import { FilterDashboard } from './filters/filter-dashboard';
+import { PaymentHistoryViewer } from './payment-history-viewer.component';
+import PaymentMethodDistribution from './payment-method-distribution.component';
+import BillingHeader from '../../billing-header/billing-header.component';
+
+const PaymentDashboard = () => {
+  const { t } = useTranslation();
+
+  return (
+    <PaymentFilterProvider>
+      <BillingHeader title={t('paymentHistory', 'Payment History')} />
+      <FilterDashboard />
+      <Layer className={styles.paymentDashboard}>
+        <Tabs>
+          <TabList aria-label={t('listOfTabs', 'List of tabs on transactions')} contained>
+            <Tab renderIcon={Dashboard}>{t('transactionHistory', 'Transaction History')}</Tab>
+            <Tab renderIcon={CloudMonitoring}>{t('paymentModeSummary', 'Payment Mode Summary')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <PaymentHistoryViewer />
+            </TabPanel>
+            <TabPanel>
+              <PaymentMethodDistribution />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Layer>
+    </PaymentFilterProvider>
+  );
+};
+
+export default PaymentDashboard;

package/src/bill-administration/payment-history/payment-dashboard.scss

@@ -0,0 +1,8 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.paymentDashboard {
+  margin-inline: layout.$spacing-05;
+  margin-block: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+}

package/src/bill-administration/payment-history/payment-history-table.component.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo, useState } from 'react';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+  Search,
+  TableContainer,
+  Button,
+  DataTableHeader,
+} from '@carbon/react';
+import { Download } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { useDebounce, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { DataTableRow, MappedBill } from '../../types';
+import { exportToExcel } from '../../helpers/excelExport';
+import dayjs from 'dayjs';
+import { useCurrencyFormatting } from '../../helpers/currency';
+
+export const PaymentHistoryTable = ({
+  headers,
+  rows = [],
+}: {
+  headers: Array<DataTableHeader>;
+  rows: Array<MappedBill>;
+}) => {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const [pageSize, setPageSize] = useState(10);
+  const responsiveSize = useLayoutType() !== 'tablet' ? 'sm' : 'md';
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebounce(searchString, 1000);
+
+  const searchResults = useMemo(() => {
+    if (rows !== undefined && rows.length > 0) {
+      if (debouncedSearchString && debouncedSearchString.trim() !== '') {
+        const search = debouncedSearchString.toLowerCase();
+        return rows?.filter((activeBillRow) =>
+          Object.entries(activeBillRow).some(([header, value]) => {
+            if (header === 'patientUuid') {
+              return false;
+            }
+            return `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+
+    return rows;
+  }, [debouncedSearchString, rows]);
+
+  const { currentPage, goTo, results } = usePagination(searchResults, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, rows.length, currentPage, results.length);
+
+  const transformedRows = results.map((row) => {
+    return {
+      ...row,
+      id: `${row.id}`,
+      billingService: row.lineItems.map((item) => item.billableService).join(', '),
+      totalAmount: formatCurrency(row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0)),
+      referenceCodes: row.payments
+        .map(({ attributes }) => attributes.map(({ value }) => value).join(', '))
+        .filter((code) => code !== '')
+        .join(', '),
+    };
+  });
+
+  const handleExport = () => {
+    const dataForExport = rows.map((row) => {
+      return {
+        ...row,
+        totalAmount: formatCurrency(row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0)),
+      };
+    });
+    const data = dataForExport.map((row) => {
+      return {
+        'Receipt Number': row.receiptNumber,
+        'Patient ID': row.identifier,
+        'Patient Name': row.patientName,
+        'Mode of Payment': row.payments
+          .map((payment: (typeof row.payments)[0]) => payment.instanceType.name)
+          .join(', '),
+        'Total Amount Due': row.lineItems.reduce((acc, item) => acc + item.price, 0),
+        'Date of Payment': dayjs(row.payments[0].dateCreated).format('DD-MM-YYYY'),
+        'Total Amount Paid': row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0),
+        'Reason/Reference': row.payments
+          .map(({ attributes }) => attributes.map(({ value }) => value).join(' '))
+          .filter((code) => code !== '')
+          .join(', '),
+      };
+    });
+
+    exportToExcel(data, {
+      fileName: `Transaction History - ${dayjs().format('DDD-MMM-YYYY:HH-mm-ss')}`,
+      sheetName: t('paymentHistory', 'Payment History'),
+    });
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+        <Search
+          size="sm"
+          placeholder={t('searchTransactions', 'Search transactions table')}
+          labelText={t('searchTransactions', 'Search transactions table')}
+          closeButtonLabelText={t('clearSearch', 'Clear search input')}
+          id="search-transactions"
+          onChange={(event) => setSearchString(event.target.value)}
+        />
+
+        <Button size={responsiveSize} renderIcon={Download} iconDescription="Download" onClick={handleExport}>
+          {t('download', 'Download')}
+        </Button>
+      </div>
+      <DataTable useZebraStyles size="sm" rows={transformedRows} headers={headers}>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()} size="sm" aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {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>
+      {pageSizes.length > 1 && (
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage ?? 1}
+          pageSize={pageSize ?? 10}
+          pageSizes={pageSizes}
+          totalItems={searchResults.length ?? 0}
+          size={responsiveSize}
+          onChange={({ page: newPage, pageSize }) => {
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+            setPageSize(pageSize);
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/bill-administration/payment-history/payment-history-viewer.component.tsx

@@ -0,0 +1,40 @@
+import { DataTableSkeleton } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import EmptyPatientBill from '../../past-patient-bills/patient-bills-dashboard/empty-patient-bill.component';
+import { PaymentHistoryTable } from './payment-history-table.component';
+import { usePaymentFilterContext } from './usePaymentFilterContext';
+import { usePaymentTransactionHistory } from './usePaymentTransactionHistory';
+
+export const PaymentHistoryViewer = () => {
+  const { t } = useTranslation();
+  const { filters } = usePaymentFilterContext();
+  const { bills: filteredBills, isLoading } = usePaymentTransactionHistory(filters);
+
+  const headers = useMemo(
+    () => [
+      { header: t('billDate', 'Date'), key: 'dateCreated' },
+      { header: t('patientName', 'Patient Name'), key: 'patientName' },
+      { header: t('identifier', 'Identifier'), key: 'identifier' },
+      { header: t('totalAmount', 'Total Amount'), key: 'totalAmount' },
+      { header: t('billingService', 'Service'), key: 'billingService' },
+      { header: t('referenceCodes', ' Reference Codes'), key: 'referenceCodes' },
+      { header: t('status', 'Status'), key: 'status' },
+    ],
+    [t],
+  );
+  return (
+    <>
+      {isLoading ? (
+        <DataTableSkeleton headers={headers} aria-label={t('transactionHistory', 'Transaction History')} />
+      ) : filteredBills.length > 0 ? (
+        <PaymentHistoryTable headers={headers} rows={filteredBills} />
+      ) : (
+        <EmptyPatientBill
+          title={t('noTransactionHistory', 'No transaction history')}
+          subTitle={t('noTransactionHistorySubtitle', 'No transaction history loaded for the selected filters')}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import BillingHeader from '../../billing-header/billing-header.component';
+import PaymentDashboard from './payment-dashboard.component';
+
+export const PaymentHistory = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <BillingHeader title={t('paymentHistory', 'Payment History')} />
+      <PaymentDashboard />
+    </div>
+  );
+};