Merge pull request #16 from bigcapitalhq/develop

Release 1.5.5

.env.example

@@ -0,0 +1 @@
+APP_VERSION=$npm_package_version

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.5.3] - 03-01-2020
+
+### Fixed
+
+- Localize the global errors.
+- Expand account name column on trial balance sheet.
+
+## [1.5.0] - 20-12-2021
+
+### Added
+
+- Add credit note on sales module.
+- Add vendor credit on purchases module.
+- Optimize landed costs on purchase invoices.
+- Display associated payment transactions on sale invoice drawer.
+- Display associated pamyment transactions on purchase invoice drawer.
+- Display item associate invoice, bill, estimate and receipt transactions.
+- Transactions locking on all transactions or individual modules.
+- Roles and permissions access control module.
+- Optimize readonly details style of invoice, receipt, estimate, payment receive,
+  purchase invoice, expense, manual journal, inventory adjustment and cashflow transaction.
+
+### Changed
+
+- Dashboard meta boot and authenticated user request query.
+- Optimize Arabic localization.
+
+## [1.4.0] - 11-09-2021
+
+### Added
+
+- Add SMS notification on sale invoice, receipt, customers payments modules.
+- Customer quick create in customers list.
+- Item quick create in items list.
+
+### Changes
+
+change: BIG-171 alerts in global scope and lazy loading.
+
+### Fixed
+
+fix: BIG-140 - Reordering sell, cost and inventory account on item details.
+fix: BIG-144 - Typo adjustment dialog success message.
+fix: BIG-148 - Items entries ordered by index.
+fix: BIG-132 AR/AP aging summary report filter by none transactions/zero contacts.
+
 ## [1.2.0-RC] - 03-09-2021
 
 Here we write upgrading notes for brands. It's a team effort to make them as
@@ -32,7 +78,7 @@ straightforward as possible.
 - Inventory adjustment publish action.
 - Customers and vendors activate and inactivate action.
 - Add refresh button on dashboard actions bar to all datatables resources.
-- Add clickable datatable rows to display each row details. 
+- Add clickable datatable rows to display each row details.
 
 ### Changed
 

config/env.js

@@ -85,6 +85,9 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+
+        // Application version.
+        VERSION: paths.appVersion
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

config/paths.js

@@ -48,6 +48,8 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
+const appVersion = require(resolveApp('package.json')).version;
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
@@ -65,6 +67,7 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrlOrPath,
+  appVersion
 };
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.2.0",
+  "version": "1.5.3",
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
@@ -36,6 +36,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "deep-map-keys": "^2.0.1",
+    "dependency-graph": "^0.11.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.6.0",
@@ -46,6 +47,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "fast-deep-equal": "^3.1.3",
     "file-loader": "4.3.0",
     "flow-bin": "^0.123.0",
     "formik": "^2.2.5",
@@ -106,6 +108,7 @@
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
+    "stylis-rtlcss": "^2.1.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",

src/common/TableStyle.js

@@ -0,0 +1,6 @@
+
+
+export const TableStyle = {
+  Constrant: 'constrant',
+  Regular: 'regular'
+}

src/common/abilityOption.js

