refactor((CustomerTransaction).

refactor(VendorTransaction).
refactor(VendorBalanceSummary).
refactor(CustomerBalanceSummary)

src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalanceSummaryBody.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+
+/**
+ * Customer balance summary body. 
+ * @returns {JSX.Element}
+ */
+function CustomerBalanceSummaryBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isCustomersBalanceLoading } = useCustomersBalanceSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isCustomersBalanceLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CustomersBalanceSummaryTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CustomerBalanceSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CustomerBalanceSummaryBodyJSX);

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js

@@ -8,12 +8,11 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import CustomersBalanceSummaryActionsBar from './CustomersBalanceSummaryActionsBar';
 import CustomersBalanceSummaryHeader from './CustomersBalanceSummaryHeader';
-import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
 
+import { CustomerBalanceSummaryBody } from './CustomerBalanceSummaryBody';
 import { CustomersBalanceLoadingBar } from './components';
 import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 
 import { compose } from 'redux';
 
@@ -21,9 +20,6 @@ import { compose } from 'redux';
  * Customers Balance summary.
  */
 function CustomersBalanceSummary({
-  // #withPreferences
-  organizationName,
-
   // #withCustomersBalanceSummaryActions
   toggleCustomerBalanceFilterDrawer,
 }) {
@@ -66,23 +62,16 @@ function CustomersBalanceSummary({
 
       <DashboardPageContent>
         <FinancialStatement>
-          <div className="financial-statement--balance-summary ">
-            <CustomersBalanceSummaryHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-            <div className="financial-statement__body">
-              <CustomersBalanceSummaryTable companyName={organizationName} />
-            </div>
-          </div>
+          <CustomersBalanceSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <CustomerBalanceSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
     </CustomersBalanceSummaryProvider>
   );
 }
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withCustomersBalanceSummaryActions,
-)(CustomersBalanceSummary);
+export default compose(withCustomersBalanceSummaryActions)(
+  CustomersBalanceSummary,
+);

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js

@@ -6,11 +6,10 @@ import { FinancialStatement } from 'components';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import CustomersTransactionsHeader from './CustomersTransactionsHeader';
-import CustomersTransactionsTable from './CustomersTransactionsTable';
 import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar';
+import { CustomersTransactionsBody } from './CustomersTransactionsBody';
 
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { CustomersTransactionsLoadingBar } from './components';
 import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
 
@@ -20,9 +19,6 @@ import { compose } from 'utils';
  * Customers transactions.
  */
 function CustomersTransactions({
-  // #withPreferences
-  organizationName,
-
   //#withCustomersTransactionsActions
   toggleCustomersTransactionsFilterDrawer,
 }) {
@@ -66,24 +62,14 @@ function CustomersTransactions({
       <CustomersTransactionsLoadingBar />
       <DashboardPageContent>
         <FinancialStatement>
-          <div className={'financial-statement--transactions'}>
-            <CustomersTransactionsHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-
-            <div class="financial-statement__body">
-              <CustomersTransactionsTable companyName={organizationName} />
-            </div>
-          </div>
+          <CustomersTransactionsHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <CustomersTransactionsBody />
         </FinancialStatement>
       </DashboardPageContent>
     </CustomersTransactionsProvider>
   );
 }
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withCustomersTransactionsActions,
-)(CustomersTransactions);
+export default compose(withCustomersTransactionsActions)(CustomersTransactions);

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsBody.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import CustomersTransactionsTable from './CustomersTransactionsTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
+
+/**
+ * Customers transactions body. 
+ */
+function CustomersTransactionsBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isCustomersTransactionsLoading } = useCustomersTransactionsContext();
+
+  return (
+    <FinancialReportBody>
+      {isCustomersTransactionsLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CustomersTransactionsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CustomersTransactionsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CustomersTransactionsBodyJSX);

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js

@@ -8,23 +8,18 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import VendorsBalanceSummaryActionsBar from './VendorsBalanceSummaryActionsBar';
 import VendorsBalanceSummaryHeader from './VendorsBalanceSummaryHeader';
-import VendorsBalanceSummaryTable from './VendorsBalanceSummaryTable';
 
 import { VendorsBalanceSummaryProvider } from './VendorsBalanceSummaryProvider';
 import { VendorsSummarySheetLoadingBar } from './components';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
-
 import { compose } from 'utils';
+import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 
 /**
  * Vendors Balance summary.
  */
 function VendorsBalanceSummary({
-  // #withPreferences
-  organizationName,
-
   // #withVendorsBalanceSummaryActions
   toggleVendorSummaryFilterDrawer,
 }) {
@@ -67,24 +62,15 @@ function VendorsBalanceSummary({
 
       <DashboardPageContent>
         <FinancialStatement>
-          <div className="financial-statement--balance-summary ">
-            <VendorsBalanceSummaryHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-            <div className={'financial-statement__body'}>
-              <VendorsBalanceSummaryTable organizationName={organizationName} />
-            </div>
-          </div>
+          <VendorsBalanceSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <VendorBalanceSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
     </VendorsBalanceSummaryProvider>
   );
 }
 
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withVendorsBalanceSummaryActions,
-)(VendorsBalanceSummary);
+export default compose(withVendorsBalanceSummaryActions)(VendorsBalanceSummary);

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryBody.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
+import VendorsBalanceSummaryTable from './VendorsBalanceSummaryTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+
+/**
+ * Vendor balance summary body.
+ * @returns {JSX.Element}
+ */
+function VendorsBalanceSummaryBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isVendorsBalanceLoading } = useVendorsBalanceSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isVendorsBalanceLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <VendorsBalanceSummaryTable organizationName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const VendorBalanceSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(VendorsBalanceSummaryBodyJSX);

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -6,6 +6,8 @@ import { DataTable, FinancialSheet } from 'components';
 import { useVendorsBalanceColumns } from './components';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
