feat: keyboardshortcuts dialog.

client/src/common/keyboardShortcutsOptions.js

@@ -0,0 +1,102 @@
+export default [
+  {
+    shortcut_key: 'Shift + I',
+    description: 'Jump to the invoices.',
+  },
+  {
+    shortcut_key: 'Shift + E',
+    description: 'Jump to the estimates.',
+  },
+  {
+    shortcut_key: 'Shift + R',
+    description: 'Jump to the receipts.',
+  },
+  {
+    shortcut_key: 'Shift + X',
+    description: 'Jump to the expenses.',
+  },
+  {
+    shortcut_key: 'Shift + C',
+    description: 'Jump to the customers.',
+  },
+  {
+    shortcut_key: 'Shift + V',
+    description: 'Jump to the vendors.',
+  },
+  {
+    shortcut_key: 'Shift + A',
+    description: 'Jump to the Chart of Accounts.',
+  },
+  {
+    shortcut_key: 'Shift + B',
+    description: 'Jump to the bills.',
+  },
+  {
+    shortcut_key: 'Shift + M',
+    description: 'Jump to the Manual Journals.',
+  },
+  {
+    shortcut_key: 'Shift + W',
+    description: 'Jump to the items.',
+  },
+  {
+    shortcut_key: 'Shift + 1',
+    description: 'Jump to the Balance Sheet.',
+  },
+  {
+    shortcut_key: 'Shift + 2',
+    description: 'Jump to the Profit Loss Sheet.',
+  },
+  {
+    shortcut_key: 'Shift + 3',
+    description: 'Jump to the Journal Sheet.',
+  },
+  {
+    shortcut_key: 'Shift + 4',
+    description: 'Jump to the General Ledger Sheet.',
+  },
+  {
+    shortcut_key: 'Shift + 5',
+    description: 'Jump to the Trial Balance Sheet.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + I ',
+    description: 'Create a new invoice	.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + E ',
+    description: 'Create a new estimate	.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + R ',
+    description: 'Create a new receipt	.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + X ',
+    description: 'Create a new expense.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + C ',
+    description: 'Create a new customer.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + V ',
+    description: 'Create a new vendor.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + B ',
+    description: 'Create a new bill.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + M ',
+    description: 'Create a new Make Journal.',
+  },
+  {
+    shortcut_key: 'Ctrl + Shift  + W ',
+    description: 'Create a new item.',
+  },
+  {
+    shortcut_key: 'Ctrl + / ',
+    description: 'Close and open sidebar .',
+  },
+];

client/src/components/DialogsContainer.js

@@ -8,6 +8,7 @@ import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
 
 import InventoryAdjustmentDialog from 'containers/Dialogs/InventoryAdjustmentFormDialog';
 import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog';
+import KeyboardShortcutsDialog from 'containers/Dialogs/keyboardShortcutsDialog';
 
 /**
  * Dialogs container.
@@ -22,6 +23,7 @@ export default function DialogsContainer() {
       <ItemCategoryDialog dialogName={'item-category-form'} />
       <InventoryAdjustmentDialog dialogName={'inventory-adjustment'} />
       <PaymentViaVoucherDialog dialogName={'payment-via-voucher'} />
+      <KeyboardShortcutsDialog dialogName={'keyboard-shortcuts'} />
     </div>
   );
 }

client/src/containers/Dialogs/keyboardShortcutsDialog/KeyboardShortcutsDialogContent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import ShortcutsTable from '../../KeyboardShortcuts/ShortcutsTable';
+import KeyboardShortcutsFooter from './KeyboardShortcutsFooter';
+
+import 'style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss';
+
+export default function KeyboardShortcutsDialogContent() {
+  return (
+    <DialogContent name={'keyboard-shortcuts'}>
+      <ShortcutsTable />
+      <KeyboardShortcutsFooter />
+    </DialogContent>
+  );
+}

client/src/containers/Dialogs/keyboardShortcutsDialog/KeyboardShortcutsFooter.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function KeyboardShortcutsFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const handleClose = () => {
+    closeDialog('keyboard-shortcuts');
+  };
+
+  return (
+    <div className={'dialog--keyboard-shortcuts__footer'}>
+      <Button intent={Intent.PRIMARY} onClick={handleClose} small={true}>
+        <T id={'oK_'} />
+      </Button>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(KeyboardShortcutsFooter);

client/src/containers/Dialogs/keyboardShortcutsDialog/index.js

@@ -0,0 +1,29 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const KeyboardShortcutsContent = lazy(() =>
+  import('./KeyboardShortcutsDialogContent'),
+);
+
+/**
+ * Keyboard shortcuts dialog.
+ */
+function KeyboardShortcutsDialog({ dialogName, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      isOpen={isOpen}
+      className={'dialog--keyboard-shortcuts'}
+      title={<T id={'keyboard_shortcuts'} canEscapeKeyClose={true} />}
+    >
+      <DialogSuspense>
+        <KeyboardShortcutsContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(KeyboardShortcutsDialog);

client/src/containers/KeyboardShortcuts/ShortcutsTable.js

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { DataTable } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import keyboardShortcuts from 'common/keyboardShortcutsOptions';
+
+/**
+ *  keyboard shortcuts table.
+ */
+function ShortcutsTable() {
+  const { formatMessage } = useIntl();
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'shortcut_keys' }),
+        accessor: 'shortcut_key',
+        disableSortBy: true,
+        className: 'shortcut_key',
+        width: 100,
+      },
+      {
+        id: 'description',
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
+        disableSortBy: true,
+        className: 'description',
+        width: 250,
+      },
+    ],
+    [formatMessage],
+  );
+
+  return <DataTable columns={columns} data={keyboardShortcuts} />;
+}
+
+export default ShortcutsTable;

client/src/lang/en/index.js

@@ -466,6 +466,7 @@ export default {
   name_: 'name',
   as: 'As',
   receivable_aging_summary: 'Receivable Aging Summary',
+  receivable_a_r: 'Receivable A/R',
   customers: 'Customers',
   new_customers: 'New Customers',
   customer_type_: 'Customer type',
@@ -982,4 +983,9 @@ export default {
   accounts_payable_a_p: 'Accounts Payable A/P',
   financial_accounting: ' Financial Accounting',
   products_services_inventory: 'Products,Services & Inventory',
+  payable_a_p: 'Payable A/P',
+  keyboard_shortcuts:'Keyboard Shortcuts',
+  shortcut_keys:'Shortcut Keys',
+  oK_:'Ok'
+
 };

client/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss

@@ -0,0 +1,41 @@
+.dialog--keyboard-shortcuts {
+  .bigcapital-datatable {
+    .table {
+      max-height: 300px;
+      border: 1px solid #d1dee2;
+      min-width: auto;
+      margin: 15px;
+      .tbody,
+      .thead .tr .td,
+      .tr .th {
+        background: #fff;
+      }
+      .tbody,
+      .tbody-inner {
+        height: 250px;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding: 0.4rem;
+          margin-left: -1px;
+          border-left: 1px solid #ececec;
+        }
+      }
+    }
+  }
+  &__footer {
+    text-align: right;
+    margin: 0px 15px;
+
+    .bp3-button.bp3-small,
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
+      min-width: 65px;
+      height: 26px;
+      min-height: 26px;
+    }
+  }
+}