BiG-5: Complete, add switch small and medium table row size.

src/components/AvaterCell.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { firstLettersArgs } from 'utils';
+
+export default function AvatarCell({ row: { original }, size }) {
+  return (
+    <span className="avatar" data-size={size}>
+      {firstLettersArgs(original?.display_name)}
+    </span>
+  );
+}

src/components/index.js

@@ -58,6 +58,7 @@ import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
 import Card from './Card';
+import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
 
@@ -71,13 +72,13 @@ export * from './PdfPreview';
 export * from './Details';
 export * from './Drawer/DrawerInsider';
 export * from './Drawer/DrawerMainTabs';
-export * from './TotalLines/index'
+export * from './TotalLines/index';
 export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
 export * from './Drawer';
 export * from './Forms';
-export * from './MultiSelectTaggable'
+export * from './MultiSelectTaggable';
 export * from './Utils/FormatNumber';
 export * from './Utils/FormatDate';
 
@@ -150,4 +151,5 @@ export {
   MoneyFieldCell,
   ItemsMultiSelect,
   Card,
+  AvaterCell,
 };

src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -73,7 +73,7 @@ function ManualJournalActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('manual_journal', 'tableSize', size);
+    addSetting('manualJournals', 'tableSize', size);
   };
 
   return (

src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js

@@ -13,6 +13,7 @@ import withManualJournals from './withManualJournals';
 import withManualJournalsActions from './withManualJournalsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -38,6 +39,9 @@ function ManualJournalsDataTable({
 
   // #ownProps
   onSelectedRowsChange,
+
+  // #withSettings
+  manualJournalsTableSize,
 }) {
   // Manual journals context.
   const {
@@ -125,6 +129,7 @@ function ManualJournalsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={manualJournalsTableSize}
         payload={{
           onDelete: handleDeleteJournal,
           onPublish: handlePublishJournal,
@@ -143,4 +148,7 @@ export default compose(
   })),
   withAlertsActions,
   withDrawerActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    manualJournalsTableSize: manualJournalsSettings?.tableSize,
+  })),
 )(ManualJournalsDataTable);

src/containers/Accounting/JournalsLanding/utils.js

