Skip to content

Commit

Permalink
O3-2879 Add billing form and billing history to patient chart (#8)
Browse files Browse the repository at this point in the history 
* O3-2879 Add billing form in Patient's billing history to RefApp

* refactor billing form and add uat backend

* Remove backend, set currency, add translations

* use existing currency Convert function

* PR comments
  • Loading branch information
@ODORA0
ODORA0 authored Feb 23, 2024
1 parent b3b732d commit 52bd3c8
Show file tree
Hide file tree
Showing 11 changed files with 403 additions and 95 deletions.
163 changes: 87 additions & 76 deletions src/bill-history/bill-history.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ import {
TableRow,
Tile,
} from '@carbon/react';
import { isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
import { isDesktop, useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
import {
CardHeader,
EmptyDataIllustration,
ErrorState,
launchPatientWorkspace,
Expand All @@ -28,19 +29,20 @@ import {
import { useBills } from '../billing.resource';
import InvoiceTable from '../invoice/invoice-table.component';
import styles from './bill-history.scss';
import { Add } from '@carbon/react/icons';
import { convertToCurrency } from '../helpers';

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 { paginated, goTo, results, currentPage } = usePagination(bills);
const { pageSize } = useConfig();

const headerData = [
{
Expand All @@ -67,7 +69,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
const rowData = results?.map((bill) => ({
id: bill.uuid,
uuid: bill.uuid,
billTotal: bill.totalAmount,
billTotal: convertToCurrency(bill.totalAmount),
visitTime: bill.dateCreated,
identifier: bill.identifier,
billedItems: setBilledItems(bill),
Expand Down Expand Up @@ -108,79 +110,88 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
}

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);
<>
<CardHeader title={t('billingHistory', 'Billing History')}>
<Button
renderIcon={Add}
onClick={() => launchPatientWorkspace('billing-form', { workspaceTitle: 'Billing Form' })}
kind="ghost">
{t('addBill', 'Add bill item(s)')}
</Button>
</CardHeader>
<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>
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={pageSize._default}
totalItems={bills.length}
className={styles.pagination}
size={responsiveSize}
onChange={({ page: newPage }) => {
if (newPage !== currentPage) {
goTo(newPage);
}
}}
/>
)}
</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>
</div>
</>
);
};

Expand Down
Loading

0 comments on commit 52bd3c8

Please sign in to comment.