Merge pull request #506 from bigcapitalhq/BIG-206

feat: Setting up the date format in the whole system dates

packages/server/src/api/controllers/Dashboard/index.ts

@@ -5,7 +5,7 @@ import DashboardService from '@/services/Dashboard/DashboardService';
 @Service()
 export default class DashboardMetaController {
   @Inject()
-  dashboardService: DashboardService;
+  private dashboardService: DashboardService;
 
   /**
    * Constructor router.

packages/server/src/lib/Transformer/Transformer.ts

@@ -149,13 +149,19 @@ export class Transformer {
     return this.excludeAttributes().length > 0;
   };
 
+  private dateFormat = 'YYYY MMM DD';
+
+  setDateFormat(format: string) {
+    this.dateFormat = format;
+  }
+
   /**
    *
    * @param date
    * @returns
    */
   protected formatDate(date) {
-    return date ? moment(date).format('YYYY/MM/DD') : '';
+    return date ? moment(date).format(this.dateFormat) : '';
   }
 
   /**
@@ -193,6 +199,7 @@ export class Transformer {
   ) {
     transformer.setOptions(options);
     transformer.setContext(this.context);
+    transformer.setDateFormat(this.dateFormat);
 
     return transformer.work(obj);
   }

packages/server/src/lib/Transformer/TransformerInjectable.ts

@@ -24,6 +24,17 @@ export class TransformerInjectable {
     };
   }
 
+  /**
+   * Retrieves the given tenatn date format.
+   * @param {number} tenantId
+   * @returns {string}
+   */
+  async getTenantDateFormat(tenantId: number) {
+    const metadata = await TenantMetadata.query().findOne('tenantId', tenantId);
+
+    return metadata.dateFormat;
+  }
+
   /**
    * Transformes the given transformer after inject the tenant context.
    * @param   {number} tenantId
@@ -41,7 +52,11 @@ export class TransformerInjectable {
     if (!isNull(tenantId)) {
       const context = await this.getApplicationContext(tenantId);
       transformer.setContext(context);
+
+      const dateFormat = await this.getTenantDateFormat(tenantId);
+      transformer.setDateFormat(dateFormat);
     }
+
     transformer.setOptions(options);
 
     return transformer.work(object);

packages/server/src/services/Cashflow/CashflowTransactionTransformer.ts

@@ -7,7 +7,12 @@ export class CashflowTransactionTransformer extends Transformer {
    * @returns {string[]}
    */
   public includeAttributes = (): string[] => {
-    return ['formattedAmount', 'transactionTypeFormatted'];
+    return [
+      'formattedAmount',
+      'transactionTypeFormatted',
+      'formattedDate',
+      'formattedCreatedAt',
+    ];
   };
 
   /**
@@ -29,5 +34,23 @@ export class CashflowTransactionTransformer extends Transformer {
    */
   protected transactionTypeFormatted = (transaction) => {
     return this.context.i18n.__(transaction.transactionTypeFormatted);
-  }
+  };
+
+  /**
+   * Retrieve the formatted transaction date.
+   * @param invoice
+   * @returns {string}
+   */
+  protected formattedDate = (invoice): string => {
+    return this.formatDate(invoice.date);
+  };
+
+  /**
+   * Retrieve the formatted created at date.
+   * @param invoice
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (invoice): string => {
+    return this.formatDate(invoice.createdAt);
+  };
 }

packages/server/src/services/CreditNotes/CreditNoteTransformer.ts

@@ -13,6 +13,8 @@ export class CreditNoteTransformer extends Transformer {
     return [
       'formattedCreditsRemaining',
       'formattedCreditNoteDate',
+      'formattedCreatedAt',
+      'formattedCreatedAt',
       'formattedAmount',
       'formattedCreditsUsed',
       'formattedSubtotal',
@@ -30,6 +32,15 @@ export class CreditNoteTransformer extends Transformer {
     return this.formatDate(credit.creditNoteDate);
   };
 
+  /**
+   * Retrieve formatted created at date.
+   * @param credit 
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (credit): string => {
+    return this.formatDate(credit.createdAt);
+  };
+
   /**
    * Retrieve formatted invoice amount.
    * @param {ICreditNote} credit

packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts

@@ -15,6 +15,7 @@ export class ExpenseTransfromer extends Transformer {
       'formattedLandedCostAmount',
       'formattedAllocatedCostAmount',
       'formattedDate',
+      'formattedCreatedAt',
       'categories',
       'attachments',
     ];
@@ -62,6 +63,15 @@ export class ExpenseTransfromer extends Transformer {
     return this.formatDate(expense.paymentDate);
   };
 
+  /**
+   * Retrieve formatted created at date.
+   * @param {IExpense} expense 
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (expense: IExpense): string => {
+    return this.formatDate(expense.createdAt);
+  }
+
   /**
    * Retrieves the transformed expense categories.
    * @param {IExpense} expense

packages/server/src/services/ManualJournals/ManualJournalTransformer.ts

@@ -13,6 +13,7 @@ export class ManualJournalTransfromer extends Transformer {
       'formattedAmount',
       'formattedDate',
       'formattedPublishedAt',
+      'formattedCreatedAt',
       'attachments',
     ];
   };
@@ -37,6 +38,15 @@ export class ManualJournalTransfromer extends Transformer {
     return this.formatDate(manualJorunal.date);
   };
 
+  /**
+   * Retrieve formatted created at date.
+   * @param {IManualJournal} manualJournal
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (manualJorunal: IManualJournal): string => {
+    return this.formatDate(manualJorunal.createdAt);
+  };
+
   /**
    * Retrieve formatted published at date.
    * @param {IManualJournal} manualJournal

packages/server/src/services/Organization/OrganizationService.ts

@@ -207,7 +207,7 @@ export default class OrganizationService {
   ): IOrganizationBuildDTO {
     return {
       ...buildDTO,
-      dateFormat: defaultTo(buildDTO.dateFormat, 'DD/MM/yyyy'),
+      dateFormat: defaultTo(buildDTO.dateFormat, 'DD MMM yyyy'),
     };
   }
 

packages/server/src/services/Purchases/BillPayments/BillPaymentEntryTransformer.ts

@@ -1,5 +1,6 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from '@/utils';
+import { PurchaseInvoiceTransformer } from '../Bills/PurchaseInvoiceTransformer';
 
 export class BillPaymentEntryTransformer extends Transformer {
   /**
@@ -7,7 +8,14 @@ export class BillPaymentEntryTransformer extends Transformer {
    * @returns {Array}
    */
   public includeAttributes = (): string[] => {
-    return ['paymentAmountFormatted'];
+    return ['paymentAmountFormatted', 'bill'];
+  };
+
+  /**
+   * Retreives the
+   */
+  protected bill = (entry) => {
+    return this.item(entry.bill, new PurchaseInvoiceTransformer());
   };
 
   /**

packages/server/src/services/Purchases/BillPayments/BillPaymentTransformer.ts

@@ -12,6 +12,7 @@ export class BillPaymentTransformer extends Transformer {
   public includeAttributes = (): string[] => {
     return [
       'formattedPaymentDate',
+      'formattedCreatedAt',
       'formattedAmount',
       'entries',
       'attachments',
@@ -27,6 +28,15 @@ export class BillPaymentTransformer extends Transformer {
     return this.formatDate(billPayment.paymentDate);
   };
 
+  /**
+   * Retrieve formatted created at date.
+   * @param {IBillPayment} billPayment 
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (billPayment: IBillPayment): string => {
+    return this.formatDate(billPayment.createdAt);
+  }
+
   /**
    * Retrieve formatted bill amount.
    * @param {IBill} invoice

packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts

@@ -14,6 +14,7 @@ export class PurchaseInvoiceTransformer extends Transformer {
     return [
       'formattedBillDate',
       'formattedDueDate',
+      'formattedCreatedAt',
       'formattedAmount',
       'formattedPaymentAmount',
       'formattedBalance',
@@ -57,6 +58,15 @@ export class PurchaseInvoiceTransformer extends Transformer {
     return this.formatDate(bill.dueDate);
   };
 
+  /**
+   * Retrieve the formatted created at date.
+   * @param {IBill} bill
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (bill: IBill): string => {
+    return this.formatDate(bill.createdAt);
+  };
+
   /**
    * Retrieve formatted bill amount.
    * @param {IBill} bill

packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts

@@ -14,6 +14,7 @@ export class VendorCreditTransformer extends Transformer {
       'formattedAmount',
       'formattedSubtotal',
       'formattedVendorCreditDate',
+      'formattedCreatedAt',
       'formattedCreditsRemaining',
       'formattedInvoicedAmount',
       'entries',
@@ -30,6 +31,15 @@ export class VendorCreditTransformer extends Transformer {
     return this.formatDate(vendorCredit.vendorCreditDate);
   };
 
+  /**
+   * Retireve formatted created at date.
+   * @param vendorCredit 
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (vendorCredit): string => {
+    return this.formatDate(vendorCredit.createdAt);
+  };
+
   /**
    * Retrieve formatted vendor credit amount.
    * @param {IVendorCredit} credit

packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts

@@ -18,6 +18,7 @@ export class SaleEstimateTransfromer extends Transformer {
       'formattedDeliveredAtDate',
       'formattedApprovedAtDate',
       'formattedRejectedAtDate',
+      'formattedCreatedAt',
       'entries',
       'attachments',
     ];
@@ -41,6 +42,15 @@ export class SaleEstimateTransfromer extends Transformer {
     return this.formatDate(estimate.expirationDate);
   };
 
+  /**
+   * Retrieves the formatted estimate created at.
+   * @param {ISaleEstimate} estimate -
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (estimate: ISaleEstimate): string => {
+    return this.formatDate(estimate.createdAt);
+  };
+
   /**
    * Retrieve formatted estimate date.
    * @param {ISaleEstimate} invoice

packages/server/src/services/Sales/Invoices/SaleInvoiceTransformer.ts

@@ -13,6 +13,7 @@ export class SaleInvoiceTransformer extends Transformer {
     return [
       'invoiceDateFormatted',
       'dueDateFormatted',
+      'createdAtFormatted',
       'dueAmountFormatted',
       'paymentAmountFormatted',
       'balanceAmountFormatted',
@@ -48,6 +49,15 @@ export class SaleInvoiceTransformer extends Transformer {
     return this.formatDate(invoice.dueDate);
   };
 
+  /**
+   * Retrieve the formatted created at date.
+   * @param invoice
+   * @returns {string}
+   */
+  protected createdAtFormatted = (invoice): string => {
+    return this.formatDate(invoice.createdAt);
+  };
+
   /**
    * Retrieve formatted invoice due amount.
    * @param {ISaleInvoice} invoice

packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts

@@ -12,6 +12,7 @@ export class PaymentReceiveTransfromer extends Transformer {
     return [
       'subtotalFormatted',
       'formattedPaymentDate',
+      'formattedCreatedAt',
       'formattedAmount',
       'formattedExchangeRate',
       'entries',
@@ -27,6 +28,15 @@ export class PaymentReceiveTransfromer extends Transformer {
     return this.formatDate(payment.paymentDate);
   };
 
+  /**
+   * Retrieves the formatted created at date.
+   * @param {IPaymentReceive} payment
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (payment: IPaymentReceive): string => {
+    return this.formatDate(payment.createdAt);
+  };
+
   /**
    * Retrieve the formatted payment subtotal.
    * @param {IPaymentReceive} payment

packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts

@@ -17,6 +17,7 @@ export class SaleReceiptTransformer extends Transformer {
       'formattedAmount',
       'formattedReceiptDate',
       'formattedClosedAtDate',
+      'formattedCreatedAt',
       'entries',
       'attachments',
     ];
@@ -40,6 +41,15 @@ export class SaleReceiptTransformer extends Transformer {
     return this.formatDate(receipt.closedAt);
   };
 
+  /**
+   * Retrieve formatted receipt created at date.
+   * @param receipt 
+   * @returns {string}
+   */
+  protected formattedCreatedAt = (receipt: ISaleReceipt): string => {
+    return this.formatDate(receipt.createdAt);
+  };
+
   /**
    * Retrieves the estimate formatted subtotal.
    * @param {ISaleReceipt} receipt

packages/webapp/src/components/DrawersContainer.tsx

@@ -21,9 +21,9 @@ import RefundCreditNoteDetailDrawer from '@/containers/Drawers/RefundCreditNoteD
 import RefundVendorCreditDetailDrawer from '@/containers/Drawers/RefundVendorCreditDetailDrawer';
 import WarehouseTransferDetailDrawer from '@/containers/Drawers/WarehouseTransferDetailDrawer';
 import TaxRateDetailsDrawer from '@/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsDrawer';
+import CategorizeTransactionDrawer from '@/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionDrawer';
 
 import { DRAWERS } from '@/constants/drawers';
-import CategorizeTransactionDrawer from '@/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionDrawer';
 
 /**
  * Drawers container of the dashboard.

packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx

@@ -16,8 +16,7 @@ export const useManualJournalsColumns = () => {
       {
         id: 'date',
         Header: intl.get('date'),
-        accessor: 'date',
+        accessor: 'formatted_date',
-        Cell: FormatDateCell,
         width: 115,
         className: 'date',
         clickable: true,
@@ -66,8 +65,7 @@ export const useManualJournalsColumns = () => {
       {
         id: 'created_at',
         Header: intl.get('created_at'),
-        accessor: 'created_at',
+        accessor: 'formatted_created_at',
-        Cell: FormatDateCell,
         width: 125,
         clickable: true,
       },

packages/webapp/src/containers/Drawers/BillDrawer/BillDetailHeader.tsx

@@ -41,19 +41,23 @@ export default function BillDetailHeader() {
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem label={intl.get('bill_date')}>
-              <FormatDate value={bill.bill_date} />
+              {bill.formatted_bill_date}
             </DetailItem>
+
             <DetailItem label={intl.get('due_date')}>
-              <FormatDate value={bill.due_date} />
+              {bill.formatted_due_date}
             </DetailItem>
+
             <DetailItem label={intl.get('vendor_name')}>
               <VendorDrawerLink vendorId={bill.vendor_id}>
                 {bill.vendor?.display_name}
               </VendorDrawerLink>
             </DetailItem>
+
             <DetailItem label={intl.get('bill.details.bill_number')}>
               {defaultTo(bill.bill_number, '-')}
             </DetailItem>
+
             <ExchangeRateDetailItem
               exchangeRate={bill?.exchange_rate}
               toCurrency={bill?.currency_code}
@@ -75,7 +79,7 @@ export default function BillDetailHeader() {
             />
             <DetailItem
               label={intl.get('bill.details.created_at')}
-              children={<FormatDate value={bill.created_at} />}
+              children={bill.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx

@@ -46,7 +46,7 @@ export default function CashflowTransactionDrawerHeader() {
             </DetailItem>
 
             <DetailItem label={<T id={'date'} />}>
-              <FormatDate value={cashflowTransaction.date} />
+              {cashflowTransaction.formatted_date}
             </DetailItem>
 
             <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx

@@ -5,13 +5,11 @@ import styled from 'styled-components';
 import { defaultTo } from 'lodash';
 
 import {
-  FormatDate,
   T,
   Row,
   Col,
   DetailsMenu,
   DetailItem,
-  ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
   CustomerDrawerLink,
@@ -47,7 +45,7 @@ export default function CreditNoteDetailHeader() {
             <DetailItem
               label={intl.get('credit_note.drawer.label_credit_note_date')}
             >
-              <FormatDate value={creditNote.formatted_credit_note_date} />
+              {creditNote.formatted_credit_note_date}
             </DetailItem>
 
             <DetailItem
@@ -85,7 +83,7 @@ export default function CreditNoteDetailHeader() {
             />
             <DetailItem
               label={<T id={'credit_note.drawer.label_created_at'} />}
-              children={<FormatDate value={creditNote.created_at} />}
+              children={creditNote.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx

@@ -81,7 +81,7 @@ export default function EstimateDetailHeader() {
             />
             <DetailItem
               label={<T id={'estimate.details.created_at'} />}
-              children={<FormatDate value={estimate.created_at} />}
+              children={estimate.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
 import styled from 'styled-components';
 import { defaultTo } from 'lodash';
 
@@ -42,7 +41,7 @@ export default function ExpenseDrawerHeader() {
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem name={'date'} label={<T id={'date'} />}>
-              {moment(expense.payment_date).format('YYYY MMM DD')}
+              {expense.formatted_payment_date}
             </DetailItem>
 
             <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
@@ -66,11 +65,11 @@ export default function ExpenseDrawerHeader() {
             minLabelSize={'180px'}
           >
             <DetailItem label={<T id={'published_at'} />}>
-              <FormatDate value={expense.published_at} />
+              {expense.formatted_date}
             </DetailItem>
 
             <DetailItem label={<T id={'created_at'} />}>
-              <FormatDate value={expense.created_at} />
+              {expense.formatted_created_at}
             </DetailItem>
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx

@@ -43,11 +43,11 @@ export default function InvoiceDetailHeader() {
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem label={intl.get('invoice_date')}>
-              <FormatDate value={invoice.invoice_date} />
+              {invoice.invoice_date_formatted}
             </DetailItem>
 
             <DetailItem label={intl.get('due_date')}>
-              <FormatDate value={invoice.due_date} />
+              {invoice.due_date_formatted}
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
@@ -86,7 +86,7 @@ export default function InvoiceDetailHeader() {
             />
             <DetailItem
               label={intl.get('invoice.details.created_at')}
-              children={<FormatDate value={invoice.created_at} />}
+              children={invoice.created_at_formatted}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx

@@ -37,7 +37,7 @@ export default function PaymentMadeDetailHeader() {
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem
               label={intl.get('payment_date')}
-              children={<FormatDate value={paymentMade.payment_date} />}
+              children={paymentMade.formatted_payment_date}
             />
             <DetailItem
               label={intl.get('payment_made.details.payment_number')}
@@ -58,6 +58,7 @@ export default function PaymentMadeDetailHeader() {
             />
           </DetailsMenu>
         </Col>
+
         <Col xs={6}>
           <DetailsMenu
             textAlign={'right'}
@@ -70,7 +71,7 @@ export default function PaymentMadeDetailHeader() {
             />
             <DetailItem
               label={intl.get('created_at')}
-              children={<FormatDate value={paymentMade.created_at} />}
+              children={paymentMade.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
-
 import { getColumnWidth } from '@/utils';
 import { FormatNumberCell } from '@/components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
@@ -17,7 +15,7 @@ export const usePaymentMadeEntriesColumns = () => {
     () => [
       {
         Header: intl.get('date'),
-        accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+        accessor: 'bill.formatted_bill_date',
         width: 100,
         disableSortBy: true,
         className: 'date',

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -5,7 +5,6 @@ import { defaultTo } from 'lodash';
 import {
   Row,
   Col,
-  FormatDate,
   DetailsMenu,
   DetailItem,
   CommercialDocHeader,
@@ -36,7 +35,7 @@ export default function PaymentReceiveDetailHeader() {
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem
               label={intl.get('payment_date')}
-              children={<FormatDate value={paymentReceive.payment_date} />}
+              children={paymentReceive.formatted_payment_date}
             />
             <DetailItem
               label={intl.get('payment_receive.details.payment_number')}
@@ -71,7 +70,7 @@ export default function PaymentReceiveDetailHeader() {
             />
             <DetailItem
               label={intl.get('created_at')}
-              children={<FormatDate value={paymentReceive.created_at} />}
+              children={paymentReceive.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
 import {
   Button,
   Popover,
@@ -26,7 +25,7 @@ export const usePaymentReceiveEntriesColumns = () => {
     () => [
       {
         Header: intl.get('date'),
-        accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
+        accessor: 'invoice.invoice_date_formatted',
         width: 100,
         className: 'date',
         disableSortBy: true,

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx

@@ -54,11 +54,11 @@ export default function ReceiptDetailHeader() {
             </DetailItem>
             <DetailItem
               label={intl.get('receipt_date')}
-              children={<FormatDate value={receipt.receipt_date} />}
+              children={receipt.formatted_receipt_date}
             />
             <DetailItem
               label={intl.get('closed_date')}
-              children={<FormatDate value={receipt.closed_at_date} />}
+              children={receipt.formatted_closed_at_date}
             />
             <ExchangeRateDetailItem
               exchangeRate={receipt?.exchange_rate}
@@ -82,7 +82,7 @@ export default function ReceiptDetailHeader() {
             />
             <DetailItem
               label={intl.get('receipt.details.created_at')}
-              children={<FormatDate value={receipt.created_at} />}
+              children={receipt.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx

@@ -42,7 +42,7 @@ export default function VendorCreditDetailHeader() {
             <DetailItem
               label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
             >
-              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+              {vendorCredit.formatted_vendor_credit_date}
             </DetailItem>
             <DetailItem
               label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
@@ -78,7 +78,7 @@ export default function VendorCreditDetailHeader() {
             />
             <DetailItem
               label={<T id={'vendor_credit.drawer.label_created_at'} />}
-              children={<FormatDate value={vendorCredit.created_at} />}
+              children={vendorCredit.formatted_created_at}
             />
           </DetailsMenu>
         </Col>

packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx

@@ -17,13 +17,7 @@ import clsx from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import { ExpenseAction, AbilitySubject } from '@/constants/abilityOption';
-import {
+import { FormattedMessage as T, Icon, If, Can } from '@/components';
-  FormatDateCell,
-  FormattedMessage as T,
-  Icon,
-  If,
-  Can,
-} from '@/components';
 import { safeCallback } from '@/utils';
 
 /**
@@ -137,8 +131,7 @@ export function useExpensesTableColumns() {
       {
         id: 'payment_date',
         Header: intl.get('payment_date'),
-        accessor: 'payment_date',
+        accessor: 'formatted_date',
-        Cell: FormatDateCell,
         width: 140,
         className: 'payment_date',
         clickable: true,

packages/webapp/src/containers/JournalEntriesTable/utils.tsx

@@ -1,16 +1,13 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
-
 
 export const useGLEntriesTableColumns = () => {
   return React.useMemo(
     () => [
       {
         Header: intl.get('date'),
-        accessor: ({ formatted_date }) =>
+        accessor: 'date.formatted_date',
-          moment(formatted_date).format('YYYY MMM DD'),
         width: 140,
         className: 'date',
         textOverview: true,

packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx

@@ -161,8 +161,7 @@ export function useBillsTableColumns() {
       {
         id: 'bill_date',
         Header: intl.get('bill_date'),
-        accessor: 'bill_date',
+        accessor: 'formatted_bill_date',
-        Cell: FormatDateCell,
         width: 110,
         className: 'bill_date',
         clickable: true,

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx

@@ -5,14 +5,7 @@ import clsx from 'classnames';
 import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { CLASSES } from '@/constants/classes';
-import {
+import { FormattedMessage as T, Choose, If, Icon, Can } from '@/components';
-  FormatDateCell,
-  FormattedMessage as T,
-  Choose,
-  If,
-  Icon,
-  Can,
-} from '@/components';
 import { safeCallback } from '@/utils';
 import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
 
@@ -119,7 +112,6 @@ export function useVendorsCreditNoteTableColumns() {
         id: 'credit_date',
         Header: intl.get('date'),
         accessor: 'formatted_vendor_credit_date',
-        Cell: FormatDateCell,
         width: 110,
         className: 'credit_date',
         clickable: true,

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/components.tsx

@@ -11,7 +11,7 @@ import {
   Position,
 } from '@blueprintjs/core';
 
-import { Icon, Money, FormatDateCell, Can } from '@/components';
+import { Icon, Money, Can } from '@/components';
 import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 
 import { safeCallback } from '@/utils';
@@ -29,7 +29,7 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
+    <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
@@ -79,8 +79,7 @@ export function usePaymentMadesTableColumns() {
       {
         id: 'payment_date',
         Header: intl.get('payment_date'),
-        Cell: FormatDateCell,
+        accessor: 'formatted_payment_date',
-        accessor: 'payment_date',
         width: 140,
         className: 'payment_date',
         clickable: true,

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx

@@ -5,7 +5,6 @@ import clsx from 'classnames';
 import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { CLASSES } from '@/constants/classes';
 import {
-  FormatDateCell,
   FormattedMessage as T,
   Choose,
   If,
@@ -112,7 +111,6 @@ export function useCreditNoteTableColumns() {
         id: 'credit_date',
         Header: intl.get('credit_note.column.credit_date'),
         accessor: 'formatted_credit_note_date',
-        Cell: FormatDateCell,
         width: 110,
         className: 'credit_date',
         clickable: true,

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx

@@ -164,8 +164,7 @@ export function useEstiamtesTableColumns() {
       {
         id: 'estimate_date',
         Header: intl.get('estimate_date'),
-        accessor: 'estimate_date',
+        accessor: 'formatted_estimate_date',
-        Cell: FormatDateCell,
         width: 140,
         className: 'estimate_date',
         clickable: true,

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -128,7 +128,7 @@ export function ActionsMenu({
     onQuick,
     onViewDetails,
     onPrint,
-    onSendMail
+    onSendMail,
   },
   row: { original },
 }) {
@@ -202,8 +202,7 @@ export function useInvoicesTableColumns() {
       {
         id: 'invoice_date',
         Header: intl.get('invoice_date'),
-        accessor: 'invoice_date',
+        accessor: 'invoice_date_formatted',
-        Cell: FormatDateCell,
         width: 110,
         className: 'invoice_date',
         clickable: true,

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx

@@ -90,8 +90,7 @@ export function usePaymentReceivesColumns() {
       {
         id: 'payment_date',
         Header: intl.get('payment_date'),
-        accessor: 'payment_date',
+        accessor: 'formatted_payment_date',
-        Cell: FormatDateCell,
         width: 140,
         className: 'payment_date',
         clickable: true,

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx

@@ -119,8 +119,7 @@ export function useReceiptsTableColumns() {
       {
         id: 'receipt_date',
         Header: intl.get('receipt_date'),
-        accessor: 'receipt_date',
+        accessor: 'formatted_receipt_date',
-        Cell: FormatDateCell,
         width: 140,
         className: 'receipt_date',
         clickable: true,