@@ -37,6 +37,7 @@ export const useManualJournalsColumns = () => {
         className: 'journal_number',
         width: 100,
         clickable: true,
+        textOverview: true,
       },
       {
         id: 'journal_type',
@@ -44,6 +45,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'journal_type',
         width: 110,
         clickable: true,
+        textOverview: true,
       },
       {
         id: 'status',

src/containers/Accounts/AccountsActionsBar.js

@@ -17,7 +17,7 @@ import {
   If,
   DashboardActionViewsList,
   DashboardFilterButton,
-  DashboardRowsHeightButton
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -28,7 +28,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
-
+import withSettings from '../Settings/withSettings';
+import withSettingsActions from '../Settings/withSettingsActions';
 import { compose } from 'utils';
 
 /**
@@ -51,6 +52,12 @@ function AccountsActionsBar({
 
   // #ownProps
   onFilterChanged,
+
+  // #withSettings
+  accountsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const { resourceViews, fields } = useAccountsChartContext();
 
@@ -94,6 +101,10 @@ function AccountsActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('accounts', 'tableSize', size);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -167,7 +178,10 @@ function AccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-        <DashboardRowsHeightButton />
+        <DashboardRowsHeightButton
+          initialValue={accountsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
         <NavbarDivider />
         <Switch
           labelElement={<T id={'inactive'} />}
@@ -189,10 +203,14 @@ function AccountsActionsBar({
 export default compose(
   withDialogActions,
   withAlertActions,
+  withSettingsActions,
   withAccounts(({ accountsSelectedRows, accountsTableState }) => ({
     accountsSelectedRows,
     accountsInactiveMode: accountsTableState.inactiveMode,
     accountsFilterConditions: accountsTableState.filterRoles,
   })),
+  withSettings(({ accountsSettings }) => ({
+    accountsTableSize: accountsSettings.tableSize,
+  })),
   withAccountsTableActions,
 )(AccountsActionsBar);

src/containers/Accounts/AccountsDataTable.js

@@ -10,6 +10,7 @@ import { TABLES } from 'common/tables';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import withSettings from '../Settings/withSettings';
 
 import { useAccountsChartContext } from './AccountsChartProvider';
 import { useMemorizedColumnsWidths } from '../../hooks';
@@ -30,6 +31,9 @@ function AccountsDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  accountsTableSize,
 }) {
   const { isAccountsLoading, isAccountsFetching, accounts } =
     useAccountsChartContext();
@@ -102,11 +106,12 @@ function AccountsDataTable({
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
       // #TableVirtualizedListRows props.
-      vListrowHeight={42}
+      vListrowHeight={accountsTableSize == 'small' ? 40 : 42}
       vListOverscanRowCount={0}
       onCellClick={handleCellClick}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
+      size={accountsTableSize}
       payload={{
         onEdit: handleEditAccount,
         onDelete: handleDeleteAccount,
@@ -123,4 +128,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ accountsSettings }) => ({
+    accountsTableSize: accountsSettings.tableSize,
+  })),
 )(AccountsDataTable);

src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js

@@ -31,7 +31,7 @@ function CustomerBulkDeleteAlert({
     closeAlert(name);
   };
 
-  console.log(customersIds, 'EE');
+
 
   // Handle confirm customers bulk delete.
   const handleConfirmBulkDelete = useCallback(() => {

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -86,10 +86,10 @@ function CustomerActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-  
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('customer', 'tableSize', size);
+    addSetting('custoemrs', 'tableSize', size);
   };
 
   return (
@@ -177,8 +177,8 @@ export default compose(
     accountsInactiveMode: customersTableState.inactiveMode,
     customersFilterConditions: customersTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
+  withSettings(({ customersSettings }) => ({
-  //   customersTableSize:
+    customersTableSize: customersSettings?.tableSize,
-  // })),
+  })),
   withAlertActions,
 )(CustomerActionsBar);

src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -14,6 +14,7 @@ import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -38,6 +39,9 @@ function CustomersTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  customersTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function CustomersTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={customersTableSize}
         payload={{
           onDelete: handleCustomerDelete,
           onEdit: handleCustomerEdit,
@@ -155,4 +160,7 @@ export default compose(
   withCustomersActions,
   withDrawerActions,
   withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withSettings(({ customersSettings }) => ({
+    customersTableSize: customersSettings?.tableSize,
+  })),
 )(CustomersTable);

src/containers/Customers/CustomersLanding/components.js

@@ -1,17 +1,12 @@
 import React, { useMemo } from 'react';
-import {
+import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Intent,
-} from '@blueprintjs/core';
 import clsx from 'classnames';
+
 import intl from 'react-intl-universal';
 
-import { CLASSES } from '../../../common/classes';
+import { Icon, Money, If, AvaterCell } from 'components';
-import { Icon, Money, If } from 'components';
+
-import {  } from 'utils';
+import { safeCallback } from 'utils';
-import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
  * Actions menu.
@@ -69,13 +64,6 @@ export function ActionsMenu({
   );
 }
 
-/**
- * Avatar cell.
- */
-export function AvatarCell(row) {
-  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
-}
-
 /**
  * Phone number accessor.
  */
@@ -99,7 +87,7 @@ export function useCustomersTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarCell,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,

src/containers/Expenses/ExpenseForm/utils.js

@@ -1,4 +1,5 @@
 import { AppToaster } from 'components';
+import { Intent } from '@blueprintjs/core';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
@@ -6,11 +7,13 @@ import {
   defaultFastFieldShouldUpdate,
   transformToForm,
   repeatValue,
-  ensureEntriesHasEmptyLine
+  ensureEntriesHasEmptyLine,
 } from 'utils';
 
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
+  ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:
+    'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
 };
 
 // Transform API errors in toasts messages.
@@ -24,6 +27,14 @@ export const transformErrors = (errors, { setErrors }) => {
       }),
     );
   }
+  if (hasError(ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED)) {
+    setErrors(
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+      }),
+    );
+  }
 };
 
 export const MIN_LINES_NUMBER = 4;

src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js

