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

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,

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,6 +69,7 @@ export const useManualJournalsColumns = () => {
         accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
         width: 125,
         className: 'created_at',
+        clickable: true,
       },
     ],
     [],

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

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>

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({
+function CustomerForm({ organization: { base_currency } }) {
-  // #withSettings
-  baseCurrency,
-}) {
   const {
     customer,
     customerId,
@@ -76,17 +73,16 @@ function CustomerForm({
   // const isNewMode = !customerId;
   const history = useHistory();
 
-
   /**
    * Initial values in create and edit mode.
    */
   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(
+export default compose(withCurrentOrganization())(CustomerForm);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(CustomerForm);

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,

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

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'}>
+          <h3 class={'big-number'}>{account.formatted_amount}</h3>
-            <Money amount={account.amount} currency={account.currency_code} />
-          </h3>
         </DetailItem>
 
         <DetailItem name={'account-type'} label={<T id={'account_type'} />}>

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 ? (
+  return !isBlank(value) && value !== 0
-    <Money amount={value} currency={account.currency_code} />
+    ? // <Money amount={value} currency={account.currency_code} />
-  ) : null;
+      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
   );
 }
 

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) => category.amount && category.expense_account_id,
-        category.amount && category.expense_account_id,
     );
 
     const form = {
       ...values,
       publish: submitPayload.publish,
-      categories: R.compose(
+      categories: R.compose(orderingLinesIndexes)(categories),
-        orderingLinesIndexes,
-      )(categories),
     };
     // Handle request success.
     const handleSuccess = (response) => {
@@ -158,11 +157,11 @@ function ExpenseForm({
 export default compose(
   withDashboardActions,
   withMediaActions,
-  withSettings(({ organizationSettings, expenseSettings }) => ({
+  withSettings(({ expenseSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
     preferredPaymentAccount: parseInt(
       expenseSettings?.preferredPaymentAccount,
       10,
     ),
   })),
+  withCurrentOrganization(),
 )(ExpenseForm);

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,

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

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,

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

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(
+export default compose(withCurrentOrganization())(ItemFormBody);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ItemFormBody);

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(
+export default compose(withCurrentOrganization())(ItemFormInventorySection);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ItemFormInventorySection);

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,

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(BillForm);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(BillForm);

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
+  // #withCurrentOrganization
-  baseCurrency,
+  organization: { base_currency },
 }) {
   const { values } = useFormikContext();
 
   // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(values.entries, 'amount'), [
+  const totalDueAmount = useMemo(
-    values.entries,
+    () => 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(
+export default compose(withCurrentOrganization())(BillFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(BillFormHeader);

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';
@@ -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);

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

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(PaymentMadeFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentMadeFormHeader);

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(
+export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentMadeFormHeaderFields);

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 }) => ({
+  withCurrentOrganization(),
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(PaymentMadesTable);

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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 }) => ({
+  withCurrentOrganization(),
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(EstimatesDataTable);

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(EstimateFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(EstimateFormHeader);

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

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

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(InvoiceFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(InvoiceFormHeader);

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

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,6 +225,7 @@ export function useInvoicesTableColumns() {
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(PaymentReceiveFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentReceiveFormHeader);

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 }) => ({
+  withSettings(({ paymentReceiveSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
   })),
   withDialogActions,
+  withCurrentOrganization(),
 )(PaymentReceiveHeaderFields);

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

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

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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(
+export default compose(withCurrentOrganization())(ReceiptFormHeader);
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ReceiptFormHeader);

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

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

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

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
+  // #withCurrentOrganization
-  baseCurrency,
+  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 }) => ({
+  withCurrentOrganization(),
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
 )(VendorForm);

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,

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