(fix) Move date formatting from bill mapper to components (#650)

Move dateCreated formatting out of mapBillProperties and into the
components that render dates. This lets each component choose its own
format options (e.g. the printable invoice header omits time). Also
format the previously-raw dateCreated in patient-bills.component.tsx
and migrate its DataTable from the deprecated render prop to the
children pattern.

Author: NethmiRodrigo

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

@@ -24,7 +24,9 @@ import {
   CardHeader,
   EmptyCardIllustration,
   ErrorState,
+  formatDate,
   launchWorkspace2,
+  parseDate,
   useConfig,
   usePagination,
   usePaginationInfo,
@@ -75,7 +77,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
     id: bill.uuid,
     uuid: bill.uuid,
     billTotal: convertToCurrency(bill?.totalAmount, defaultCurrency),
-    billDate: bill.dateCreated,
+    billDate: formatDate(parseDate(bill.dateCreated), { mode: 'wide' }),
     invoiceNumber: bill.receiptNumber,
     billedItems: setBilledItems(bill),
   }));

src/billable-services/bill-waiver/patient-bills.component.tsx

@@ -15,7 +15,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { EmptyCardIllustration, useConfig } from '@openmrs/esm-framework';
+import { EmptyCardIllustration, formatDate, parseDate, useConfig } from '@openmrs/esm-framework';
 import { type MappedBill } from '../../types';
 import { convertToCurrency } from '../../helpers';
 import PatientBillsSelections from './bill-selection.component';
@@ -44,7 +44,7 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
 
   const tableRows = bills.map((bill) => ({
     id: `${bill.uuid}`,
-    date: bill.dateCreated,
+    date: formatDate(parseDate(bill.dateCreated), { mode: 'wide' }),
     invoiceNumber: bill.receiptNumber,
     billableService: bill.billingService,
     totalAmount: convertToCurrency(bill?.totalAmount, defaultCurrency),
@@ -69,12 +69,8 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
 
   return (
     <div style={{ marginTop: '1rem' }}>
-      <DataTable
-        rows={tableRows}
-        headers={tableHeaders}
-        size="sm"
-        useZebraStyles
-        render={({
+      <DataTable rows={tableRows} headers={tableHeaders} size="sm" useZebraStyles>
+        {({
           rows,
           headers,
           getHeaderProps,
@@ -130,7 +126,7 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
             </Table>
           </TableContainer>
         )}
-      />
+      </DataTable>
     </div>
   );
 };

src/billing.resource.test.ts

@@ -250,41 +250,6 @@ describe('mapBillProperties', () => {
     });
   });
 
-  describe('Date formatting', () => {
-    it('Formats dateCreated when present', () => {
-      mockFormatDate.mockReturnValue('01 January 2024');
-      const bill = createBaseBill({
-        dateCreated: '2024-01-01T00:00:00Z',
-      });
-      const result = mapBillProperties(bill);
-      expect(result.dateCreated).toBe('01 January 2024');
-    });
-
-    it('Returns "--" when dateCreated is null', () => {
-      const bill = createBaseBill({
-        dateCreated: null as unknown as string,
-      });
-      const result = mapBillProperties(bill);
-      expect(result.dateCreated).toBe('--');
-    });
-
-    it('Returns "--" when dateCreated is undefined', () => {
-      const bill = createBaseBill({
-        dateCreated: undefined as unknown as string,
-      });
-      const result = mapBillProperties(bill);
-      expect(result.dateCreated).toBe('--');
-    });
-
-    it('Returns "--" when dateCreated is empty string', () => {
-      const bill = createBaseBill({
-        dateCreated: '',
-      });
-      const result = mapBillProperties(bill);
-      expect(result.dateCreated).toBe('--');
-    });
-  });
-
   describe('Billing service concatenation', () => {
     it('Concatenates multiple line item names with double space', () => {
       const bill = createBaseBill({

src/billing.resource.ts

@@ -31,7 +31,6 @@ export const mapBillProperties = (bill: PatientInvoice): MappedBill => {
     cashPointUuid: bill?.cashPoint?.uuid,
     cashPointName: bill?.cashPoint?.name,
     cashPointLocation: bill?.cashPoint?.location?.display,
-    dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
     lineItems: activeLineItems,
     billingService: activeLineItems.map((lineItem) => lineItem?.item || lineItem?.billableService || '--').join('  '),
     totalAmount: activeLineItems

src/bills-table/bills-table.component.tsx

@@ -24,8 +24,10 @@ import {
   EmptyCardIllustration,
   ErrorState,
   ConfigurableLink,
+  formatDate,
   useConfig,
   useDebounce,
+  parseDate,
   type LayoutType,
 } from '@openmrs/esm-framework';
 import { usePaginatedBills } from '../billing.resource';
@@ -108,6 +110,7 @@ const BillsTable: React.FC = () => {
       const object = {
         ...bill,
         id: String(bill.id),
+        dateCreated: bill.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
         receiptNumberDisplay: (
           <ConfigurableLink
             style={{ textDecoration: 'none' }}

src/invoice/invoice.component.tsx

@@ -4,7 +4,15 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ErrorState, ExtensionSlot, showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
+import {
+  ErrorState,
+  ExtensionSlot,
+  formatDate,
+  parseDate,
+  showSnackbar,
+  useConfig,
+  usePatient,
+} from '@openmrs/esm-framework';
 import { convertToCurrency } from '../helpers';
 import { useBill, useDefaultFacility } from '../billing.resource';
 import type { BillingConfig } from '../config-schema';
@@ -76,7 +84,9 @@ const Invoice: React.FC = () => {
     [t('totalAmount', 'Total amount')]: convertToCurrency(bill?.totalAmount, defaultCurrency),
     [t('amountTendered', 'Amount tendered')]: convertToCurrency(bill?.tenderedAmount, defaultCurrency),
     [t('invoiceNumber', 'Invoice number')]: bill?.receiptNumber,
-    [t('dateAndTime', 'Date and time')]: bill?.dateCreated,
+    [t('dateAndTime', 'Date and time')]: bill?.dateCreated
+      ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' })
+      : '--',
     [t('invoiceStatus', 'Invoice status')]: bill?.status,
   };
 

src/invoice/printable-invoice/printable-invoice-header.component.tsx

@@ -18,7 +18,9 @@ const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patient
 
   const invoiceDetails = {
     [t('invoiceNumber', 'Invoice #')]: bill?.receiptNumber,
-    [t('invoiceDate', 'Invoice date')]: bill?.dateCreated,
+    [t('invoiceDate', 'Invoice date')]: bill?.dateCreated
+      ? formatDate(parseDate(bill.dateCreated), { mode: 'wide', noToday: true, time: false })
+      : '--',
     [t('totalAmount', 'Total Amount')]: `${defaultCurrency} ${bill?.totalAmount}`,
     [t('totalPaid', 'Total paid')]: `${defaultCurrency} ${bill?.tenderedAmount}`,
     [t('amountBalance', 'Amount balance')]: `${defaultCurrency} ${bill?.totalAmount - bill?.tenderedAmount}`,

src/invoice/printable-invoice/printable-invoice-header.test.tsx

@@ -24,7 +24,7 @@ const testProps = {
 const bill = {
   status: 'POSTED',
   receiptNumber: '0050-5',
-  dateCreated: '01 — Nov — 2025',
+  dateCreated: '2025-11-01T00:00:00.000Z',
   totalAmount: 100,
   tenderedAmount: 50,
 } as MappedBill;