@@ -80,7 +80,7 @@ function ExpensesActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('expense', 'tableSize', size);
+    addSetting('expenses', 'tableSize', size);
   };
   return (
     <DashboardActionsBar>

src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js

@@ -16,6 +16,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withExpensesActions from './withExpensesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { ActionsMenu, useExpensesTableColumns } from './components';
 
@@ -31,6 +32,9 @@ function ExpensesDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withSettings
+  expensesTableSize,
 }) {
   // Expenses list context.
   const {
@@ -119,6 +123,7 @@ function ExpensesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={expensesTableSize}
         payload={{
           onPublish: handlePublishExpense,
           onDelete: handleDeleteExpense,
@@ -135,4 +140,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withExpensesActions,
+  withSettings(({ expenseSettings }) => ({
+    expensesTableSize: expenseSettings?.tableSize,
+  })),
 )(ExpensesDataTable);

src/containers/ItemsCategories/ItemsCategoryActionsBar.js

@@ -50,7 +50,7 @@ function ItemsCategoryActionsBar({
     });
   };
 
-  console.log(fields, categoriesFilterConditions, 'XXXX');
+
 
   return (
     <DashboardActionsBar>

src/containers/Purchases/Bills/BillForm/BillForm.js

@@ -62,6 +62,18 @@ function BillForm({
         bill_number: intl.get('bill_number_exists'),
       });
     }
+    if (
+      errors.some(
+        (e) => e.type === ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED,
+      )
+    ) {
+      setErrors(
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+        }),
+      );
+    }
   };
 
   // Handles form submit.

src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js

@@ -72,7 +72,7 @@ function BillActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('bill', 'tableSize', size);
+    addSetting('bills', 'tableSize', size);
   };
 
   return (
@@ -156,7 +156,7 @@ export default compose(
   withBills(({ billsTableState }) => ({
     billsConditionsRoles: billsTableState.filterRoles,
   })),
-  withSettings(({ billPaymentSettings }) => ({
+  withSettings(({ billsettings }) => ({
-    billsTableSize: billPaymentSettings?.tableSize, // fix to bill
+    billsTableSize: billsettings?.tableSize,
   })),
 )(BillActionsBar);

src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -15,6 +15,7 @@ import withBillActions from './withBillsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useBillsTableColumns, ActionsMenu } from './components';
 import { useBillsListContext } from './BillsListProvider';
@@ -40,6 +41,9 @@ function BillsDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  billsTableSize,
 }) {
   // Bills list context.
   const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
@@ -125,6 +129,7 @@ function BillsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={billsTableSize}
         payload={{
           onDelete: handleDeleteBill,
           onEdit: handleEditBill,
@@ -144,4 +149,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ billsettings }) => ({
+    billsTableSize: billsettings?.tableSize,
+  })),
 )(BillsDataTable);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -73,7 +73,7 @@ function PaymentMadeActionsBar({
   
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('payment_made', 'tableSize', size);
+    addSetting('billPayments', 'tableSize', size);
   };
 
   return (

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -16,6 +16,7 @@ import withCurrentOrganization from 'containers/Organization/withCurrentOrganiza
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
@@ -36,6 +37,9 @@ function PaymentMadesTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  paymentMadesTableSize,
 }) {
   // Payment mades table columns.
   const columns = usePaymentMadesTableColumns();
@@ -114,6 +118,7 @@ function PaymentMadesTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={paymentMadesTableSize}
         payload={{
           onEdit: handleEditPaymentMade,
           onDelete: handleDeletePaymentMade,
@@ -130,4 +135,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withCurrentOrganization(),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentMadesTableSize: billPaymentSettings?.tableSize,
+  })),
 )(PaymentMadesTable);

