Merge branch 'master' of https://github.com/abouolia/Ratteb

2026-02-16 12:50:38 +00:00 · 2021-09-08 16:32:59 +02:00
parent 361aab89e6 b3439a2bc1
commit a7b1d75a3a
49 changed files with 305 additions and 216 deletions
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
@@ -73,6 +73,11 @@ function ManualJournalsDataTable({
    });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('journal-drawer', { manualJournalId: cell.row.original.id });
+  };
+
  // Handle fetch data once the page index, size or sort by of the table change.
  const handleFetchData = React.useCallback(
    ({ pageSize, pageIndex, sortBy }) => {
@@ -112,6 +117,7 @@ function ManualJournalsDataTable({
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
        onFetchData={handleFetchData}
+        onCellClick={handleCellClick}
        payload={{
          onDelete: handleDeleteJournal,
          onPublish: handlePublishJournal,
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -20,6 +20,7 @@ export const useManualJournalsColumns = () => {
        accessor: DateAccessor,
        width: 115,
        className: 'date',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -27,6 +28,7 @@ export const useManualJournalsColumns = () => {
        accessor: 'formatted_amount',
        className: 'amount',
        width: 115,
+        clickable: true,
      },
      {
        id: 'journal_number',
@@ -34,6 +36,7 @@ export const useManualJournalsColumns = () => {
        accessor: (row) => `#${row.journal_number}`,
        className: 'journal_number',
        width: 100,
+        clickable: true,
      },
      {
        id: 'journal_type',
@@ -41,6 +44,7 @@ export const useManualJournalsColumns = () => {
        accessor: 'journal_type',
        width: 110,
        className: 'journal_type',
+        clickable: true,
      },
      {
        id: 'status',
@@ -48,6 +52,7 @@ export const useManualJournalsColumns = () => {
        accessor: (row) => StatusAccessor(row),
        width: 95,
        className: 'status',
+        clickable: true,
      },
      {
        id: 'note',
@@ -56,6 +61,7 @@ export const useManualJournalsColumns = () => {
        disableSortBy: true,
        width: 85,
        className: 'note',
+        clickable: true,
      },
      {
        id: 'created_at',
@@ -63,8 +69,9 @@ export const useManualJournalsColumns = () => {
        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
        width: 125,
        className: 'created_at',
+        clickable: true,
      },
    ],
    [],
  );
-};
+};
--- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js
@@ -19,6 +19,7 @@ import MakeJournalFormFooter from './MakeJournalFormFooter';
 import MakeJournalFormDialogs from './MakeJournalFormDialogs';

 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import AppToaster from 'components/AppToaster';
 import withMediaActions from 'containers/Media/withMediaActions';
@@ -38,7 +39,8 @@ function MakeJournalEntriesForm({
  journalNextNumber,
  journalNumberPrefix,
  journalAutoIncrement,
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  // Journal form context.
  const {
@@ -68,10 +70,10 @@ function MakeJournalEntriesForm({
            ...(journalAutoIncrement && {
              journal_number: defaultTo(journalNumber, ''),
            }),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
-    [manualJournal, baseCurrency, journalNumber],
+    [manualJournal, base_currency, journalNumber],
  );

  // Handle the form submiting.
@@ -182,10 +184,10 @@ function MakeJournalEntriesForm({

 export default compose(
  withMediaActions,
-  withSettings(({ manualJournalsSettings, organizationSettings }) => ({
+  withSettings(({ manualJournalsSettings }) => ({
    journalNextNumber: parseInt(manualJournalsSettings?.nextNumber, 10),
    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(MakeJournalEntriesForm);
--- a/client/src/containers/Accounts/components.js
+++ b/client/src/containers/Accounts/components.js
@@ -6,13 +6,12 @@ import {
  MenuItem,
  Menu,
  MenuDivider,
-  Intent
+  Intent,
 } from '@blueprintjs/core';
 import { Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';

-
 /**
 * Accounts table actions menu.
 */
@@ -101,7 +100,8 @@ export function BalanceCell({ cell }) {

  return account.amount !== null ? (
    <span>
-      <Money amount={account.amount} currency={account.currency_code} />
+      {account.formatted_amount}
+      {/* <Money amount={account.amount} currency={account.currency_code} /> */}
    </span>
  ) : (
    <span class="placeholder">—</span>
--- a/client/src/containers/Customers/CustomerForm/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerForm.js
@@ -14,7 +14,7 @@ import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
 import CustomersTabs from './CustomersTabs';
 import CustomerFloatingActions from './CustomerFloatingActions';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { compose, transformToForm } from 'utils';
 import { useCustomerFormContext } from './CustomerFormProvider';
@@ -59,10 +59,7 @@ const defaultInitialValues = {
 /**
 * Customer form.
 */
-function CustomerForm({
-  // #withSettings
-  baseCurrency,
-}) {
+function CustomerForm({ organization: { base_currency } }) {
  const {
    customer,
    customerId,
@@ -75,7 +72,6 @@ function CustomerForm({

  // const isNewMode = !customerId;
  const history = useHistory();
-  

  /**
   * Initial values in create and edit mode.
@@ -83,10 +79,10 @@ function CustomerForm({
  const initialValues = useMemo(
    () => ({
      ...defaultInitialValues,
-      currency_code: baseCurrency,
+      currency_code: base_currency,
      ...transformToForm(contactDuplicate || customer, defaultInitialValues),
    }),
-    [customer, contactDuplicate, baseCurrency],
+    [customer, contactDuplicate, base_currency],
  );

  //Handles the form submit.
@@ -153,8 +149,4 @@ function CustomerForm({
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(CustomerForm);
+export default compose(withCurrentOrganization())(CustomerForm);
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -95,6 +95,11 @@ function CustomersTable({
    openDrawer('contact-detail-drawer', { contactId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('contact-detail-drawer', { contactId: cell.row.original.id });
+  };
+
  if (isEmptyStatus) {
    return <CustomersEmptyStatus />;
  }
@@ -122,6 +127,7 @@ function CustomersTable({
        autoResetPage={false}
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        onCellClick={handleCellClick}
        payload={{
          onDelete: handleCustomerDelete,
          onEdit: handleCustomerEdit,
--- a/client/src/containers/Customers/CustomersLanding/components.js
+++ b/client/src/containers/Customers/CustomersLanding/components.js
@@ -104,6 +104,7 @@ export function useCustomersTableColumns() {
        width: 45,
        disableResizing: true,
        disableSortBy: true,
+        clickable: true,
      },
      {
        id: 'display_name',
@@ -111,6 +112,7 @@ export function useCustomersTableColumns() {
        accessor: 'display_name',
        className: 'display_name',
        width: 150,
+        clickable: true,
      },
      {
        id: 'company_name',
@@ -118,6 +120,7 @@ export function useCustomersTableColumns() {
        accessor: 'company_name',
        className: 'company_name',
        width: 150,
+        clickable: true,
      },
      {
        id: 'work_phone',
@@ -125,6 +128,7 @@ export function useCustomersTableColumns() {
        accessor: PhoneNumberAccessor,
        className: 'phone_number',
        width: 100,
+        clickable: true,
      },
      {
        id: 'balance',
@@ -132,6 +136,7 @@ export function useCustomersTableColumns() {
        accessor: BalanceAccessor,
        className: 'receivable_balance',
        width: 100,
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
@@ -10,7 +10,6 @@ import { useAccountDrawerContext } from './AccountDrawerProvider';
 */
 export default function AccountDrawerHeader() {
  const { account } = useAccountDrawerContext();
-
  return (
    <div className={'account-drawer__content-header'}>
      <DetailsMenu>
@@ -18,9 +17,7 @@ export default function AccountDrawerHeader() {
          name={'closing-balance'}
          label={<T id={'closing_balance'} />}
        >
-          <h3 class={'big-number'}>
-            <Money amount={account.amount} currency={account.currency_code} />
-          </h3>
+          <h3 class={'big-number'}>{account.formatted_amount}</h3>
        </DetailItem>

        <DetailItem name={'account-type'} label={<T id={'account_type'} />}>
@@ -50,7 +47,7 @@ export default function AccountDrawerHeader() {
        <DetailItem name={'description'} label={<T id={'description'} />}>
          {defaultTo(account.description, '--')}
        </DetailItem>
-      </DetailsMenu>    
+      </DetailsMenu>
    </div>
  );
 }
--- a/client/src/containers/Drawers/AccountDrawer/utils.js
+++ b/client/src/containers/Drawers/AccountDrawer/utils.js
@@ -9,9 +9,10 @@ import { isBlank } from 'utils';
 * Debit/credit table cell.
 */
 function DebitCreditTableCell({ value, payload: { account } }) {
-  return !isBlank(value) && value !== 0 ? (
-    <Money amount={value} currency={account.currency_code} />
-  ) : null;
+  return !isBlank(value) && value !== 0
+    ? // <Money amount={value} currency={account.currency_code} />
+      account.formatted_amount
+    : null;
 }

 /**
@@ -19,7 +20,8 @@ function DebitCreditTableCell({ value, payload: { account } }) {
 */
 function RunningBalanceTableCell({ value, payload: { account } }) {
  return (
-    <Money amount={value} currency={account.currency_code} />
+    // <Money amount={value} currency={account.currency_code} />
+    account.formatted_amount
  );
 }

--- a/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js
+++ b/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js
@@ -18,6 +18,7 @@ import { useExpenseFormContext } from './ExpenseFormPageProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import AppToaster from 'components/AppToaster';
 import {
@@ -32,8 +33,9 @@ import { compose, orderingLinesIndexes } from 'utils';
 */
 function ExpenseForm({
  // #withSettings
-  baseCurrency,
  preferredPaymentAccount,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  // Expense form context.
  const {
@@ -58,11 +60,11 @@ function ExpenseForm({
          }
        : {
            ...defaultExpense,
-            currency_code: baseCurrency,
+            currency_code: base_currency,
            payment_account_id: defaultTo(preferredPaymentAccount, ''),
          }),
    }),
-    [expense, baseCurrency, preferredPaymentAccount],
+    [expense, base_currency, preferredPaymentAccount],
  );

  //  Handle form submit.
@@ -79,16 +81,13 @@ function ExpenseForm({
    }
    // Filter expense entries that has no amount or expense account.
    const categories = values.categories.filter(
-      (category) =>
-        category.amount && category.expense_account_id,
+      (category) => category.amount && category.expense_account_id,
    );

    const form = {
      ...values,
      publish: submitPayload.publish,
-      categories: R.compose(
-        orderingLinesIndexes,
-      )(categories),
+      categories: R.compose(orderingLinesIndexes)(categories),
    };
    // Handle request success.
    const handleSuccess = (response) => {
@@ -158,11 +157,11 @@ function ExpenseForm({
 export default compose(
  withDashboardActions,
  withMediaActions,
-  withSettings(({ organizationSettings, expenseSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
+  withSettings(({ expenseSettings }) => ({
    preferredPaymentAccount: parseInt(
      expenseSettings?.preferredPaymentAccount,
      10,
    ),
  })),
+  withCurrentOrganization(),
 )(ExpenseForm);
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
@@ -79,6 +79,11 @@ function ExpensesDataTable({
    });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('expense-drawer', { expenseId: cell.row.original.id });
+  };
+
  // Display empty status instead of the table.
  if (isEmptyStatus) {
    return <ExpensesEmptyStatus />;
@@ -105,6 +110,7 @@ function ExpensesDataTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onPublish: handlePublishExpense,
          onDelete: handleDeleteExpense,
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -138,6 +138,7 @@ export function useExpensesTableColumns() {
        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
        width: 140,
        className: 'payment_date',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -145,6 +146,7 @@ export function useExpensesTableColumns() {
        accessor: TotalAmountAccessor,
        className: 'amount',
        width: 150,
+        clickable: true,
      },
      {
        id: 'payment_account',
@@ -152,6 +154,7 @@ export function useExpensesTableColumns() {
        accessor: 'payment_account.name',
        className: 'payment_account',
        width: 150,
+        clickable: true,
      },
      {
        id: 'expense_account',
@@ -160,6 +163,7 @@ export function useExpensesTableColumns() {
        width: 160,
        className: 'expense_account',
        disableSortBy: true,
+        clickable: true,
      },
      {
        id: 'published',
@@ -167,6 +171,7 @@ export function useExpensesTableColumns() {
        accessor: PublishAccessor,
        width: 100,
        className: 'publish',
+        clickable: true,
      },
      {
        id: 'description',
@@ -175,6 +180,7 @@ export function useExpensesTableColumns() {
        width: 150,
        className: 'description',
        disableSortBy: true,
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
+++ b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
@@ -66,7 +66,12 @@ function InventoryAdjustmentDataTable({
    },
    [setInventoryAdjustmentTableState],
  );
-
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('inventory-adjustment-drawer', {
+      inventoryId: cell.row.original.id,
+    });
+  };
  return (
    <DataTable
      columns={columns}
@@ -83,6 +88,7 @@ function InventoryAdjustmentDataTable({
      pagesCount={pagination.pagesCount}
      autoResetSortBy={false}
      autoResetPage={false}
+      onCellClick={handleCellClick}
      payload={{
        onDelete: handleDeleteAdjustment,
        onPublish: handlePublishInventoryAdjustment,
--- a/client/src/containers/InventoryAdjustments/components.js
+++ b/client/src/containers/InventoryAdjustments/components.js
@@ -143,6 +143,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: (r) => moment(r.date).format('YYYY MMM DD'),
        width: 115,
        className: 'date',
+        clickable: true,
      },
      {
        id: 'type',
@@ -150,6 +151,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: TypeAccessor,
        className: 'type',
        width: 100,
+        clickable: true,
      },
      {
        id: 'reason',
@@ -157,6 +159,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: 'reason',
        className: 'reason',
        width: 115,
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -164,6 +167,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: 'reference_no',
        className: 'reference_no',
        width: 100,
+        clickable: true,
      },
      {
        id: 'published_at',
@@ -171,6 +175,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: PublishAccessor,
        width: 95,
        className: 'publish',
+        clickable: true,
      },
      {
        id: 'description',
@@ -179,6 +184,7 @@ export const useInventoryAdjustmentsColumns = () => {
        disableSorting: true,
        width: 85,
        className: 'description',
+        clickable: true,
      },
      {
        id: 'created_at',
@@ -186,6 +192,7 @@ export const useInventoryAdjustmentsColumns = () => {
        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
        width: 125,
        className: 'created_at',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Items/ItemFormBody.js
+++ b/client/src/containers/Items/ItemFormBody.js
@@ -19,7 +19,7 @@ import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import { useItemFormContext } from './ItemFormProvider';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { ACCOUNT_PARENT_TYPE } from 'common/accountTypes';

 import { compose, inputIntent } from 'utils';
@@ -35,7 +35,7 @@ import {
 /**
 * Item form body.
 */
-function ItemFormBody({ baseCurrency }) {
+function ItemFormBody({ organization: { base_currency } }) {
  const { accounts } = useItemFormContext();
  const { values } = useFormikContext();

@@ -76,7 +76,7 @@ function ItemFormBody({ baseCurrency }) {
                inline={true}
              >
                <ControlGroup>
-                  <InputPrependText text={baseCurrency} />
+                  <InputPrependText text={base_currency} />
                  <MoneyInputGroup
                    value={value}
                    inputGroupProps={{ fill: true }}
@@ -182,7 +182,7 @@ function ItemFormBody({ baseCurrency }) {
                inline={true}
              >
                <ControlGroup>
-                  <InputPrependText text={baseCurrency} />
+                  <InputPrependText text={base_currency} />
                  <MoneyInputGroup
                    value={value}
                    inputGroupProps={{ medium: true }}
@@ -259,8 +259,4 @@ function ItemFormBody({ baseCurrency }) {
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ItemFormBody);
+export default compose(withCurrentOrganization())(ItemFormBody);
--- a/client/src/containers/Items/ItemFormInventorySection.js
+++ b/client/src/containers/Items/ItemFormInventorySection.js
@@ -6,7 +6,7 @@ import { CLASSES } from 'common/classes';
 import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { accountsFieldShouldUpdate } from './utils';
 import { compose, inputIntent } from 'utils';
@@ -16,7 +16,7 @@ import { useItemFormContext } from './ItemFormProvider';
 /**
 * Item form inventory sections.
 */
-function ItemFormInventorySection({ baseCurrency }) {
+function ItemFormInventorySection({ organization: { base_currency } }) {
  const { accounts } = useItemFormContext();

  return (
@@ -63,8 +63,4 @@ function ItemFormInventorySection({ baseCurrency }) {
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ItemFormInventorySection);
+export default compose(withCurrentOrganization())(ItemFormInventorySection);
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -107,6 +107,11 @@ function ItemsDataTable({
    return <ItemsEmptyStatus />;
  }

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('item-detail-drawer', { itemId: cell.row.original.id });
+  };
+
  return (
    <DashboardContentTable>
      <DataTable
@@ -132,6 +137,7 @@ function ItemsDataTable({
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ItemsActionMenuList}
        onFetchData={handleFetchData}
+        onCellClick={handleCellClick}
        payload={{
          onDeleteItem: handleDeleteItem,
          onEditItem: handleEditItem,
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -155,6 +155,7 @@ export const useItemsTableColumns = () => {
        accessor: 'name',
        className: 'name',
        width: 180,
+        clickable: true,
      },
      {
        id: 'code',
@@ -162,6 +163,7 @@ export const useItemsTableColumns = () => {
        accessor: 'code',
        className: 'code',
        width: 120,
+        clickable: true,
      },
      {
        id: 'type',
@@ -169,6 +171,7 @@ export const useItemsTableColumns = () => {
        accessor: ItemTypeAccessor,
        className: 'item_type',
        width: 120,
+        clickable: true,
      },
      {
        id: 'category',
@@ -176,6 +179,7 @@ export const useItemsTableColumns = () => {
        accessor: 'category.name',
        className: 'category',
        width: 150,
+        clickable: true,
      },
      {
        id: 'sell_price',
@@ -183,6 +187,7 @@ export const useItemsTableColumns = () => {
        accessor: 'sell_price_formatted',
        className: 'sell-price',
        width: 150,
+        clickable: true,
      },
      {
        id: 'cost_price',
@@ -190,6 +195,7 @@ export const useItemsTableColumns = () => {
        accessor: 'cost_price_formatted',
        className: 'cost-price',
        width: 150,
+        clickable: true,
      },
      {
        id: 'quantity_on_hand',
@@ -197,6 +203,7 @@ export const useItemsTableColumns = () => {
        accessor: 'quantity_on_hand',
        Cell: QuantityOnHandCell,
        width: 140,
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Purchases/Bills/BillForm/BillForm.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillForm.js
@@ -20,14 +20,14 @@ import { ERROR } from 'common/errors';
 import { useBillFormContext } from './BillFormProvider';
 import { compose, orderingLinesIndexes, safeSumBy } from 'utils';
 import { defaultBill, transformToEditForm } from './utils';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 /**
 * Bill form.
 */
 function BillForm({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();

@@ -41,14 +41,14 @@ function BillForm({
      ...(!isEmpty(bill)
        ? {
            ...transformToEditForm(bill),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }
        : {
            ...defaultBill,
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
-    [bill, baseCurrency],
+    [bill, base_currency],
  );

  // Transform response error to fields.
@@ -142,8 +142,4 @@ function BillForm({
    </div>
  );
 }
-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(BillForm);
+export default compose(withCurrentOrganization())(BillForm);
--- a/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
@@ -8,22 +8,24 @@ import { CLASSES } from 'common/classes';

 import BillFormHeaderFields from './BillFormHeaderFields';
 import { PageFormBigNumber } from 'components';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
 import { compose } from 'redux';

 /**
 * Fill form header.
 */
 function BillFormHeader({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const { values } = useFormikContext();

  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(values.entries, 'amount'), [
-    values.entries,
-  ]);
+  const totalDueAmount = useMemo(
+    () => sumBy(values.entries, 'amount'),
+    [values.entries],
+  );

  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
@@ -31,13 +33,9 @@ function BillFormHeader({
      <PageFormBigNumber
        label={intl.get('due_amount')}
        amount={totalDueAmount}
-        currencyCode={baseCurrency}
+        currencyCode={base_currency}
      />
    </div>
  );
 }
-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(BillFormHeader);
+export default compose(withCurrentOrganization())(BillFormHeader);
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -12,7 +12,6 @@ import BillsEmptyStatus from './BillsEmptyStatus';

 import withBills from './withBills';
 import withBillActions from './withBillsActions';
-import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -34,7 +33,7 @@ function BillsDataTable({

  // #withDialogActions
  openDialog,
-  
+
  // #withDrawerActions
  openDrawer,
 }) {
@@ -88,6 +87,11 @@ function BillsDataTable({
    openDrawer('bill-drawer', { billId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('bill-drawer', { billId: cell.row.original.id });
+  };
+
  if (isEmptyStatus) {
    return <BillsEmptyStatus />;
  }
@@ -111,6 +115,7 @@ function BillsDataTable({
      TableLoadingRenderer={TableSkeletonRows}
      TableHeaderSkeletonRenderer={TableSkeletonHeader}
      ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
      payload={{
        onDelete: handleDeleteBill,
        onEdit: handleEditBill,
@@ -130,7 +135,4 @@ export default compose(
  withAlertsActions,
  withDrawerActions,
  withDialogActions,
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(BillsDataTable);
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -159,6 +159,7 @@ export function useBillsTableColumns() {
        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
        width: 110,
        className: 'bill_date',
+        clickable: true,
      },
      {
        id: 'vendor',
@@ -166,6 +167,7 @@ export function useBillsTableColumns() {
        accessor: 'vendor.display_name',
        width: 180,
        className: 'vendor',
+        clickable: true,
      },
      {
        id: 'bill_number',
@@ -173,6 +175,7 @@ export function useBillsTableColumns() {
        accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
        width: 100,
        className: 'bill_number',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -180,6 +183,7 @@ export function useBillsTableColumns() {
        accessor: AmountAccessor,
        width: 120,
        className: 'amount',
+        clickable: true,
      },
      {
        id: 'status',
@@ -187,6 +191,7 @@ export function useBillsTableColumns() {
        accessor: StatusAccessor,
        width: 160,
        className: 'status',
+        clickable: true,
      },
      {
        id: 'due_date',
@@ -194,6 +199,7 @@ export function useBillsTableColumns() {
        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
        width: 110,
        className: 'due_date',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -201,6 +207,7 @@ export function useBillsTableColumns() {
        accessor: 'reference_no',
        width: 90,
        className: 'reference_no',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
@@ -15,6 +15,8 @@ import PaymentMadeFormBody from './PaymentMadeFormBody';
 import { PaymentMadeInnerProvider } from './PaymentMadeInnerProvider';

 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
 import {
  EditPaymentMadeFormSchema,
  CreatePaymentMadeFormSchema,
@@ -29,7 +31,9 @@ import { defaultPaymentMade, transformToEditForm, ERRORS } from './utils';
 function PaymentMadeForm({
  // #withSettings
  preferredPaymentAccount,
-  baseCurrency,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();

@@ -54,7 +58,7 @@ function PaymentMadeForm({
        : {
            ...defaultPaymentMade,
            payment_account_id: defaultTo(preferredPaymentAccount),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
            entries: orderingLinesIndexes(defaultPaymentMade.entries),
          }),
    }),
@@ -156,10 +160,10 @@ function PaymentMadeForm({
 }

 export default compose(
-  withSettings(({ billPaymentSettings, organizationSettings }) => ({
+  withSettings(({ billPaymentSettings }) => ({
    paymentNextNumber: billPaymentSettings?.next_number,
    paymentNumberPrefix: billPaymentSettings?.number_prefix,
    preferredPaymentAccount: parseInt(billPaymentSettings?.withdrawalAccount),
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(PaymentMadeForm);
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
@@ -8,14 +8,14 @@ import { Money } from 'components';
 import { FormattedMessage as T } from 'components';

 import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 /**
 * Payment made header form.
 */
 function PaymentMadeFormHeader({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  // Formik form context.
  const {
@@ -36,7 +36,7 @@ function PaymentMadeFormHeader({
              <T id={'amount_received'} />
            </span>
            <h1 class="big-amount__number">
-              <Money amount={amountPaid} currency={baseCurrency} />
+              <Money amount={amountPaid} currency={base_currency} />
            </h1>
          </div>
        </div>
@@ -45,8 +45,4 @@ function PaymentMadeFormHeader({
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentMadeFormHeader);
+export default compose(withCurrentOrganization())(PaymentMadeFormHeader);
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -23,7 +23,7 @@ import {
  Icon,
  MoneyInputGroup,
 } from 'components';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
 import {
@@ -41,7 +41,7 @@ import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
 /**
 * Payment made form header fields.
 */
-function PaymentMadeFormHeaderFields({ baseCurrency }) {
+function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
  // Formik form context.
  const {
    values: { entries },
@@ -143,7 +143,7 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
            helperText={<ErrorMessage name="full_amount" />}
          >
            <ControlGroup>
-              <InputPrependText text={baseCurrency} />
+              <InputPrependText text={base_currency} />
              <MoneyInputGroup
                value={value}
                onChange={(value) => {
@@ -160,7 +160,7 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
              minimal={true}
            >
              <T id={'receive_full_amount'} /> (
-              <Money amount={payableFullAmount} currency={baseCurrency} />)
+              <Money amount={payableFullAmount} currency={base_currency} />)
            </Button>
          </FormGroup>
        )}
@@ -244,8 +244,4 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentMadeFormHeaderFields);
+export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -11,7 +11,8 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

 import withPaymentMadeActions from './withPaymentMadeActions';
 import withPaymentMade from './withPaymentMade';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
@@ -63,6 +64,13 @@ function PaymentMadesTable({
    openDrawer('payment-made-detail-drawer', { paymentMadeId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-made-detail-drawer', {
+      paymentMadeId: cell.row.original.id,
+    });
+  };
+
  // Handle datatable fetch data once the table state change.
  const handleDataTableFetchData = useCallback(
    ({ pageIndex, pageSize, sortBy }) => {
@@ -97,6 +105,7 @@ function PaymentMadesTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onEdit: handleEditPaymentMade,
          onDelete: handleDeletePaymentMade,
@@ -112,7 +121,5 @@ export default compose(
  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
  withAlertsActions,
  withDrawerActions,
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
+  withCurrentOrganization(),
 )(PaymentMadesTable);
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -78,6 +78,7 @@ export function usePaymentMadesTableColumns() {
        accessor: 'payment_date',
        width: 140,
        className: 'payment_date',
+        clickable: true,
      },
      {
        id: 'vendor',
@@ -85,6 +86,7 @@ export function usePaymentMadesTableColumns() {
        accessor: 'vendor.display_name',
        width: 140,
        className: 'vendor_id',
+        clickable: true,
      },
      {
        id: 'payment_number',
@@ -93,6 +95,7 @@ export function usePaymentMadesTableColumns() {
          row.payment_number ? `#${row.payment_number}` : null,
        width: 140,
        className: 'payment_number',
+        clickable: true,
      },
      {
        id: 'payment_account',
@@ -100,6 +103,7 @@ export function usePaymentMadesTableColumns() {
        accessor: 'payment_account.name',
        width: 140,
        className: 'payment_account_id',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -107,6 +111,7 @@ export function usePaymentMadesTableColumns() {
        accessor: AmountAccessor,
        width: 140,
        className: 'amount',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -114,6 +119,7 @@ export function usePaymentMadesTableColumns() {
        accessor: 'reference',
        width: 140,
        className: 'reference',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -24,7 +24,7 @@ import EstimatesEmptyStatus from './EstimatesEmptyStatus';
 import { statusAccessor } from './components';
 import withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 // Estimates transactions datatable.
 function EstimatesDataTable({
@@ -38,8 +38,8 @@ function EstimatesDataTable({
  // #withEstimatesActions
  addEstimatesTableQueries,

-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },

  // #ownProps
  onEditEstimate,
@@ -50,7 +50,6 @@ function EstimatesDataTable({
  onDrawerEstimate,
  onSelectedRowsChange,
 }) {
-  
  const isLoaded = useIsValuePassed(estimatesLoading, false);

  const handleEditEstimate = useCallback(
@@ -171,7 +170,7 @@ function EstimatesDataTable({
      {
        id: 'amount',
        Header: intl.get('amount'),
-        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
+        accessor: (r) => <Money amount={r.amount} currency={base_currency} />,

        width: 140,
        className: 'amount',
@@ -293,7 +292,5 @@ export default compose(
      estimatesCurrentViewId,
    }),
  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
+  withCurrentOrganization(),
 )(EstimatesDataTable);
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
@@ -20,6 +20,7 @@ import EstimateFormFooter from './EstimateFormFooter';
 import EstimateFormDialogs from './EstimateFormDialogs';

 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { AppToaster } from 'components';
 import { ERROR } from 'common/errors';
@@ -35,7 +36,9 @@ function EstimateForm({
  estimateNextNumber,
  estimateNumberPrefix,
  estimateIncrementMode,
-  baseCurrency,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();
  const {
@@ -55,14 +58,14 @@ function EstimateForm({
  const initialValues = useMemo(
    () => ({
      ...(!isEmpty(estimate)
-        ? { ...transformToEditForm(estimate), currency_code: baseCurrency }
+        ? { ...transformToEditForm(estimate), currency_code: base_currency }
        : {
            ...defaultEstimate,
            ...(estimateIncrementMode && {
              estimate_number: estimateNumber,
            }),
            entries: orderingLinesIndexes(defaultEstimate.entries),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
    [estimate, estimateNumber, estimateIncrementMode],
@@ -172,10 +175,10 @@ function EstimateForm({
 }

 export default compose(
-  withSettings(({ estimatesSettings, organizationSettings }) => ({
+  withSettings(({ estimatesSettings }) => ({
    estimateNextNumber: estimatesSettings?.nextNumber,
    estimateNumberPrefix: estimatesSettings?.numberPrefix,
    estimateIncrementMode: estimatesSettings?.autoIncrement,
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(EstimateForm);
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
@@ -6,7 +6,7 @@ import intl from 'react-intl-universal';
 import { CLASSES } from 'common/classes';
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { getEntriesTotal } from 'containers/Entries/utils';
 import { PageFormBigNumber } from 'components';
@@ -14,8 +14,8 @@ import { compose } from 'utils';

 // Estimate form top header.
 function EstimateFormHeader({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const { values } = useFormikContext();

@@ -32,14 +32,10 @@ function EstimateFormHeader({
      <PageFormBigNumber
        label={intl.get('amount')}
        amount={totalDueAmount}
-        currencyCode={baseCurrency}
+        currencyCode={base_currency}
      />
    </div>
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(EstimateFormHeader);
+export default compose(withCurrentOrganization())(EstimateFormHeader);
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -9,7 +9,6 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

 import withEstimatesActions from './withEstimatesActions';
-import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -91,6 +90,10 @@ function EstimatesDataTable({
    openDialog('estimate-pdf-preview', { estimateId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
+  };
  // Handles fetch data.
  const handleFetchData = useCallback(
    ({ pageIndex, pageSize, sortBy }) => {
@@ -127,6 +130,7 @@ function EstimatesDataTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onApprove: handleApproveEstimate,
          onEdit: handleEditEstimate,
@@ -148,7 +152,4 @@ export default compose(
  withAlertsActions,
  withDrawerActions,
  withDialogActions,
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(EstimatesDataTable);
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -164,6 +164,7 @@ export function useEstiamtesTableColumns() {
        Cell: DateCell,
        width: 140,
        className: 'estimate_date',
+        clickable: true,
      },
      {
        id: 'customer',
@@ -171,6 +172,7 @@ export function useEstiamtesTableColumns() {
        accessor: 'customer.display_name',
        width: 140,
        className: 'customer_id',
+        clickable: true,
      },
      {
        id: 'expiration_date',
@@ -179,6 +181,7 @@ export function useEstiamtesTableColumns() {
        Cell: DateCell,
        width: 140,
        className: 'expiration_date',
+        clickable: true,
      },
      {
        id: 'estimate_number',
@@ -187,6 +190,7 @@ export function useEstiamtesTableColumns() {
          row.estimate_number ? `#${row.estimate_number}` : null,
        width: 140,
        className: 'estimate_number',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -194,6 +198,7 @@ export function useEstiamtesTableColumns() {
        accessor: AmountAccessor,
        width: 140,
        className: 'amount',
+        clickable: true,
      },
      {
        id: 'status',
@@ -201,6 +206,7 @@ export function useEstiamtesTableColumns() {
        accessor: (row) => statusAccessor(row),
        width: 140,
        className: 'status',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -208,6 +214,7 @@ export function useEstiamtesTableColumns() {
        accessor: 'reference',
        width: 90,
        className: 'reference',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
@@ -20,6 +20,7 @@ import InvoiceFormDialogs from './InvoiceFormDialogs';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { AppToaster } from 'components';
 import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
@@ -34,7 +35,9 @@ function InvoiceForm({
  invoiceNextNumber,
  invoiceNumberPrefix,
  invoiceIncrementMode,
-  baseCurrency,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();

@@ -58,7 +61,7 @@ function InvoiceForm({
  const initialValues = useMemo(
    () => ({
      ...(!isEmpty(invoice)
-        ? { ...transformToEditForm(invoice), currency_code: baseCurrency }
+        ? { ...transformToEditForm(invoice), currency_code: base_currency }
        : {
            ...defaultInvoice,
            ...(invoiceIncrementMode && {
@@ -66,7 +69,7 @@ function InvoiceForm({
            }),
            entries: orderingLinesIndexes(defaultInvoice.entries),
            ...newInvoice,
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
    [invoice, newInvoice, invoiceNumber, invoiceIncrementMode],
@@ -171,10 +174,10 @@ function InvoiceForm({
 export default compose(
  withDashboardActions,
  withMediaActions,
-  withSettings(({ invoiceSettings, organizationSettings }) => ({
+  withSettings(({ invoiceSettings }) => ({
    invoiceNextNumber: invoiceSettings?.nextNumber,
    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
    invoiceIncrementMode: invoiceSettings?.incrementMode,
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(InvoiceForm);
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
@@ -9,7 +9,7 @@ import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
 import { getEntriesTotal } from 'containers/Entries/utils';
 import { PageFormBigNumber } from 'components';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { compose } from 'redux';

@@ -17,8 +17,8 @@ import { compose } from 'redux';
 * Invoice form header section.
 */
 function InvoiceFormHeader({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const { values } = useFormikContext();

@@ -34,13 +34,9 @@ function InvoiceFormHeader({
      <PageFormBigNumber
        label={intl.get('due_amount')}
        amount={totalDueAmount}
-        currencyCode={baseCurrency}
+        currencyCode={base_currency}
      />
    </div>
  );
 }
-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(InvoiceFormHeader);
+export default compose(withCurrentOrganization())(InvoiceFormHeader);
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -11,7 +11,6 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
-import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -29,9 +28,6 @@ function InvoicesDataTable({
  // #withInvoices
  invoicesTableState,

-  // #withSettings
-  baseCurrency,
-
  // #withAlertsActions
  openAlert,

@@ -90,6 +86,10 @@ function InvoicesDataTable({
    openDialog('invoice-pdf-preview', { invoiceId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+  };
  // Handles fetch data once the table state change.
  const handleDataTableFetchData = useCallback(
    ({ pageSize, pageIndex, sortBy }) => {
@@ -129,6 +129,7 @@ function InvoicesDataTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onDelete: handleDeleteInvoice,
          onDeliver: handleDeliverInvoice,
@@ -137,7 +138,6 @@ function InvoicesDataTable({
          onQuick: handleQuickPaymentReceive,
          onViewDetails: handleViewDetailInvoice,
          onPrint: handlePrintInvoice,
-          baseCurrency,
        }}
      />
    </DashboardContentTable>
@@ -151,7 +151,4 @@ export default compose(
  withDrawerActions,
  withDialogActions,
  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(InvoicesDataTable);
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -174,6 +174,7 @@ export function useInvoicesTableColumns() {
        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
        width: 110,
        className: 'invoice_date',
+        clickable: true,
      },
      {
        id: 'customer',
@@ -181,6 +182,7 @@ export function useInvoicesTableColumns() {
        accessor: 'customer.display_name',
        width: 180,
        className: 'customer_id',
+        clickable: true,
      },

      {
@@ -189,6 +191,7 @@ export function useInvoicesTableColumns() {
        accessor: 'invoice_no',
        width: 100,
        className: 'invoice_no',
+        clickable: true,
      },
      {
        id: 'balance',
@@ -198,6 +201,7 @@ export function useInvoicesTableColumns() {
        ),
        width: 120,
        className: 'balance',
+        clickable: true,
      },
      {
        id: 'status',
@@ -205,6 +209,7 @@ export function useInvoicesTableColumns() {
        accessor: (row) => statusAccessor(row),
        width: 160,
        className: 'status',
+        clickable: true,
      },
      {
        id: 'due_date',
@@ -212,6 +217,7 @@ export function useInvoicesTableColumns() {
        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
        width: 110,
        className: 'due_date',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -219,8 +225,9 @@ export function useInvoicesTableColumns() {
        accessor: 'reference_no',
        width: 90,
        className: 'reference_no',
+        clickable: true,
      },
    ],
    [],
  );
-}
+}
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -18,6 +18,8 @@ import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
 import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';

 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
 import {
  EditPaymentReceiveFormSchema,
  CreatePaymentReceiveFormSchema,
@@ -37,7 +39,9 @@ function PaymentReceiveForm({
  paymentReceiveNextNumber,
  paymentReceiveNumberPrefix,
  paymentReceiveAutoIncrement,
-  baseCurrency,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();

@@ -68,7 +72,7 @@ function PaymentReceiveForm({
              payment_receive_no: nextPaymentNumber,
              deposit_account_id: defaultTo(preferredDepositAccount, ''),
            }),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
    [
@@ -198,12 +202,12 @@ function PaymentReceiveForm({
 }

 export default compose(
-  withSettings(({ paymentReceiveSettings, organizationSettings }) => ({
+  withSettings(({ paymentReceiveSettings }) => ({
    paymentReceiveSettings,
    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(PaymentReceiveForm);
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
@@ -7,7 +7,7 @@ import { FormattedMessage as T } from 'components';

 import { CLASSES } from 'common/classes';
 import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -15,8 +15,8 @@ import { compose } from 'utils';
 * Payment receive form header.
 */
 function PaymentReceiveFormHeader({
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  // Formik form context.
  const { values } = useFormikContext();
@@ -38,7 +38,7 @@ function PaymentReceiveFormHeader({
              <T id={'amount_received'} />
            </span>
            <h1 class="big-amount__number">
-              <Money amount={paymentFullAmount} currency={baseCurrency} />
+              <Money amount={paymentFullAmount} currency={base_currency} />
            </h1>
          </div>
        </div>
@@ -47,8 +47,4 @@ function PaymentReceiveFormHeader({
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentReceiveFormHeader);
+export default compose(withCurrentOrganization())(PaymentReceiveFormHeader);
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -37,6 +37,7 @@ import { ACCOUNT_TYPE } from 'common/accountTypes';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import {
  useObservePaymentNoSettings,
@@ -51,7 +52,8 @@ import { toSafeInteger } from 'lodash';
 * Payment receive header fields.
 */
 function PaymentReceiveHeaderFields({
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },

  // #withDialogActions
  openDialog,
@@ -192,7 +194,7 @@ function PaymentReceiveHeaderFields({
            helperText={<ErrorMessage name="full_amount" />}
          >
            <ControlGroup>
-              <InputPrependText text={baseCurrency} />
+              <InputPrependText text={base_currency} />
              <MoneyInputGroup
                value={value}
                onChange={(value) => {
@@ -209,7 +211,7 @@ function PaymentReceiveHeaderFields({
              minimal={true}
            >
              <T id={'receive_full_amount'} /> (
-              <Money amount={totalDueAmount} currency={baseCurrency} />)
+              <Money amount={totalDueAmount} currency={base_currency} />)
            </Button>
          </FormGroup>
        )}
@@ -313,11 +315,11 @@ function PaymentReceiveHeaderFields({
 }

 export default compose(
-  withSettings(({ organizationSettings, paymentReceiveSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
+  withSettings(({ paymentReceiveSettings }) => ({
    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
  })),
  withDialogActions,
+  withCurrentOrganization(),
 )(PaymentReceiveHeaderFields);
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -12,7 +12,6 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import withSettings from 'containers/Settings/withSettings';
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';

@@ -67,6 +66,13 @@ function PaymentReceivesDataTable({
    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: cell.row.original.id,
+    });
+  };
+
  // Handle datatable fetch once the table's state changing.
  const handleDataTableFetchData = useCallback(
    ({ pageIndex, pageSize, sortBy }) => {
@@ -105,6 +111,7 @@ function PaymentReceivesDataTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onDelete: handleDeletePaymentReceive,
          onEdit: handleEditPaymentReceive,
@@ -123,7 +130,4 @@ export default compose(
  withPaymentReceives(({ paymentReceivesTableState }) => ({
    paymentReceivesTableState,
  })),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(PaymentReceivesDataTable);
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -89,6 +89,7 @@ export function usePaymentReceivesColumns() {
        accessor: PaymentDateAccessor,
        width: 140,
        className: 'payment_date',
+        clickable: true,
      },
      {
        id: 'customer',
@@ -96,6 +97,7 @@ export function usePaymentReceivesColumns() {
        accessor: 'customer.display_name',
        width: 160,
        className: 'customer_id',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -103,6 +105,7 @@ export function usePaymentReceivesColumns() {
        accessor: AmountAccessor,
        width: 120,
        className: 'amount',
+        clickable: true,
      },
      {
        id: 'payment_receive_no',
@@ -111,6 +114,7 @@ export function usePaymentReceivesColumns() {
          row.payment_receive_no ? `#${row.payment_receive_no}` : null,
        width: 140,
        className: 'payment_receive_no',
+        clickable: true,
      },
      {
        id: 'deposit_account',
@@ -118,6 +122,7 @@ export function usePaymentReceivesColumns() {
        accessor: 'deposit_account.name',
        width: 140,
        className: 'deposit_account_id',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -125,6 +130,7 @@ export function usePaymentReceivesColumns() {
        accessor: 'reference_no',
        width: 140,
        className: 'reference_no',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
@@ -23,6 +23,7 @@ import ReceiptFormDialogs from './ReceiptFormDialogs';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { AppToaster } from 'components';
 import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
@@ -37,7 +38,9 @@ function ReceiptForm({
  receiptNumberPrefix,
  receiptAutoIncrement,
  preferredDepositAccount,
-  baseCurrency,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const history = useHistory();

@@ -59,7 +62,7 @@ function ReceiptForm({
  const initialValues = useMemo(
    () => ({
      ...(!isEmpty(receipt)
-        ? { ...transformToEditForm(receipt), currency_code: baseCurrency }
+        ? { ...transformToEditForm(receipt), currency_code: base_currency }
        : {
            ...defaultReceipt,
            ...(receiptAutoIncrement && {
@@ -67,7 +70,7 @@ function ReceiptForm({
            }),
            deposit_account_id: parseInt(preferredDepositAccount),
            entries: orderingLinesIndexes(defaultReceipt.entries),
-            currency_code: baseCurrency,
+            currency_code: base_currency,
          }),
    }),
    [receipt, preferredDepositAccount, nextReceiptNumber, receiptAutoIncrement],
@@ -104,7 +107,7 @@ function ReceiptForm({
      ...omit(values, ['receipt_number_manually', 'receipt_number']),
      ...(values.receipt_number_manually && {
        receipt_number: values.receipt_number,
-        currency_code: baseCurrency,
+        currency_code: base_currency,
      }),
      closed: submitPayload.status,
      entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
@@ -178,11 +181,11 @@ function ReceiptForm({

 export default compose(
  withDashboardActions,
-  withSettings(({ receiptSettings, organizationSettings }) => ({
+  withSettings(({ receiptSettings }) => ({
    receiptNextNumber: receiptSettings?.nextNumber,
    receiptNumberPrefix: receiptSettings?.numberPrefix,
    receiptAutoIncrement: receiptSettings?.autoIncrement,
    preferredDepositAccount: receiptSettings?.preferredDepositAccount,
-    baseCurrency: organizationSettings?.baseCurrency,
  })),
+  withCurrentOrganization(),
 )(ReceiptForm);
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
@@ -7,7 +7,7 @@ import { CLASSES } from 'common/classes';
 import { PageFormBigNumber } from 'components';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { getEntriesTotal } from 'containers/Entries/utils';
 import { compose } from 'redux';
@@ -18,8 +18,8 @@ import { compose } from 'redux';
 function ReceiptFormHeader({
  // #ownProps
  onReceiptNumberChanged,
-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  const { values } = useFormikContext();

@@ -37,14 +37,10 @@ function ReceiptFormHeader({
      <PageFormBigNumber
        label={intl.get('due_amount')}
        amount={totalDueAmount}
-        currencyCode={baseCurrency}
+        currencyCode={base_currency}
      />
    </div>
  );
 }

-export default compose(
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ReceiptFormHeader);
+export default compose(withCurrentOrganization())(ReceiptFormHeader);
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -13,7 +13,6 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
-import withSettings from 'containers/Settings/withSettings';

 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
@@ -28,9 +27,6 @@ function ReceiptsDataTable({
  // #withReceipts
  receiptTableState,

-  // #withSettings
-  baseCurrency,
-
  // #withAlertsActions
  openAlert,

@@ -99,6 +95,10 @@ function ReceiptsDataTable({
  if (isEmptyStatus) {
    return <ReceiptsEmptyStatus />;
  }
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id });
+  };

  return (
    <DashboardContentTable>
@@ -122,6 +122,7 @@ function ReceiptsDataTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onEdit: handleEditReceipt,
          onDelete: handleDeleteReceipt,
@@ -129,7 +130,6 @@ function ReceiptsDataTable({
          onDrawer: handleDrawerReceipt,
          onViewDetails: handleViewDetailReceipt,
          onPrint: handlePrintInvoice,
-          baseCurrency,
        }}
      />
    </DashboardContentTable>
@@ -144,7 +144,4 @@ export default compose(
  withReceipts(({ receiptTableState }) => ({
    receiptTableState,
  })),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(ReceiptsDataTable);
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -106,6 +106,7 @@ export function useReceiptsTableColumns() {
        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
        width: 140,
        className: 'receipt_date',
+        clickable: true,
      },
      {
        id: 'customer',
@@ -113,6 +114,7 @@ export function useReceiptsTableColumns() {
        accessor: 'customer.display_name',
        width: 140,
        className: 'customer_id',
+        clickable: true,
      },
      {
        id: 'receipt_number',
@@ -120,6 +122,7 @@ export function useReceiptsTableColumns() {
        accessor: 'receipt_number',
        width: 140,
        className: 'receipt_number',
+        clickable: true,
      },
      {
        id: 'deposit_account',
@@ -127,6 +130,7 @@ export function useReceiptsTableColumns() {
        accessor: 'deposit_account.name',
        width: 140,
        className: 'deposit_account',
+        clickable: true,
      },
      {
        id: 'amount',
@@ -134,6 +138,7 @@ export function useReceiptsTableColumns() {
        accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
        width: 140,
        className: 'amount',
+        clickable: true,
      },
      {
        id: 'status',
@@ -141,6 +146,7 @@ export function useReceiptsTableColumns() {
        accessor: StatusAccessor,
        width: 140,
        className: 'status',
+        clickable: true,
      },
      {
        id: 'reference_no',
@@ -148,6 +154,7 @@ export function useReceiptsTableColumns() {
        accessor: 'reference_no',
        width: 140,
        className: 'reference_no',
+        clickable: true,
      },
    ],
    [],
--- a/client/src/containers/Subscriptions/BillingPlansForm.js
+++ b/client/src/containers/Subscriptions/BillingPlansForm.js
@@ -4,7 +4,7 @@ import 'style/pages/Subscription/BillingPlans.scss';

 import BillingPlansInput from './BillingPlansInput';
 import BillingPeriodsInput from './BillingPeriodsInput';
-import BillingPaymentMethod from './BillingPaymentMethod';
+// import BillingPaymentMethod from './BillingPaymentMethod';

 /**
 * Billing plans form.
@@ -14,7 +14,7 @@ export default function BillingPlansForm() {
    <div class="billing-plans">
      <BillingPlansInput />
      <BillingPeriodsInput />
-      <BillingPaymentMethod />
+      {/* <BillingPaymentMethod /> */}
    </div>
  );
 }
--- a/client/src/containers/Vendors/VendorForm/VendorForm.js
+++ b/client/src/containers/Vendors/VendorForm/VendorForm.js
@@ -20,7 +20,7 @@ import VendorTabs from './VendorsTabs';
 import VendorFloatingActions from './VendorFloatingActions';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';

 import { useVendorFormContext } from './VendorFormProvider';
 import { compose, transformToForm } from 'utils';
@@ -67,8 +67,8 @@ function VendorForm({
  // #withDashboardActions
  changePageTitle,

-  // #withSettings
-  baseCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  // Vendor form context.
  const {
@@ -93,11 +93,11 @@ function VendorForm({
  const initialValues = useMemo(
    () => ({
      ...defaultInitialValues,
-      currency_code: baseCurrency,
+      currency_code: base_currency,
      ...transformToForm(vendor, defaultInitialValues),
      ...transformToForm(contactDuplicate, defaultInitialValues),
    }),
-    [vendor, contactDuplicate, baseCurrency],
+    [vendor, contactDuplicate, base_currency],
  );

  // Handles the form submit.
@@ -169,7 +169,5 @@ function VendorForm({

 export default compose(
  withDashboardActions,
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
+  withCurrentOrganization(),
 )(VendorForm);
--- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -86,6 +86,11 @@ function VendorsTable({
    openDrawer('contact-detail-drawer', { contactId: id });
  };

+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('contact-detail-drawer', { contactId: cell.row.original.id });
+  };
+
  // Handle fetch data once the page index, size or sort by of the table change.
  const handleFetchData = React.useCallback(
    ({ pageSize, pageIndex, sortBy }) => {
@@ -125,6 +130,7 @@ function VendorsTable({
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
        payload={{
          onEdit: handleEditVendor,
          onDelete: handleDeleteVendor,
--- a/client/src/containers/Vendors/VendorsLanding/components.js
+++ b/client/src/containers/Vendors/VendorsLanding/components.js
@@ -117,6 +117,7 @@ export function useVendorsTableColumns() {
        width: 45,
        disableResizing: true,
        disableSortBy: true,
+        clickable: true,
      },
      {
        id: 'display_name',
@@ -124,6 +125,7 @@ export function useVendorsTableColumns() {
        accessor: 'display_name',
        className: 'display_name',
        width: 150,
+        clickable: true,
      },
      {
        id: 'company_name',
@@ -131,6 +133,7 @@ export function useVendorsTableColumns() {
        accessor: 'company_name',
        className: 'company_name',
        width: 150,
+        clickable: true,
      },
      {
        id: 'work_phone',
@@ -138,6 +141,7 @@ export function useVendorsTableColumns() {
        accessor: PhoneNumberAccessor,
        className: 'work_phone',
        width: 100,
+        clickable: true,
      },
      {
        id: 'balance',
@@ -145,6 +149,7 @@ export function useVendorsTableColumns() {
        accessor: BalanceAccessor,
        className: 'receivable_balance',
        width: 100,
+        clickable: true,
      },
    ],
    [],