(feat) filter bills to display pending bill and sort by date Created (#…

…99)
palladiumkenya · Dec 15, 2023 · 31486a1 · 31486a1
1 parent 84a8efa
commit 31486a1
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/packages/esm-billing-app/src/billing.resource.ts b/packages/esm-billing-app/src/billing.resource.ts
@@ -2,8 +2,9 @@ import useSWR from 'swr';
 import { formatDate, parseDate, openmrsFetch, useSession, OpenmrsResource } from '@openmrs/esm-framework';
 import { FacilityDetail, MappedBill, PatientInvoice } from './types';
 import isEmpty from 'lodash-es/isEmpty';
+import sortBy from 'lodash-es/sortBy';
 
-export const useBills = (patientUuid?: string) => {
+export const useBills = (patientUuid: string = '', billStatus: string = '') => {
   const url = `/ws/rest/v1/cashier/bill?v=full`;
 
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
@@ -38,7 +39,9 @@ export const useBills = (patientUuid?: string) => {
     return mappedBill;
   };
 
-  const mappedResults = data?.data ? data?.data?.results?.map((res) => mapBillProperties(res)) : [];
+  const sortBills = sortBy(data?.data?.results ?? [], ['dateCreated']).reverse();
+  const filteredBills = billStatus === '' ? sortBills : sortBills?.filter((bill) => bill.status === billStatus);
+  const mappedResults = filteredBills?.map((bill) => mapBillProperties(bill));
   const filteredResults = mappedResults?.filter((res) => res.patientUuid === patientUuid);
   const formattedBills = isEmpty(patientUuid) ? mappedResults : filteredResults || [];
 

diff --git a/packages/esm-billing-app/src/bills-table/bills-table.component.tsx b/packages/esm-billing-app/src/bills-table/bills-table.component.tsx
@@ -15,7 +15,11 @@ import {
   TableHeader,
   TableCell,
   Tile,
+  OverflowMenu,
+  OverflowMenuItem,
+  Tag,
 } from '@carbon/react';
+import { Filter } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import {
   useLayoutType,
@@ -28,14 +32,16 @@ import {
 import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
 import { useBills } from '../billing.resource';
 import styles from './bills-table.scss';
+import { PENDING } from '../constants';
 
 const BillsTable = () => {
   const { t } = useTranslation();
   const config = useConfig();
   const layout = useLayoutType();
+  const [billPaymentStatus, setBillPaymentStatus] = useState(PENDING);
   const pageSizes = config?.bills?.pageSizes ?? [10, 20, 30, 40, 50];
   const [pageSize, setPageSize] = useState(config?.bills?.pageSize ?? 10);
-  const { bills, isLoading, isValidating, error } = useBills('');
+  const { bills, isLoading, isValidating, error } = useBills('', billPaymentStatus);
   const [searchString, setSearchString] = useState('');
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
 
@@ -112,6 +118,8 @@ const BillsTable = () => {
           layout={layout}
           responsiveSize={responsiveSize}
           t={t}
+          billPaymentStatus={billPaymentStatus}
+          setBillPaymentStatus={setBillPaymentStatus}
         />
         <DataTableSkeleton
           rowCount={pageSize}
@@ -143,6 +151,8 @@ const BillsTable = () => {
           isValidating={isValidating}
           layout={layout}
           responsiveSize={responsiveSize}
+          billPaymentStatus={billPaymentStatus}
+          setBillPaymentStatus={setBillPaymentStatus}
           t={t}
         />
         <DataTable
@@ -226,7 +236,18 @@ const BillsTable = () => {
   );
 };
 
-function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
+function FilterableTableHeader({
+  layout,
+  handleSearch,
+  isValidating,
+  responsiveSize,
+  t,
+  billPaymentStatus,
+  setBillPaymentStatus,
+}) {
+  const handleSetBillPaymentStatus = (status) => {
+    setBillPaymentStatus(status);
+  };
   return (
     <>
       <div className={styles.headerContainer}>
@@ -239,6 +260,19 @@ function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveS
         </div>
         <div className={styles.backgroundDataFetchingIndicator}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
+          <div>
+            <Tag type="red" title={billPaymentStatus}>
+              {billPaymentStatus === '' ? 'ALL' : billPaymentStatus}
+            </Tag>
+            <OverflowMenu flipped renderIcon={Filter}>
+              <OverflowMenuItem onClick={() => handleSetBillPaymentStatus('')} itemText={t('all', 'ALL')} />
+              <OverflowMenuItem onClick={() => handleSetBillPaymentStatus('PAID')} itemText={t('paid', 'PAID')} />
+              <OverflowMenuItem
+                onClick={() => handleSetBillPaymentStatus('PENDING')}
+                itemText={t('pending', 'PENDING')}
+              />
+            </OverflowMenu>
+          </div>
         </div>
       </div>
       <Search

diff --git a/packages/esm-billing-app/src/bills-table/bills-table.scss b/packages/esm-billing-app/src/bills-table/bills-table.scss
@@ -36,7 +36,7 @@
   align-items: center;
   display: flex;
   flex: 1 1 0%;
-  justify-content: center;
+  justify-content: space-between;
 }
 
 .tableContainer section {
@@ -71,15 +71,15 @@
   margin: 1rem auto;
 }
 
-.expandedActiveVisitRow > td > div {
+.expandedActiveVisitRow>td>div {
   max-height: max-content !important;
 }
 
 .expandedActiveVisitRow td {
   padding: 0 2rem;
 }
 
-.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+.expandedActiveVisitRow th[colspan] td[colspan]>div:first-child {
   padding: 0 1rem;
 }
 
@@ -145,4 +145,4 @@
 .filterEmptyStateHelper {
   @include type.type-style('body-compact-01');
   color: $text-02;
-}
+}
diff --git a/packages/esm-billing-app/src/constants.ts b/packages/esm-billing-app/src/constants.ts
@@ -0,0 +1 @@
+export const PENDING = 'PENDING';