fix: financial reports.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js

@@ -15,6 +15,7 @@ import {
   CashFlowStatementAlerts,
 } from './components';
 
+import { getDefaultCashFlowSheetQuery } from './utils';
 import { compose } from 'utils';
 
 /**
@@ -26,13 +27,8 @@ function CashFlowStatement({
 }) {
   // filter
   const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'cash',
-    displayColumnsType: 'total',
-    filterByOption: 'with-transactions',
+    ...getDefaultCashFlowSheetQuery(),
   });
-
   // Handle refetch cash flow after filter change.
   const handleFilterSubmit = (filter) => {
     const _filter = {
@@ -42,7 +38,6 @@ function CashFlowStatement({
     };
     setFilter({ ..._filter });
   };
-
   // Handle format number submit.
   const handleNumberFormatSubmit = (values) => {
     setFilter({

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js

@@ -12,6 +12,7 @@ import CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
 import withCashFlowStatement from './withCashFlowStatement';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 
+import { getDefaultCashFlowSheetQuery } from './utils';
 import { compose, transformToForm } from 'utils';
 
 /**
@@ -29,10 +30,7 @@ function CashFlowStatementHeader({
   toggleCashFlowStatementFilterDrawer,
 }) {
   // Filter form default values.
-  const defaultValues = {
-    fromDate: moment().toDate(),
-    toDate: moment().toDate(),
-  };
+  const defaultValues = getDefaultCashFlowSheetQuery();
 
   // Initial form values.
   const initialValues = transformToForm({

src/containers/FinancialStatements/CashFlowStatement/utils.js

@@ -0,0 +1,14 @@
+import moment from 'moment';
+
+/**
+ * Retrieves the default cashflow sheet query.
+ */
+export const getDefaultCashFlowSheetQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'cash',
+    displayColumnsType: 'total',
+    filterByOption: 'with-transactions',
+  };
+};

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
+import * as R from 'ramda';
 
 import { FinancialStatement } from 'components';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -12,7 +13,7 @@ import { CustomersBalanceLoadingBar } from './components';
 import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 
-import { compose } from 'redux';
+import { getDefaultCustomersBalanceQuery } from './utils';
 
 /**
  * Customers Balance summary.
@@ -22,10 +23,8 @@ function CustomersBalanceSummary({
   toggleCustomerBalanceFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
-    asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
+    ...getDefaultCustomersBalanceQuery(),
   });
-
   // Handle re-fetch customers balance summary after filter change.
   const handleFilterSubmit = (filter) => {
     const _filter = {
@@ -34,7 +33,6 @@ function CustomersBalanceSummary({
     };
     setFilter({ ..._filter });
   };
-
   // Handle number format.
   const handleNumberFormat = (values) => {
     setFilter({
@@ -70,6 +68,6 @@ function CustomersBalanceSummary({
     </CustomersBalanceSummaryProvider>
   );
 }
-export default compose(withCustomersBalanceSummaryActions)(
+export default R.compose(withCustomersBalanceSummaryActions)(
   CustomersBalanceSummary,
 );

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -6,6 +6,8 @@ import { DataTable, FinancialSheet } from 'components';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+
 /**
  * customers balance summary table.
  */
