diff --git a/client/src/common/classes.js b/client/src/common/classes.js
index 459138ca2..f20587caa 100644
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -89,6 +89,7 @@ const CLASSES = {
...Classes,
CARD: 'card',
ALIGN_RIGHT: 'align-right',
+ FONT_BOLD: 'font-bold',
};
export {
diff --git a/client/src/components/AppIntlLoader.js b/client/src/components/AppIntlLoader.js
index d32da21e8..68623edaf 100644
--- a/client/src/components/AppIntlLoader.js
+++ b/client/src/components/AppIntlLoader.js
@@ -5,7 +5,9 @@ import intl from 'react-intl-universal';
import { find } from 'lodash';
import rtlDetect from 'rtl-detect';
import * as R from 'ramda';
+
import { AppIntlProvider } from './AppIntlProvider';
+
import withDashboardActions from '../containers/Dashboard/withDashboardActions';
import withDashboard from '../containers/Dashboard/withDashboard';
@@ -56,6 +58,10 @@ function useDocumentDirectionModifier(locale, isRTL) {
}, [isRTL, locale]);
}
+function transformMomentLocale(currentLocale) {
+ return currentLocale === 'ar' ? 'ar-ly' : currentLocale;
+}
+
/**
* Application Intl loader.
*/
@@ -84,7 +90,7 @@ function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
});
})
.then(() => {
- moment.locale(currentLocale);
+ moment.locale(transformMomentLocale(currentLocale));
setIsLocalsLoading(false);
});
}, [currentLocale, setIsLocalsLoading]);
diff --git a/client/src/components/Utils/FormatDate.js b/client/src/components/Utils/FormatDate.js
new file mode 100644
index 000000000..9c875af96
--- /dev/null
+++ b/client/src/components/Utils/FormatDate.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+/**
+ * Format the given date.
+ */
+export function FormatDate({ value, format = 'YYYY MMM DD' }) {
+ const localizedFormat = intl.get(`date_format.${format}`);
+
+ return moment().format(localizedFormat);
+}
+
+/**
+ * Format date table cell.
+ */
+export function FormatDateCell({ value, column: { formatDate } }) {
+ return ;
+}
diff --git a/client/src/components/Utils/index.js b/client/src/components/Utils/index.js
index f7ab63d01..f1104e044 100644
--- a/client/src/components/Utils/index.js
+++ b/client/src/components/Utils/index.js
@@ -1,3 +1,4 @@
-export * from './FormatNumber';
\ No newline at end of file
+export * from './FormatNumber';
+export * from './FormatDate';
\ No newline at end of file
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 7249bbacc..836e7706f 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -79,6 +79,7 @@ export * from './Drawer';
export * from './Forms';
export * from './MultiSelectTaggable'
export * from './Utils/FormatNumber';
+export * from './Utils/FormatDate';
const Hint = FieldHint;
diff --git a/client/src/containers/Accounting/JournalsLanding/components.js b/client/src/containers/Accounting/JournalsLanding/components.js
index 7a4f70bf7..af986e522 100644
--- a/client/src/containers/Accounting/JournalsLanding/components.js
+++ b/client/src/containers/Accounting/JournalsLanding/components.js
@@ -11,12 +11,11 @@ import {
MenuDivider,
Popover,
} from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import moment from 'moment';
-import { Choose, Money, If, Icon } from 'components';
-import { safeCallback } from 'utils';
import intl from 'react-intl-universal';
+import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
+import { safeCallback } from 'utils';
+
/**
* Amount accessor.
*/
@@ -105,13 +104,6 @@ export const StatusAccessor = (row) => {
);
};
-/**
- * Date accessor.
- */
-export const DateAccessor = (row) => {
- return moment(row.date).format('YYYY MMM DD');
-};
-
/**
* Note column accessor.
*/
diff --git a/client/src/containers/Accounting/JournalsLanding/utils.js b/client/src/containers/Accounting/JournalsLanding/utils.js
index b616edf08..b02a05ead 100644
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -1,7 +1,10 @@
import React from 'react';
import intl from 'react-intl-universal';
-import moment from 'moment';
-import { NoteAccessor, StatusAccessor, DateAccessor } from './components';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../common/classes';
+import { FormatDateCell } from '../../../components';
+import { NoteAccessor, StatusAccessor } from './components';
/**
* Retrieve the manual journals columns.
@@ -12,7 +15,8 @@ export const useManualJournalsColumns = () => {
{
id: 'date',
Header: intl.get('date'),
- accessor: DateAccessor,
+ accessor: 'date',
+ Cell: FormatDateCell,
width: 115,
className: 'date',
clickable: true,
@@ -21,10 +25,10 @@ export const useManualJournalsColumns = () => {
id: 'amount',
Header: intl.get('amount'),
accessor: 'formatted_amount',
- className: 'amount',
width: 115,
clickable: true,
align: 'right',
+ className: clsx(CLASSES.FONT_BOLD),
},
{
id: 'journal_number',
@@ -39,7 +43,6 @@ export const useManualJournalsColumns = () => {
Header: intl.get('journal_type'),
accessor: 'journal_type',
width: 110,
- className: 'journal_type',
clickable: true,
},
{
@@ -47,7 +50,6 @@ export const useManualJournalsColumns = () => {
Header: intl.get('publish'),
accessor: (row) => StatusAccessor(row),
width: 95,
- className: 'status',
clickable: true,
},
{
@@ -56,15 +58,14 @@ export const useManualJournalsColumns = () => {
accessor: NoteAccessor,
disableSortBy: true,
width: 85,
- className: 'note',
clickable: true,
},
{
id: 'created_at',
Header: intl.get('created_at'),
- accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
+ accessor: 'created_at',
+ Cell: FormatDateCell,
width: 125,
- className: 'created_at',
clickable: true,
},
],
diff --git a/client/src/containers/Drawers/AccountDrawer/utils.js b/client/src/containers/Drawers/AccountDrawer/utils.js
index bcaa3bb88..6a692e17d 100644
--- a/client/src/containers/Drawers/AccountDrawer/utils.js
+++ b/client/src/containers/Drawers/AccountDrawer/utils.js
@@ -1,27 +1,21 @@
import intl from 'react-intl-universal';
import React from 'react';
-import moment from 'moment';
+import { FormatDateCell } from '../../../components';
import { isBlank } from 'utils';
/**
* Debit/credit table cell.
*/
function DebitCreditTableCell({ value, payload: { account } }) {
- return !isBlank(value) && value !== 0
- ? //
- account.formatted_amount
- : null;
+ return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
}
/**
* Running balance table cell.
*/
function RunningBalanceTableCell({ value, payload: { account } }) {
- return (
- //
- account.formatted_amount
- );
+ return account.formatted_amount;
}
/**
@@ -32,7 +26,8 @@ export const useAccountReadEntriesColumns = () =>
() => [
{
Header: intl.get('transaction_date'),
- accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
+ accessor: 'date',
+ Cell: FormatDateCell,
width: 110,
textOverview: true,
},
diff --git a/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js b/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
index cd07bfeb8..30baef9eb 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
-import { DetailsMenu, DetailItem } from 'components';
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
import { useBillDrawerContext } from './BillDrawerProvider';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
@@ -27,7 +27,7 @@ export default function BillDetailHeader() {
/>
}
/>
}
/>
@@ -50,7 +50,7 @@ export default function BillDetailHeader() {
/>
}
/>
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
index a92823f4f..8d1170601 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
-import { T, DetailsMenu, DetailItem } from 'components';
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
@@ -45,7 +45,7 @@ export default function EstimateDetailHeader() {
/>
}
- children={'2020 Ang 21'}
+ children={}
/>
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
index 3fd60dd58..9714cbb6e 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
-import { DetailsMenu, DetailItem } from 'components';
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
@@ -30,11 +30,11 @@ export default function InvoiceDetailHeader() {
/>
}
/>
}
/>
@@ -49,7 +49,7 @@ export default function InvoiceDetailHeader() {
/>
}
/>
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index fe5c311a8..84e182164 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -1,11 +1,9 @@
import React from 'react';
import intl from 'react-intl-universal';
-import moment from 'moment';
import clsx from 'classnames';
import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem } from 'components';
-
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
@@ -36,7 +34,7 @@ export default function PaymentMadeDetailHeader() {
/>
}
/>
@@ -47,7 +45,7 @@ export default function PaymentMadeDetailHeader() {
/>
}
/>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index 6fd9f8b76..d57659edf 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -1,12 +1,9 @@
import React from 'react';
import intl from 'react-intl-universal';
-import moment from 'moment';
import clsx from 'classnames';
-
import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem } from 'components';
-
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
@@ -40,7 +37,7 @@ export default function PaymentReceiveDetailHeader() {
/>
}
/>
@@ -51,7 +48,7 @@ export default function PaymentReceiveDetailHeader() {
/>
}
/>
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
index 610050a9b..60889d43e 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
-import { DetailsMenu, DetailItem } from 'components';
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
@@ -31,11 +31,11 @@ export default function ReceiptDetailHeader() {
/>
}
/>
}
/>
@@ -50,7 +50,7 @@ export default function ReceiptDetailHeader() {
/>
}
/>
diff --git a/client/src/containers/Expenses/ExpensesLanding/components.js b/client/src/containers/Expenses/ExpensesLanding/components.js
index 90380f78e..f288c1fc2 100644
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -11,10 +11,15 @@ import {
Menu,
MenuDivider,
} from '@blueprintjs/core';
-import moment from 'moment';
import intl from 'react-intl-universal';
-import { FormattedMessage as T, Money, Icon, If } from 'components';
+import {
+ FormatDateCell,
+ FormattedMessage as T,
+ Money,
+ Icon,
+ If,
+} from 'components';
import { safeCallback } from 'utils';
/**
@@ -128,7 +133,8 @@ export function useExpensesTableColumns() {
{
id: 'payment_date',
Header: intl.get('payment_date'),
- accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
+ accessor: 'payment_date',
+ Cell: FormatDateCell,
width: 140,
className: 'payment_date',
clickable: true,
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
index 327a1cc56..4a8b3a8c2 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -4,16 +4,19 @@ import {
Menu,
MenuItem,
MenuDivider,
- Popover,
- Button,
- Position,
Tag,
ProgressBar,
} from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import moment from 'moment';
-import { FormattedMessage as T, Icon, If, Choose, Money } from 'components';
+import {
+ FormatDateCell,
+ FormattedMessage as T,
+ Icon,
+ If,
+ Choose,
+ Money,
+} from 'components';
import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
/**
@@ -136,17 +139,6 @@ export function StatusAccessor(bill) {
);
}
-export function ActionsCell(props) {
- return (
- }
- position={Position.RIGHT_BOTTOM}
- >
- } />
-
- );
-}
-
/**
* Retrieve bills table columns.
*/
@@ -156,7 +148,8 @@ export function useBillsTableColumns() {
{
id: 'bill_date',
Header: intl.get('bill_date'),
- accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+ accessor: 'bill_date',
+ Cell: FormatDateCell,
width: 110,
className: 'bill_date',
clickable: true,
@@ -197,7 +190,8 @@ export function useBillsTableColumns() {
{
id: 'due_date',
Header: intl.get('due_date'),
- accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+ accessor: 'due_date',
+ Cell: FormatDateCell,
width: 110,
className: 'due_date',
clickable: true,
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index 29e521b80..9c27a10c5 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -1,5 +1,4 @@
import React from 'react';
-import moment from 'moment';
import {
Intent,
Button,
@@ -11,13 +10,9 @@ import {
} from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import { Icon, Money } from 'components';
+import { Icon, Money, FormatDateCell } from 'components';
import { safeCallback } from 'utils';
-export function DateCell({ value }) {
- return moment(value).format('YYYY MMM DD');
-}
-
export function AmountAccessor(row) {
return ;
}
@@ -75,7 +70,7 @@ export function usePaymentMadesTableColumns() {
{
id: 'payment_date',
Header: intl.get('payment_date'),
- Cell: DateCell,
+ Cell: FormatDateCell,
accessor: 'payment_date',
width: 140,
className: 'payment_date',
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
index 1a63a86fa..6eae9fba8 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -1,18 +1,17 @@
import React from 'react';
-import {
- Intent,
- Tag,
- Button,
- Popover,
- Menu,
- MenuItem,
- MenuDivider,
- Position,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
-import { FormattedMessage as T, Money, Choose, Icon, If } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+ FormatDateCell,
+ FormattedMessage as T,
+ Money,
+ Choose,
+ Icon,
+ If,
+} from 'components';
import { safeCallback } from 'utils';
/**
@@ -130,25 +129,10 @@ export function ActionsMenu({
);
}
-function DateCell({ value }) {
- return moment(value).format('YYYY MMM DD');
-}
-
function AmountAccessor({ amount, currency_code }) {
return ;
}
-function ActionsCell(props) {
- return (
- }
- position={Position.RIGHT_BOTTOM}
- >
- } />
-
- );
-}
-
export function useEstiamtesTableColumns() {
return React.useMemo(
() => [
@@ -156,7 +140,7 @@ export function useEstiamtesTableColumns() {
id: 'estimate_date',
Header: intl.get('estimate_date'),
accessor: 'estimate_date',
- Cell: DateCell,
+ Cell: FormatDateCell,
width: 140,
className: 'estimate_date',
clickable: true,
@@ -175,7 +159,7 @@ export function useEstiamtesTableColumns() {
id: 'expiration_date',
Header: intl.get('expiration_date'),
accessor: 'expiration_date',
- Cell: DateCell,
+ Cell: FormatDateCell,
width: 140,
className: 'expiration_date',
clickable: true,
@@ -198,6 +182,7 @@ export function useEstiamtesTableColumns() {
width: 140,
align: 'right',
clickable: true,
+ className: clsx(CLASSES.FONT_BOLD),
},
{
id: 'status',
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index a25424ae2..8bac61b39 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -8,9 +8,17 @@ import {
ProgressBar,
} from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
-import { FormattedMessage as T, AppToaster, Choose, If, Icon } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+ FormatDateCell,
+ FormattedMessage as T,
+ AppToaster,
+ Choose,
+ If,
+ Icon,
+} from 'components';
import { formattedAmount, safeCallback, calculateStatus } from 'utils';
export const statusAccessor = (row) => {
@@ -150,7 +158,8 @@ export function useInvoicesTableColumns() {
{
id: 'invoice_date',
Header: intl.get('invoice_date'),
- accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+ accessor: 'invoice_date',
+ Cell: FormatDateCell,
width: 110,
className: 'invoice_date',
clickable: true,
@@ -183,6 +192,7 @@ export function useInvoicesTableColumns() {
align: 'right',
clickable: true,
textOverview: true,
+ className: clsx(CLASSES.FONT_BOLD),
},
{
id: 'status',
@@ -195,7 +205,8 @@ export function useInvoicesTableColumns() {
{
id: 'due_date',
Header: intl.get('due_date'),
- accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+ accessor: 'due_date',
+ Cell: FormatDateCell,
width: 110,
className: 'due_date',
clickable: true,
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index 4611db50d..06053275f 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -9,10 +9,11 @@ import {
Position,
} from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
-import { Money, Icon } from 'components';
+import { FormatDateCell, Money, Icon } from 'components';
import { safeCallback } from 'utils';
+import { CLASSES } from '../../../../common/classes';
/**
* Table actions menu.
@@ -56,13 +57,6 @@ export function AmountAccessor(row) {
return ;
}
-/**
- * Payment date accessor.
- */
-export function PaymentDateAccessor(row) {
- return moment(row.payment_date).format('YYYY MMM DD');
-}
-
/**
* Actions cell.
*/
@@ -86,7 +80,8 @@ export function usePaymentReceivesColumns() {
{
id: 'payment_date',
Header: intl.get('payment_date'),
- accessor: PaymentDateAccessor,
+ accessor: 'payment_date',
+ Cell: FormatDateCell,
width: 140,
className: 'payment_date',
clickable: true,
@@ -109,6 +104,7 @@ export function usePaymentReceivesColumns() {
align: 'right',
clickable: true,
textOverview: true,
+ className: clsx(CLASSES.FONT_BOLD),
},
{
id: 'payment_receive_no',
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 4eee826f4..7f7f0cbda 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -11,10 +11,11 @@ import {
Tag,
Button,
} from '@blueprintjs/core';
-import moment from 'moment';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
import { safeCallback } from 'utils';
-import { Choose, Money, Icon, If } from 'components';
+import { FormatDateCell, Choose, Money, Icon, If } from 'components';
export function ActionsMenu({
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -99,7 +100,8 @@ export function useReceiptsTableColumns() {
{
id: 'receipt_date',
Header: intl.get('receipt_date'),
- accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
+ accessor: 'receipt_date',
+ Cell: FormatDateCell,
width: 140,
className: 'receipt_date',
clickable: true,
@@ -140,6 +142,7 @@ export function useReceiptsTableColumns() {
align: 'right',
clickable: true,
textOverview: true,
+ className: clsx(CLASSES.FONT_BOLD),
},
{
id: 'status',
diff --git a/client/src/lang/ar/index.json b/client/src/lang/ar/index.json
index 575652cef..bed8a90eb 100644
--- a/client/src/lang/ar/index.json
+++ b/client/src/lang/ar/index.json
@@ -1352,6 +1352,9 @@
"payment_receive.auto_increment.manually": "يتم تعيين سندات الدفع يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
"auto_increment.field.manually": "سأدخلها يدويًا في كل مرة",
"auto_increment.field.manual_this_transaction": "إدخال يدوي لهذه العملية فقط.",
- "auto_increment.field.auto": "زيادة الرقم العملية تلقائيًا."
+ "auto_increment.field.auto": "زيادة الرقم العملية تلقائيًا.",
+ "date_format": {
+ "YYYY MMM DD": "DD MMM YYYY"
+ }
}
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index fc5514fe8..8d554b936 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1323,5 +1323,8 @@
"payment_receive.auto_increment.manually": "Yor payment numbers are set on manual mode. Are you sure chaning this settings?",
"auto_increment.field.manually": "I will enter them manually each time",
"auto_increment.field.manual_this_transaction": "Manual entering for this transaction.",
- "auto_increment.field.auto": "Auto-incrementing number."
+ "auto_increment.field.auto": "Auto-incrementing number.",
+ "date_format": {
+ "YYYY MMM DD": "YYYY MMM DD"
+ }
}
\ No newline at end of file
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index a5af32cce..820147560 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -281,4 +281,8 @@ html[lang^="ar"] {
.align-right{
text-align: right;
+}
+
+.font-bold{
+ font-weight: 600;
}
\ No newline at end of file