feat: format created at date

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/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

@@ -65,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

@@ -79,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/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,
@@ -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

@@ -65,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

@@ -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

@@ -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/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -5,7 +5,6 @@ import { defaultTo } from 'lodash';
 import {
   Row,
   Col,
-  FormatDate,
   DetailsMenu,
   DetailItem,
   CommercialDocHeader,
@@ -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/ReceiptDetailDrawer/ReceiptDetailHeader.tsx

@@ -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

@@ -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,