+import { tableRowTypesToClassnames } from 'utils';
+
 /**
  * Vendors balance summary table.
  */
@@ -15,29 +17,23 @@ export default function VendorsBalanceSummaryTable({
 }) {
   const {
     VendorBalanceSummary: { table },
-    isVendorsBalanceLoading,
   } = useVendorsBalanceSummaryContext();
 
   // vendors balance summary columns.
   const columns = useVendorsBalanceColumns();
 
-  const rowClassNames = (row) => {
-    return [`row-type--${row.original.row_types}`];
-  };
-
   return (
     <FinancialSheet
       companyName={organizationName}
       name={'vendors-balance-summary'}
       sheetType={intl.get('vendors_balance_summary')}
       asDate={new Date()}
-      loading={isVendorsBalanceLoading}
     >
       <DataTable
         className={'bigcapital-datatable--financial-report'}
         columns={columns}
         data={table?.data}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
       />
     </FinancialSheet>

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js

@@ -7,10 +7,9 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import VendorsTransactionsHeader from './VendorsTransactionsHeader';
 import VendorsTransactionsActionsBar from './VendorsTransactionsActionsBar';
-import VendorsTransactionsTable from './VendorsTransactionsTable';
+import { VendorsTransactionsBody } from './VendorsTransactionsBody';
 
 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 
 import { VendorsTransactionsProvider } from './VendorsTransactionsProvider';
 import { VendorsTransactionsLoadingBar } from './components';
@@ -21,9 +20,6 @@ import { compose } from 'utils';
  * Vendors transactions.
  */
 function VendorsTransactions({
-  // #withPreferences
-  organizationName,
-
   //#withVendorsTransactionsActions
   toggleVendorsTransactionsFilterDrawer,
 }) {
@@ -67,23 +63,14 @@ function VendorsTransactions({
       <VendorsTransactionsLoadingBar />
       <DashboardPageContent>
         <FinancialStatement>
-          <div className={'financial-statement--transactions'}>
-            <VendorsTransactionsHeader
-              pageFilter={filter}
-              onSubmitFilter={handleFilterSubmit}
-            />
-            <div class="financial-statement__body">
-              <VendorsTransactionsTable companyName={organizationName} />
-            </div>
-          </div>
+          <VendorsTransactionsHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <VendorsTransactionsBody />
         </FinancialStatement>
       </DashboardPageContent>
     </VendorsTransactionsProvider>
   );
 }
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withVendorsTransactionsActions,
-)(VendorsTransactions);
+export default compose(withVendorsTransactionsActions)(VendorsTransactions);

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsBody.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import VendorsTransactionsTable from './VendorsTransactionsTable';
+
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
+
+/**
+ * Vendors transactions body.
+ * @returns {JSX.Element}
+ */
+function VendorsTransactionsBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isVendorsTransactionsLoading } = useVendorsTransactionsContext();
+
+  return (
+    <FinancialReportBody>
+      {isVendorsTransactionsLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <VendorsTransactionsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const VendorsTransactionsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(VendorsTransactionsBodyJSX);

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -6,7 +6,8 @@ import { DataTable, FinancialSheet } from 'components';
 import { useVendorsTransactionsColumns } from './components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
-import { defaultExpanderReducer } from 'utils';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
 
 /**
  * Vendors transactions table.
@@ -31,10 +32,6 @@ export default function VendorsTransactionsTable({
     [tableRows],
   );
 
-  const rowClassNames = (row) => {
-    return [`row-type--${row.original.row_types}`];
-  };
-
   return (
     <FinancialSheet
       name="vendor-transactions"
@@ -45,15 +42,15 @@ export default function VendorsTransactionsTable({
       toDate={query.to_date}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );