feat: add easysms integrate api.

This reverts commit 7e2e25a8b4.

Dockerfile

@@ -6,15 +6,6 @@ WORKDIR /app
 
 COPY ./package.json /app/package.json
 COPY ./package-lock.json /app/package-lock.json
-COPY ./.npmrc /app/.npmrc
-
-ARG GITHUB_USERNAME
-ARG GITHUB_PASS
-ARG GITHUB_EMAIL
-
-RUN npm install -g npm-cli-login
-
-RUN npm-cli-login -s @bigcapitalhq -r https://npm.pkg.github.com -u $GITHUB_USERNAME -p $GITHUB_PASS -e $GITHUB_EMAIL
 
 RUN npm install
 
@@ -26,4 +17,4 @@ FROM nginx
 
 COPY ./nginx/sites/default.conf /etc/nginx/conf.d/default.conf
 
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/build /usr/share/nginx/html

package.json

@@ -10,7 +10,11 @@
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
     "@blueprintjs/timezone": "^3.6.2",
+    "@casl/ability": "^5.4.3",
+    "@casl/react": "^2.3.0",
     "@reduxjs/toolkit": "^1.2.5",
+    "@sentry/react": "^6.13.2",
+    "@sentry/tracing": "^6.13.2",
     "@svgr/webpack": "4.3.3",
     "@tanem/react-nprogress": "^3.0.24",
     "@testing-library/jest-dom": "^4.2.4",
@@ -101,6 +105,7 @@
     "sass-loader": "8.0.2",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
+    "styled-components": "^5.3.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",

src/common/abilityOption.js

@@ -0,0 +1,161 @@
+export const AbilitySubject = {
+  Item: 'Item',
+  InventoryAdjustment: 'InventoryAdjustment',
+  Estimate: 'SaleEstimate',
+  Invoice: 'SaleInvoice',
+  Receipt: 'SaleReceipt',
+  PaymentReceive: 'PaymentReceive',
+  Bill: 'Bill',
+  PaymentMade: 'PaymentMade',
+  Customer: 'Customer',
+  Vendor: 'Vendor',
+  Account: 'Account',
+  ManualJournal: 'ManualJournal',
+  Expense: 'Expense',
+  Cashflow: 'Cashflow',
+  Report: 'Report',
+  Preferences: 'Preferences',
+  ExchangeRate: 'ExchangeRate',
+  SubscriptionBilling: 'SubscriptionBilling',
+};
+
+export const ItemAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const InventoryAdjustmentAction = {
+  Create: 'Create',
+  Edit: 'Edit',
+  View: 'View',
+  Delete: 'Delete',
+};
+
+export const SaleEstimateAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleInvoiceAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Writeoff: 'bad-debt',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleReceiptAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentReceiveAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const BillAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentMadeAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CustomerAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const VendorAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const AccountAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionsLocking: 'TransactionsLocking',
+};
+
+export const ManualJournalAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionLocking: 'TransactionLocking',
+};
+
+export const ExpenseAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CashflowAction = {
+  View: 'View',
+  Create: 'Create',
+  Delete: 'Delete',
+};
+
+export const ReportsAction = {
+  ALL: 'all',
+  READ_BALANCE_SHEET: 'read-balance-sheet',
+  READ_TRIAL_BALANCE_SHEET: 'read-trial-balance-sheet',
+  READ_PROFIT_LOSS: 'read-profit-loss',
+  READ_JOURNAL: 'read-journal',
+  READ_GENERAL_LEDGET: 'read-general-ledger',
+  READ_CASHFLOW: 'read-cashflow',
+  READ_AR_AGING_SUMMARY: 'read-ar-aging-summary',
+  READ_AP_AGING_SUMMARY: 'read-ap-aging-summary',
+  READ_PURCHASES_BY_ITEMS: 'read-purchases-by-items',
+  READ_SALES_BY_ITEMS: 'read-sales-by-items',
+  READ_CUSTOMERS_TRANSACTIONS: 'read-customers-transactions',
+  READ_VENDORS_TRANSACTIONS: 'read-vendors-transactions',
+  READ_CUSTOMERS_SUMMARY_BALANCE: 'read-customers-summary-balance',
+  READ_VENDORS_SUMMARY_BALANCE: 'read-vendors-summary-balance',
+  READ_INVENTORY_VALUATION_SUMMARY: 'read-inventory-valuation-summary',
+  READ_INVENTORY_ITEM_DETAILS: 'read-inventory-item-details',
+  READ_CASHFLOW_ACCOUNT_TRANSACTION: 'read-cashflow-account-transactions',
+};
+
+export const PreferencesAbility = {
+  Mutate: 'Mutate',
+};
+
+export const ExchangeRateAbility = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+};
+
+export const SubscriptionBillingAbility = {
+  View: 'view',
+  Payment: 'payment',
+};

src/common/cashflowOptions.js

@@ -0,0 +1,40 @@
+import intl from 'react-intl-universal';
+
+export const addMoneyIn = [
+  {
+    name: intl.get('cash_flow.owner_contribution'),
+    value: 'owner_contribution',
+  },
+  {
+    name: intl.get('cash_flow.other_income'),
+    value: 'other_income',
+  },
+  {
+    name: intl.get('cash_flow.transfer_form_account'),
+    value: 'transfer_from_account',
+  },
+];
+
+export const addMoneyOut = [
+  {
+    name: intl.get('cash_flow.owner_drawings'),
+    value: 'OwnerDrawing',
+  },
+  {
+    name: intl.get('cash_flow.expenses'),
+    value: 'other_expense',
+  },
+  {
+    name: intl.get('cash_flow.transfer_to_account'),
+    value: 'transfer_to_account',
+  },
+];
+
+export const TRANSACRIONS_TYPE = [
+  'OwnerContribution',
+  'OtherIncome',
+  'TransferFromAccount',
+  'OnwersDrawing',
+  'OtherExpense',
+  'TransferToAccount',
+];

src/common/classes.js

@@ -66,6 +66,8 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users',
   PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
   PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
+  PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
+  PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM: 'preferences-page__inside-content--roles-form',
 
   FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
 

src/common/drawers.js

@@ -9,4 +9,9 @@ export const DRAWERS = {
   EXPENSE_DRAWER: 'expense-drawer',
   BILL_DRAWER: 'bill-drawer',
   INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
+  CASHFLOW_TRNASACTION_DRAWER: 'cashflow-transaction-drawer',
+
+  QUICK_WRITE_VENDOR: 'quick-write-vendor',
+  QUICK_CREATE_CUSTOMER: 'quick-create-customer',
+  QUICK_CREATE_ITEM: 'quick-create-item',
 };

src/common/homepageOptions.js

@@ -1,5 +1,21 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  SaleInvoiceAction,
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleReceiptAction,
+  CustomerAction,
+  PaymentReceiveAction,
+  BillAction,
+  VendorAction,
+  PaymentMadeAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  ItemAction,
+  ReportsAction,
+} from '../common/abilityOption';
 
 export const accountsReceivable = [
   {
@@ -9,21 +25,29 @@ export const accountsReceivable = [
         title: <T id={'sales_invoices'} />,
         description: <T id={'tracking_sales_invoices_with_your_customers'} />,
         link: '/invoices',
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
       },
       {
         title: <T id={'sales_estimates'} />,
         description: <T id={'manage_your_sales_estimates_to_create_quotes'} />,
         link: '/estimates',
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
       },
       {
         title: <T id={'sales_receipts'} />,
         description: <T id={'manage_sales_receipts_for_sales_that_get_paid'} />,
         link: '/receipts',
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
       },
       {
         title: <T id={'customers'} />,
         description: <T id={'manage_the_customers_relations_with_customer'} />,
         link: '/customers',
+        subject: AbilitySubject.Customer,
+        ability: CustomerAction.View,
       },
       {
         title: <T id={'customers_payments'} />,
@@ -31,6 +55,8 @@ export const accountsReceivable = [
           <T id={'manage_payment_transactions_from_your_customers'} />
         ),
         link: '/payment-receives',
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
       },
     ],
   },
@@ -46,6 +72,8 @@ export const accountsPayable = [
           <T id={'manage_the_purchase_invoices_with_your_vendors'} />
         ),
         link: '/bills',
+        subject: AbilitySubject.Bill,
+        ability: BillAction.View,
       },
       {
         title: <T id={'vendors'} />,
@@ -53,11 +81,15 @@ export const accountsPayable = [
           <T id={'manage_the_vendors_relations_with_vendor_relations'} />
         ),
         link: '/vendors',
+        subject: AbilitySubject.Vendor,
+        ability: VendorAction.View,
       },
       {
         title: <T id={'vendors_payments'} />,
         description: <T id={'manage_payments_transactions_to_your_vendors'} />,
         link: '/payment-mades',
+        subject: AbilitySubject.PaymentMade,
+        ability: PaymentMadeAction.View,
       },
     ],
   },
@@ -77,21 +109,35 @@ export const financialAccounting = [
           />
         ),
         link: '/accounts',
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
       },
       {
-        title: <T id={'manual_journal'}/>,
-        description:<T id={'manage_manual_journal_transactions_on_accounts'}/>,
+        title: <T id={'manual_journal'} />,
+        description: (
+          <T id={'manage_manual_journal_transactions_on_accounts'} />
+        ),
         link: '/manual-journals',
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
       },
       {
-        title: <T id={'expenses'}/>,
-        description:<T id={'track_your_indirect_expenses_under_specific_categories'}/>,
+        title: <T id={'expenses'} />,
+        description: (
+          <T id={'track_your_indirect_expenses_under_specific_categories'} />
+        ),
         link: '/expenses',
+        subject: AbilitySubject.Expense,
+        ability: ExpenseAction.View,
       },
       {
-        title: <T id={'financial_statements'}/>,
-        description:<T id={'show_financial_reports_about_your_organization'}/>,
+        title: <T id={'financial_statements'} />,
+        description: (
+          <T id={'show_financial_reports_about_your_organization'} />
+        ),
         link: '/financial-reports',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.ALL,
       },
     ],
   },
@@ -102,19 +148,27 @@ export const productsServices = [
     sectionTitle: <T id={'products_services_inventory'} />,
     shortcuts: [
       {
-        title: <T id={'products_services'}/>,
-        description:<T id={'manage_your_products_inventory_or_non_inventory'}/>,
+        title: <T id={'products_services'} />,
+        description: (
+          <T id={'manage_your_products_inventory_or_non_inventory'} />
+        ),
         link: '/items',
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
       },
       {
-        title: <T id={'products_services_categories'}/>,
-        description:<T id={'group_your_products_and_service'}/>,
+        title: <T id={'products_services_categories'} />,
+        description: <T id={'group_your_products_and_service'} />,
         link: 'items/categories',
       },
       {
-        title: <T id={'inventory_adjustments'}/>,
-        description: <T id={'manage_your_inventory_adjustment_of_inventory_items'}/>,
+        title: <T id={'inventory_adjustments'} />,
+        description: (
+          <T id={'manage_your_inventory_adjustment_of_inventory_items'} />
+        ),
         link: '/inventory-adjustments',
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: SaleInvoiceAction.View,
       },
     ],
   },

src/common/keyboardShortcutsOptions.js