src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -73,7 +73,7 @@ function EstimateActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('estimate', 'tableSize', size);
+    addSetting('salesEstimates', 'tableSize', size);
   };
 
   return (

src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -10,6 +10,7 @@ import withEstimatesActions from './withEstimatesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -33,6 +34,9 @@ function EstimatesDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  estimatesTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function EstimatesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={estimatesTableSize}
         payload={{
           onApprove: handleApproveEstimate,
           onEdit: handleEditEstimate,
@@ -155,4 +160,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
 )(EstimatesDataTable);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -71,7 +71,7 @@ function InvoiceActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('invoice', 'tableSize', size);
+    addSetting('salesInvoices', 'tableSize', size);
   };
 
   return (

src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -16,6 +16,7 @@ import withInvoiceActions from './withInvoiceActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -40,6 +41,9 @@ function InvoicesDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  invoicesTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function InvoicesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={invoicesTableSize}
         payload={{
           onDelete: handleDeleteInvoice,
           onDeliver: handleDeliverInvoice,
@@ -155,4 +160,7 @@ export default compose(
   withDrawerActions,
   withDialogActions,
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
 )(InvoicesDataTable);

src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -55,6 +55,7 @@ export const statusAccessor = (row) => {
               })}
             </span>
             <ProgressBar
+          
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}

src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js

@@ -73,7 +73,7 @@ function PaymentReceiveActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('payment_receive', 'tableSize', size);
+    addSetting('paymentReceives', 'tableSize', size);
   };
 
   return (

src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -13,6 +13,7 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
@@ -33,6 +34,9 @@ function PaymentReceivesDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  paymentReceivesTableSize,
 }) {
   const history = useHistory();
 
@@ -115,6 +119,7 @@ function PaymentReceivesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={paymentReceivesTableSize}
         payload={{
           onDelete: handleDeletePaymentReceive,
           onEdit: handleEditPaymentReceive,
@@ -132,4 +137,7 @@ export default compose(
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
 )(PaymentReceivesDataTable);

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js

@@ -72,7 +72,7 @@ function ReceiptActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('receipt', 'tableSize', size);
+    addSetting('salesReceipts', 'tableSize', size);
   };
 
   return (

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js

@@ -14,6 +14,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
@@ -37,6 +38,9 @@ function ReceiptsDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  receiptsTableSize,
 }) {
   const history = useHistory();
 
@@ -125,6 +129,7 @@ function ReceiptsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={receiptsTableSize}
         payload={{
           onEdit: handleEditReceipt,
           onDelete: handleDeleteReceipt,
@@ -145,4 +150,7 @@ export default compose(
   withReceipts(({ receiptTableState }) => ({
     receiptTableState,
   })),
+  withSettings(({ receiptSettings }) => ({
+    receiptsTableSize: receiptSettings?.tableSize,
+  })),
 )(ReceiptsDataTable);

src/containers/Settings/withSettings.js

@@ -6,6 +6,7 @@ export default (mapState) => {
       organizationSettings: state.settings.data.organization,
       manualJournalsSettings: state.settings.data.manualJournals,
       billPaymentSettings: state.settings.data.billPayments,
+      billsettings: state.settings.data.bills,
       paymentReceiveSettings: state.settings.data.paymentReceives,
       estimatesSettings: state.settings.data.salesEstimates,
       receiptSettings: state.settings.data.salesReceipts,
@@ -13,6 +14,8 @@ export default (mapState) => {
       itemsSettings: state.settings.data.items,
       expenseSettings: state.settings.data.expenses,
       accountsSettings: state.settings.data.accounts,
+      customersSettings: state.settings.data.custoemrs,
+      vendorsSettings: state.settings.data.vendors,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -79,7 +79,7 @@ function VendorActionsBar({
   };
 
   const handleTableRowSizeChange = (size) => {
-    addSetting('vendor', 'tableSize', size);
+    addSetting('vendors', 'tableSize', size);
   };
   return (
     <DashboardActionsBar>
@@ -160,7 +160,7 @@ export default compose(
     vendorsInactiveMode: vendorsTableState.inactiveMode,
     vendorsFilterConditions: vendorsTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
+  withSettings(({ vendorsSettings }) => ({
-  //   vendorsTableSize:
+    vendorsTableSize: vendorsSettings?.tableSize,
-  // })),
+  })),
 )(VendorActionsBar);

src/containers/Vendors/VendorsLanding/VendorsTable.js

@@ -17,6 +17,7 @@ import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { ActionsMenu, useVendorsTableColumns } from './components';
 
@@ -40,6 +41,9 @@ function VendorsTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  vendorsTableSize,
 }) {
   // Vendors list context.
   const {
@@ -141,6 +145,7 @@ function VendorsTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={vendorsTableSize}
         payload={{
           onEdit: handleEditVendor,
           onDelete: handleDeleteVendor,
@@ -161,4 +166,7 @@ export default compose(
   withDrawerActions,
 
   withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+  withSettings(({ vendorsSettings }) => ({
+    vendorsTableSize: vendorsSettings?.tableSize,
+  })),
 )(VendorsTable);

src/containers/Vendors/VendorsLanding/components.js

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If } from 'components';
+import { Icon, Money, If, AvaterCell } from 'components';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -113,7 +113,7 @@ export function useVendorsTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarAccessor,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,

src/store/settings/settings.reducer.js

@@ -10,13 +10,39 @@ const initialState = {
     organization: {
       name: 'Bigcapital, LLC',
     },
-    manualJournals: {},
+    manualJournals: {
-    bills: {},
+      tableSize: 'medium',
-    billPayments: {},
+    },
-    salesEstimates: {},
+    bills: {
+      tableSize: 'medium',
+    },
+    billPayments: {
+      tableSize: 'medium',
+    },
+    paymentReceives: {
+      tableSize: 'medium',
+    },
+    salesEstimates: {
+      tableSize: 'medium',
+    },
     items: {
       tableSize: 'medium',
     },
+    salesInvoices: {
+      tableSize: 'medium',
+    },
+    salesReceipts: {
+      tableSize: 'medium',
+    },
+    expenses: {
+      tableSize: 'medium',
+    },
+    customers: {
+      tableSize: 'medium',
+    },
+    vendors: {
+      tableSize: 'medium',
+    },
   },
 };
 

src/style/pages/Accounts/List.scss

@@ -34,7 +34,7 @@
             border-radius: 8px;
           }
         }
-        .account-desc{
+        .account-desc {
           font-size: 11px;
           color: hsl(0, 0%, 50%);
           margin-top: 2px;
@@ -57,5 +57,15 @@
         }
       }
     }
+    .table-size--small {
+      .tbody .tr {
+        .normal {
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+    }
   }
 }

src/style/pages/Bills/List.scss

@@ -1,9 +1,6 @@
 .dashboard__insider--bills {
   .bigcapital-datatable {
     .tbody {
-      .tr {
-        min-height: 46px;
-      }
       .td.amount {
         .cell-inner {
           > span {

src/style/pages/Customers/List.scss

@@ -1,27 +1,33 @@
+.dashboard__insider--customers-list {
+  .bigcapital-datatable {
+    .tbody {
+      .tr .td {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
 
+      .avatar.td {
+        .avatar {
+          display: inline-block;
+          background: #adbcc9;
+          border-radius: 50%;
+          text-align: center;
+          font-weight: 400;
+          color: #fff;
 
-.dashboard__insider--customers-list{
+          &[data-size='medium'] {
-
+            height: 30px;
-  .bigcapital-datatable{
+            width: 30px;
-
+            line-height: 30px;
-    .tr .td{
+            font-size: 14px;
-      padding-top: 0.5rem;
+          }
-      padding-bottom: 0.5rem;
+          &[data-size='small'] {
-    }
+            height: 25px;
-
+            width: 25px;
-    .avatar.td{
+            line-height: 25px;
-
+            font-size: 12px;
-      .avatar{
+          }
-        height: 30px;
+        }
-        width: 30px;
-        display: inline-block;
-        background: #adbcc9;
-        border-radius: 50%;
-        line-height: 30px;
-        text-align: center;
-        font-weight: 400;
-        font-size: 14px;
-        color: #fff;
       }
     }
   }

src/style/pages/Expense/List.scss

@@ -5,10 +5,6 @@
   .bigcapital-datatable {
     .table {
       .tbody {
-
-        .tr{
-          min-height: 46px;
-        }
         .td.amount {
           span {
             font-weight: 600;
@@ -17,4 +13,4 @@
       }
     }
   }
-}
+}

src/style/pages/ManualJournal/List.scss

@@ -4,9 +4,9 @@
     }
 
     .tbody {
-      .tr .td{
+      // .tr .td{
-        padding: 0.8rem 0.5rem;
+      //   padding: 0.8rem 0.5rem;
-      }
+      // }
       .td.amount {
         .bp3-popover-target {
           border-bottom: 1px solid #e7e7e7;

src/style/pages/PaymentMade/List.scss

@@ -1,21 +1,13 @@
-
+.dashboard__insider--payment-mades-list {
-.dashboard__insider--payment-mades-list{
+  .bigcapital-datatable {
-
+    .tbody {
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
       .td.amount {
-
+        .cell-inner {
-        .cell-inner{
+          > span {
-          > span{
             font-weight: 600;
           }
         }
       }
     }
   }
-}
+}

src/style/pages/PaymentReceive/List.scss

@@ -1,21 +1,13 @@
-
+.dashboard__insider--payment-receives-list {
-.dashboard__insider--payment-receives-list{
+  .bigcapital-datatable {
-
+    .tbody {
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr .td{
-        min-height: 46px;
-      }
-
       .td.amount {
-
+        .cell-inner {
-        .cell-inner{
+          > span {
-          > span{
             font-weight: 600;
           }
         }
       }
     }
   }
-}
+}

src/style/pages/SaleEstimate/List.scss

@@ -1,26 +1,13 @@
-
+.dashboard__insider--sale_estimate {
-.dashboard__insider--sale_estimate{
+  .bigcapital-datatable {
-
+    .tbody {
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
-      .tr .td{
-        padding-top: 0.88rem;
-        padding-bottom: 0.88rem;
-      }
-
       .td.amount {
-
+        .cell-inner {
-        .cell-inner{
+          > span {
-          > span{
             font-weight: 600;
           }
         }
       }
     }
   }
-}
+}

src/style/pages/SaleInvoice/List.scss

@@ -1,43 +1,38 @@
-
+.dashboard__insider--sales-invoices-list {
-
+  .bigcapital-datatable {
-.dashboard__insider--sales-invoices-list{
+    .tbody {
-
+      .balance.td {
-  .bigcapital-datatable{
+        .cell-inner {
-    .tbody{
+          > span {
-      .balance.td{
-
-        .cell-inner{
-          > span{
             font-weight: 600;
           }
         }
       }
-      .status.td{
+      .status.td {
-
         .overdue-status,
-        .due-status{
+        .due-status {
           display: block;
           font-size: 13.5px;
           line-height: 1.4;
 
-          + .partial-paid{
+          + .partial-paid {
             margin-top: 2px;
           }
         }
-        .overdue-status{
+        .overdue-status {
           color: #ec5b0a;
         }
-        .due-status{
+        .due-status {
           color: #1652c8;
         }
-        .partial-paid{
+        .partial-paid {
           font-size: 12px;
           line-height: 1;
           display: block;
           margin-bottom: 6px;
           opacity: 0.7;
         }
-        .fully-paid-icon{
+        .fully-paid-icon {
           width: 18px;
           height: 18px;
           margin-right: 8px;
@@ -46,19 +41,26 @@
             fill: #2ba01d;
           }
         }
-        .fully-paid-text{
+        .fully-paid-text {
           font-size: 13.5px;
         }
-        .bp3-progress-bar{
+        .bp3-progress-bar {
           height: 4px;
           max-width: 180px;
-          
+
           &,
-          .bp3-progress-meter{
+          .bp3-progress-meter {
             border-radius: 0;
           }
         }
       }
     }
+    .table-size--small {
+      .status.td {
+        .bp3-progress-bar {
+          height: 3px;
+        }
+      }
+    }
   }
-}
+}

src/style/pages/SaleReceipt/List.scss

@@ -1,21 +1,13 @@
-
+.dashboard__insider--sales_receipts {
-.dashboard__insider--sales_receipts{
+  .bigcapital-datatable {
-
+    .tbody {
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
       .td.amount {
-
+        .cell-inner {
-        .cell-inner{
+          > span {
-          > span{
             font-weight: 600;
           }
         }
       }
     }
   }
-}
+}

src/style/pages/Vendors/List.scss

@@ -1,28 +1,34 @@
 .dashboard__insider--vendors-list {
-
+  .bigcapital-datatable {
-    .bigcapital-datatable {
+    tbody {
-
+      .tr .td {
-        tbody {
+        padding-top: 0.5rem;
-            .tr .td {
+        padding-bottom: 0.5rem;
-                padding-top: 0.5rem;
+      }
-                padding-bottom: 0.5rem;
-            }
-        }
-
-        .avatar.td {
-
-            .avatar {
-                height: 30px;
-                width: 30px;
-                display: inline-block;
-                background: #adbcc9;
-                border-radius: 50%;
-                line-height: 30px;
-                text-align: center;
-                font-weight: 400;
-                font-size: 14px;
-                color: #fff;
-            }
-        }
     }
-}
+
+    .avatar.td {
+      .avatar {
+        display: inline-block;
+        background: #adbcc9;
+        border-radius: 50%;
+        text-align: center;
+        font-weight: 400;
+        color: #fff;
+
+        &[data-size='medium'] {
+          height: 30px;
+          width: 30px;
+          line-height: 30px;
+          font-size: 14px;
+        }
+        &[data-size='small'] {
+          height: 25px;
+          width: 25px;
+          line-height: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}