@@ -14,29 +16,21 @@ export default function CustomersBalanceSummaryTable({
   companyName,
 }) {
   const {
-    isCustomersBalanceLoading,
     CustomerBalanceSummary: { table },
   } = useCustomersBalanceSummaryContext();
 
   const columns = useCustomersSummaryColumns();
 
-  const rowClassNames = (row) => {
-    return [`row-type--${row.original.row_types}`];
-  };
-
   return (
     <FinancialSheet
-      name={'customers-balance-summary'}
       companyName={companyName}
       sheetType={intl.get('customers_balance_summary')}
       asDate={new Date()}
-      loading={isCustomersBalanceLoading}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={table.data}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
       />
     </FinancialSheet>

src/containers/FinancialStatements/CustomersBalanceSummary/utils.js

@@ -0,0 +1,8 @@
+import moment from 'moment';
+
+export const getDefaultCustomersBalanceQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  };
+};

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -81,7 +81,7 @@ const InventoryItemDetailsDataTable = styled(DataTable)`
         border-bottom: 1px solid #ddd;
       }
 
-      .tr.row-type {
+      .tr.row_type {
         &--ITEM {
           .td {
             &.transaction_type {

src/containers/FinancialStatements/InventoryValuation/components.js

@@ -1,18 +1,18 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import { getColumnWidth } from 'utils';
+
 import { If } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { getColumnWidth } from 'utils';
+import { Align } from 'common';
+
 /**
  * Retrieve inventory valuation table columns.
  */
-
 export const useInventoryValuationTableColumns = () => {
-  
-
   // inventory valuation context
   const {
     inventoryValuation: { tableRows },
@@ -36,6 +36,7 @@ export const useInventoryValuationTableColumns = () => {
           minWidth: 120,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('asset_value'),
@@ -46,6 +47,7 @@ export const useInventoryValuationTableColumns = () => {
           minWidth: 120,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('average'),
@@ -56,6 +58,7 @@ export const useInventoryValuationTableColumns = () => {
           minWidth: 120,
         }),
         textOverview: true,
+        align: Align.Right,
       },
     ],
     [tableRows],

src/containers/FinancialStatements/Journal/components.js

@@ -2,15 +2,17 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { Button } from '@blueprintjs/core';
+
 import { Icon, If, FormattedMessage as T } from 'components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { Align } from 'common';
+
 /**
  * Retrieve the journal table columns.
  */
 export const useJournalTableColumns = () => {
-
   return React.useMemo(
     () => [
       {
@@ -57,12 +59,12 @@ export const useJournalTableColumns = () => {
       {
         Header: intl.get('credit'),
         accessor: 'formatted_credit',
-        className: 'credit',
+        align: Align.Right,
       },
       {
         Header: intl.get('debit'),
         accessor: 'formatted_debit',
-        className: 'debit',
+        align: Align.Right,
       },
     ],
     [],

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -54,9 +54,8 @@ const PurchasesByItemsDataTable = styled(DataTable)`
   .table {
     .tbody {
       .tr .td {
-        border-bottom: 0;
-        padding-top: 0.4rem;
-        padding-bottom: 0.4rem;
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
       }
       .tr.row_type--total .td {
         border-top: 1px solid #bbb;

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/ContactsBalanceSummary.scss';
-
 import { FinancialStatement } from 'components';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
@@ -11,10 +9,12 @@ import VendorsBalanceSummaryHeader from './VendorsBalanceSummaryHeader';
 
 import { VendorsBalanceSummaryProvider } from './VendorsBalanceSummaryProvider';
 import { VendorsSummarySheetLoadingBar } from './components';
+import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
+
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
+import { getDefaultVendorsBalanceQuery } from './utils';
 import { compose } from 'utils';
-import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 
 /**
  * Vendors Balance summary.
@@ -24,8 +24,7 @@ function VendorsBalanceSummary({
   toggleVendorSummaryFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
-    asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
+    ...getDefaultVendorsBalanceQuery(),
   });
 
   // Handle refetch vendors balance summary.

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
@@ -23,19 +24,42 @@ export default function VendorsBalanceSummaryTable({
   const columns = useVendorsBalanceColumns();
 
   return (
-    <FinancialSheet
+    <VendorBalanceFinancialSheet
       companyName={organizationName}
-      name={'vendors-balance-summary'}
       sheetType={intl.get('vendors_balance_summary')}
       asDate={new Date()}
     >
-      <DataTable
-        className={'bigcapital-datatable--financial-report'}
+      <VendorBalanceDataTable
         columns={columns}
-        data={table?.data}
+        data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
       />
-    </FinancialSheet>
+    </VendorBalanceFinancialSheet>
   );
 }
+
+const VendorBalanceFinancialSheet = styled(FinancialSheet)``;
+
+const VendorBalanceDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+
+        &.row-type--TOTAL {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/VendorsBalanceSummary/utils.js

@@ -0,0 +1,8 @@
+import moment from 'moment';
+
+export const getDefaultVendorsBalanceQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  };
+}