@@ -1,102 +1,228 @@
-import React from 'react';
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CashflowAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+} from './abilityOption';
 
 export default [
   {
     shortcut_key: 'Shift + I',
     description: intl.get('jump_to_the_invoices'),
+    permission: {
+      ability: SaleInvoiceAction.View,
+      subject: AbilitySubject.Invoice,
+    },
   },
   {
     shortcut_key: 'Shift + E',
     description: intl.get('jump_to_the_estimates'),
+    permission: {
+      ability: SaleEstimateAction.View,
+      subject: AbilitySubject.Estimate,
+    },
   },
   {
     shortcut_key: 'Shift + R',
     description: intl.get('jump_to_the_receipts'),
+    permission: {
+      ability: SaleReceiptAction.View,
+      subject: AbilitySubject.Receipt,
+    },
   },
   {
     shortcut_key: 'Shift + X',
     description: intl.get('jump_to_the_expenses'),
+    permission: {
+      ability: ExpenseAction.View,
+      subject: AbilitySubject.Expense,
+    },
   },
   {
     shortcut_key: 'Shift + C',
     description: intl.get('jump_to_the_customers'),
+    permission: {
+      ability: CustomerAction.View,
+      subject: AbilitySubject.Customer,
+    },
   },
   {
     shortcut_key: 'Shift + V',
     description: intl.get('jump_to_the_vendors'),
+    permission: {
+      ability: VendorAction.View,
+      subject: AbilitySubject.Vendor,
+    },
   },
   {
     shortcut_key: 'Shift + A',
     description: intl.get('jump_to_the_chart_of_accounts'),
+    permission: {
+      ability: AccountAction.View,
+      subject: AbilitySubject.Account,
+    },
   },
   {
     shortcut_key: 'Shift + B',
     description: intl.get('jump_to_the_bills'),
+    permission: {
+      ability: BillAction.View,
+      subject: AbilitySubject.Bill,
+    },
   },
   {
     shortcut_key: 'Shift + M',
     description: intl.get('jump_to_the_manual_journals'),
+    permission: {
+      ability: ManualJournalAction.View,
+      subject: AbilitySubject.ManualJournal,
+    },
   },
   {
     shortcut_key: 'Shift + W',
     description: intl.get('jump_to_the_items'),
+    permission: {
+      ability: ItemAction.View,
+      subject: AbilitySubject.Item,
+    },
+  },
+  {
+    shortcut_key: 'Shift + D',
+    description: intl.get('jump_to_the_add_money_in'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
+  },
+  {
+    shortcut_key: 'Shift + Q',
+    description: intl.get('jump_to_the_add_money_out'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
   },
   {
     shortcut_key: 'Shift + 1',
     description: intl.get('jump_to_the_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 2',
     description: intl.get('jump_to_the_profit_loss_sheet'),
+    permission: {
+      ability: ReportsAction.READ_PROFIT_LOSS,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 3',
     description: intl.get('jump_to_the_journal_sheet'),
+    permission: {
+      ability: ReportsAction.READ_JOURNAL,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 4',
     description: intl.get('jump_to_the_general_ledger_sheet'),
+    permission: {
+      ability: ReportsAction.READ_GENERAL_LEDGET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 5',
     description: intl.get('jump_to_the_trial_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + I ',
     description: intl.get('create_a_new_invoice'),
+    permission: {
+      ability: SaleInvoiceAction.Create,
+      subject: AbilitySubject.Invoice,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + E ',
     description: intl.get('create_a_new_estimate'),
+    permission: {
+      ability: SaleEstimateAction.Create,
+      subject: AbilitySubject.Estimate,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + R ',
     description: intl.get('create_a_new_receipt'),
+    permission: {
+      ability: SaleReceiptAction.Create,
+      subject: AbilitySubject.Receipt,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + X ',
     description: intl.get('create_a_new_expense'),
+    permission: {
+      ability: ExpenseAction.Create,
+      subject: AbilitySubject.Expense,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + C ',
     description: intl.get('create_a_new_customer'),
+    permission: {
+      ability: CustomerAction.Create,
+      subject: AbilitySubject.Customer,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + V ',
     description: intl.get('create_a_new_vendor'),
+    permission: {
+      ability: VendorAction.Create,
+      subject: AbilitySubject.Vendor,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + B ',
     description: intl.get('create_a_new_bill'),
+    permission: {
+      ability: BillAction.Create,
+      subject: AbilitySubject.Bill,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + M ',
     description: intl.get('create_a_new_journal'),
+    permission: {
+      ability: ManualJournalAction.Create,
+      subject: AbilitySubject.ManualJournal,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + W ',
     description: intl.get('create_a_new_item'),
+    permission: {
+      ability: ItemAction.Create,
+      subject: AbilitySubject.Item,
+    },
   },
   {
     shortcut_key: 'Ctrl + / ',

src/common/moreVertOptions.js

@@ -0,0 +1,12 @@
+import intl from 'react-intl-universal';
+
+export const moreVertOptions = [
+  {
+    name: intl.get('bad_debt.dialog.bad_debt'),
+    value: 'bad debt',
+  },
+  {
+    name: intl.get('bad_debt.dialog.cancel_bad_debt'),
+    value: 'cancel bad debt',
+  },
+];

src/common/quickNewOptions.js

@@ -1,10 +1,71 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  CustomerAction,
+  VendorAction,
+  ManualJournalAction,
+  ExpenseAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
 
 export const getQuickNewActions = () => [
-  { path: 'invoices/new', name: intl.get('sale_invoice') },
-  { path: 'bills/new', name: intl.get('purchase_invoice') },
-  { path: 'make-journal-entry', name: intl.get('manual_journal') },
-  { path: 'expenses/new', name: intl.get('expense') },
-  { path: 'customers/new', name: intl.get('customer') },
-  { path: 'vendors/new', name: intl.get('vendor') },
+  {
+    path: 'invoices/new',
+    name: intl.get('sale_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'bills/new',
+    name: intl.get('purchase_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'make-journal-entry',
+    name: intl.get('manual_journal'),
+    permission: {
+      subject: AbilitySubject.ManualJournal,
+      ability: ManualJournalAction.Create,
+    },
+  },
+  {
+    path: 'expenses/new',
+    name: intl.get('expense'),
+    permission: {
+      subject: AbilitySubject.Expense,
+      ability: ExpenseAction.Create,
+    },
+  },
+  {
+    path: 'customers/new',
+    name: intl.get('customer'),
+    permission: {
+      subject: AbilitySubject.Customer,
+      ability: CustomerAction.Create,
+    },
+  },
+  {
+    path: 'vendors/new',
+    name: intl.get('vendor'),
+    permission: {
+      subject: AbilitySubject.Vendor,
+      ability: VendorAction.Vendor,
+    },
+  },
 ];
+
+/**
+ * Retrieve the dashboard quick new menu items.
+ */
+export const useGetQuickNewMenu = () => {
+  const quickNewMenu = getQuickNewActions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(quickNewMenu);
+};

src/common/tables.js

@@ -12,10 +12,12 @@ export const TABLES = {
   ACCOUNTS: 'accounts',
   MANUAL_JOURNALS: 'manual_journal',
   EXPENSES: 'expenses',
+  CASHFLOW_ACCOUNTS: 'cashflow_accounts',
+  CASHFLOW_Transactions: 'cashflow_transactions',
 };
 
 export const TABLE_SIZE = {
   COMPACT: 'compact',
   SMALL: 'small',
   MEDIUM: 'medium',
-}
+};

src/components/AccountsSelectList.js

@@ -1,13 +1,56 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { MenuItemNestedText, FormattedMessage as T } from 'components';
+import * as R from 'ramda';
 import classNames from 'classnames';
+import intl from 'react-intl-universal'
+
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 import { CLASSES } from 'common/classes';
 
-export default function AccountsSelectList({
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts select list.
+ */
+function AccountsSelectList({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -21,6 +64,8 @@ export default function AccountsSelectList({
   filterByNormal,
   filterByRootTypes,
 
+  allowCreate,
+
   buttonProps = {},
 }) {
   const flattenAccounts = useMemo(
@@ -51,6 +96,7 @@ export default function AccountsSelectList({
     [initialAccountId, filteredAccounts],
   );
 
+  // Select account item.
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null,
   );
@@ -76,31 +122,25 @@ export default function AccountsSelectList({
     );
   }, []);
 
-  const onAccountSelect = useCallback(
+  // Handle the account item select.
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
-    },
-    [setSelectedAccount, onAccountSelected],
-  );
-
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
       } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
+        openDialog('account-form');
       }
     },
-    [],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Select
       items={filteredAccounts}
@@ -113,11 +153,13 @@ export default function AccountsSelectList({
         inline: popoverFill,
       }}
       filterable={true}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       disabled={disabled}
       className={classNames('form-group--select-list', {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
     >
       <Button
         disabled={disabled}
@@ -127,3 +169,5 @@ export default function AccountsSelectList({
     </Select>
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSelectList);

src/components/AccountsSuggestField.js

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
@@ -10,10 +11,55 @@ import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
 /**
  * Accounts suggest field.
  */
-export default function AccountsSuggestField({
+function AccountsSuggestField({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -26,6 +72,8 @@ export default function AccountsSuggestField({
   filterByNormal,
   filterByRootTypes = [],
 
+  allowCreate,
+
   ...suggestProps
 }) {
   const flattenAccounts = useMemo(
@@ -69,23 +117,6 @@ export default function AccountsSuggestField({
     }
   }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
 
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
-      }
-    },
-    [],
-  );
-
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
@@ -98,28 +129,31 @@ export default function AccountsSuggestField({
     );
   }, []);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
-
-  const onAccountSelect = useCallback(
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog('account-form');
+      }
     },
-    [setSelectedAccount, onAccountSelected],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Suggest
       items={filteredAccounts}
       noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       selectedItem={selectedAccount}
       inputProps={{ placeholder: defaultSelectText }}
       resetOnClose={true}
@@ -129,7 +163,11 @@ export default function AccountsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSuggestField);

src/components/App.js

@@ -14,7 +14,7 @@ import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import Authentication from 'components/Authentication';
 
-import { SplashScreen } from '../components';
+import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';
 
 /**
@@ -23,16 +23,18 @@ import { queryConfig } from '../hooks/query/base';
 function AppInsider({ history }) {
   return (
     <div className="App">
-      <Router history={history}>
-        <Switch>
-          <Route path={'/auth'} component={Authentication} />
-          <Route path={'/'}>
-            <PrivateRoute component={DashboardPrivatePages} />
-          </Route>
-        </Switch>
-      </Router>
+      <DashboardThemeProvider>
+        <Router history={history}>
+          <Switch>
+            <Route path={'/auth'} component={Authentication} />
+            <Route path={'/'}>
+              <PrivateRoute component={DashboardPrivatePages} />
+            </Route>
+          </Switch>
+        </Router>
 
-      <GlobalErrors />
+        <GlobalErrors />
+      </DashboardThemeProvider>
     </div>
   );
 }

src/components/AppIntlLoader.js

@@ -9,7 +9,7 @@ import * as R from 'ramda';
 import { AppIntlProvider } from './AppIntlProvider';
 import { useSplashLoading } from '../hooks/state';
 
-import { useWatch } from '../hooks';
+import { useWatchImmediate } from '../hooks';
 import withDashboardActions from '../containers/Dashboard/withDashboardActions';
 
 const SUPPORTED_LOCALES = [
@@ -90,10 +90,10 @@ function useAppLoadLocales(currentLocale) {
   }, [currentLocale, stopLoading]);
 
   // Watches the value to start/stop splash screen.
-  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
-    immediate: true,
-  });
-
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
   return { isLoading };
 }
 
@@ -116,10 +116,10 @@ function useAppYupLoadLocales(currentLocale) {
   }, [currentLocale, stopLoading]);
 
   // Watches the valiue to start/stop splash screen.
-  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
-    immediate: true,
-  });
-
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
   return { isLoading };
 }
 
@@ -144,7 +144,7 @@ function AppIntlLoader({ children }) {
   const { isLoading: isAppLocalesLoading } = useAppLoadLocales(currentLocale);
 
   // Detarmines whether the app locales loading.
-  const isLoading = isAppYupLocalesLoading && isAppLocalesLoading;
+  const isLoading = isAppYupLocalesLoading || isAppLocalesLoading;
 
   return (
     <AppIntlProvider currentLocale={currentLocale} isRTL={isRTL}>

src/components/BankAccounts/index.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
+import Icon from '../Icon';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+const ACCOUNT_TYPE = {
+  CASH: 'cash',
+  BANK: 'bank',
+  CREDIT_CARD: 'credit-card',
+};
+
+const ACCOUNT_TYPE_PAIR_ICON = {
+  [ACCOUNT_TYPE.CASH]: 'payments',
+  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
+  [ACCOUNT_TYPE.BANK]: 'account-balance',
+};
+
+function BankAccountMetaLine({ title, value, className }) {
+  return (
+    <MetaLineWrap className={className}>
+      <MetaLineTitle>{title}</MetaLineTitle>
+      {value && <MetaLineValue>{value}</MetaLineValue>}
+    </MetaLineWrap>
+  );
+}
+
+function BankAccountBalance({ amount, loading }) {
+  return (
+    <BankAccountBalanceWrap>
+      <BankAccountBalanceAmount
+        className={clsx({
+          [Classes.SKELETON]: loading,
+        })}
+      >
+        {amount}
+      </BankAccountBalanceAmount>
+      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
+    </BankAccountBalanceWrap>
+  );
+}
+
+function BankAccountTypeIcon({ type }) {
+  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
+
+  if (!icon) {
+    return;
+  }
+  return (
+    <AccountIconWrap>
+      <Icon icon={icon} iconSize={18} />
+    </AccountIconWrap>
+  );
+}
+
+export function BankAccount({
+  title,
+  code,
+  type,
+  balance,
+  loading = false,
+  updatedBeforeText,
+  ...restProps
+}) {
+  return (
+    <BankAccountWrap {...restProps}>
+      <BankAccountHeader>
+        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
+          {title}
+        </BankAccountTitle>
+        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
+          {code}
+        </BnakAccountCode>
+        {!loading && <BankAccountTypeIcon type={type} />}
+      </BankAccountHeader>
+
+      <BankAccountMeta>
+        <BankAccountMetaLine
+          title={intl.get('cash_flow.label_account_transcations')}
+          value={2}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+        <BankAccountMetaLine
+          title={updatedBeforeText}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+      </BankAccountMeta>
+
+      <BankAccountBalance amount={balance} loading={loading} />
+    </BankAccountWrap>
+  );
+}
+
+const BankAccountWrap = styled.div`
+  width: 225px;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  background: #fff;
+  margin: 8px;
+  border: 1px solid #c8cad0;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    border-color: #0153cc;
+  }
+`;
+
+const BankAccountHeader = styled.div`
+  padding: 10px 12px;
+  padding-top: 16px;
+  position: relative;
+`;
+
+const BankAccountTitle = styled.div`
+  font-size: 15px;
+  font-style: inherit;
+  letter-spacing: -0.003em;
+  color: rgb(23, 43, 77);
+  white-space: nowrap;
+  font-weight: 600;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0px;
+`;
+
+const BnakAccountCode = styled.div`
+  font-size: 11px;
+  margin-top: 4px;
+  color: rgb(23, 43, 77);
+  display: inline-block;
+`;
+
+const BankAccountBalanceWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: auto;
+  border-top: 1px solid #dfdfdf;
+  padding: 10px 12px;
+`;
+
+const BankAccountBalanceAmount = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  color: #57657e;
+`;
+
+const BankAccountBalanceLabel = styled.div`
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  margin-top: 3px;
+  opacity: 0.6;
+`;
+
+const MetaLineWrap = styled.div`
+  font-size: 11px;
+  display: flex;
+  color: #2f3c58;
+
+  &:not(:first-of-type) {
+    margin-top: 6px;
+  }
+`;
+const MetaLineTitle = styled.div``;
+
+const MetaLineValue = styled.div`
+  box-sizing: border-box;
+  font-style: inherit;
+  background: rgb(223, 225, 230);
+  line-height: initial;
+  align-content: center;
+  padding: 0px 2px;
+  border-radius: 9.6px;
+  font-weight: normal;
+  text-transform: none;
+  width: 30px;
+  min-width: 30px;
+  height: 16px;
+  text-align: center;
+  color: rgb(23, 43, 77);
+  font-size: 11px;
+
+  ${whenLtr(`margin-left: auto;`)}
+  ${whenRtl(`margin-right: auto;`)}
+`;
+
+const BankAccountMeta = styled.div`
+  padding: 0 12px 10px;
+`;
+
+export const BankAccountsList = styled.div`
+  display: flex;
+  margin: -8px;
+  flex-wrap: wrap;
+`;
+
+const AccountIconWrap = styled.div`
+  position: absolute;
+  top: 14px;
+  color: #abb3bb;
+
+  ${whenLtr(`right: 12px;`)}
+  ${whenRtl(`left: 12px;`)}
+`;

src/components/Button/ButtonLink.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const ButtonLink = styled.button`
+  color: #0052cc;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+`;

src/components/Button/index.js

@@ -0,0 +1,3 @@
+
+
+export * from './ButtonLink';

src/components/ContactSelecetList.js

@@ -11,12 +11,14 @@ export default function ContactSelecetList({
   contactsList,
   initialContactId,
   selectedContactId,
-  selectedContactType,
+  createNewItemFrom,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
   popoverFill = false,
   disabled = false,
   buttonProps,
+
+  ...restProps
 }) {
   const contacts = useMemo(
     () =>
@@ -65,7 +67,7 @@ export default function ContactSelecetList({
   );
 
   // Filter Contact List
-  const filterContacts = (query, contact, index, exactMatch) => {
+  const itemPredicate = (query, contact, index, exactMatch) => {
     const normalizedTitle = contact.display_name.toLowerCase();
     const normalizedQuery = query.toLowerCase();
     if (exactMatch) {
@@ -83,7 +85,7 @@ export default function ContactSelecetList({
       items={contacts}
       noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={handleContactRenderer}
-      itemPredicate={filterContacts}
+      itemPredicate={itemPredicate}
       filterable={true}
       disabled={disabled}
       onItemSelect={onContactSelect}
@@ -92,8 +94,9 @@ export default function ContactSelecetList({
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
       inputProps={{
-        placeholder: intl.get('filter_')
+        placeholder: intl.get('filter_'),
       }}
+      {...restProps}
     >
       <Button
         disabled={disabled}

src/components/Contacts/ContactSelectField.js

@@ -0,0 +1,86 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import { itemPredicate, handleContactRenderer } from './utils';
+
+export default function ContactSelectField({
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}

src/components/Contacts/CustomerSelectField.js

@@ -0,0 +1,116 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemRenderer,
+  createNewItemFromQuery,
+} from './utils';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function CustomerSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(CustomerSelectField);

src/components/Contacts/VendorSelectField.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemFromQuery,
+  createNewItemRenderer,
+} from './utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function VendorSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(VendorSelectField);

src/components/Contacts/index.js

@@ -0,0 +1,5 @@
+import ContactSelectField from './ContactSelectField';
+import CustomerSelectField from './CustomerSelectField';
+import VendorSelectField from './VendorSelectField';
+
+export { ContactSelectField, CustomerSelectField, VendorSelectField };

src/components/Contacts/utils.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+// Filter Contact List
+export const itemPredicate = (query, contact, index, exactMatch) => {
+  const normalizedTitle = contact.display_name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+export const handleContactRenderer = (contact, { handleClick }) => (
+  <MenuItem
+    key={contact.id}
+    text={contact.display_name}
+    onClick={handleClick}
+  />
+);
+
+// Creates a new item from query.
+export const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+export const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};

src/components/Dashboard/AuthenticatedUser.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { useUser } from 'hooks/query';
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
-const AuthenticatedUserContext = React.createContext();
-
-function AuthenticatedUserComponent({ authenticatedUserId, children }) {
-  const { data: user, ...restProps } = useUser(authenticatedUserId);
-
-  return (
-    <AuthenticatedUserContext.Provider
-      value={{
-        user,
-        ...restProps,
-      }}
-      children={children}
-    />
-  );
-}
-
-export const AuthenticatedUser = withAuthentication(
-  ({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  }),
-)(AuthenticatedUserComponent);
-
-export const useAuthenticatedUser = () =>
-  React.useContext(AuthenticatedUserContext);

src/components/Dashboard/Dashboard.js

@@ -12,6 +12,7 @@ import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
 import DashboardProvider from './DashboardProvider';
 import DrawersContainer from 'components/DrawersContainer';
+import AlertsContainer from 'containers/AlertsContainer';
 import EnsureSubscriptionIsActive from '../Guards/EnsureSubscriptionIsActive';
 
 /**
@@ -55,6 +56,7 @@ export default function Dashboard() {
       <DialogsContainer />
       <GlobalHotkeys />
       <DrawersContainer />
+      <AlertsContainer />
     </DashboardProvider>
   );
 }

src/components/Dashboard/DashboardAbilityProvider.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Ability } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
+import { useDashboardMeta } from '../../hooks/query';
+
+export const AbilityContext = React.createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+/**
+ * Dashboard ability provider.
+ */
+export function DashboardAbilityProvider({ children }) {
+  const {
+    data: { abilities },
+  } = useDashboardMeta();
+
+  // Ability instance.
+  const ability = new Ability(abilities);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      {children}
+    </AbilityContext.Provider>
+  );
+}

src/components/Dashboard/DashboardBoot.js

@@ -1,18 +1,53 @@
 import React from 'react';
-import * as R from 'ramda';
-
-import { useUser, useCurrentOrganization } from '../../hooks/query';
+import {
+  useAuthenticatedAccount,
+  useCurrentOrganization,
+  useDashboardMeta,
+} from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
-import { useWatch, useWhen } from '../../hooks';
-
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
+import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
 import { setCookie, getCookie } from '../../utils';
 
 /**
- * Dashboard async booting.
+ * Dashboard meta async booting.
  */
-function DashboardBootJSX({ authenticatedUserId }) {
+export function useDashboardMetaBoot() {
+  const {
+    data: dashboardMeta,
+    isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess,
+  } = useDashboardMeta({
+    keepPreviousData: true,
+  });
+  const [startLoading, stopLoading] = useSplashLoading();
+
+  useWatchImmediate((value) => {
+    value && startLoading();
+  }, isDashboardMetaLoading);
+
+  useWatchImmediate(() => {
+    isDashboardMetaSuccess && stopLoading();
+  }, isDashboardMetaSuccess);
+
+  return {
+    isLoading: isDashboardMetaLoading,
+  };
+}
+
+/**
+ * Dashboard async booting.
+ * @returns {{ isLoading: boolean }}
+ */
+export function useDashboardBoot() {
+  const { isLoading } = useDashboardMetaBoot();
+
+  return { isLoading };
+}
+
+/**
+ * Application async booting.
+ */
+export function useApplicationBoot() {
   // Fetches the current user's organization.
   const {
     isSuccess: isCurrentOrganizationSuccess,
@@ -21,10 +56,8 @@ function DashboardBootJSX({ authenticatedUserId }) {
   } = useCurrentOrganization();
 
   // Authenticated user.
-  const {
-    isSuccess: isAuthUserSuccess,
-    isLoading: isAuthUserLoading,
-  } = useUser(authenticatedUserId);
+  const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
+    useAuthenticatedAccount();
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -59,25 +92,25 @@ function DashboardBootJSX({ authenticatedUserId }) {
 
   // Splash loading when organization request loading and
   // applicaiton still not booted.
-  useWatch(isOrgLoading, (value) => {
+  useWatchImmediate((value) => {
     value && !isBooted.current && startLoading();
-  });
+  }, isOrgLoading);
 
-  // Splash loading when request authenticated user loading and 
+  // Splash loading when request authenticated user loading and
   // application still not booted yet.
-  useWatch(isAuthUserLoading, (value) => {
+  useWatchImmediate((value) => {
     value && !isBooted.current && startLoading();
-  });  
+  }, isAuthUserLoading);
 
   // Stop splash loading once organization request success.
-  useWatch(isCurrentOrganizationSuccess, (value) => {
+  useWatch((value) => {
     value && stopLoading();
-  });
+  }, isCurrentOrganizationSuccess);
 
   // Stop splash loading once authenticated user request success.
-  useWatch(isAuthUserSuccess, (value) => {
+  useWatch((value) => {
     value && stopLoading();
-  });
+  }, isAuthUserSuccess);
 
   // Once the all requests complete change the app loading state.
   useWhen(
@@ -88,11 +121,8 @@ function DashboardBootJSX({ authenticatedUserId }) {
       isBooted.current = true;
     },
   );
-  return null;
-}
 
-export const DashboardBoot = R.compose(
-  withAuthentication(({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  })),
-)(DashboardBootJSX);
+  return {
+    isLoading: isOrgLoading || isAuthUserLoading,
+  };
+}

src/components/Dashboard/DashboardContent.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoutes from 'components/Dashboard/DashboardContentRoute';
-import DashboardFooter from 'components/Dashboard/DashboardFooter';
 import DashboardErrorBoundary from './DashboardErrorBoundary';
 
 export default React.forwardRef(({}, ref) => {
@@ -11,7 +10,6 @@ export default React.forwardRef(({}, ref) => {
       <div className="dashboard-content" id="dashboard" ref={ref}>
         <DashboardTopbar />
         <DashboardContentRoutes />
-        <DashboardFooter />
       </div>
     </ErrorBoundary>
   );

src/components/Dashboard/DashboardProvider.js

@@ -1,8 +1,16 @@
 import React from 'react';
+import { DashboardAbilityProvider } from '../../components';
+import { useDashboardBoot } from './DashboardBoot';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  return children;
+  const { isLoading } = useDashboardBoot();
+
+  // Avoid display any dashboard component before complete booting.
+  if (isLoading) {
+    return null;
+  }
+  return <DashboardAbilityProvider>{children}</DashboardAbilityProvider>;
 }

src/components/Dashboard/DashboardThemeProvider.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useAppIntlContext } from '../AppIntlProvider';
+
+export function DashboardThemeProvider({ children }) {
+  const { direction } = useAppIntlContext();
+
+  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+}

src/components/Dashboard/DashboardTopbar.js

@@ -23,6 +23,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+import { useGetUniversalSearchTypeOptions } from '../../containers/UniversalSearch/utils';
 
 function DashboardTopbarSubscriptionMessage() {
   return (
@@ -142,11 +143,8 @@ function DashboardTopbar({
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
             <If condition={isSubscriptionActive}>
-              <Button
+              <DashboardQuickSearchButton
                 onClick={() => openGlobalSearch(true)}
-                className={Classes.MINIMAL}
-                icon={<Icon icon={'search-24'} iconSize={20} />}
-                text={<T id={'quick_find'} />}
               />
               <QuickNewDropdown />
 
@@ -195,3 +193,23 @@ export default compose(
     'main',
   ),
 )(DashboardTopbar);
+
+/**
+ * Dashboard quick search button.
+ */
+function DashboardQuickSearchButton({ ...rest }) {
+  const searchTypeOptions = useGetUniversalSearchTypeOptions();
+
+  // Can't continue if there is no any search type option.
+  if (searchTypeOptions.length <= 0) {
+    return null;
+  }
+  return (
+    <Button
+      className={Classes.MINIMAL}
+      icon={<Icon icon={'search-24'} iconSize={20} />}
+      text={<T id={'quick_find'} />}
+      {...rest}
+    />
+  );
+}

src/components/Dashboard/GlobalHotkeys.js

@@ -3,11 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useHistory } from 'react-router-dom';
 import { getDashboardRoutes } from 'routes/dashboard';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
 import { compose } from 'utils';
 
 function GlobalHotkeys({
   // #withDashboardActions
   toggleSidebarExpend,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
   const routes = getDashboardRoutes();
@@ -16,8 +21,8 @@ function GlobalHotkeys({
     .filter(({ hotkey }) => hotkey)
     .map(({ hotkey }) => hotkey)
     .toString();
-  
-    const handleSidebarToggleBtn = () => {
+
+  const handleSidebarToggleBtn = () => {
     toggleSidebarExpend();
   };
   useHotkeys(
@@ -32,7 +37,9 @@ function GlobalHotkeys({
     [history],
   );
   useHotkeys('ctrl+/', (event, handle) => handleSidebarToggleBtn());
+  useHotkeys('shift+d', (event, handle) => openDialog('money-in', {}));
+  useHotkeys('shift+q', (event, handle) => openDialog('money-out', {}));
   return <div></div>;
 }
 
-export default compose(withDashboardActions)(GlobalHotkeys);
+export default compose(withDashboardActions, withDialogActions)(GlobalHotkeys);

src/components/Dashboard/PrivatePagesProvider.js

@@ -1,31 +1,15 @@
 import React from 'react';
-import * as R from 'ramda';
 
-import { AuthenticatedUser } from './AuthenticatedUser';
-import { DashboardBoot } from '../../components';
-
-import withDashboard from '../../containers/Dashboard/withDashboard';
+import { useApplicationBoot } from '../../components';
 
 /**
  * Private pages provider.
  */
-function PrivatePagesProviderComponent({
-  splashScreenCompleted,
-
+export function PrivatePagesProvider({
   // #ownProps
   children,
 }) {
-  return (
-    <AuthenticatedUser>
-      <DashboardBoot />
+  const { isLoading } = useApplicationBoot();
 
-      {splashScreenCompleted ? children : null}
-    </AuthenticatedUser>
-  );
+  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
 }
-
-export const PrivatePagesProvider = R.compose(
-  withDashboard(({ splashScreenCompleted }) => ({
-    splashScreenCompleted,
-  })),
-)(PrivatePagesProviderComponent);

src/components/Dashboard/TopbarUser.js

@@ -14,10 +14,14 @@ import { firstLettersArgs } from 'utils';
 import { useAuthActions } from 'hooks/state';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-import { useAuthenticatedUser } from './AuthenticatedUser';
 
+import { useAuthenticatedAccount } from 'hooks/query'
+import { compose } from 'utils';
+
+/**
+ * Dashboard topbar user.
+ */
 function DashboardTopbarUser({
   openDialog,
 
@@ -28,7 +32,7 @@ function DashboardTopbarUser({
   const { setLogout } = useAuthActions();
 
   // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();
 
   const onClickLogout = () => {
     setLogout();

src/components/Dashboard/index.js

@@ -1,4 +1,4 @@
-
-
 export * from './SplashScreen';
-export * from './DashboardBoot';
+export * from './DashboardBoot';
+export * from './DashboardThemeProvider';
+export * from './DashboardAbilityProvider';

src/components/DataTableCells/AccountsListFieldCell.js

@@ -17,6 +17,8 @@ export default function AccountCellRenderer({
     accountsDataProp,
     filterAccountsByRootTypes,
     filterAccountsByTypes,
+    fieldProps,
+    formGroupProps,
   },
   row: { index, original },
   cell: { value: initialValue },
@@ -53,6 +55,7 @@ export default function AccountCellRenderer({
         'form-group--account',
         Classes.FILL,
       )}
+      {...formGroupProps}
     >
       <AccountsSuggestField
         accounts={accounts}
@@ -66,6 +69,7 @@ export default function AccountCellRenderer({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );

src/components/DataTableCells/ItemsListCell.js

@@ -1,15 +1,17 @@
 import React, { useCallback, useRef } from 'react';
-// import ItemsListField from 'components/ItemsListField';
-import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
-
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import ItemsSuggestField from 'components/ItemsSuggestField';
+
 import { useCellAutoFocus } from 'hooks';
 
+/**
+ * Items list cell.
+ */
 export default function ItemsListCell({
-  column: { id, filterSellable, filterPurchasable },
+  column: { id, filterSellable, filterPurchasable, fieldProps, formGroupProps },
   row: { index },
   cell: { value: initialValue },
   payload: { items, updateData, errors, autoFocus },
@@ -19,6 +21,7 @@ export default function ItemsListCell({
   // Auto-focus the items list input field.
   useCellAutoFocus(fieldRef, autoFocus, id, index);
 
+  // Handle the item selected.
   const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
@@ -32,6 +35,7 @@ export default function ItemsListCell({
     <FormGroup
       intent={error ? Intent.DANGER : null}
       className={classNames('form-group--select-list', Classes.FILL)}
+      {...formGroupProps}
     >
       <ItemsSuggestField
         items={items}
@@ -45,6 +49,7 @@ export default function ItemsListCell({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );

src/components/DataTableCells/SwitchFieldCell.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
+
+import { safeInvoke } from 'utils';
+
+/**
+ * Switch editable cell.
+ */
+const SwitchEditableCell = ({
+  row: { index, original },
+  column: { id, switchProps, onSwitchChange },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  // Handle the switch change.
+  const onChange = (e) => {
+    const newValue = e.target.checked;
+
+    setValue(newValue);
+
+    safeInvoke(payload.updateData, index, id, newValue);
+    safeInvoke(onSwitchChange, e, newValue, original);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Switch
+        value={value}
+        onChange={onChange}
+        checked={initialValue}
+        minimal={true}
+        className="ml2"
+        {...switchProps}
+      />
+    </FormGroup>
+  );
+};
+
+export default SwitchEditableCell;

src/components/DataTableCells/TextAreaCell.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
+
+const TextAreaEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <TextArea
+        growVertically={true}
+        large={true}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        fill={true}
+      />
+    </FormGroup>
+  );
+};
+
+export default TextAreaEditableCell;

src/components/DataTableCells/index.js

@@ -6,7 +6,9 @@ import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 import NumericInputCell from './NumericInputCell';
-import CheckBoxFieldCell from './CheckBoxFieldCell'
+import CheckBoxFieldCell from './CheckBoxFieldCell';
+import SwitchFieldCell from './SwitchFieldCell';
+import TextAreaCell from './TextAreaCell';
 
 export {
   AccountsListFieldCell,
@@ -18,5 +20,7 @@ export {
   DivFieldCell,
   EmptyDiv,
   NumericInputCell,
-  CheckBoxFieldCell
+  CheckBoxFieldCell,
+  SwitchFieldCell,
+  TextAreaCell,
 };

src/components/Datatable/CellForceWidth.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { get } from 'lodash';
+
+import { getForceWidth } from 'utils';
+
+export function CellForceWidth({
+  value,
+  column: { forceWidthAccess },
+  row: { original },
+}) {
+  const forceWidthValue = forceWidthAccess
+    ? get(original, forceWidthAccess)
+    : value;
+
+  return <ForceWidth forceValue={forceWidthValue}>{value}</ForceWidth>;
+}
+
+export function ForceWidth({ children, forceValue }) {
+  const forceWidthValue = forceValue || children;
+
+  return (
+    <span
+      className={'force-width'}
+      style={{ minWidth: getForceWidth(forceWidthValue) }}
+    >
+      {children}
+    </span>
+  );
+}

src/components/Datatable/index.js

@@ -0,0 +1,4 @@
+
+
+
+export * from './CellForceWidth';

src/components/Dialog/Dialog.js

@@ -9,16 +9,16 @@ function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
 
   const handleClose = (event) => {
-    closeDialog(name)
+    closeDialog(name);
     onClose && onClose(event);
   };
   return (
     <Dialog {...props} onClose={handleClose}>
-      { children }
+      {children}
     </Dialog>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(DialogComponent);
+const DialogRoot = compose(withDialogActions)(DialogComponent);
+
+export { DialogRoot as Dialog };

src/components/Dialog/DialogContent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
 
-export default function DialogContent(props) {
+export function DialogContent(props) {
   const { isLoading, children } = props;
 
   const loadingContent = (

src/components/Dialog/DialogFooterActions.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooterActions({ alignment = 'right', children }) {
+  return (
+    <DialogFooterActionsRoot
+      className={Classes.DIALOG_FOOTER_ACTIONS}
+      alignment={alignment}
+    >
+      {children}
+    </DialogFooterActionsRoot>
+  );
+}
+
+const DialogFooterActionsRoot = styled.div`
+  margin-left: -10px;
+  margin-right: -10px;
+  justify-content: ${(props) =>
+    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
+
+  .bp3-button {
+    margin-left: 10px;
+    margin-left: 10px;
+  }
+`;

src/components/Dialog/DialogSuspense.js

@@ -5,7 +5,7 @@ function LoadingContent() {
   return (<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>);
 }
 
-export default function DialogSuspense({
+export function DialogSuspense({
   children
 }) {
   return (

src/components/Dialog/index.js

@@ -0,0 +1,6 @@
+
+
+export * from './Dialog';
+export * from './DialogFooterActions';
+export * from './DialogSuspense';
+export * from './DialogContent';

src/components/DialogsContainer.js

@@ -17,6 +17,16 @@ import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialo
 import InvoicePdfPreviewDialog from 'containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from 'containers/Dialogs/EstimatePdfPreviewDialog';
 import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDialog';
+import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
+import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
+import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
+import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
+import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
+import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
+import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
+import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
+import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
+import EasySMSIntegrationDialog from '../containers/Dialogs/EasySMSIntegrationDialog';
 
 /**
  * Dialogs container.
@@ -40,6 +50,18 @@ export default function DialogsContainer() {
       <InvoicePdfPreviewDialog dialogName={'invoice-pdf-preview'} />
       <EstimatePdfPreviewDialog dialogName={'estimate-pdf-preview'} />
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
+      <MoneyInDialog dialogName={'money-in'} />
+      <MoneyOutDialog dialogName={'money-out'} />
+
+      <NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
+      <NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
+      <NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
+      <NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
+
+      <BadDebtDialog dialogName={'write-off-bad-debt'} />
+      <SMSMessageDialog dialogName={'sms-message-form'} />
+      <TransactionsLockingDialog dialogName={'transactions-locking'} />
+      <EasySMSIntegrationDialog dialogName={'easysms-integrate'} />
     </div>
   );
 }

src/components/DisplayNameList.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import ListSelect from "./ListSelect";
+import intl from 'react-intl-universal';
+import ListSelect from './ListSelect';
 
 export default function DisplayNameList({
   salutation,
@@ -9,25 +10,32 @@ export default function DisplayNameList({
   ...restProps
 }) {
   const formats = [
-    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    {
+      format: '{1} {2} {3}',
+      values: [salutation, firstName, lastName],
+      required: [1],
+    },
     { format: '{1} {2}', values: [firstName, lastName], required: [] },
     { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
-    { format: '{1}', values: [company], required: [1] }
+    { format: '{1}', values: [company], required: [1] },
   ];
 
   const formatOptions = formats
-    .filter((format) => !format.values.some((value, index) => {
-      return !value && format.required.indexOf(index + 1) !== -1;
-    }))
+    .filter(
+      (format) =>
+        !format.values.some((value, index) => {
+          return !value && format.required.indexOf(index + 1) !== -1;
+        }),
+    )
     .map((formatOption) => {
       const { format, values } = formatOption;
       let label = format;
 
       values.forEach((value, index) => {
-        const replaceWith = (value || '');
+        const replaceWith = value || '';
         label = label.replace(`{${index + 1}}`, replaceWith).trim();
       });
-      return { label: label.replace(/\s+/g, " ") };
+      return { label: label.replace(/\s+/g, ' ') };
     });
 
   return (
@@ -35,9 +43,9 @@ export default function DisplayNameList({
       items={formatOptions}
       selectedItemProp={'label'}
       textProp={'label'}
-      defaultText={'Select display name as'}
+      defaultText={intl.get('select_display_name_as')}
       filterable={false}
-      { ...restProps }
+      {...restProps}
     />
   );
-}
+}

src/components/Drawer/Drawer.js

@@ -3,6 +3,7 @@ import { Position, Drawer } from '@blueprintjs/core';
 
 import 'style/components/Drawer.scss';
 
+import { DrawerProvider } from './DrawerProvider';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { compose } from 'utils';
 
@@ -27,7 +28,7 @@ function DrawerComponent(props) {
       portalClassName={'drawer-portal'}
       {...props}
     >
-      {children}
+      <DrawerProvider {...props}>{children}</DrawerProvider>
     </Drawer>
   );
 }

src/components/Drawer/DrawerProvider.js

@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from 'react';
+
+const DrawerContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function DrawerProvider({ ...props }) {
+  const provider = { ...props };
+
+  return <DrawerContext.Provider value={provider} {...props} />;
+}
+
+const useDrawerContext = () => useContext(DrawerContext);
+
+export { DrawerProvider, useDrawerContext };

src/components/DrawersContainer.js

@@ -13,6 +13,10 @@ import ItemDetailDrawer from '../containers/Drawers/ItemDetailDrawer';
 import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
+import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
+import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
+import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
+import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -37,6 +41,12 @@ export default function DrawersContainer() {
       <InventoryAdjustmentDetailDrawer
         name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
       />
+      <CashflowTransactionDetailDrawer
+        name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER}
+      />
+      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
+      <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
+      <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
     </div>
   );
 }

src/components/FormattedMessage.js

@@ -1,7 +1,7 @@
 import intl from 'react-intl-universal';
 
-export function FormattedMessage({ id }) {
-  return intl.get(id);
+export function FormattedMessage({ id, values }) {
+  return intl.get(id, values);
 }
 
 export function FormattedHTMLMessage({ ...args }) {

src/components/IntersectionObserver/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntersectionObserver } from 'hooks/utils';
+
+/**
+ * Intersection observer.
+ */
+export function IntersectionObserver({ onIntersect }) {
+  const loadMoreButtonRef = React.useRef();
+
+  useIntersectionObserver({
+    // enabled: !isItemsLoading && !isResourceLoading,
+    target: loadMoreButtonRef,
+    onIntersect: () => {
+      onIntersect && onIntersect();
+    },
+  });
+
+  return (
+    <div
+      ref={loadMoreButtonRef}
+      style={{ opacity: 0, height: 0, width: 0, padding: 0, margin: 0 }}
+    >
+      Load Newer
+    </div>
+  );
+}

src/components/ItemsSuggestField.js

@@ -1,13 +1,68 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
 import { Suggest } from '@blueprintjs/select';
+import classNames from 'classnames';
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+import { CLASSES } from 'common/classes';
 
 import { FormattedMessage as T } from 'components';
 
-export default function ItemsSuggestField({
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+// Creates a new item from query.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Item renderer.
+const itemRenderer = (item, { modifiers, handleClick }) => (
+  <MenuItem
+    key={item.id}
+    text={item.name}
+    label={item.code}
+    onClick={handleClick}
+  />
+);
+
+// Filters items.
+const filterItemsPredicater = (query, item, _index, exactMatch) => {
+  const normalizedTitle = item.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+function ItemsSuggestField({
   items,
   initialItemId,
   selectedItemId,
@@ -18,6 +73,10 @@ export default function ItemsSuggestField({
   sellable = false,
   purchasable = false,
   popoverFill = false,
+
+  allowCreate = true,
+
+  openDrawer,
   ...suggestProps
 }) {
   // Filters items based on filter props.
@@ -36,28 +95,23 @@ export default function ItemsSuggestField({
   // Find initial item object.
   const initialItem = useMemo(
     () => filteredItems.some((a) => a.id === initialItemId),
-    [initialItemId],
+    [initialItemId, filteredItems],
   );
 
   const [selectedItem, setSelectedItem] = useState(initialItem || null);
 
   const onItemSelect = useCallback(
     (item) => {
-      setSelectedItem({ ...item });
-      onItemSelected && onItemSelected(item);
+      if (item.id) {
+        setSelectedItem({ ...item });
+        onItemSelected && onItemSelected(item);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_ITEM);
+      }
     },
-    [setSelectedItem, onItemSelected],
+    [setSelectedItem, onItemSelected, openDrawer],
   );
 
-  const itemRenderer = useCallback((item, { modifiers, handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.code}
-      onClick={handleClick}
-    />
-  ));
-
   useEffect(() => {
     if (typeof selectedItemId !== 'undefined') {
       const item = selectedItemId
@@ -67,27 +121,12 @@ export default function ItemsSuggestField({
     }
   }, [selectedItemId, filteredItems, setSelectedItem]);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
-  // Filters items.
-  const filterItemsPredicater = useCallback(
-    (query, item, _index, exactMatch) => {
-      const normalizedTitle = item.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
   return (
     <Suggest
       items={filteredItems}
@@ -104,7 +143,12 @@ export default function ItemsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDrawerActions)(ItemsSuggestField);

src/components/MoreMenutItems.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+function MoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
+        </Menu>
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}
+
+export default MoreMenuItems;

src/components/SMSPreview/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from 'components';
+
+/**
+ * SMS Message preview.
+ */
+export function SMSMessagePreview({
+  message,
+  iconWidth = '265px',
+  iconHeight = '287px',
+  iconColor = '#adadad',
+}) {
+  return (
+    <SMSMessagePreviewBase>
+      <Icon
+        icon={'sms-message-preview'}
+        width={iconWidth}
+        height={iconHeight}
+        color={iconColor}
+      />
+      <SMSMessageText>{message}</SMSMessageText>
+    </SMSMessagePreviewBase>
+  );
+}
+
+const SMSMessageText = styled.div`
+  position: absolute;
+  top: 60px;
+  padding: 12px;
+  color: #fff;
+  border-radius: 12px;
+  margin-left: 12px;
+  margin-right: 12px;
+  word-break: break-word;
+  background: #2fa2e4;
+  font-size: 13px;
+  line-height: 1.6;
+`;
+
+const SMSMessagePreviewBase = styled.div`
+  position: relative;
+  width: 265px;
+  margin: 0 auto;
+`;

src/components/Sidebar/Sidebar.js

@@ -2,16 +2,19 @@ import React from 'react';
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
+import { useGetSidebarMenu } from './utils';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
 export default function Sidebar({ dashboardContentRef }) {
+  const menu = useGetSidebarMenu();
+
   return (
     <SidebarContainer>
       <SidebarHead />
 
       <div className="sidebar__menu">
-        <SidebarMenu />
+        <SidebarMenu menu={menu} />
       </div>
 
       <div class="sidebar__version">0.0.1-beta version.</div>

src/components/Sidebar/SidebarHead.js

@@ -3,7 +3,7 @@ import { Button, Popover, Menu, Position } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { compose, firstLettersArgs } from 'utils';
 import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedUser } from '../Dashboard/AuthenticatedUser';
+import { useAuthenticatedAccount } from '../../hooks/query';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -18,7 +18,7 @@ function SidebarHead({
   organization,
 }) {
   // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();
 
   return (
     <div className="sidebar__head">

src/components/Sidebar/SidebarMenu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
-import sidebarMenuList from 'config/sidebarMenu';
+
 import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
@@ -24,7 +24,7 @@ function SidebarMenuItemSpace({ space }) {
   return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
 }
 
-function SidebarMenu({ isSubscriptionActive }) {
+function SidebarMenu({ menu, isSubscriptionActive }) {
   const history = useHistory();
   const location = useLocation();
 
@@ -93,7 +93,7 @@ function SidebarMenu({ isSubscriptionActive }) {
     });
   };
 
-  const filterItems = sidebarMenuList.filter(
+  const filterItems = menu.filter(
     (item) => isSubscriptionActive || item.enableBilling,
   );
   const items = menuItemsMapper(filterItems);

src/components/Sidebar/utils.js

@@ -0,0 +1,48 @@
+import sidebarMenuList from 'config/sidebarMenu';
+import { isArray, isEmpty } from 'lodash';
+import { useAbilityContext } from 'hooks/utils';
+
+export function useGetSidebarMenu() {
+  const ability = useAbilityContext();
+
+  return sidebarMenuList
+    .map((item) => {
+      const children = isArray(item.children)
+        ? item.children.filter((childItem) => {
+            return isArray(childItem.permission)
+              ? childItem.permission.some((perm) =>
+                  ability.can(perm.ability, perm.subject),
+                )
+              : childItem?.permission?.ability && childItem?.permission?.subject
+              ? ability.can(
+                  childItem.permission.ability,
+                  childItem.permission.subject,
+                )
+              : true;
+          })
+        : [];
+
+      return {
+        ...item,
+        ...(isArray(item.children)
+          ? {
+              children,
+            }
+          : {}),
+      };
+    })
+    .filter((item) => {
+      return isArray(item.permission)
+        ? item.permission.some((per) =>
+            ability.can(per.ability, per.subject),
+          )
+        : item?.permission?.ability && item?.permission?.subject
+        ? ability.can(item.permission.ability, item.permission.subject)
+        : true;
+    })
+    .filter((item) =>
+      isEmpty(item.children) && !item.href && !item.label && !item.divider
+        ? false
+        : true,
+    );
+}

src/components/Utils/FormatDate.js

@@ -8,7 +8,7 @@ import intl from 'react-intl-universal';
 export function FormatDate({ value, format = 'YYYY MMM DD' }) {
   const localizedFormat = intl.get(`date_formats.${format}`);
 
-  return moment().format(localizedFormat);
+  return moment(value).format(localizedFormat);
 }
 
 /**

src/components/index.js

@@ -23,9 +23,6 @@ import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
 import DashboardActionViewsList from './Dashboard/DashboardActionViewsList';
-import Dialog from './Dialog/Dialog';
-import DialogContent from './Dialog/DialogContent';
-import DialogSuspense from './Dialog/DialogSuspense';
 import InputPrependButton from './Forms/InputPrependButton';
 import CategoriesSelectList from './CategoriesSelectList';
 import Row from './Grid/Row';
@@ -61,7 +58,9 @@ import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
+import MoreMenuItems from './MoreMenutItems';
 
+export * from './Dialog';
 export * from './Menu';
 export * from './AdvancedFilter/AdvancedFilterDropdown';
 export * from './AdvancedFilter/AdvancedFilterPopover';
@@ -81,6 +80,13 @@ export * from './Forms';
 export * from './MultiSelectTaggable';
 export * from './Utils/FormatNumber';
 export * from './Utils/FormatDate';
+export * from './BankAccounts';
+export * from './IntersectionObserver';
+export * from './Datatable/CellForceWidth';
+export * from './Button';
+export * from './IntersectionObserver';
+export * from './SMSPreview';
+export * from './Contacts';
 
 const Hint = FieldHint;
 
@@ -114,9 +120,6 @@ export {
   LoadingIndicator,
   DashboardActionViewsList,
   AppToaster,
-  Dialog,
-  DialogContent,
-  DialogSuspense,
   InputPrependButton,
   CategoriesSelectList,
   Col,
@@ -152,4 +155,5 @@ export {
   ItemsMultiSelect,
   Card,
   AvaterCell,
+  MoreMenuItems,
 };

src/config/financialReportsMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import { ReportsAction, AbilitySubject } from '../common/abilityOption';
 
 export const financialReportMenus = [
   {
@@ -11,6 +12,8 @@ export const financialReportMenus = [
           <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
         ),
         link: '/financial-reports/balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_BALANCE_SHEET,
       },
       {
         title: <T id={'trial_balance_sheet'} />,
@@ -18,11 +21,15 @@ export const financialReportMenus = [
           <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
         ),
         link: '/financial-reports/trial-balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
       },
       {
         title: <T id={'profit_loss_report'} />,
         desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
         link: '/financial-reports/profit-loss-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PROFIT_LOSS,
       },
       {
         title: <T id={'cash_flow_statement'} />,
@@ -30,16 +37,22 @@ export const financialReportMenus = [
           <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
         ),
         link: '/financial-reports/cash-flow',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CASHFLOW,
       },
       {
         title: <T id={'journal_report'} />,
         desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
         link: '/financial-reports/journal-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_JOURNAL,
       },
       {
         title: <T id={'general_ledger_report'} />,
         desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
         link: '/financial-reports/general-ledger',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_GENERAL_LEDGET,
       },
       {
         title: <T id={'receivable_aging_summary'} />,
@@ -47,11 +60,15 @@ export const financialReportMenus = [
           <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
         ),
         link: '/financial-reports/receivable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AR_AGING_SUMMARY,
       },
       {
         title: <T id={'payable_aging_summary'} />,
         desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
         link: '/financial-reports/payable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AP_AGING_SUMMARY,
       },
     ],
   },
@@ -71,6 +88,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/purchases-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
       },
       {
         title: <T id={'sales_by_items'} />,
@@ -82,6 +101,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/sales-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_SALES_BY_ITEMS,
       },
       {
         title: <T id={'inventory_valuation'} />,
@@ -93,6 +114,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/inventory-valuation',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
       },
       {
         title: <T id={'customers_balance_summary'} />,
@@ -104,6 +127,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/customers-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'vendors_balance_summary'} />,
@@ -111,6 +136,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'summerize_the_total_amount_your_business_owes_each_vendor'} />
         ),
         link: '/financial-reports/vendors-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'customers_transactions'} />,
@@ -120,6 +147,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-customers',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
       },
       {
         title: <T id={'vendors_transactions'} />,
@@ -131,6 +160,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-vendors',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
       },
       {
         title: <T id={'inventory_item_details'} />,
@@ -138,6 +169,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
         ),
         link: '/financial-reports/inventory-item-details',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
       },
     ],
   },

src/config/preferencesMenu.js

@@ -1,29 +1,34 @@
-import React  from 'react'
-import {  FormattedMessage as T } from 'components';
+import React from 'react';
+import { FormattedMessage as T } from 'components';
 
 export default [
   {
-    text: <T id={'general'}/>,
+    text: <T id={'general'} />,
     disabled: false,
     href: '/preferences/general',
   },
   {
-    text: <T id={'users'}/>,
+    text: <T id={'users'} />,
     href: '/preferences/users',
   },
   {
-    text: <T id={'currencies'}/>,
-   
+    text: <T id={'currencies'} />,
+
     href: '/preferences/currencies',
   },
   {
-    text: <T id={'accountant'}/>,
+    text: <T id={'accountant'} />,
     disabled: false,
     href: '/preferences/accountant',
   },
   {
-    text: <T id={'items'}/>,
+    text: <T id={'items'} />,
     disabled: false,
     href: '/preferences/items',
   },
+  {
+    text: <T id={'sms_integration.label'} />,
+    disabled: false,
+    href: '/preferences/sms-message',
+  },
 ];

src/config/sidebarMenu.js

@@ -1,5 +1,26 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  ReportsAction,
+  AbilitySubject,
+  ItemAction,
+  InventoryAdjustmentAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  PaymentReceiveAction,
+  BillAction,
+  PaymentMadeAction,
+  CustomerAction,
+  VendorAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  CashflowAction,
+  PreferencesAbility,
+  ExchangeRateAbility,
+  SubscriptionBillingAbility,
+} from '../common/abilityOption';
 
 export default [
   {
@@ -11,6 +32,32 @@ export default [
   {
     text: <T id={'sales_inventory'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
+      },
+      {
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: InventoryAdjustmentAction.View,
+      },
+      {
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
+      },
+      {
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
+      },
+      {
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
+      },
+      {
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
+      },
+    ],
   },
   {
     text: <T id={'items'} />,
@@ -18,37 +65,70 @@ export default [
       {
         text: <T id={'items'} />,
         href: '/items',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'inventory_adjustments'} />,
         href: '/inventory-adjustments',
+        permission: {
+          subject: AbilitySubject.InventoryAdjustment,
+          ability: InventoryAdjustmentAction.View,
+        },
       },
       {
         text: <T id={'category_list'} />,
         href: '/items/categories',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New inventory item'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New service'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
-      // {
-      //   text: <T id={'New inventory adjustment'} />,
-      // },
     ],
   },
   {
@@ -57,43 +137,109 @@ export default [
       {
         text: <T id={'estimates'} />,
         href: '/estimates',
-        newTabHref: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.View,
+        },
       },
       {
         text: <T id={'invoices'} />,
         href: '/invoices',
-        newTabHref: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.View,
+        },
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.View,
+        },
       },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'new_estimate'} />,
         href: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.Create,
+        },
       },
       {
         text: <T id={'new_invoice'} />,
         href: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.Create,
+        },
       },
       {
         text: <T id={'new_receipt'} />,
         href: '/receipts/new',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.Create,
+        },
       },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.Create,
+        },
       },
     ],
   },
@@ -103,27 +249,62 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        newTabHref: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.View,
+        },
       },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New purchase invoice'} />,
         href: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
       },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.Create,
+        },
       },
     ],
   },
@@ -133,33 +314,77 @@ export default [
       {
         text: <T id={'customers'} />,
         href: '/customers',
-        newTabHref: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'vendors'} />,
         href: '/vendors',
-        newTabHref: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.Create,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         text: <T id={'new_customer'} />,
         href: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'new_vendor'} />,
         href: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.View,
+        },
       },
     ],
   },
   {
     text: <T id={'accounting'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
+      },
+      {
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
+      },
+    ],
   },
   {
     text: <T id={'financial'} />,
@@ -167,31 +392,123 @@ export default [
       {
         text: <T id={'accounts_chart'} />,
         href: '/accounts',
+        permission: {
+          subject: AbilitySubject.Account,
+          ability: AccountAction.View,
+        },
       },
       {
         text: <T id={'manual_journals'} />,
         href: '/manual-journals',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.View,
+        },
       },
+      // {
+      //   text: <T id={'sidebar.transactions_locaking'} />,
+      //   href: '/transactions-locking',
+      //   permission: {
+      //     subject: AbilitySubject.ManualJournal,
+      //     ability: ManualJournalAction.TransactionLocking,
+      //   },
+      // },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',
+        permission: {
+          subject: AbilitySubject.ExchangeRate,
+          ability: ExchangeRateAbility.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         text: <T id={'make_journal_entry'} />,
         href: '/make-journal-entry',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
     ],
   },
   {
-    text: <T id={'banking'} />,
-    children: [],
+    text: <T id={'siebar.cashflow'} />,
+    children: [
+      {
+        text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
+        href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.View,
+        },
+      },
+      {
+        text: <T id={'New tasks'} />,
+        label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
+      },
+      {
+        divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
+      },
+      {
+        text: <T id={'cash_flow.label.add_money_in'} />,
+        href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
+      },
+      {
+        text: <T id={'cash_flow.label.add_money_out'} />,
+        href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
+      },
+      {
+        text: <T id={'cash_flow.label.add_cash_account'} />,
+        href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
+      },
+      {
+        text: <T id={'cash_flow.label.add_bank_account'} />,
+        href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
+      },
+    ],
   },
   {
     text: <T id={'expenses'} />,
@@ -199,17 +516,33 @@ export default [
       {
         text: <T id={'expenses'} />,
         href: '/expenses',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         text: <T id={'new_expense'} />,
         href: '/expenses/new',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
     ],
   },
@@ -219,80 +552,216 @@ export default [
       {
         text: <T id={'balance_sheet'} />,
         href: '/financial-reports/balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'trial_balance_sheet'} />,
         href: '/financial-reports/trial-balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'journal'} />,
         href: '/financial-reports/journal-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_JOURNAL,
+        },
       },
       {
         text: <T id={'general_ledger'} />,
         href: '/financial-reports/general-ledger',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_GENERAL_LEDGET,
+        },
       },
       {
         text: <T id={'profit_loss_sheet'} />,
         href: '/financial-reports/profit-loss-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PROFIT_LOSS,
+        },
       },
       {
         text: <T id={'cash_flow_statement'} />,
         href: '/financial-reports/cash-flow',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+        },
       },
       {
         text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AR_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AP_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         text: <T id={'purchases_by_items'} />,
         href: '/financial-reports/purchases-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'sales_by_items'} />,
         href: '/financial-reports/sales-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_SALES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'customers_transactions'} />,
         href: '/financial-reports/transactions-by-customers',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'vendors_transactions'} />,
         href: '/financial-reports/transactions-by-vendors',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'customers_balance_summary'} />,
         href: '/financial-reports/customers-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'vendors_balance_summary'} />,
         href: '/financial-reports/vendors-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'inventory'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         text: <T id={'inventory_item_details'} />,
         href: '/financial-reports/inventory-item-details',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+        },
       },
       {
         text: <T id={'inventory_valuation'} />,
         href: '/financial-reports/inventory-valuation',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+        },
       },
     ],
   },
@@ -300,14 +769,32 @@ export default [
     text: <T id={'system'} />,
     enableBilling: true,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Preferences,
+        ability: PreferencesAbility.Mutate,
+      },
+      {
+        subject: AbilitySubject.SubscriptionBilling,
+        ability: SubscriptionBillingAbility.View,
+      },
+    ],
   },
   {
     text: <T id={'preferences'} />,
     href: '/preferences',
+    permission: {
+      subject: AbilitySubject.Preferences,
+      ability: PreferencesAbility.Mutate,
+    },
   },
   {
     text: <T id={'billing'} />,
     href: '/billing',
     enableBilling: true,
+    permission: {
+      subject: AbilitySubject.SubscriptionBilling,
+      ability: SubscriptionBillingAbility.View,
+    },
   },
 ];

src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -26,8 +26,11 @@ import withManualJournals from './withManualJournals';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
 
-import { If, DashboardActionViewsList } from 'components';
-
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -86,13 +89,14 @@ function ManualJournalActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'journal_entry'} />}
-          onClick={onClickNewManualJournal}
-        />
+        <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'journal_entry'} />}
+            onClick={onClickNewManualJournal}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: manualJournalsFilterConditions,

src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import JournalDeleteAlert from 'containers/Alerts/ManualJournals/JournalDeleteAlert';
-import JournalPublishAlert from 'containers/Alerts/ManualJournals/JournalPublishAlert';
+
+const JournalDeleteAlert = React.lazy(() =>
+  import('../../Alerts/ManualJournals/JournalDeleteAlert'),
+);
+const JournalPublishAlert = React.lazy(() =>
+  import('../../Alerts/ManualJournals/JournalPublishAlert'),
+);
 
 /**
  * Manual journals alerts.
  */
-export default function ManualJournalsAlerts() {
-  return (
-    <div>
-      <JournalDeleteAlert name={'journal-delete'} />
-      <JournalPublishAlert name={'journal-publish'} />
-    </div>
-  )
-}
+
+export default [
+  { name: 'journal-delete', component: JournalDeleteAlert },
+  { name: 'journal-publish', component: JournalPublishAlert },
+];

src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../../common/abilityOption';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function ManualJournalsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/make-journal-entry');
-            }}
-          >
-            <T id={'make_journal'} />
-          </Button>
+          <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/make-journal-entry');
+              }}
+            >
+              <T id={'make_journal'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Accounting/JournalsLanding/ManualJournalsList.js

@@ -5,7 +5,6 @@ import 'style/pages/ManualJournal/List.scss';
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import { ManualJournalsListProvider } from './ManualJournalsListProvider';
-import ManualJournalsAlerts from './ManualJournalsAlerts';
 import ManualJournalsViewTabs from './ManualJournalsViewTabs';
 import ManualJournalsDataTable from './ManualJournalsDataTable';
 import ManualJournalsActionsBar from './ManualJournalActionsBar';
@@ -33,7 +32,6 @@ function ManualJournalsTable({
         <ManualJournalsDataTable />
       </DashboardPageContent>
 
-      <ManualJournalsAlerts />
     </ManualJournalsListProvider>
   );
 }

src/containers/Accounting/JournalsLanding/components.js

@@ -13,7 +13,18 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
+import {
+  Can,
+  FormattedMessage as T,
+  Choose,
+  Money,
+  If,
+  Icon,
+} from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 /**
@@ -150,25 +161,31 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <If condition={!original.is_published}>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon="arrow-to-top" />}
+            text={intl.get('publish_journal')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
         <MenuItem
-          icon={<Icon icon="arrow-to-top" />}
-          text={intl.get('publish_journal')}
-          onClick={safeCallback(onPublish, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_journal')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_journal')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_journal')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuItem
+          text={intl.get('delete_journal')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 };

src/containers/Accounting/MakeJournal/components.js

@@ -128,6 +128,7 @@ export const useJournalTableEntriesColumns = () => {
         className: 'account',
         disableSortBy: true,
         width: 160,
+        fieldProps: { allowCreate: true }
       },
       {
         Header: CreditHeaderCell,

src/containers/Accounting/ManualJournalUniversalSearch.js

@@ -1,6 +1,10 @@
 import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../common/abilityOption';
 
 /**
  * Universal search manual journal item select action.
@@ -44,4 +48,8 @@ export const universalSearchJournalBind = () => ({
   optionItemLabel: intl.get('manual_journals'),
   selectItemAction: JournalUniversalSearchSelectAction,
   itemSelect: manualJournalsToSearch,
+  permission: {
+    ability: ManualJournalAction.View,
+    subject: AbilitySubject.ManualJournal,
+  },
 });

src/containers/Accounts/AccountUniversalSearch.js

@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 import withDrawerActions from '../Drawer/withDrawerActions';
 
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps
   resourceType,
@@ -42,4 +45,8 @@ export const universalSearchAccountBind = () => ({
   optionItemLabel: intl.get('accounts'),
   selectItemAction: AccountUniversalSearchItemSelect,
   itemSelect: accountToSearch,
+  permission: {
+    ability: AccountAction.View,
+    subject: AbilitySubject.Account,
+  },
 });

src/containers/Accounts/AccountsActionsBar.js

@@ -15,6 +15,7 @@ import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
+  Can,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
@@ -30,6 +31,8 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
 import withSettings from '../Settings/withSettings';
 import withSettingsActions from '../Settings/withSettingsActions';
+import { AccountAction, AbilitySubject } from '../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -116,13 +119,14 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_account'} />}
-          onClick={onClickNewAccount}
-        />
+        <Can I={AccountAction.Create} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_account'} />}
+            onClick={onClickNewAccount}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -183,11 +187,13 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={accountsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={accountsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Accounts/AccountsAlerts.js

@@ -1,26 +1,20 @@
 import React from 'react';
-import AccountDeleteAlert from 'containers/Alerts/AccountDeleteAlert';
-import AccountInactivateAlert from 'containers/Alerts/AccountInactivateAlert';
-import AccountActivateAlert from 'containers/Alerts/AccountActivateAlert';
+
+const AccountDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/AccountDeleteAlert'),
+);
+const AccountInactivateAlert = React.lazy(() =>
+  import('containers/Alerts/AccountInactivateAlert'),
+);
+const AccountActivateAlert = React.lazy(() =>
+  import('containers/Alerts/AccountActivateAlert'),
+);
 // import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
 // import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
 // import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
 
-/**
- * Accounts alert.
- */
-export default function AccountsAlerts({
-
-}) {
-  return (
-    <div class="accounts-alerts">
-      <AccountDeleteAlert name={'account-delete'} />
-      <AccountInactivateAlert name={'account-inactivate'} />
-      <AccountActivateAlert name={'account-activate'} />
-
-      {/* <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
-      <AccountBulkInactivateAlert name={'accounts-bulk-inactivate'} />
-      <AccountBulkActivateAlert name={'accounts-bulk-activate'} /> */}
-    </div>
-  )
-}
+export default [
+  { name: 'account-delete', component: AccountDeleteAlert },
+  { name: 'account-inactivate', component: AccountInactivateAlert },
+  { name: 'account-activate', component: AccountActivateAlert },
+];

src/containers/Accounts/AccountsChart.js

@@ -7,7 +7,6 @@ import { AccountsChartProvider } from './AccountsChartProvider';
 
 import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
 import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar';
-import AccountsAlerts from './AccountsAlerts';
 import AccountsDataTable from './AccountsDataTable';
 
 import withAccounts from 'containers/Accounts/withAccounts';
@@ -49,8 +48,6 @@ function AccountsChart({
           <AccountsDataTable />
         </DashboardContentTable>
       </DashboardPageContent>
-
-      <AccountsAlerts />
     </AccountsChartProvider>
   );
 }

src/containers/Accounts/components.js

@@ -8,9 +8,10 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Icon, Money, If } from 'components';
+import { Can, Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
 
 /**
  * Accounts table actions menu.
@@ -34,38 +35,45 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_account')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="plus" />}
-        text={intl.get('new_child_account')}
-        onClick={safeCallback(onNewChild, original)}
-      />
-      <MenuDivider />
-      <If condition={original.active}>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_account')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.active}>
+
         <MenuItem
-          text={intl.get('activate_account')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="plus" />}
+          text={intl.get('new_child_account')}
+          onClick={safeCallback(onNewChild, original)}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_account')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+        <MenuDivider />
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_account')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_account')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuItem
+          text={intl.get('delete_account')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Accounts/utils.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 
-import { CLASSES } from '../../common/classes';
 import { If, AppToaster } from 'components';
 import { NormalCell, BalanceCell } from './components';
 import { transformTableStateToQuery, isBlank } from 'utils';

src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteCashflowTransaction } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Account delete transaction alert.
+ */
+function AccountDeleteTransactionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { referenceId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteTransactionMutate, isLoading } =
+    useDeleteCashflowTransaction();
+
+  // handle cancel delete alert
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete transaction.
+  const handleConfirmTransactioneDelete = () => {
+    deleteTransactionMutate(referenceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('cashflow-transaction-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmTransactioneDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(AccountDeleteTransactionAlert);

src/containers/Alerts/EasySMSIntegration/EasySMSDisconnectAlert.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useSettingEasySMSDisconnect } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Easy SMS disconnect alert.
+ */
+function EasySMSDisconnectAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {},
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: disconnectEasySMS, isLoading } =
+    useSettingEasySMSDisconnect();
+
+  // Handle cancel Disconnect alert.
+  const handleCancelDisconnect = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm Disconnect alert.
+  const handleConfirmDisconnect = () => {
+    disconnectEasySMS()
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('easysms.disconnect.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'easysms.label.disconnect'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelDisconnect}
+      onConfirm={handleConfirmDisconnect}
+      loading={isLoading}
+    >
+      <p>Ea aliqua elit reprehenderit pariatur consequat voluptate quis.</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(EasySMSDisconnectAlert);

src/containers/Alerts/Invoices/CancelBadDebtAlert.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useCancelBadDebt } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Cancel bad debt alert.
+ */
+function CancelBadDebtAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // handle cancel  alert.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const { mutateAsync: cancelBadDebtMutate, isLoading } = useCancelBadDebt();
+
+  // handleConfirm alert.
+  const handleConfirm = () => {
+    cancelBadDebtMutate(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('bad_debt.cancel_alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'save'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'bad_debt.cancel_alert.message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelBadDebtAlert);

src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -40,7 +40,7 @@ function InventoryAdjustmentDeleteAlert({
     deleteInventoryAdjMutate(inventoryId)
       .then(() => {
         AppToaster.show({
-          message: intl.get('the_adjustment_has_been_deleted_successfully'),
+          message: intl.get('the_adjustment_transaction_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeDrawer('inventory-adjustment-drawer');

src/containers/Alerts/Roles/RoleDeleteAlert.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useDeleteRole } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Users/Roles/utils';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Role delete alert.
+ */
+function RoleDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { roleId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
+
+  // Handle cancel delete role alert.
+  const handleCancelDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete role.
+  const handleConfirmDeleteRole = () => {
+    deleteRole(roleId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('roles.permission_schema.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDelete}
+      onConfirm={handleConfirmDeleteRole}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RoleDeleteAlert);

src/containers/AlertsContainer/components.js

@@ -0,0 +1,100 @@
+import React, { Suspense } from 'react';
+import * as R from 'ramda';
+import { Intent, Classes, ProgressBar } from '@blueprintjs/core';
+import { debounce } from 'lodash';
+import styled from 'styled-components';
+import clsx from 'classnames';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { AppToaster } from 'components';
+
+function AlertLazyFallbackMessage({ amount }) {
+  return (
+    <React.Fragment>
+      <ToastText>Alert content is loading, just a second.</ToastText>
+      <ProgressBar
+        className={clsx({
+          [Classes.PROGRESS_NO_STRIPES]: amount >= 100,
+        })}
+        intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
+        value={amount / 100}
+      />
+    </React.Fragment>
+  );
+}
+
+function AlertLazyFallback({}) {
+  const progressToastInterval = React.useRef(null);
+  const toastKey = React.useRef(null);
+
+  const toastProgressLoading = (amount) => {
+    return {
+      message: <AlertLazyFallbackMessage amount={amount} />,
+      onDismiss: (didTimeoutExpire) => {
+        if (!didTimeoutExpire) {
+          window.clearInterval(progressToastInterval.current);
+        }
+      },
+      timeout: amount < 100 ? 0 : 2000,
+    };
+  };
+
+  const triggerProgressToast = () => {
+    let progress = 0;
+    toastKey.current = AppToaster.show(toastProgressLoading(0));
+
+    progressToastInterval.current = window.setInterval(() => {
+      if (toastKey.current == null || progress > 100) {
+        window.clearInterval(progressToastInterval.current);
+      } else {
+        progress += 10 + Math.random() * 20;
+        AppToaster.show(toastProgressLoading(progress), toastKey.current);
+      }
+    }, 100);
+  };
+
+  const hideProgressToast = () => {
+    window.clearInterval(progressToastInterval.current);
+    AppToaster.dismiss(toastKey.current);
+  };
+
+  // Debounce the trigger.
+  const dobounceTrigger = React.useRef(
+    debounce(() => {
+      triggerProgressToast();
+    }, 500),
+  );
+  React.useEffect(() => {
+    dobounceTrigger.current();
+
+    return () => {
+      hideProgressToast();
+      dobounceTrigger.current.cancel();
+    };
+  });
+
+  return null;
+}
+
+function AlertLazyInside({ isOpen, name, Component }) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={<AlertLazyFallback />}>
+      <Component name={name} />
+    </Suspense>
+  );
+}
+
+export const AlertLazy = R.compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(AlertLazyInside);
+
+const ToastText = styled.div`
+  margin-bottom: 10px;
+`;

src/containers/AlertsContainer/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AlertLazy } from './components'
+import registered from './registered';
+
+export default function AlertsContainer() {
+  return (
+    <React.Fragment>
+      {registered.map((alert) => (
+        <AlertLazy name={alert.name} Component={alert.component} />
+      ))}
+    </React.Fragment>
+  );
+}

src/containers/AlertsContainer/registered.js

@@ -0,0 +1,43 @@
+import AccountsAlerts from '../Accounts/AccountsAlerts';
+import ItemsAlerts from '../Items/ItemsAlerts';
+import ItemsCategoriesAlerts from '../ItemsCategories/ItemsCategoriesAlerts';
+import InventoryAdjustmentsAlerts from '../InventoryAdjustments/InventoryAdjustmentsAlerts';
+import EstimatesAlerts from '../Sales/Estimates/EstimatesAlerts';
+import InvoicesAlerts from '../Sales/Invoices/InvoicesAlerts';
+import ReceiptsAlerts from '../Sales/Receipts/ReceiptsAlerts';
+import PaymentReceiveAlerts from '../Sales/PaymentReceives/PaymentReceiveAlerts';
+import BillsAlerts from '../Purchases/Bills/BillsLanding/BillsAlerts';
+import PaymentMadesAlerts from '../Purchases/PaymentMades/PaymentMadesAlerts';
+import CustomersAlerts from '../Customers/CustomersAlerts';
+import VendorsAlerts from '../Vendors/VendorsAlerts';
+import ManualJournalsAlerts from '../Accounting/JournalsLanding/ManualJournalsAlerts';
+import ExchangeRatesAlerts from '../ExchangeRates/ExchangeRatesAlerts';
+import ExpensesAlerts from '../Expenses/ExpensesAlerts';
+import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTransactionsAlerts';
+import UsersAlerts from '../Preferences/Users/UsersAlerts';
+import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
+import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
+import EasySMSIntegrationAlerts from '../Preferences/EasySMSIntegration/EasySMSIntegrationAlerts';
+
+export default [
+  ...AccountsAlerts,
+  ...ItemsAlerts,
+  ...ItemsCategoriesAlerts,
+  ...InventoryAdjustmentsAlerts,
+  ...EstimatesAlerts,
+  ...InvoicesAlerts,
+  ...ReceiptsAlerts,
+  ...PaymentReceiveAlerts,
+  ...BillsAlerts,
+  ...PaymentMadesAlerts,
+  ...CustomersAlerts,
+  ...VendorsAlerts,
+  ...ManualJournalsAlerts,
+  ...ExchangeRatesAlerts,
+  ...ExpensesAlerts,
+  ...AccountTransactionsAlerts,
+  ...UsersAlerts,
+  ...CurrenciesAlerts,
+  ...RolesAlerts,
+  ...EasySMSIntegrationAlerts,
+];

src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  DashboardRowsHeightButton,
+  FormattedMessage as T,
+} from 'components';
+import { useRefreshCashflowTransactionsInfinity } from 'hooks/query';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { CashFlowMenuItems } from './utils';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../Settings/withSettings';
+import withSettingsActions from '../../Settings/withSettingsActions';
+import { addMoneyIn, addMoneyOut } from '../../../common/cashflowOptions';
+
+import { compose } from 'utils';
+
+function AccountTransactionsActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  cashflowTansactionsTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('cashflowTransactions', 'tableSize', size);
+  };
+  const { accountId } = useAccountTransactionsContext();
+
+  // Handle money in form
+  const handleMoneyInFormTransaction = (account) => {
+    openDialog('money-in', {
+      account_id: accountId,
+      account_type: account.value,
+      account_name: account.name,
+    });
+  };
+  // Handle money out form
+  const handlMoneyOutFormTransaction = (account) => {
+    openDialog('money-out', {
+      account_id: accountId,
+      account_type: account.value,
+      account_name: account.name,
+    });
+  };
+  // Refresh cashflow infinity transactions hook.
+  const { refresh } = useRefreshCashflowTransactionsInfinity();
+
+  // Handle the refresh button click.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <CashFlowMenuItems
+          items={addMoneyIn}
+          onItemSelect={handleMoneyInFormTransaction}
+          text={<T id={'cash_flow.label.add_money_in'} />}
+          buttonProps={{
+            icon: <Icon icon={'arrow-downward'} iconSize={20} />,
+          }}
+        />
+        <CashFlowMenuItems
+          items={addMoneyOut}
+          onItemSelect={handlMoneyOutFormTransaction}
+          text={<T id={'cash_flow.label.add_money_out'} />}
+          buttonProps={{
+            icon: <Icon icon={'arrow-upward'} iconSize={20} />,
+          }}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={cashflowTansactionsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+)(AccountTransactionsActionsBar);

src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const AccountDeleteTransactionAlert = React.lazy(() =>
+  import('../../Alerts/CashFlow/AccountDeleteTransactionAlert'),
+);
+
+/**
+ * Account transaction alert.
+ */
+export default [
+  {
+    name: 'account-transaction-delete',
+    component: AccountDeleteTransactionAlert,
+  },
+];

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { DataTable, TableFastCell, FormattedMessage as T } from 'components';
+import { TABLES } from 'common/tables';
+
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withSettings from '../../Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useMemorizedColumnsWidths } from '../../../hooks';
+import { useAccountTransactionsColumns, ActionsMenu } from './components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { handleCashFlowTransactionType } from './utils';
+
+import { compose } from 'utils';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+/**
+ * Account transactions data table.
+ */
+function AccountTransactionsDataTable({
+  // #withSettings
+  cashflowTansactionsTableSize,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Retrieve table columns.
+  const columns = useAccountTransactionsColumns();
+
+  // Retrieve list context.
+  const { cashflowTransactions, isCashFlowTransactionsLoading } =
+    useAccountTransactionsContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
+
+  // handle delete transaction
+  const handleDeleteTransaction = ({ reference_id }) => {
+    openAlert('account-transaction-delete', { referenceId: reference_id });
+  };
+
+  const handleViewDetailCashflowTransaction = (referenceType) => {
+    handleCashFlowTransactionType(referenceType, openDrawer);
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    const referenceType = cell.row.original;
+    handleCashFlowTransactionType(referenceType, openDrawer);
+  };
+
+  return (
+    <CashflowTransactionsTable
+      noInitialFetch={true}
+      columns={columns}
+      data={cashflowTransactions}
+      sticky={true}
+      loading={isCashFlowTransactionsLoading}
+      headerLoading={isCashFlowTransactionsLoading}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
+      vListOverscanRowCount={0}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      className="table-constrant"
+      payload={{
+        onViewDetails: handleViewDetailCashflowTransaction,
+        onDelete: handleDeleteTransaction,
+      }}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+  withAlertsActions,
+  withDrawerActions,
+)(AccountTransactionsDataTable);
+
+const DashboardConstrantTable = styled(DataTable)`
+  .table {
+    .thead {
+      .th {
+        background: #fff;
+      }
+    }
+
+    .tbody {
+      .tr:last-child .td {
+        border-bottom: 0;
+      }
+    }
+  }
+`;
+
+const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+  .table .tbody {
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 2rem 0;
+        font-size: 14px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+
+    .tbody-inner {
+      .tr .td:not(:first-child) {
+        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
+      }
+    }
+  }
+`;

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import {
+  Popover,
+  Menu,
+  Position,
+  Button,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { curry } from 'lodash/fp';
+
+import { Icon } from '../../../components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+function AccountSwitchButton() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  return (
+    <AccountSwitchButtonBase
+      minimal={true}
+      rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
+    > 
+      <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
+    </AccountSwitchButtonBase>
+  );
+}
+
+function AccountSwitchItem() {
+  const { push } = useHistory();
+  const { cashflowAccounts, accountId } = useAccountTransactionsContext();
+
+  // Handle item click.
+  const handleItemClick = curry((account, event) => {
+    push(`/cashflow-accounts/${account.id}/transactions`);
+  });
+
+  const items = cashflowAccounts.map((account) => (
+    <AccountSwitchMenuItem
+      name={account.name}
+      balance={account.formatted_amount}
+      onClick={handleItemClick(account)}
+      active={account.id === accountId}
+    />
+  ));
+
+  return (
+    <Popover
+      content={<Menu>{items}</Menu>}
+      position={Position.BOTTOM_LEFT}
+      minimal={true}
+    >
+      <AccountSwitchButton />
+    </Popover>
+  );
+}
+
+function AccountBalanceItem() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  return (
+    <AccountBalanceItemWrap>
+      {intl.get('cash_flow_transaction.balance_in_bigcapital')} {''}
+      <AccountBalanceAmount>
+        {currentAccount.formatted_amount}
+      </AccountBalanceAmount>
+    </AccountBalanceItemWrap>
+  );
+}
+
+function AccountTransactionsDetailsBarSkeleton() {
+  return (
+    <React.Fragment>
+      <DetailsBarSkeletonBase className={Classes.SKELETON}>
+        X
+      </DetailsBarSkeletonBase>
+      <DetailsBarSkeletonBase className={Classes.SKELETON}>
+        X
+      </DetailsBarSkeletonBase>
+    </React.Fragment>
+  );
+}
+
+function AccountTransactionsDetailsContent() {
+  return (
+    <React.Fragment>
+      <AccountSwitchItem />
+      <AccountBalanceItem />
+    </React.Fragment>
+  );
+}
+
+export function AccountTransactionsDetailsBar() {
+  const { isCurrentAccountLoading } = useAccountTransactionsContext();
+
+  return (
+    <AccountTransactionDetailsWrap>
+      {isCurrentAccountLoading ? (
+        <AccountTransactionsDetailsBarSkeleton />
+      ) : (
+        <AccountTransactionsDetailsContent />
+      )}
+    </AccountTransactionDetailsWrap>
+  );
+}
+
+function AccountSwitchMenuItem({
+  name,
+  balance,
+  transactionsNumber,
+  ...restProps
+}) {
+  return (
+    <MenuItem
+      label={balance}
+      text={
+        <React.Fragment>
+          <AccountSwitchItemName>{name}</AccountSwitchItemName>
+          <AccountSwitchItemTranscations>
+            {intl.get('cash_flow_transaction.switch_item', { value: '25' })}
+          </AccountSwitchItemTranscations>
+
+          <AccountSwitchItemUpdatedAt></AccountSwitchItemUpdatedAt>
+        </React.Fragment>
+      }
+      {...restProps}
+    />
+  );
+}
+
+const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+`;
+
+const AccountBalanceItemWrap = styled.div`
+  margin-left: 18px;
+  color: #5f6d86;
+`;
+
+const AccountTransactionDetailsWrap = styled.div`
+  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #d2dce2;
+  padding: 0 22px;
+  height: 42px;
+  align-items: center;
+`;
+const AccountSwitchText = styled.div`
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const AccountBalanceAmount = styled.span`
+  font-weight: 600;
+  display: inline-block;
+  color: rgb(31, 50, 85);
+  ${whenLtr(`margin-left: 10px;`)}
+  ${whenRtl(`margin-right: 10px;`)}
+`;
+
+const AccountSwitchItemName = styled.div`
+  font-weight: 600;
+`;
+const AccountSwitchItemTranscations = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+`;
+
+const AccountSwitchItemUpdatedAt = styled.div`
+  font-size: 12px;
+  opacity: 0.5;
+`;
+
+const AccountSwitchButtonBase = styled(Button)`
+  .bp3-button-text {
+    ${whenLtr(`margin-right: 5px;`)}
+    ${whenRtl(`margin-left: 5px;`)}
+  }
+`;

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import 'style/pages/CashFlow/AccountTransactions/List.scss';
+
+import { DashboardPageContent } from 'components';
+
+import { AccountTransactionsProvider } from './AccountTransactionsProvider';
+import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
+import AccountTransactionsDataTable from './AccountTransactionsDataTable';
+import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
+import { AccountTransactionsProgressBar } from './components';
+
+/**
+ * Account transactions list.
+ */
+function AccountTransactionsList() {
+  return (
+    <AccountTransactionsProvider>
+      <AccountTransactionsActionsBar />
+      <AccountTransactionsDetailsBar />
+      <AccountTransactionsProgressBar />
+
+      <DashboardPageContent>
+        <CashflowTransactionsTableCard>
+          <AccountTransactionsDataTable />
+        </CashflowTransactionsTableCard>
+      </DashboardPageContent>
+    </AccountTransactionsProvider>
+  );
+}
+
+export default AccountTransactionsList;
+
+const CashflowTransactionsTableCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  margin: 30px 15px;
+  background: #fff;
+  flex: 0 1;
+`;

src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { flatten, map } from 'lodash';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { IntersectionObserver } from 'components';
+import {
+  useAccountTransactionsInfinity,
+  useCashflowAccounts,
+  useAccount,
+} from 'hooks/query';
+
+const AccountTransactionsContext = React.createContext();
+
+function flattenInfinityPages(data) {
+  return flatten(map(data.pages, (page) => page.transactions));
+}
+
+/**
+ * Account transctions provider.
+ */
+function AccountTransactionsProvider({ query, ...props }) {
+  const { id } = useParams();
+  const accountId = parseInt(id, 10);
+
+  // Fetch cashflow account transactions list
+  const {
+    data: cashflowTransactionsPages,
+    isFetching: isCashFlowTransactionsFetching,
+    isLoading: isCashFlowTransactionsLoading,
+    isSuccess: isCashflowTransactionsSuccess,
+    fetchNextPage: fetchNextTransactionsPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useAccountTransactionsInfinity(accountId, {
+    page_size: 50,
+    account_id: accountId,
+  });
+
+  // Memorized the cashflow account transactions.
+  const cashflowTransactions = React.useMemo(
+    () =>
+      isCashflowTransactionsSuccess
+        ? flattenInfinityPages(cashflowTransactionsPages)
+        : [],
+    [cashflowTransactionsPages, isCashflowTransactionsSuccess],
+  );
+
+  // Fetch cashflow accounts.
+  const {
+    data: cashflowAccounts,
+    isFetching: isCashFlowAccountsFetching,
+    isLoading: isCashFlowAccountsLoading,
+  } = useCashflowAccounts(query, { keepPreviousData: true });
+
+  // Retrieve specific account details.
+  const {
+    data: currentAccount,
+    isFetching: isCurrentAccountFetching,
+    isLoading: isCurrentAccountLoading,
+  } = useAccount(accountId, { keepPreviousData: true });
+
+  // Handle the observer ineraction.
+  const handleObserverInteract = React.useCallback(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextTransactionsPage();
+    }
+  }, [isFetchingNextPage, hasNextPage, fetchNextTransactionsPage]);
+
+  // Provider payload.
+  const provider = {
+    accountId,
+    cashflowTransactions,
+    cashflowAccounts,
+    currentAccount,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+    isCashFlowAccountsFetching,
+    isCashFlowAccountsLoading,
+    isCurrentAccountFetching,
+    isCurrentAccountLoading,
+  };
+
+  return (
+    <DashboardInsider name={'account-transactions'}>
+      <AccountTransactionsContext.Provider value={provider} {...props} />
+      <IntersectionObserver
+        onIntersect={handleObserverInteract}
+        enabled={!isFetchingNextPage}
+      />
+    </DashboardInsider>
+  );
+}
+
+const useAccountTransactionsContext = () =>
+  React.useContext(AccountTransactionsContext);
+
+export { AccountTransactionsProvider, useAccountTransactionsContext };

src/containers/CashFlow/AccountTransactions/components.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import { MaterialProgressBar } from 'components';
+import { Can, FormatDateCell, If, Icon } from 'components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
+import { safeCallback } from 'utils';
+
+export function ActionsMenu({
+  payload: { onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+          <MenuDivider />
+          <MenuItem
+            text={intl.get('delete_transaction')}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDelete, original)}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+          />
+        </If>
+      </Can>
+    </Menu>
+  );
+}
+/**
+ * Retrieve account transctions table columns.
+ */
+export function useAccountTransactionsColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'type',
+        Header: intl.get('type'),
+        accessor: 'formatted_transaction_type',
+        className: 'type',
+        width: 140,
+        textOverview: true,
+        clickable: true,
+      },
+      {
+        id: 'transaction_number',
+        Header: intl.get('transaction_number'),
+        accessor: 'transaction_number',
+        width: 160,
+        className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 160,
+        className: 'reference_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'deposit',
+        Header: intl.get('cash_flow.label.deposit'),
+        accessor: 'formatted_deposit',
+        width: 110,
+        className: 'deposit',
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'withdrawal',
+        Header: intl.get('cash_flow.label.withdrawal'),
+        accessor: 'formatted_withdrawal',
+        className: 'withdrawal',
+        width: 150,
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'running_balance',
+        Header: intl.get('cash_flow.label.running_balance'),
+        accessor: 'formatted_running_balance',
+        className: 'running_balance',
+        width: 150,
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_balance',
+        className: 'balance',
+        width: 150,
+        textOverview: true,
+        clickable: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}
+
+/**
+ * Account transactions progress bar.
+ */
+export function AccountTransactionsProgressBar() {
+  const { isCashFlowTransactionsFetching } = useAccountTransactionsContext();
+
+  return isCashFlowTransactionsFetching ? <MaterialProgressBar /> : null;
+}

src/containers/CashFlow/AccountTransactions/utils.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Button,
+  PopoverInteractionKind,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+
+import { Select } from '@blueprintjs/select';
+import { Icon } from 'components';
+
+export const CashFlowMenuItems = ({
+  text,
+  items,
+  onItemSelect,
+  buttonProps,
+}) => {
+  // Menu items renderer.
+  const itemsRenderer = (item, { handleClick, modifiers, query }) => (
+    <MenuItem text={item.name} label={item.label} onClick={handleClick} />
+  );
+
+  const handleCashFlowMenuSelect = (type) => {
+    onItemSelect && onItemSelect(type);
+  };
+
+  return (
+    <Select
+      items={items}
+      itemRenderer={itemsRenderer}
+      onItemSelect={handleCashFlowMenuSelect}
+      popoverProps={{
+        minimal: true,
+        position: Position.BOTTOM_LEFT,
+        interactionKind: PopoverInteractionKind.CLICK,
+        modifiers: {
+          offset: { offset: '0, 4' },
+        },
+      }}
+      filterable={false}
+    >
+      <Button
+        text={text}
+        icon={<Icon icon={'plus-24'} iconSize={20} />}
+        minimal={true}
+        {...buttonProps}
+      />
+    </Select>
+  );
+};
+
+export const handleCashFlowTransactionType = (reference, openDrawer) => {
+  switch (reference.reference_type) {
+    case 'SaleReceipt':
+      return openDrawer('receipt-detail-drawer', {
+        receiptId: reference.reference_id,
+      });
+    case 'Journal':
+      return openDrawer('journal-drawer', {
+        manualJournalId: reference.reference_id,
+      });
+    case 'Expense':
+      return openDrawer('expense-drawer', {
+        expenseId: reference.reference_id,
+      });
+    case 'PaymentReceive':
+      return openDrawer('payment-receive-detail-drawer', {
+        paymentReceiveId: reference.reference_id,
+      });
+    case 'BillPayment':
+      return openDrawer('payment-made-detail-drawer', {
+        paymentMadeId: reference.reference_id,
+      });
+
+    default:
+      return openDrawer('cashflow-transaction-drawer', {
+        referenceId: reference.reference_id,
+      });
+  }
+};

src/containers/CashFlow/AccountTransactions/withCashflowAccounts.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { getCashflowAccountsTableStateFactory } from 'store/CashflowAccounts/CashflowAccounts.selectors';
+
+export default (mapState) => {
+  const getCashflowAccountsTableState = getCashflowAccountsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      cashflowAccountsTableState: getCashflowAccountsTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import {
+  setCashflowAccountsTableState,
+  resetCashflowAccountsTableState,
+} from 'store/CashflowAccounts/CashflowAccounts.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  setCashflowAccountsTableState: (queries) =>
+    dispatch(setCashflowAccountsTableState(queries)),
+
+  resetCashflowAccountsTableState: () =>
+    dispatch(resetCashflowAccountsTableState()),
+});
+
+export default connect(null, mapActionsToProps);

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Alignment,
+  Switch,
+} from '@blueprintjs/core';
+import { Can, Icon, FormattedMessage as T } from 'components';
+import { useRefreshCashflowAccounts } from 'hooks/query';
+import { CashflowAction, AbilitySubject } from '../../../common/abilityOption';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
+
+import { compose } from 'utils';
+
+/**
+ * Cash Flow accounts actions bar.
+ */
+function CashFlowAccountsActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withCashflowAccountsTableActions
+  setCashflowAccountsTableState,
+}) {
+  const { refresh } = useRefreshCashflowAccounts();
+
+  // Handle refresh button click.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+  // Handle add bank account.
+  const handleAddBankAccount = () => {
+    openDialog('account-form', {
+      action: 'NEW_ACCOUNT_DEFINED_TYPE',
+      accountType: 'cash',
+    });
+  };
+  // Handle add cash account.
+  const handleAddCashAccount = () => {
+    openDialog('account-form', {
+      action: 'NEW_ACCOUNT_DEFINED_TYPE',
+      accountType: 'bank',
+    });
+  };
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setCashflowAccountsTableState({ inactiveMode: checked });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
+            text={<T id={'cash_flow.label.add_cash_account'} />}
+            onClick={handleAddBankAccount}
+          />
+
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
+            text={<T id={'cash_flow.label.add_bank_account'} />}
+            onClick={handleAddCashAccount}
+          />
+          <NavbarDivider />
+        </Can>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <NavbarDivider />
+        <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={false}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
+      </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export default compose(
+  withDialogActions,
+  withCashflowAccountsTableActions,
+)(CashFlowAccountsActionsBar);