BIG-71: localize moment date formats.

client/src/common/classes.js

@@ -89,6 +89,7 @@ const CLASSES = {
   ...Classes,
   CARD: 'card',
   ALIGN_RIGHT: 'align-right',
+  FONT_BOLD: 'font-bold',
 };
 
 export {

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]);

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 <FormatDate value={value} {...formatDate} />;
+}

client/src/components/Utils/index.js

@@ -1,3 +1,4 @@
 
 
-export * from './FormatNumber';
+export * from './FormatNumber';
+export * from './FormatDate';

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;
 

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

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,
       },
     ],

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
-    ? // <Money amount={value} currency={account.currency_code} />
-      account.formatted_amount
-    : null;
+  return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
 }
 
 /**
  * Running balance table cell.
  */
 function RunningBalanceTableCell({ value, payload: { account } }) {
-  return (
-    // <Money amount={value} currency={account.currency_code} />
-    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,
       },

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() {
         />
         <DetailItem
           label={intl.get('bill_date')}
-          children={bill.formatted_bill_date}
+          children={<FormatDate value={bill.bill_date} />}
         />
         <DetailItem
           label={intl.get('vendor_name')}
@@ -35,7 +35,7 @@ export default function BillDetailHeader() {
         />
         <DetailItem
           label={intl.get('due_date')}
-          children={bill.formatted_due_date}
+          children={<FormatDate value={bill.due_date} />}
         />
       </DetailsMenu>
 
@@ -50,7 +50,7 @@ export default function BillDetailHeader() {
         />
         <DetailItem
           label={intl.get('bill.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={bill.created_at} />}
         />
       </DetailsMenu>
     </div>

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() {
         />
         <DetailItem
           label={<T id={'estimate.details.created_at'} />}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={estimate.created_at} />}
         />
       </DetailsMenu>
     </div>

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() {
         />
         <DetailItem
           label={intl.get('invoice_date')}
-          children={invoice.formatted_invoice_date}
+          children={<FormatDate value={invoice.invoice_date} />}
         />
         <DetailItem
           label={intl.get('due_date')}
-          children={invoice.formatted_due_date}
+          children={<FormatDate value={invoice.due_date} />}
         />
       </DetailsMenu>
 
@@ -49,7 +49,7 @@ export default function InvoiceDetailHeader() {
         />
         <DetailItem
           label={intl.get('invoice.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={invoice.created_at} />}
         />
       </DetailsMenu>
     </div>

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() {
         />
         <DetailItem
           label={intl.get('payment_date')}
-          children={paymentMade.formatted_payment_date}
+          children={<FormatDate value={paymentMade.payment_date} />}
         />
       </DetailsMenu>
 
@@ -47,7 +45,7 @@ export default function PaymentMadeDetailHeader() {
         />
         <DetailItem
           label={intl.get('created_at')}
-          children={moment(paymentMade.created_at).format('YYYY MMM DD')}
+          children={<FormatDate value={paymentMade.created_at} />}
         />
       </DetailsMenu>
     </div>

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() {
         />
         <DetailItem
           label={intl.get('payment_date')}
-          children={paymentReceive.formatted_payment_date}
+          children={<FormatDate value={paymentReceive.payment_date} />}
         />
       </DetailsMenu>
 
@@ -51,7 +48,7 @@ export default function PaymentReceiveDetailHeader() {
         />
         <DetailItem
           label={intl.get('created_at')}
-          children={moment(paymentReceive.created_at).format('YYYY MMM DD')}
+          children={<FormatDate value={paymentReceive.created_at} />}
         />
       </DetailsMenu>
     </div>

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() {
         />
         <DetailItem
           label={intl.get('receipt_date')}
-          children={receipt.formatted_receipt_date}
+          children={<FormatDate value={receipt.receipt_date} />}
         />
         <DetailItem
           label={intl.get('closed_date')}
-          children={defaultTo(receipt.formatted_closed_at_date, '-')}
+          children={<FormatDate value={receipt.closed_at_date} />}
         />
       </DetailsMenu>
 
@@ -50,7 +50,7 @@ export default function ReceiptDetailHeader() {
         />
         <DetailItem
           label={intl.get('receipt.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={receipt.created_at} />}
         />
       </DetailsMenu>
     </div>

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,

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 (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 /**
  * 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,

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 <Money amount={row.amount} currency={row.currency_code} />;
 }
@@ -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',

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 <Money amount={amount} currency={currency_code} />;
 }
 
-function ActionsCell(props) {
-  return (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 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',

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,

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 <Money amount={row.amount} currency={row.currency_code} />;
 }
 
-/**
- * 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',

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

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"
+  }
 }
 

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"
+  }
 }

client/src/style/App.scss

@@ -281,4 +281,8 @@ html[lang^="ar"] {
 
 .align-right{
   text-align: right;
+}
+
+.font-bold{
+  font-weight: 600;
 }