- Data table sticky header.

- Mini sidebar toggle.
- Refactor withDashboard and withDashboardActions.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -13,7 +13,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 import { FinancialStatement } from 'components';
 
-import withDashboard from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
@@ -21,7 +21,7 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
 
 
 function BalanceSheet({
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   // #withBalanceSheetActions
@@ -100,7 +100,7 @@ function BalanceSheet({
 }
 
 export default compose(
-  withDashboard,
+  withDashboardActions,
   withBalanceSheetActions,
   withBalanceSheetDetail(({ balanceSheetLoading, balanceSheetFilter }) => ({
     balanceSheetLoading,

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -103,6 +103,7 @@ function BalanceSheetTable({
         onFetchData={handleFetchData}
         expanded={expandedRows}
         expandSubRows={true}
+        sticky={true}
       />
     </FinancialSheet>
   );

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -13,13 +13,13 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
-import withDashboard from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withSettings from 'containers/Settings/withSettings';
 
 
 function GeneralLedger({
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   // #withGeneralLedgerActions
@@ -94,7 +94,7 @@ function GeneralLedger({
 
 export default compose(
   withGeneralLedgerActions,
-  withDashboard,
+  withDashboardActions,
   withAccountsActions,
   withSettings,
 )(GeneralLedger);

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -154,6 +154,7 @@ function GeneralLedgerTable({
         fixedSizeHeight={1000}
         expandable={true}
         expandToggleColumn={1}
+        sticky={true}
       />
     </FinancialSheet>
   );

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -12,14 +12,14 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import SettingsConnect from 'connectors/Settings.connect';
 
-import withDashboard from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
 
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
 
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   // #withPreferences
@@ -93,7 +93,7 @@ function Journal({
 }
 
 export default compose(
-  withDashboard,
+  withDashboardActions,
   withJournalActions,
   SettingsConnect,
 )(Journal);

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -121,6 +121,7 @@ function JournalSheetTable({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}
         expanded={expandedRows}
+        sticky={true}
       />
     </FinancialSheet>
   );

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -10,14 +10,14 @@ import ProfitLossActionsBar from './ProfitLossActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
 
-import withDashboard from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withProfitLossActions from './withProfitLossActions';
 import withProfitLoss from './withProfitLoss';
 import SettingsConnect from 'connectors/Settings.connect';
 
 
 function ProfitLossSheet({
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   // #withProfitLossActions
@@ -85,7 +85,7 @@ function ProfitLossSheet({
 }
 
 export default compose(
-  withDashboard,
+  withDashboardActions,
   withProfitLossActions,
   withProfitLoss(({ profitLossSheetLoading }) => ({
     profitLossSheetLoading,

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -7,12 +7,9 @@ import DataTable from 'components/DataTable';
 import Money from 'components/Money';
 
 import { compose, defaultExpanderReducer } from 'utils';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 import withProfitLossDetail from './withProfitLoss';
 
-
 function ProfitLossSheetTable({
   // #withProfitLoss
   profitLossTableRows,
@@ -24,63 +21,79 @@ function ProfitLossSheetTable({
   onFetchData,
   companyName,
 }) {
+  const { formatMessage } = useIntl();
 
-  const {formatMessage} =useIntl();
-
-  const columns = useMemo(() => [ 
-    {
-      Header: formatMessage({id:'account_name'}),
-      accessor: 'name',
-      className: "name",
-    },
-    {
-      Header: formatMessage({id:'acc_code'}),
-      accessor: 'code',
-      className: "account_code",
-    },
-    ...(profitLossQuery.display_columns_type === 'total') ? [
+  const columns = useMemo(
+    () => [
       {
-        Header: formatMessage({id:'total'}),
-        Cell: ({ cell }) => {
-          const row = cell.row.original;
-          if (row.total) {
-            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
-          }
-          return '';          
-        },
-        className: "total",
-      }
-    ] : [],
-    ...(profitLossQuery.display_columns_type === 'date_periods') ? 
-      (profitLossColumns.map((column, index) => ({
-        id: `date_period_${index}`,
-        Header: column,
-        accessor: (row) => {
-          if (row.periods && row.periods[index]) {
-            const amount = row.periods[index].formatted_amount;
-            return (<Money amount={amount} currency={'USD'} />);
-          }
-          return '';
-        },
-        width: 100,
-      })))
-    : [],
-  ], [profitLossQuery.display_columns_type, profitLossColumns,formatMessage]);
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'acc_code' }),
+        accessor: 'code',
+        className: 'account_code',
+      },
+      ...(profitLossQuery.display_columns_type === 'total'
+        ? [
+            {
+              Header: formatMessage({ id: 'total' }),
+              Cell: ({ cell }) => {
+                const row = cell.row.original;
+                if (row.total) {
+                  return (
+                    <Money
+                      amount={row.total.formatted_amount}
+                      currency={'USD'}
+                    />
+                  );
+                }
+                return '';
+              },
+              className: 'total',
+            },
+          ]
+        : []),
+      ...(profitLossQuery.display_columns_type === 'date_periods'
+        ? profitLossColumns.map((column, index) => ({
+            id: `date_period_${index}`,
+            Header: column,
+            accessor: (row) => {
+              if (row.periods && row.periods[index]) {
+                const amount = row.periods[index].formatted_amount;
+                return <Money amount={amount} currency={'USD'} />;
+              }
+              return '';
+            },
+            width: 100,
+          }))
+        : []),
+    ],
+    [profitLossQuery.display_columns_type, profitLossColumns, formatMessage],
+  );
 
   // Handle data table fetch data.
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  }, [onFetchData]);
+  const handleFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
 
   // Retrieve default expanded rows of balance sheet.
-  const expandedRows = useMemo(() => 
-    defaultExpanderReducer(profitLossTableRows, 1),
-    [profitLossTableRows]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(profitLossTableRows, 1),
+    [profitLossTableRows],
+  );
 
   // Retrieve conditional datatable row classnames.
-  const rowClassNames = useCallback((row) => ({
-    [`row--${row.rowType}`]: row.rowType,
-  }), []);
+  const rowClassNames = useCallback(
+    (row) => ({
+      [`row--${row.rowType}`]: row.rowType,
+    }),
+    [],
+  );
 
   return (
     <FinancialSheet
@@ -90,8 +103,8 @@ function ProfitLossSheetTable({
       toDate={profitLossQuery.to_date}
       name="profit-loss-sheet"
       loading={loading}
-      basis={profitLossQuery.basis}>
-
+      basis={profitLossQuery.basis}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
@@ -100,7 +113,9 @@ function ProfitLossSheetTable({
         expanded={expandedRows}
         rowClassNames={rowClassNames}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+        sticky={true}
+      />
     </FinancialSheet>
   );
 }
@@ -116,9 +131,11 @@ const withProfitLossTable = connect(mapStateToProps);
 
 export default compose(
   withProfitLossTable,
-  withProfitLossDetail(({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
-    profitLossColumns,
-    profitLossQuery,
-    profitLossTableRows,
-  })),
-)(ProfitLossSheetTable);
+  withProfitLossDetail(
+    ({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
+      profitLossColumns,
+      profitLossQuery,
+      profitLossTableRows,
+    }),
+  ),
+)(ProfitLossSheetTable);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -11,14 +11,14 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { compose } from 'utils';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import withDashboard from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
 
 function TrialBalanceSheet({
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   // #withTrialBalanceActions
@@ -93,7 +93,7 @@ function TrialBalanceSheet({
 }
 
 export default compose(
-  withDashboard,
+  withDashboardActions,
   withTrialBalanceActions,
   withTrialBalance(({ trialBalanceSheetLoading }) => ({
     trialBalanceSheetLoading,

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -80,6 +80,7 @@ function TrialBalanceSheetTable({
         onFetchData={handleFetchData}
         expandable={true}
         expandToggleColumn={1}
+        sticky={true}
       />
     </FinancialSheet>
   );