@@ -17,6 +17,8 @@ export const AbilitySubject = {
   Preferences: 'Preferences',
   ExchangeRate: 'ExchangeRate',
   SubscriptionBilling: 'SubscriptionBilling',
+  CreditNote: 'CreditNote',
+  VendorCredit: 'VendorCredit',
 };
 
 export const ItemAction = {
@@ -66,6 +68,21 @@ export const PaymentReceiveAction = {
   NotifyBySms: 'NotifyBySms',
 };
 
+export const CreditNoteAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
+
+export const VendorCreditAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
 export const BillAction = {
   View: 'View',
   Create: 'Create',

src/common/classes.js

@@ -39,6 +39,8 @@ const CLASSES = {
   PAGE_FORM_ITEM: 'page-form--item',
   PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
   PAGE_FORM_EXPENSE: 'page-form--expense',
+  PAGE_FORM_CREDIT_NOTE:'page-form--credit-note',
+  PAGE_FORM_VENDOR_CREDIT_NOTE:'page-form--vendor-credit-note',
 
   FORM_GROUP_LIST_SELECT: 'form-group--select-list',
 

src/common/drawers.js

@@ -14,4 +14,8 @@ export const DRAWERS = {
   QUICK_WRITE_VENDOR: 'quick-write-vendor',
   QUICK_CREATE_CUSTOMER: 'quick-create-customer',
   QUICK_CREATE_ITEM: 'quick-create-item',
+  CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAIL_DRAWER:'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAIL_DRAWER:'refund-vendor-detail-drawer'
 };

src/common/index.js

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

src/common/itemPaymentTranactionsOption.js

@@ -0,0 +1,51 @@
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  SaleInvoiceAction,
+  BillAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
+
+export const getItemPaymentTransactions = () => [
+  {
+    name: 'invoices',
+    label: intl.get('invoices'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.View,
+    },
+  },
+  {
+    name: 'estimates',
+    label: intl.get('estimates'),
+    permission: {
+      subject: AbilitySubject.Estimate,
+      ability: SaleEstimateAction.View,
+    },
+  },
+  {
+    name: 'receipts',
+    label: intl.get('receipts'),
+    permission: {
+      subject: AbilitySubject.Receipt,
+      ability: SaleReceiptAction.View,
+    },
+  },
+  {
+    name: 'bills',
+    label: intl.get('bills'),
+    permission: {
+      subject: AbilitySubject.Bill,
+      ability: BillAction.View,
+    },
+  },
+];
+
+export const useGetItemPaymentTransactionsMenu = () => {
+  const itemTransactionMenu = getItemPaymentTransactions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(itemTransactionMenu);
+};

src/common/permissionsSchema.js

@@ -0,0 +1,659 @@
+import { chain } from 'lodash';
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CreditNoteAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  PaymentMadeAction,
+  PaymentReceiveAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+  VendorCreditAction,
+} from './abilityOption';
+
+export const ModulePermissionsStyle = {
+  Columns: 'columns',
+  Vertical: 'vertical',
+};
+
+const PermissionColumn = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+  Edit: 'edit',
+};
+
+export const getPermissionsSchema = () => [
+  {
+    label: intl.get('permissions.items_inventory'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.items'),
+        subject: AbilitySubject.Item,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.inventory_adjustment'),
+        subject: AbilitySubject.InventoryAdjustment,
+        permissions: [
+          {
+            label: 'View',
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: 'Edit',
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: 'Delete',
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.contacts'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.customers'),
+        subject: AbilitySubject.Customer,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CustomerAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CustomerAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CustomerAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CustomerAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CustomerAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CustomerAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CustomerAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendors'),
+        subject: AbilitySubject.Vendor,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.sales'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.sale_invoice'),
+        subject: AbilitySubject.Invoice,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleInvoiceAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleInvoiceAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleInvoiceAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleInvoiceAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleInvoiceAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleInvoiceAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.written_off_invoice'),
+            key: SaleInvoiceAction.Writeoff,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_estimate'),
+        subject: AbilitySubject.Estimate,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleEstimateAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleEstimateAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleEstimateAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleEstimateAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleEstimateAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleEstimateAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleEstimateAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_receipt'),
+        subject: AbilitySubject.Receipt,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleReceiptAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleReceiptAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleReceiptAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleReceiptAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleReceiptAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleReceiptAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleReceiptAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.credit_note'),
+        subject: AbilitySubject.CreditNote,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CreditNoteAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CreditNoteAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CreditNoteAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CreditNoteAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CreditNoteAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CreditNoteAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_credit_note'),
+            key: CreditNoteAction.Refund,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_receive'),
+        subject: AbilitySubject.PaymentReceive,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentReceiveAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentReceiveAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentReceiveAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentReceiveAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentReceiveAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentReceiveAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentReceiveAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.purchases'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.bills'),
+        subject: AbilitySubject.Bill,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: BillAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: BillAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: BillAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: BillAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: BillAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: BillAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: BillAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendor_credits'),
+        subject: AbilitySubject.VendorCredit,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorCreditAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorCreditAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorCreditAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorCreditAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorCreditAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorCreditAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_vendor_credit'),
+            key: VendorCreditAction.Refund,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_made'),
+        subject: AbilitySubject.PaymentMade,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentMadeAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentMadeAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentMadeAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentMadeAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentMadeAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentMadeAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentMadeAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.financial_accounting'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.manual_journals'),
+        subject: AbilitySubject.ManualJournal,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ManualJournalAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ManualJournalAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ManualJournalAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ManualJournalAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ManualJournalAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ManualJournalAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ManualJournalAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.chart_of_accounts'),
+        subject: AbilitySubject.Account,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: AccountAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: AccountAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: AccountAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: AccountAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: AccountAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: AccountAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: AccountAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.transactions_locking'),
+            key: AccountAction.TransactionsLocking,
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.expenses'),
+        subject: AbilitySubject.Expense,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ExpenseAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ExpenseAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ExpenseAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ExpenseAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ExpenseAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ExpenseAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ExpenseAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.reports'),
+    type: ModulePermissionsStyle.Vertical,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    services: [
+      {
+        label: intl.get('permissions.financial_reports'),
+        subject: AbilitySubject.Report,
+        permissions: [
+          {
+            label: intl.get('permissions.balance_sheet'),
+            key: ReportsAction.READ_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.trial_balance_sheet'),
+            key: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.profit_loss_sheet'),
+            key: ReportsAction.READ_PROFIT_LOSS,
+          },
+          {
+            label: intl.get('permissions.cash_flow_sheet'),
+            key: ReportsAction.READ_CASHFLOW,
+          },
+          {
+            label: intl.get('permissions.journal_sheet'),
+            key: ReportsAction.READ_JOURNAL,
+          },
+          {
+            label: intl.get('permissions.general_ledger'),
+            key: ReportsAction.READ_GENERAL_LEDGET,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AR_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AP_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.purchases_by_items'),
+            key: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.sales_by_items'),
+            key: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.customers_transactions'),
+            key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.vendors_transactions'),
+            key: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.customers_summary_balance'),
+            key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.vendors_summary_balance'),
+            key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.inventory_valuation_summary'),
+            key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.inventory_items_details'),
+            key: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            label: intl.get('permissions.cashflow_account_transactions'),
+            key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export function getPermissionsSchemaService(subject) {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((perm) => perm.services)
+    .flatten()
+    .find((service) => service.subject === subject)
+    .value();
+}
+
+export function getPermissionsSchemaServices() {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((module) => module.services)
+    .flatten()
+    .value();
+}

src/common/resourcesTypes.js

@@ -11,4 +11,6 @@ export const RESOURCES_TYPES = {
   EXPENSE: 'expense',
   MANUAL_JOURNAL: 'manual_journal',
   ACCOUNT: 'account',
+  CREDIT_NOTE: 'credit_note',
+  VENDOR_CREDIT:'vendor_credit'
 };

src/common/tables.js

@@ -14,6 +14,8 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
+  CREDIT_NOTES: 'credit_notes',
+  VENDOR_CREDITS: 'vendor_credits',
 };
 
 export const TABLE_SIZE = {

src/components/Alert/index.js

@@ -1,17 +1,60 @@
 import React from 'react';
 import clsx from 'classnames';
+import styled from 'styled-components';
 
-import Style from './style.module.scss';
+export function Alert({ title, description, children, intent, className }) {
-
-export function Alert({ title, description, intent }) {
   return (
-    <div
+    <AlertRoot className={clsx(className)} intent={intent}>
-      className={clsx(Style.root, {
+      {title && <AlertTitle>{title}</AlertTitle>}
-        [`${Style['root_' + intent]}`]: intent,
+      {description && <AlertDesc>{description}</AlertDesc>}
-      })}
+      {children && <AlertDesc>{children}</AlertDesc>}
-    >
+    </AlertRoot>
-      {title && <h3 className={clsx(Style.title)}>{title}</h3>}
-      {description && <p class={clsx(Style.description)}>{description}</p>}
-    </div>
   );
 }
+
+const AlertRoot = styled.div`
+  border: 1px solid rgb(223, 227, 230);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  ${(props) =>
+    props.intent === 'danger' &&
+    `
+    border-color: rgb(249, 198, 198);
+    background: rgb(255, 248, 248);
+
+    ${AlertDesc} {
+      color: #d95759;
+    }
+    ${AlertTitle} {
+      color: rgb(205, 43, 49);
+    }
+  `}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+    background: #fff;
+    border-color: #98a8ee;
+
+    ${AlertTitle} {
+      color: #1a3bd4;
+    }
+    ${AlertDesc} {
+      color: #455883;
+    }
+  `}
+`;
+
+export const AlertTitle = styled.h3`
+  color: rgb(17, 24, 28);
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+export const AlertDesc = styled.p`
+  color: rgb(104, 112, 118);
+  margin: 0;
+`;

src/components/Alert/style.module.scss

@@ -1,32 +0,0 @@
-.root {
-  border: 1px solid rgb(223, 227, 230);
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-
-  &_danger {
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
-
-    .description {
-      color: #d95759;
-    }
-
-    .title {
-      color: rgb(205, 43, 49);
-    }
-  }
-}
-
-
-.title {
-  color: rgb(17, 24, 28);
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.description {
-  color: rgb(104, 112, 118);
-  margin: 0;
-}

src/components/BankAccounts/index.js

@@ -4,7 +4,6 @@ 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',
@@ -185,9 +184,7 @@ const MetaLineValue = styled.div`
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
-
+  margin-left: auto;
-  ${whenLtr(`margin-left: auto;`)}
-  ${whenRtl(`margin-right: auto;`)}
 `;
 
 const BankAccountMeta = styled.div`
@@ -204,7 +201,5 @@ const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
   color: #abb3bb;
-
+  right: 12px;
-  ${whenLtr(`right: 12px;`)}
-  ${whenRtl(`left: 12px;`)}
 `;

src/components/Button/ButtonLink.js

@@ -5,6 +5,7 @@ export const ButtonLink = styled.button`
   border: 0;
   background: transparent;
   cursor: pointer;
+  text-align: inherit;
 
   &:hover,
   &:active {

src/components/Card.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
- 
-export default function Card({ className, children }) {
-  return <div className={classNames('card', className)}>{children}</div>;
-}

src/components/Card/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Card({ className, children }) {
+  return <CardRoot className={className}>{children}</CardRoot>;
+}
+
+const CardRoot = styled.div`
+  padding: 15px;
+  margin: 15px;
+  background: #fff;
+  border: 1px solid #d2dce2;
+`;
+
+export const CardFooterActions = styled.div`
+  padding-top: 16px;
+  border-top: 1px solid #e0e7ea;
+  margin-top: 30px;
+
+  .bp3-button {
+    min-width: 70px;
+
+    + .bp3-button {
+      margin-left: 10px;
+    }
+  }
+`;

src/components/CommercialDoc/index.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Card } from '../Card';
+import DataTable from '../DataTable';
+
+export const CommercialDocBox = styled(Card)`
+  padding: 22px 20px;
+`;
+
+export const CommercialDocHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocTopHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocEntriesTable = styled(DataTable)`
+  .tbody .tr:last-child .td {
+    border-bottom: 1px solid #d2dce2;
+  }
+`;
+
+export const CommercialDocFooter = styled.div`
+  margin-top: 25px;
+`;

src/components/Customers/CustomerDrawerLink.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function CustomerDrawerLinkComponent({
+  // #ownProps
+  children,
+  customerId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleCustomerDrawer = () => {
+    openDrawer('customer-details-drawer', { customerId });
+  };
+
+  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+}
+
+export const CustomerDrawerLink = R.compose(withDrawerActions)(
+  CustomerDrawerLinkComponent,
+);

src/components/Customers/index.js

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

src/components/Dashboard/DashboardActionsBar.js

@@ -1,16 +1,19 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'classnames';
 import { Navbar } from '@blueprintjs/core';
 
-export default function DashboardActionsBar({ children, name }) {
+export default function DashboardActionsBar({ className, children, name }) {
   return (
     <div
-      className={classnames({
+      className={clsx(
-        'dashboard__actions-bar': true,
+        {
-        [`dashboard__actions-bar--${name}`]: !!name
+          'dashboard__actions-bar': true,
-      })}
+          [`dashboard__actions-bar--${name}`]: !!name,
+        },
+        className,
+      )}
     >
-      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
+      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
     </div>
   );
 }

src/components/Dashboard/DashboardThemeProvider.js

@@ -1,9 +1,16 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import rtlcss from 'stylis-rtlcss';
 import { useAppIntlContext } from '../AppIntlProvider';
 
 export function DashboardThemeProvider({ children }) {
   const { direction } = useAppIntlContext();
 
-  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+  return (
+    <StyleSheetManager
+      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
+    >
+      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
 }

src/components/Datatable/TableWrapper.js

@@ -16,6 +16,7 @@ export default function TableWrapper({ children }) {
       expandable,
       virtualizedRows,
       className,
+      styleName,
       size,
     },
   } = useContext(TableContext);
@@ -28,6 +29,7 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
+        [`table--${styleName}`]: styleName,
       })}
     >
       <ScrollSync>

src/components/Details/index.js

@@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 export function DetailsMenu({
   children,
   direction = DIRECTION.VERTICAL,
+  textAlign,
   minLabelSize,
   className,
 }) {
@@ -27,6 +28,7 @@ export function DetailsMenu({
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
           'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
+          [`align-${textAlign}`]: textAlign,
         },
         className,
       )}

src/components/Dialog/DialogFooter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooter({ children }) {
+  return (
+    <DialogFooterRoot className={Classes.DIALOG_FOOTER}>
+      {children}
+    </DialogFooterRoot>
+  );
+}
+
+const DialogFooterRoot = styled.div`
+  display: flex;
+`;

src/components/Dialog/DialogFooterActions.js

@@ -2,6 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 
+/**
+ * Dialog footer actions.
+ * @returns {React.JSX}
+ */
 export function DialogFooterActions({ alignment = 'right', children }) {
   return (
     <DialogFooterActionsRoot
@@ -13,14 +17,25 @@ export function DialogFooterActions({ alignment = 'right', children }) {
   );
 }
 
+/**
+ * Dialog footer.
+ * @returns {React.JSX}
+ */
+export function DialogFooter({ ...props }) {
+  return <DialogFooterRoot {...props} />;
+}
+
+const DialogFooterRoot = styled.div`
+  flex: 0 0 auto;
+  margin: 0 20px;
+`;
+
 const DialogFooterActionsRoot = styled.div`
-  margin-left: -10px;
+  ${(props) =>
-  margin-right: -10px;
+    props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
-  justify-content: ${(props) =>
-    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
 
   .bp3-button {
-    margin-left: 10px;
+    margin-left: 5px;
-    margin-left: 10px;
+    margin-left: 5px;
   }
 `;

src/components/Dialog/index.js

@@ -3,4 +3,5 @@
 export * from './Dialog';
 export * from './DialogFooterActions';
 export * from './DialogSuspense';
-export * from './DialogContent';
+export * from './DialogContent';
+export * from './DialogFooter';

src/components/DialogsContainer.js

@@ -25,7 +25,13 @@ import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMS
 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 RefundCreditNoteDialog from '../containers/Dialogs/RefundCreditNoteDialog';
+import RefundVendorCreditDialog from '../containers/Dialogs/RefundVendorCreditDialog';
+import ReconcileCreditNoteDialog from '../containers/Dialogs/ReconcileCreditNoteDialog';
+import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCreditDialog';
+import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
+import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
+import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
 
 /**
  * Dialogs container.
@@ -59,7 +65,15 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
-      <TransactionsLockingDialog dialogName={'transactions-locking'} />
+      <RefundCreditNoteDialog dialogName={'refund-credit-note'} />
+      <RefundVendorCreditDialog dialogName={'refund-vendor-credit'} />
+      <ReconcileCreditNoteDialog dialogName={'reconcile-credit-note'} />
+      <ReconcileVendorCreditDialog dialogName={'reconcile-vendor-credit'} />
+      <LockingTransactionsDialog dialogName={'locking-transactions'} />
+      <UnlockingTransactionsDialog dialogName={'unlocking-transactions'} />
+      <UnlockingPartialTransactionsDialog
+        dialogName={'unlocking-partial-transactions'}
+      />
     </div>
   );
 }

src/components/Drawer/DrawerActionsBar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+export function DrawerActionsBar({ ...props }) {
+  return <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;

src/components/Drawer/DrawerMainTabs.js

@@ -1,15 +1,54 @@
 import React from 'react';
 import { Tabs } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 /**
  * Drawer main tabs.
  */
 export function DrawerMainTabs({ children, ...restProps }) {
   return (
-    <div class="drawer__main-tabs">
+    <DrawerMainTabsRoot>
       <Tabs animate={true} large={true} {...restProps}>
         {children}
       </Tabs>
-    </div>
+    </DrawerMainTabsRoot>
   );
 }
+
+const DrawerMainTabsRoot = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+      padding: 0 15px;
+      border-bottom: 2px solid #e1e2e8;
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #7f8596;
+        margin: 0 1rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+`;

src/components/Drawer/index.js

@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
   return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
+
+export * from './DrawerActionsBar';

src/components/DrawersContainer.js

@@ -17,6 +17,10 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
 import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
 import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
+import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
+import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
+import RefundCreditNoteDetailDrawer from '../containers/Drawers/RefundCreditNoteDetailDrawer';
+import RefundVendorCreditDetailDrawer from '../containers/Drawers/RefundVendorCreditDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -47,6 +51,14 @@ export default function DrawersContainer() {
       <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
+      <RefundCreditNoteDetailDrawer
+        name={DRAWERS.REFUND_CREDIT_NOTE_DETAIL_DRAWER}
+      />
+      <RefundVendorCreditDetailDrawer
+        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAIL_DRAWER}
+      />
     </div>
   );
 }

src/components/Forms/FormikObserver.js

@@ -0,0 +1,14 @@
+
+import { useDeepCompareEffect } from 'hooks/utils';
+
+export function FormikObserver({ onChange, values }) {
+  useDeepCompareEffect(() => {
+    onChange(values);
+  }, [values]);
+
+  return null;
+}
+
+FormikObserver.defaultProps = {
+  onChange: () => null,
+};

src/components/Forms/index.js

@@ -1 +1,2 @@
-export * from './FormObserver';
+export * from './FormObserver';
+export * from './FormikObserver';

src/components/Preferences/PreferencesPage.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import classNames from 'classnames';
+import * as R from 'ramda';
+
 import { CLASSES } from 'common/classes';
 
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
@@ -8,18 +10,28 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
 import 'style/pages/Preferences/Page.scss';
 
 /**
  * Preferences page.
  */
-export default function PreferencesPage() {
+function PreferencesPage({ toggleSidebarExpand }) {
+  // Shrink the dashboard sidebar once open application preferences page.
+  React.useEffect(() => {
+    toggleSidebarExpand(false);
+  }, [toggleSidebarExpand]);
+
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div id={'dashboard'} className={classNames(
+      <div
-        CLASSES.DASHBOARD_CONTENT,
+        id={'dashboard'}
-        CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+        className={classNames(
-      )}>
+          CLASSES.DASHBOARD_CONTENT,
+          CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+        )}
+      >
         <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
           <PreferencesSidebar />
 
@@ -32,3 +44,5 @@ export default function PreferencesPage() {
     </ErrorBoundary>
   );
 }
+
+export default R.compose(withDashboardActions)(PreferencesPage);

src/components/Sidebar/Sidebar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
@@ -17,7 +18,20 @@ export default function Sidebar({ dashboardContentRef }) {
         <SidebarMenu menu={menu} />
       </div>
 
-      <div class="sidebar__version">0.0.1-beta version.</div>
+      <SidebarFooterVersion />
     </SidebarContainer>
   );
 }
+
+/**
+ * Sidebar footer version. 
+ * @returns {React.JSX}
+ */
+function SidebarFooterVersion() {
+  const { VERSION } = process.env;
+
+  if (!VERSION) {
+    return null;
+  }
+  return <div class="sidebar__version">v{VERSION}</div>;
+}

src/components/Table/index.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  width: 100%;
+  vertical-align: top;
+  border-color: #dee2e6;
+  border-spacing: 0;
+`;
+export const TBody = styled.tbody``;
+export const TR = styled.tr``;
+export const TD = styled.td`
+  padding: 0.5rem 0.5rem;
+  border-bottom-width: 1px;
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+
+  ${(props) =>
+    props.textAlign === 'right' &&
+    `
+  text-align: right;`}
+`;
+
+export const TRDarkSingleLine = styled(TR)`
+  ${TD} {
+    border-bottom: 1px solid #000;
+  }
+`;
+
+export const TRDarkDoubleLines = styled(TR)`
+  ${TD} {
+    border-bottom: 3px double #000;
+  }
+`;

src/components/Tags/CurrencyTag.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const CurrencyTag = styled.span`
+  background: #3e9215;
+  color: #fff;
+  display: inline-block;
+  border-radius: 3px;
+  padding: 2px 4px;
+  line-height: 1;
+  margin-left: 4px;
+`;

src/components/Tags/index.js

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

src/components/TextStatus/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function TextStatus({ intent, children }) {
+  return <TextStatusRoot intent={intent}>{children}</TextStatusRoot>;
+}
+
+const TextStatusRoot = styled.span`
+  ${(props) =>
+    props.intent === 'warning' &&
+    `
+  color: #ec5b0a;`}
+
+  ${(props) =>
+    props.intent === 'success' &&
+    `
+  color: #2ba01d;`}
+
+  ${(props) =>
+    props.intent === 'none' &&
+    `
+  color: #777;`}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+  color: #1652c8;`}
+`;

src/components/TotalLines/TotalLines.module.scss

@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
-    display: flex;
-    border-bottom: 1px solid #d2dde2;
-    
-    :global .amount,
-    :global .title{
-        padding: 8px;
-    }
-}

src/components/TotalLines/index.js

@@ -1,23 +1,93 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import TotalLinesCls from './TotalLines.module.scss';
+export const TotalLineBorderStyle = {
+  SingleDark: 'SingleDark',
+  DoubleDark: 'DoubleDark',
+};
 
-export function TotalLines({ children, className }) {
+export const TotalLineTextStyle = {
+  Regular: 'Regular',
+  Bold: 'Bold',
+};
+
+export function TotalLines({
+  children,
+  amountColWidth,
+  labelColWidth,
+  className,
+}) {
   return (
-    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
+    <TotalLinesRoot
+      className={className}
+      amountColWidth={amountColWidth}
+      labelColWidth={labelColWidth}
+    >
       {children}
-    </div>
+    </TotalLinesRoot>
   );
 }
 
-export function TotalLine({ title, value, className }) {
+export function TotalLine({ title, value, borderStyle, textStyle, className }) {
   return (
-    <div
+    <TotalLineRoot
-      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+      borderStyle={borderStyle}
+      textStyle={textStyle}
+      className={className}
     >
       <div class="title">{title}</div>
       <div class="amount">{value}</div>
-    </div>
+    </TotalLineRoot>
   );
 }
+
+export const TotalLinesRoot = styled.div`
+  display: table;
+
+  ${(props) =>
+    props.amountColWidth &&
+    `
+    .amount{
+      width: ${props.amountColWidth}
+    }
+  `}
+
+  ${(props) =>
+    props.labelColWidth &&
+    `
+    .title{
+      width: ${props.labelColWidth}
+    }
+  `}
+`;
+
+export const TotalLineRoot = styled.div`
+  display: table-row;
+
+  .amount,
+  .title {
+    display: table-cell;
+    padding: 8px;
+    border-bottom: 1px solid #d2dde2;
+
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+      `
+      border-bottom: 3px double #000;
+    `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.SingleDark &&
+      `
+      border-bottom: 1px double #000;
+    `}
+    ${(props) =>
+      props.textStyle === TotalLineTextStyle.Bold &&
+      `
+      font-weight: 600;
+    `}
+  }
+
+  .amount {
+    text-align: right;
+  }
+`;

src/components/Typo/Paragraph.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import clsx from 'classnames';
+
+export function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}

src/components/Typo/index.js

@@ -0,0 +1,2 @@
+
+export * from './Paragraph';

src/components/Utils/Join.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function Join({ items, sep }) {
+  return items.length > 0
+    ? items.reduce((result, item) => (
+        <>
+          {result}
+          {sep}
+          {item}
+        </>
+      ))
+    : null;
+}

src/components/Utils/index.js

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

src/components/Vendors/VendorDrawerLink.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function VendorDrawerLinkComponent({
+  // #ownProps
+  children,
+  vendorId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleVendorDrawer = () => {
+    openDrawer('vendor-details-drawer', { vendorId });
+  };
+
+  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
+}
+
+export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);

src/components/Vendors/index.js

@@ -0,0 +1 @@
+export * from './VendorDrawerLink'

src/components/index.js

@@ -54,7 +54,6 @@ import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
-import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -87,6 +86,15 @@ export * from './Button';
 export * from './IntersectionObserver';
 export * from './SMSPreview';
 export * from './Contacts';
+export * from './Utils/Join';
+export * from './Typo';
+export * from './TextStatus';
+export * from './Tags';
+export * from './CommercialDoc';
+export * from './Card';
+export * from './Customers'
+export * from './Vendors'
+export * from './Table';
 
 const Hint = FieldHint;
 
@@ -153,7 +161,6 @@ export {
   MaterialProgressBar,
   MoneyFieldCell,
   ItemsMultiSelect,
-  Card,
   AvaterCell,
   MoreMenuItems,
 };

src/config/sidebarMenu.js

@@ -158,6 +158,10 @@ export default [
           ability: SaleReceiptAction.View,
         },
       },
+      {
+        text: <T id={'sidebar_credit_note'} />,
+        href: '/credit-notes',
+      },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
@@ -233,6 +237,10 @@ export default [
           ability: SaleReceiptAction.Create,
         },
       },
+      {
+        text: <T id={'credit_note.label.new_credit_note'} />,
+        href: '/credit-notes/new',
+      },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
@@ -254,6 +262,10 @@ export default [
           ability: BillAction.View,
         },
       },
+      {
+        text: <T id={'sidebar_vendor_credits'} />,
+        href: '/vendor-credits',
+      },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
@@ -298,6 +310,14 @@ export default [
           ability: BillAction.Create,
         },
       },
+      {
+        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
+        href: '/vendor-credits/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
+      },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
@@ -405,14 +425,14 @@ export default [
           ability: ManualJournalAction.View,
         },
       },
-      // {
+      {
-      //   text: <T id={'sidebar.transactions_locaking'} />,
+        text: <T id={'sidebar.transactions_locaking'} />,
-      //   href: '/transactions-locking',
+        href: '/transactions-locking',
-      //   permission: {
+        // permission: {
-      //     subject: AbilitySubject.ManualJournal,
+        //   subject: AbilitySubject.ManualJournal,
-      //     ability: ManualJournalAction.TransactionLocking,
+        //   ability: ManualJournalAction.TransactionLocking,
-      //   },
+        // },
-      // },
+      },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',

src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js

@@ -46,8 +46,7 @@ function ManualJournalsListProvider({ query, tableStateChanged, ...props }) {
     isEmptyStatus,
   };
 
-  const isPageLoading =
+  const isPageLoading = isViewsLoading || isResourceMetaLoading;
-    isManualJournalsLoading || isViewsLoading || isResourceMetaLoading;
 
   return (
     <DashboardInsider loading={isPageLoading} name={'manual-journals'}>

src/containers/Accounting/JournalsLanding/components.js

@@ -101,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true}>
+        <Tag minimal={true} round={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
@@ -179,6 +179,7 @@ export const ActionsMenu = ({
         />
       </Can>
       <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_journal')}
           icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js

@@ -151,6 +151,7 @@ export default function MakeJournalFloatingAction() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover

src/containers/Accounting/MakeJournal/MakeJournalProvider.js

@@ -7,7 +7,8 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings
+  useSettings,
+  useSettingsManualJournals
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

@@ -57,9 +57,7 @@ function BillTransactionDeleteAlert({
       loading={isLoading}
     >
       <p>
-        <T
+        <T id={`landed_cost.once_your_delete_this_located_landed_cost`} />
-          id={`Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?`}
-        />
       </p>
     </Alert>
   );

src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteCreditNote } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Credit note delete alert.
+ */
+function CreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
+    useDeleteCreditNote();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditNoteDelete = () => {
+    deleteCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('credit-note-detail-drawer');
+      })
+      .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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmCreditNoteDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(CreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.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 { useOpenCreditNote } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note opened alert.
+ */
+function CreditNoteOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm credit note opened.
+  const handleAlertConfirm = () => {
+    openCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteOpenedAlert);

src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js

@@ -0,0 +1,87 @@
+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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileCredit } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Reconcile credit note delete alert.
+ */
+function ReconcileCreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileCreditMutate } =
+    useDeleteReconcileCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmVendorCreditDelete = () => {
+    deleteReconcileCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_credit_note.alert.success_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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'reconcile_credit_note.once_you_delete_this_reconcile_credit_note'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileCreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js

@@ -0,0 +1,76 @@
+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 { useDeleteRefundCreditNote } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit transactions delete alert
+ */
+function RefundCreditNoteDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
+    useDeleteRefundCreditNote();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundCreditDelete = () => {
+    deleteRefundCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('refund_credit_transactions.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-credit-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundCreditNoteDeleteAlert);

src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useCancelUnlockingPartialTransactions } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Cancel Unlocking partial transactions alerts.
+ */
+function CancelUnlockingPartialTarnsactions({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { module },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: cancelUnlockingPartial, isLoading } =
+    useCancelUnlockingPartialTransactions();
+
+  // Handle cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm.
+  const handleConfirm = () => {
+    const values = {
+      module: module,
+    };
+    cancelUnlockingPartial(values)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'unlocking_partial_transactions.alert.cancel_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'yes'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'unlocking_partial_transactions.alert.message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelUnlockingPartialTarnsactions);

src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileVendorCredit } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Reconcile vendor credit delete alert.
+ */
+function ReconcileVendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileVendorCreditMutate } =
+    useDeleteReconcileVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmReconcileVendorCreditDelete = () => {
+    deleteReconcileVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_vendor_credit.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        // closeDrawer('vendor-credit-detail-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={handleConfirmReconcileVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileVendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js

@@ -0,0 +1,78 @@
+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 { useDeleteRefundVendorCredit } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Refund Vendor transactions delete alert.
+ */
+function RefundVendorCreditDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
+    useDeleteRefundVendorCredit();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundVendorCreditDelete = () => {
+    deleteRefundVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'refund_vendor_credit_transactions.alert.delete_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-vendor-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundVendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js

@@ -0,0 +1,84 @@
+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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { handleDeleteErrors } from '../../Purchases/CreditNotes/CreditNotesLanding/utils';
+import { useDeleteVendorCredit } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Vendor Credit delete alert.
+ */
+function VendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
+    useDeleteVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditDelete = () => {
+    deleteVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credits.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('vendor-credit-detail-drawer');
+      })
+      .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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(VendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenVendorCredit } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Vendor credit opened alert.
+ */
+function VendorCreditOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openVendorCreditMutate, isLoading } =
+    useOpenVendorCredit();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm  vendor credit as opened.
+  const handleAlertConfirm = () => {
+    openVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credit_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'vendor_credit_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorCreditOpenedAlert);

src/containers/AlertsContainer/registered.js

@@ -17,6 +17,9 @@ import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTr
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
 import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
+import CreditNotesAlerts from '../Sales/CreditNotes/CreditNotesAlerts';
+import VendorCreditNotesAlerts from '../Purchases/CreditNotes/VendorCreditNotesAlerts';
+import TransactionsLockingAlerts from '../TransactionsLocking/TransactionsLockingAlerts'
 
 export default [
   ...AccountsAlerts,
@@ -38,4 +41,7 @@ export default [
   ...UsersAlerts,
   ...CurrenciesAlerts,
   ...RolesAlerts,
+  ...CreditNotesAlerts,
+  ...VendorCreditNotesAlerts,
+  ...TransactionsLockingAlerts
 ];

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -18,7 +18,6 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from 'utils';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -129,8 +128,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        border-left: 1px solid #e6e6e6;
-        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
       }
     }
   }

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -14,7 +14,6 @@ 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();
@@ -23,7 +22,7 @@ function AccountSwitchButton() {
     <AccountSwitchButtonBase
       minimal={true}
       rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-    > 
+    >
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
   );
@@ -161,8 +160,7 @@ const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
   color: rgb(31, 50, 85);
-  ${whenLtr(`margin-left: 10px;`)}
+  margin-left: 10px;
-  ${whenRtl(`margin-right: 10px;`)}
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -180,7 +178,6 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    ${whenLtr(`margin-right: 5px;`)}
+    margin-right: 5px;
-    ${whenRtl(`margin-left: 5px;`)}
   }
 `;

src/containers/CashFlow/AccountTransactions/utils.js

@@ -71,6 +71,18 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('payment-made-detail-drawer', {
         paymentMadeId: reference.reference_id,
       });
+    case 'RefundCreditNote':
+      return openDrawer('refund-credit-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'RefundVendorCredit':
+      return openDrawer('refund-vendor-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'InventoryAdjustment':
+      return openDrawer('inventory-adjustment-drawer', {
+        inventoryId: reference.reference_id,
+      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -271,6 +271,7 @@ function CashflowAccountContextMenu({
         </If>
       </Can>
       <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -53,7 +53,7 @@ function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      loading={isViewsLoading || isResourceMetaLoading }
       name={'customers-list'}
     >
       <CustomersListContext.Provider value={state} {...props} />

src/containers/Customers/CustomersLanding/components.js

@@ -1,5 +1,13 @@
 import React, { useMemo } from 'react';
-import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
+import {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+  Tooltip,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
 import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
@@ -63,6 +71,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_customer')}
@@ -78,7 +87,7 @@ export function ActionsMenu({
  * Phone number accessor.
  */
 export function PhoneNumberAccessor(row) {
-  return <div className={'work_phone'}>{row.work_phone}</div>;
+  return <div className={'work_phone'}>{row.personal_phone}</div>;
 }
 
 /**
@@ -88,6 +97,24 @@ export function BalanceAccessor(row) {
   return <Money amount={row.closing_balance} currency={row.currency_code} />;
 }
 
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+  return (
+    <If condition={row.note}>
+      <Tooltip
+        className={Classes.TOOLTIP_INDICATOR}
+        content={row.note}
+        position={Position.LEFT_TOP}
+        hoverOpenDelay={50}
+      >
+        <Icon icon={'file-alt'} iconSize={16} />
+      </Tooltip>
+    </If>
+  );
+}
+
 /**
  * Retrieve customers table columns.
  */
@@ -122,12 +149,20 @@ export function useCustomersTableColumns() {
       },
       {
         id: 'work_phone',
-        Header: intl.get('work_phone'),
+        Header: intl.get('phone_number'),
         accessor: PhoneNumberAccessor,
         className: 'phone_number',
         width: 100,
         clickable: true,
       },
+      {
+        id: 'note',
+        Header: intl.get('note'),
+        accessor: NoteAccessor,
+        disableSortBy: true,
+        width: 85,
+        clickable: true,
+      },
       {
         id: 'balance',
         Header: intl.get('receivable_balance'),

src/containers/Dialogs/AccountDialog/utils.js

@@ -1,5 +1,6 @@
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
+import { isEmpty } from 'lodash';
 
 export const transformApiErrors = (errors) => {
   const fields = {};
@@ -42,12 +43,18 @@ const mergeWithAccount = R.curry((transformed, account) => {
   };
 });
 
+/**
+ * Default account payload transformer.
+ */
+const defaultPayloadTransform = () => ({});
+
 /**
  * Defined payload transformers.
  */
 function getConditions() {
   return [
-    ['edit', transformEditMode],
+    ['edit'],
+    ['new_child', transformEditMode],
     ['NEW_ACCOUNT_DEFINED_TYPE', transformNewAccountDefinedType],
   ];
 }
@@ -59,9 +66,13 @@ export const transformAccountToForm = (account, payload) => {
   const conditions = getConditions();
 
   const results = conditions.map((condition) => {
+    const transformer = !isEmpty(condition[1])
+      ? condition[1]
+      : defaultPayloadTransform;
+
     return [
       condition[0] === payload.action ? R.T : R.F,
-      mergeWithAccount(condition[1](payload)),
+      mergeWithAccount(transformer(payload)),
     ];
   });
   return R.cond(results)(account);

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -1,6 +1,16 @@
 import React from 'react';
+import { defaultTo, get } from 'lodash';
 import { DialogContent } from 'components';
-import { useBill, useCreateLandedCost } from 'hooks/query';
+import {
+  useBill,
+  useCreateLandedCost,
+  useLandedCostTransaction,
+} from 'hooks/query';
+import {
+  getEntriesByTransactionId,
+  getCostTransactionById,
+  getTransactionEntryById,
+} from './utils';
 
 const AllocateLandedCostDialogContext = React.createContext();
 
@@ -13,22 +23,79 @@ function AllocateLandedCostDialogProvider({
   dialogName,
   ...props
 }) {
+  const [transactionsType, setTransactionsType] = React.useState(null);
+  const [transactionId, setTransactionId] = React.useState(null);
+  const [transactionEntryId, setTransactionEntryId] = React.useState(null);
+
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
   });
-
+  // Retrieve the landed cost transactions based on the given transactions type.
+  const {
+    data: { transactions: landedCostTransactions },
+  } = useLandedCostTransaction(transactionsType, {
+    enabled: !!transactionsType,
+  });
+  // Landed cost selected transaction.
+  const costTransaction = React.useMemo(
+    () =>
+      transactionId
+        ? getCostTransactionById(transactionId, landedCostTransactions)
+        : null,
+    [transactionId, landedCostTransactions],
+  );
+  // Retrieve the cost transaction entry.
+  const costTransactionEntry = React.useMemo(
+    () =>
+      costTransaction && transactionEntryId
+        ? getTransactionEntryById(costTransaction, transactionEntryId)
+        : null,
+    [costTransaction, transactionEntryId],
+  );
+  // Retrieve entries of the given transaction id.
+  const costTransactionEntries = React.useMemo(
+    () =>
+      transactionId
+        ? getEntriesByTransactionId(landedCostTransactions, transactionId)
+        : [],
+    [landedCostTransactions, transactionId],
+  );
   // Create landed cost mutations.
   const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
 
-  // provider payload.
+  // Retrieve the unallocate cost amount of cost transaction.
+  const unallocatedCostAmount = defaultTo(
+    get(costTransactionEntry, 'unallocated_cost_amount'),
+    0,
+  );
+
+  // Retrieve the unallocate cost amount of cost transaction.
+  const formattedUnallocatedCostAmount = defaultTo(
+    get(costTransactionEntry, 'formatted_unallocated_cost_amount'),
+    0,
+  );
+
+  // Provider payload.
   const provider = {
     isBillLoading,
     bill,
     dialogName,
     query,
     createLandedCostMutate,
+    costTransaction,
+    costTransactionEntries,
+    transactionsType,
+    landedCostTransactions,
+    setTransactionsType,
+    setTransactionId,
+    setTransactionEntryId,
+    costTransactionEntry,
+    transactionEntryId,
+    transactionId,
     billId,
+    unallocatedCostAmount,
+    formattedUnallocatedCostAmount,
   };
 
   return (

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import intl from 'react-intl-universal';
+import styled from 'styled-components';
-import { MoneyFieldCell, DataTableEditable } from 'components';
+
+import { DataTableEditable } from 'components';
+
 import { compose, updateTableCell } from 'utils';
+import { useAllocateLandedCostEntriesTableColumns } from './utils';
 
 /**
  * Allocate landed cost entries table.
@@ -11,42 +14,7 @@ export default function AllocateLandedCostEntriesTable({
   entries,
 }) {
   // Allocate landed cost entries table columns.
-  const columns = React.useMemo(
+  const columns = useAllocateLandedCostEntriesTableColumns();
-    () => [
-      {
-        Header: intl.get('item'),
-        accessor: 'item.name',
-        disableSortBy: true,
-        width: '150',
-      },
-      {
-        Header: intl.get('quantity'),
-        accessor: 'quantity',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('rate'),
-        accessor: 'rate',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('amount'),
-        accessor: 'amount',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('cost'),
-        accessor: 'cost',
-        width: '150',
-        Cell: MoneyFieldCell,
-        disableSortBy: true,
-      },
-    ],
-    [],
-  );
 
   // Handle update data.
   const handleUpdateData = React.useCallback(
@@ -60,7 +28,7 @@ export default function AllocateLandedCostEntriesTable({
   );
 
   return (
-    <DataTableEditable
+    <AllocateLandeedCostEntriesEditableTable
       columns={columns}
       data={entries}
       payload={{
@@ -70,3 +38,18 @@ export default function AllocateLandedCostEntriesTable({
     />
   );
 }
+
+export const AllocateLandeedCostEntriesEditableTable = styled(
+  DataTableEditable,
+)`
+  .table {
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody .tr .td {
+      padding: 0.25rem;
+    }
+  }
+`;

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -1,19 +1,31 @@
 import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
+import { Intent, Button } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-
 import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+import {
+  DialogFooter,
+  DialogFooterActions,
+  FormattedMessage as T,
+} from 'components';
+
 import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+/**
+ * Allocate landed cost floating actions.
+ * @returns {React.JSX}
+ */
 function AllocateLandedCostFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
-  const { dialogName } = useAllocateLandedConstDialogContext();
+
+  // Allocate landed cost dialog context.
+  const { dialogName, costTransactionEntry, formattedUnallocatedCostAmount } =
+    useAllocateLandedConstDialogContext();
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
@@ -21,22 +33,45 @@ function AllocateLandedCostFloatingActions({
   };
 
   return (
-    <div className={Classes.DIALOG_FOOTER}>
+    <AllocateDialogFooter>
-      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <DialogFooterActions alignment={'left'}>
+        {costTransactionEntry && (
+          <UnallocatedAmount>
+           <T id={'landed_cost.dialog.label_unallocated_cost_amount'}/>
+            <strong>{formattedUnallocatedCostAmount}</strong>
+          </UnallocatedAmount>
+        )}
+      </DialogFooterActions>
+
+      <DialogFooterActions alignment={'right'}>
         <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
           <T id={'cancel'} />
         </Button>
         <Button
           intent={Intent.PRIMARY}
-          style={{ minWidth: '85px' }}
+          style={{ minWidth: '95px' }}
           type="submit"
           loading={isSubmitting}
         >
           {<T id={'save'} />}
         </Button>
-      </div>
+      </DialogFooterActions>
-    </div>
+    </AllocateDialogFooter>
   );
 }
 
 export default compose(withDialogActions)(AllocateLandedCostFloatingActions);
+
+const AllocateDialogFooter = styled(DialogFooter)`
+  display: flex;
+`;
+
+const UnallocatedAmount = styled.div`
+  color: #3f5278;
+  align-self: center;
+
+  strong {
+    color: #353535;
+    padding-left: 4px;
+  }
+`;

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
-import { sumBy } from 'lodash';
 
 import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
 
@@ -13,22 +11,7 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
 import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose, transformToForm } from 'utils';
-
+import { defaultInitialValues } from './utils';
-// Default form initial values.
-const defaultInitialValues = {
-  transaction_type: 'Bill',
-  transaction_date: moment(new Date()).format('YYYY-MM-DD'),
-  transaction_id: '',
-  transaction_entry_id: '',
-  amount: '',
-  allocation_method: 'quantity',
-  items: [
-    {
-      entry_id: '',
-      cost: '',
-    },
-  ],
-};
 
 /**
  * Allocate landed cost form.
@@ -49,11 +32,9 @@ function AllocateLandedCostForm({
       cost: '',
     })),
   };
-  const amount = sumBy(initialValues.items, 'amount');
-
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
-    setSubmitting(false);
+    setSubmitting(true);
 
     // Filters the entries has no cost.
     const entries = values.items
@@ -61,7 +42,10 @@ function AllocateLandedCostForm({
       .map((entry) => transformToForm(entry, defaultInitialValues.items[0]));
 
     if (entries.length <= 0) {
-      AppToaster.show({ message: 'Something wrong!', intent: Intent.DANGER });
+      AppToaster.show({
+        message: intl.get('something_wrong'),
+        intent: Intent.DANGER,
+      });
       return;
     }
     const form = {
@@ -77,17 +61,34 @@ function AllocateLandedCostForm({
       setSubmitting(false);
       closeDialog(dialogName);
     };
-
     // Handle the request error.
-    const onError = () => {
+    const onError = (res) => {
+      const { errors } = res.response.data;
       setSubmitting(false);
-      AppToaster.show({ message: 'Something went wrong!', intent: Intent.DANGER });
+
+      if (
+        errors.some(
+          (e) => e.type === 'COST_AMOUNT_BIGGER_THAN_UNALLOCATED_AMOUNT',
+        )
+      ) {
+        AppToaster.show({
+          message: intl.get(
+            'landed_cost.error.the_total_located_cost_is_bigger_than_the_transaction_line',
+          ),
+          intent: Intent.DANGER,
+        });
+      } else {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      }
     };
     createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
   };
 
   // Computed validation schema.
-  const validationSchema =  AllocateLandedCostFormSchema(amount);
+  const validationSchema = AllocateLandedCostFormSchema();
 
   return (
     <Formik

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js

@@ -1,13 +1,13 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
-export const AllocateLandedCostFormSchema = (minAmount) =>
+export const AllocateLandedCostFormSchema = () =>
   Yup.object().shape({
     transaction_type: Yup.string().label(intl.get('transaction_type')),
     transaction_date: Yup.date().label(intl.get('transaction_date')),
     transaction_id: Yup.string().label(intl.get('transaction_number')),
     transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
-    amount: Yup.number().max(minAmount).label(intl.get('amount')),
+    amount: Yup.number().label(intl.get('amount')),
     allocation_method: Yup.string().trim(),
     items: Yup.array().of(
       Yup.object().shape({

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js

@@ -1,16 +1,37 @@
 import React from 'react';
-import { Form } from 'formik';
+import { Form, useFormikContext } from 'formik';
+import { FormObserver } from 'components';
 import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
 import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
 
 /**
  * Allocate landed cost form content.
  */
 export default function AllocateLandedCostFormContent() {
+  const { values } = useFormikContext();
+
+  // Allocate landed cost dialog context.
+  const { setTransactionsType, setTransactionId, setTransactionEntryId } =
+    useAllocateLandedConstDialogContext();
+
+  // Handle the form change.
+  const handleFormChange = (values) => {
+    if (values.transaction_type) {
+      setTransactionsType(values.transaction_type);
+    }
+    if (values.transaction_id) {
+      setTransactionId(values.transaction_id);
+    }
+    if (values.transaction_entry_id) {
+      setTransactionEntryId(values.transaction_entry_id);
+    }
+  };
   return (
     <Form>
       <AllocateLandedCostFormFields />
       <AllocateLandedCostFloatingActions />
+      <FormObserver values={values} onChange={handleFormChange} />
     </Form>
   );
 }

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -14,31 +14,31 @@ import { inputIntent, handleStringChange } from 'utils';
 import { FieldRequiredHint, ListSelect } from 'components';
 import { CLASSES } from 'common/classes';
 import allocateLandedCostType from 'common/allocateLandedCostType';
-import { useLandedCostTransaction } from 'hooks/query';
 
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
-import { getEntriesByTransactionId, allocateCostToEntries } from './utils';
+import {
+  transactionsSelectShouldUpdate,
+  allocateCostToEntries,
+  resetAllocatedCostEntries,
+} from './utils';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
 
 /**
  * Allocate landed cost form fields.
  */
 export default function AllocateLandedCostFormFields() {
-  const { values } = useFormikContext();
+  // Allocated landed cost dialog.
-
+  const { costTransactionEntries, landedCostTransactions } =
-  const {
+    useAllocateLandedConstDialogContext();
-    data: { transactions },
-  } = useLandedCostTransaction(values.transaction_type);
-
-  // Retrieve entries of the given transaction id.
-  const transactionEntries = React.useMemo(
-    () => getEntriesByTransactionId(transactions, values.transaction_id),
-    [transactions, values.transaction_id],
-  );
 
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------Transaction type -----------*/}
-      <FastField name={'transaction_type'}>
+      <FastField
+        name={'transaction_type'}
+        transactions={allocateLandedCostType}
+        shouldUpdate={transactionsSelectShouldUpdate}
+      >
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -55,9 +55,14 @@ export default function AllocateLandedCostFormFields() {
             <ListSelect
               items={allocateLandedCostType}
               onItemSelect={(type) => {
+                const { items } = values;
+
                 setFieldValue('transaction_type', type.value);
                 setFieldValue('transaction_id', '');
                 setFieldValue('transaction_entry_id', '');
+
+                setFieldValue('amount', '');
+                setFieldValue('items', resetAllocatedCostEntries(items));
               }}
               filterable={false}
               selectedItem={value}
@@ -70,7 +75,11 @@ export default function AllocateLandedCostFormFields() {
       </FastField>
 
       {/*------------ Transaction  -----------*/}
-      <Field name={'transaction_id'}>
+      <Field
+        name={'transaction_id'}
+        transactions={landedCostTransactions}
+        shouldUpdate={transactionsSelectShouldUpdate}
+      >
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'transaction_id'} />}
@@ -81,17 +90,23 @@ export default function AllocateLandedCostFormFields() {
             inline={true}
           >
             <ListSelect
-              items={transactions}
+              items={landedCostTransactions}
               onItemSelect={({ id }) => {
+                const { items } = form.values;
                 form.setFieldValue('transaction_id', id);
                 form.setFieldValue('transaction_entry_id', '');
+
+                form.setFieldValue('amount', '');
+                form.setFieldValue('items', resetAllocatedCostEntries(items));
               }}
               filterable={false}
               selectedItem={value}
               selectedItemProp={'id'}
               textProp={'name'}
-              labelProp={'id'}
+              labelProp={'formatted_unallocated_cost_amount'}
-              defaultText={intl.get('Select transaction')}
+              defaultText={intl.get(
+                'landed_cost.dialog.label_select_transaction',
+              )}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -99,8 +114,12 @@ export default function AllocateLandedCostFormFields() {
       </Field>
 
       {/*------------ Transaction line  -----------*/}
-      <If condition={transactionEntries.length > 0}>
+      <If condition={costTransactionEntries.length > 0}>
-        <Field name={'transaction_entry_id'}>
+        <Field
+          name={'transaction_entry_id'}
+          transactions={costTransactionEntries}
+          shouldUpdate={transactionsSelectShouldUpdate}
+        >
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'transaction_line'} />}
@@ -113,23 +132,31 @@ export default function AllocateLandedCostFormFields() {
               inline={true}
             >
               <ListSelect
-                items={transactionEntries}
+                items={costTransactionEntries}
-                onItemSelect={({ id, amount }) => {
+                onItemSelect={(entry) => {
+                  const { id, unallocated_cost_amount: unallocatedAmount } =
+                    entry;
                   const { items, allocation_method } = form.values;
 
-                  form.setFieldValue('amount', amount);
+                  form.setFieldValue('amount', unallocatedAmount);
                   form.setFieldValue('transaction_entry_id', id);
-
                   form.setFieldValue(
                     'items',
-                    allocateCostToEntries(amount, allocation_method, items),
+                    allocateCostToEntries(
+                      unallocatedAmount,
+                      allocation_method,
+                      items,
+                    ),
                   );
                 }}
                 filterable={false}
                 selectedItem={value}
                 selectedItemProp={'id'}
                 textProp={'name'}
-                defaultText={intl.get('Select transaction entry')}
+                labelProp={'formatted_unallocated_cost_amount'}
+                defaultText={intl.get(
+                  'landed_cost.dialog.label_select_transaction_entry',
+                )}
                 popoverProps={{ minimal: true }}
               />
             </FormGroup>
@@ -177,12 +204,12 @@ export default function AllocateLandedCostFormFields() {
           >
             <RadioGroup
               onChange={handleStringChange((_value) => {
-                const { amount, items, allocation_method } = form.values;
+                const { amount, items } = form.values;
 
                 form.setFieldValue('allocation_method', _value);
                 form.setFieldValue(
                   'items',
-                  allocateCostToEntries(amount, allocation_method, items),
+                  allocateCostToEntries(amount, _value, items),
                 );
               })}
               selectedValue={value}

src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -1,5 +1,26 @@
+import React from 'react';
 import { sumBy, round } from 'lodash';
 import * as R from 'ramda';
+import intl from 'react-intl-universal';
+
+import { defaultFastFieldShouldUpdate } from 'utils';
+import { MoneyFieldCell } from 'components';
+
+export const defaultInitialItem = {
+  entry_id: '',
+  cost: '',
+};
+
+// Default form initial values.
+export const defaultInitialValues = {
+  transaction_type: 'Bill',
+  transaction_id: '',
+  transaction_entry_id: '',
+  amount: '',
+  allocation_method: 'quantity',
+  items: [defaultInitialItem],
+};
+
 /**
  * Retrieve transaction entries of the given transaction id.
  */
@@ -8,6 +29,23 @@ export function getEntriesByTransactionId(transactions, id) {
   return transaction ? transaction.entries : [];
 }
 
+/**
+ *
+ * @param {*} transaction
+ * @param {*} transactionEntryId
+ * @returns
+ */
+export function getTransactionEntryById(transaction, transactionEntryId) {
+  return transaction.entries.find((entry) => entry.id === transactionEntryId);
+}
+
+/**
+ *
+ * @param {*} total
+ * @param {*} allocateType
+ * @param {*} entries
+ * @returns
+ */
 export function allocateCostToEntries(total, allocateType, entries) {
   return R.compose(
     R.when(
@@ -30,12 +68,12 @@ export function allocateCostToEntries(total, allocateType, entries) {
 export function allocateCostByValue(total, entries) {
   const totalAmount = sumBy(entries, 'amount');
 
-  const _entries = entries.map((entry) => ({
+  const entriesMapped = entries.map((entry) => ({
     ...entry,
     percentageOfValue: entry.amount / totalAmount,
   }));
 
-  return _entries.map((entry) => ({
+  return entriesMapped.map((entry) => ({
     ...entry,
     cost: round(entry.percentageOfValue * total, 2),
   }));
@@ -60,3 +98,73 @@ export function allocateCostByQuantity(total, entries) {
     cost: round(entry.percentageOfQuantity * total, 2),
   }));
 }
+
+/**
+ * Retrieve the landed cost transaction by the given id.
+ */
+export function getCostTransactionById(id, transactions) {
+  return transactions.find((trans) => trans.id === id);
+}
+
+/**
+ * Detarmines the transactions selet field when should update.
+ */
+export function transactionsSelectShouldUpdate(newProps, oldProps) {
+  return (
+    newProps.transactions !== oldProps.transactions ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+}
+
+/**
+ *
+ * @param {*} entries
+ * @returns
+ */
+export function resetAllocatedCostEntries(entries) {
+  return entries.map((entry) => ({ ...entry, cost: 0 }));
+}
+
+/**
+ * Retrieves allocate landed cost entries table columns.
+ */
+export const useAllocateLandedCostEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+        align: 'right',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useSaveSettings } from 'hooks/query';
+
+import { CreditNoteNumberDialogProvider } from './CreditNoteNumberDialogProvider';
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * credit note number dialog content
+ */
+function CreditNoteNumberDialogContent({
+  // #ownProps
+  initialValues,
+  onConfirm,
+
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Handle the form success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('credit-number-form');
+      onConfirm(values);
+    };
+    // Handle the form errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'credit_note');
+
+    // Save the settings.
+    saveSettings({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  // Handle the dialog close.
+  const handleClose = () => {
+    closeDialog('credit-number-form');
+  };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('credit_note.auto_increment.auto')
+      : intl.get('credit_note.auto_increment.manually');
+
+  return (
+    <CreditNoteNumberDialogProvider>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        description={description}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+      />
+    </CreditNoteNumberDialogProvider>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ creditNoteSettings }) => ({
+    autoIncrement: creditNoteSettings?.autoIncrement,
+    nextNumber: creditNoteSettings?.nextNumber,
+    numberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(CreditNoteNumberDialogContent);

src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useSettingsCreditNotes } from 'hooks/query';
+
+const CreditNoteNumberDialogContext = React.createContext();
+
+/**
+ *Credit Note number dialog provider
+ */
+function CreditNoteNumberDialogProvider({ query, ...props }) {
+  const { isLoading: isSettingsLoading } = useSettingsCreditNotes();
+
+  // Provider payload.
+  const provider = {
+    isSettingsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <CreditNoteNumberDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCreditNoteNumberDialogContext = () =>
+  React.useContext(CreditNoteNumberDialogContext);
+
+export { CreditNoteNumberDialogProvider, useCreditNoteNumberDialogContext };

src/containers/Dialogs/CreditNoteNumberDialog/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose, saveInvoke } from 'utils';
+
+const CreditNoteNumberDialogContent = React.lazy(() =>
+  import('./CreditNoteNumberDialogContent'),
+);
+
+/**
+ * Credit note number dialog.
+ */
+function CreditNoteNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      title={<T id={'credit_note_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <CreditNoteNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(CreditNoteNumberDialog);

src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -24,7 +24,7 @@ function InviteUserFormContent({
   const handleClose = () => {
     closeDialog(dialogName);
   };
-  console.log(roles, 'XX');
+
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
@@ -49,7 +49,7 @@ function InviteUserFormContent({
         <FastField name={'role_id'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
-              label={<T id={'roles.label.role_name'} />}
+              label={<T id={'invite_user.label.role_name'} />}
               labelInfo={<FieldRequiredHint />}
               helperText={<ErrorMessage name="role_id" />}
               className={classNames(CLASSES.FILL, 'form-group--role_name')}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { LockingTransactionsFormProvider } from './LockingTransactionsFormProvider';
+import LockingTransactionsForm from './LockingTransactionsForm';
+
+/**
+ * Locking transactions dialog content.
+ */
+export default function LockingTransactionsDialogContent({
+  // #ownProps
+  dialogName,
+  moduleName,
+  isEnabled,
+}) {
+
+  return (
+    <LockingTransactionsFormProvider
+      isEnabled={isEnabled}
+      moduleName={moduleName}
+      dialogName={dialogName}
+    >
+      <LockingTransactionsForm />
+    </LockingTransactionsFormProvider>
+  );
+}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
+
+import { AppToaster } from 'components';
+import { CreateLockingTransactionsFormSchema } from './LockingTransactionsForm.schema';
+
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
+import LockingTransactionsFormContent from './LockingTransactionsFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  module: '',
+  lock_to_date: moment(new Date()).format('YYYY-MM-DD'),
+  reason: '',
+};
+
+/**
+ * Locking Transactions Form.
+ */
+function LockingTransactionsForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    moduleName,
+    transactionLocking,
+    isEnabled,
+    createLockingTransactionMutate,
+  } = useLockingTransactionsContext();
+
+  // Initial form values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(isEnabled
+        ? {
+            ...transformToForm(transactionLocking, defaultInitialValues),
+            module: moduleName,
+          }
+        : {
+            ...defaultInitialValues,
+            module: moduleName,
+          }),
+    }),
+    [isEnabled],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('locking_transactions.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    createLockingTransactionMutate(values).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateLockingTransactionsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={LockingTransactionsFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(LockingTransactionsForm);

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js

@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  lock_to_date: Yup.date().required().label(intl.get('date')),
+  module: Yup.string().required(),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+});
+export const CreateLockingTransactionsFormSchema = Schema;

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import LockingTransactionsFormFields from './LockingTransactionsFormFields';
+import LockingTransactionsFormFloatingActions from './LockingTransactionsFormFloatingActions';
+
+/**
+ * locking Transactions form content.
+ */
+export default function LockingTransactionsFormContent() {
+  return (
+    <Form>
+      <LockingTransactionsFormFields />
+      <LockingTransactionsFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js

@@ -14,28 +14,28 @@ import {
 } from 'utils';
 
 /**
- * Transactions locking form fields.
+ *  locking Transactions form fields.
  */
-export default function TransactionsLockingFormFields() {
+export default function LockingTransactionsFormFields() {
-  const dateFieldRef = useAutofocus();
+  const reasonFieldRef = useAutofocus();
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      {/*------------ Date -----------*/}
+      {/*------------  Locking Date -----------*/}
-      <FastField name={'date'}>
+      <FastField name={'lock_to_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'date'} />}
+            label={<T id={'locking_transactions.dialog.locking_date'} />}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
+            helperText={<ErrorMessage name="lock_to_date" />}
             minimal={true}
             className={classNames(CLASSES.FILL, 'form-group--date')}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
+                form.setFieldValue('lock_to_date', formattedDate);
               })}
               value={tansformDateValue(value)}
               popoverProps={{
@@ -43,16 +43,16 @@ export default function TransactionsLockingFormFields() {
                 minimal: true,
               }}
               intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (dateFieldRef.current = ref)}
             />
           </FormGroup>
         )}
       </FastField>
-      {/*------------  reasons -----------*/}
+
+      {/*------------ Locking  Reason -----------*/}
       <FastField name={'reason'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'reason'} />}
+            label={<T id={'locking_transactions.dialog.reason'} />}
             labelInfo={<FieldRequiredHint />}
             className={'form-group--reason'}
             intent={inputIntent({ error, touched })}
@@ -62,6 +62,7 @@ export default function TransactionsLockingFormFields() {
               growVertically={true}
               large={true}
               intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
               {...field}
             />
           </FormGroup>

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js

@@ -3,21 +3,21 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'components';
 
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 /**
- * Transactions locking floating actions.
+ * locking Transactions floating actions.
  */
-function TransactionsLockingFloatingActions({
+function LockingTransactionsFormFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
-  const { dialogName } = useTransactionLockingContext();
+  const { dialogName } = useLockingTransactionsContext();
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
@@ -27,24 +27,22 @@ function TransactionsLockingFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button
-          disabled={isSubmitting}
-          onClick={handleCancelBtnClick}
-          style={{ minWidth: '75px' }}
-        >
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
-          loading={isSubmitting}
+          style={{ minWidth: '95px' }}
-          style={{ minWidth: '75px' }}
           type="submit"
+          loading={isSubmitting}
         >
-          {<T id={'submit'} />}
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
         </Button>
       </div>
     </div>
   );
 }
 
-export default compose(withDialogActions)(TransactionsLockingFloatingActions);
+export default compose(withDialogActions)(
+  LockingTransactionsFormFloatingActions,
+);

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useCreateLockingTransactoin,
+  useEditTransactionsLocking,
+} from 'hooks/query';
+
+const LockingTransactionsContext = React.createContext();
+
+/**
+ * Locking transactions form provider.
+ */
+function LockingTransactionsFormProvider({
+  moduleName,
+  isEnabled,
+  dialogName,
+  ...props
+}) {
+  // Create locking transactions mutations.
+  const { mutateAsync: createLockingTransactionMutate } =
+    useCreateLockingTransactoin();
+
+  const { data: transactionLocking, isLoading: isTransactionsLockingLoading } =
+    useEditTransactionsLocking(moduleName, {
+      enabled: !!isEnabled,
+    });
+
+  // State provider.
+  const provider = {
+    dialogName,
+    moduleName,
+    createLockingTransactionMutate,
+    transactionLocking,
+    isEnabled,
+  };
+  return (
+    <DialogContent isLoading={isTransactionsLockingLoading}>
+      <LockingTransactionsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useLockingTransactionsContext = () =>
+  React.useContext(LockingTransactionsContext);
+
+export { LockingTransactionsFormProvider, useLockingTransactionsContext };

src/containers/Dialogs/LockingTransactionsDialog/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const LockingTransactionsDialogContent = React.lazy(() =>
+  import('./LockingTransactionsDialogContent'),
+);
+
+/**
+ * Locking Transactions dialog
+ */
+function LockingTransactionsDialog({
+  dialogName,
+  payload: { module, isEnabled },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      autoFocus={true}
+      title={<T id={'locking_transactions.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--transaction--locking'}
+    >
+      <DialogSuspense>
+        <LockingTransactionsDialogContent
+          moduleName={module}
+          dialogName={dialogName}
+          isEnabled={isEnabled}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(LockingTransactionsDialog);

src/containers/Dialogs/MoneyInDialog/MoneyInForm.js

@@ -86,7 +86,7 @@ function MoneyInForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
 

src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js

@@ -86,7 +86,7 @@ function MoneyOutForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
   return (

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js

@@ -106,6 +106,6 @@ export default compose(
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
   })),
 )(QuickPaymentReceiveForm);