feat(FinancialSheet): add skeleton view.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -1,8 +1,7 @@
-import React, { useCallback } from 'react';
-import { FormattedMessage as T } from 'components';
+import React from 'react';
 import intl from 'react-intl-universal';
-import { DataTable } from 'components';
-import FinancialSheet from 'components/FinancialSheet';
+
+import { DataTable, FinancialSheet } from 'components';
 
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { useAPAgingSummaryColumns } from './components';
@@ -14,8 +13,6 @@ export default function APAgingSummaryTable({
   //#ownProps
   organizationName,
 }) {
-  
-
   // AP aging summary report content.
   const {
     APAgingSummary: { tableRows },

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
-import DataTable from 'components/DataTable';
-import FinancialSheet from 'components/FinancialSheet';
+
+import { DataTable, FinancialSheet } from 'components';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { useARAgingSummaryColumns } from './components';

src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js

@@ -5,7 +5,7 @@ import { FinancialReportBody } from '../FinancialReportPage';
 
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
-
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
 import { compose } from 'utils';
 
 /**
@@ -21,7 +21,7 @@ function BalanceSheetBodyJSX({
   return (
     <FinancialReportBody>
       {isLoading ? (
-        'loading'
+        <FinancialSheetSkeleton />
       ) : (
         <BalanceSheetTable companyName={organizationName} />
       )}

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet } from 'components';
+
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 
 import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
@@ -36,8 +36,7 @@ export default function BalanceSheetTable({
       name="balance-sheet"
       companyName={companyName}
       sheetType={intl.get('balance_sheet')}
-      fromDate={query.from_date}
-      toDate={query.to_date}
+      asDate={query.to_date}
       basis={query.basis}
     >
       <BalanceSheetDataTable
@@ -49,6 +48,8 @@ export default function BalanceSheetTable({
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        headerLoading={true}
+        sticky={true}
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
@@ -60,8 +61,8 @@ const BalanceSheetDataTable = styled(DataTable)`
     .tbody .tr {
       .td {
         border-bottom: 0;
-        padding-top: 0.36rem;
-        padding-bottom: 0.36rem;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
       }
       &.is-expanded {
         .td:not(.name) .cell-inner {

src/containers/FinancialStatements/BalanceSheet/utils.js

@@ -3,13 +3,13 @@ import * as R from 'ramda';
 import { isEmpty } from 'lodash';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+
+import { Align } from 'common';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { getColumnWidth } from 'utils';
 
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
-const Align = { Left: 'left', Right: 'right', Center: 'center' };
-
 const getReportColWidth = (data, accessor, headerText) => {
   return getColumnWidth(
     data,

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import { DataTable } from 'components';
-import FinancialSheet from 'components/FinancialSheet';
+import { DataTable, FinancialSheet } from 'components';
+
 import { useCashFlowStatementColumns } from './components';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
 
@@ -15,8 +15,6 @@ export default function CashFlowStatementTable({
   // #ownProps
   companyName,
 }) {
-  
-
   const {
     cashFlowStatement: { tableRows },
     isCashFlowLoading,

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet } from 'components';
 
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet } from 'components';
+
 import { useCustomersTransactionsColumns } from './components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { defaultExpanderReducer } from 'utils';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
+import { FinancialSheet } from 'components';
 import DataTable from 'components/DataTable';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
@@ -37,7 +37,6 @@ export default function GeneralLedgerTable({ companyName }) {
       sheetType={intl.get('general_ledger_sheet')}
       fromDate={query.from_date}
       toDate={query.to_date}
-      name="general-ledger"
       loading={isLoading}
       fullWidth={true}
     >

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import { DataTable } from 'components';
+import { DataTable, FinancialSheet } from 'components';
 import { useInventoryItemDetailsColumns } from './components';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
 

src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import intl, { init } from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import { DataTable } from 'components';
+import { DataTable, FinancialSheet } from 'components';
 
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import { useInventoryValuationTableColumns } from './components';

src/containers/FinancialStatements/Journal/JournalTable.js

@@ -1,25 +1,24 @@
 import React, { useCallback, useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
-import { useJournalSheetContext } from './JournalProvider';
+import { DataTable, FinancialSheet } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
-import { defaultExpanderReducer } from 'utils';
+
 import { useJournalTableColumns } from './components';
+import { useJournalSheetContext } from './JournalProvider';
+
+import { defaultExpanderReducer } from 'utils';
 
 export default function JournalSheetTable({
   // #ownProps
   onFetchData,
   companyName,
 }) {
-  
-
   // Journal sheet context.
   const {
     journalSheet: { tableRows, query },
-    isLoading
+    isLoading,
   } = useJournalSheetContext();
 
   // Retreive the journal table columns.
@@ -42,8 +41,6 @@ export default function JournalSheetTable({
     };
   }, []);
 
-
-  
   return (
     <FinancialSheet
       companyName={companyName}
@@ -54,23 +51,24 @@ export default function JournalSheetTable({
       loading={isLoading}
       // minimal={true}
       fullWidth={true}
-      >
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
         rowClassNames={rowClassNames}
-        noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
+        noResults={intl.get(
+          'this_report_does_not_contain_any_data_between_date_period',
+        )}
         expanded={expandedRows}
         sticky={true}
         TableRowsRenderer={TableVirtualizedListRows}
         // #TableVirtualizedListRows props.
         vListrowHeight={28}
         vListOverscanRowCount={2}
-
         TableCellRenderer={TableFastCell}
         id={'journal'}
       />
     </FinancialSheet>
   );
-}
+}

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
 import { FinancialReportBody } from '../FinancialReportPage';
 
@@ -20,7 +21,7 @@ function ProfitLossBodyJSX({
   return (
     <FinancialReportBody>
       {isLoading ? (
-        'loading'
+        <FinancialSheetSkeleton />
       ) : (
         <ProfitLossSheetTable companyName={organizationName} />
       )}

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -2,13 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { TableStyle } from 'common';
-import { FormattedMessage as T } from 'components';
-
-import { useProfitLossSheetColumns } from './hooks';
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet, FormattedMessage as T } from 'components';
 
 import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils';
+import { useProfitLossSheetColumns } from './hooks';
 import { useProfitLossSheetContext } from './ProfitLossProvider';
 
 export default function ProfitLossSheetTable({
@@ -60,8 +57,8 @@ const ProfitLossDataTable = styled(DataTable)`
     .tbody .tr {
       .td {
         border-bottom: 0;
-        padding-top: 0.36rem;
-        padding-bottom: 0.36rem;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
       }
       &.is-expanded {
         .td:not(.name) .cell-inner {
@@ -74,8 +71,8 @@ const ProfitLossDataTable = styled(DataTable)`
           border-top: 1px solid #bbb;
         }
       }
-      &:last-of-type .td{
-        border-bottom: 1px solid #bbb;
+      &:last-of-type .td {
+        border-bottom: 3px double #000;
       }
     }
   }

src/containers/FinancialStatements/ProfitLossSheet/utils.js

@@ -1,9 +1,10 @@
 import * as R from 'ramda';
 import { isEmpty } from 'lodash';
+
+import { Align } from 'common';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { getColumnWidth } from 'utils';
 
-const Align = { Left: 'left', Right: 'right', Center: 'center' };
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
 const getReportColWidth = (data, accessor, labelText) => {

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import { DataTable } from 'components';
+import { DataTable, FinancialSheet } from 'components';
 
 import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
-
 import { usePurchasesByItemsTableColumns } from './components';
 
 /**

src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import { DataTable } from 'components';
+import { DataTable, FinancialSheet } from 'components';
+
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import { useSalesByItemsTableColumns } from './components';
 

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet } from 'components';
 
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
-
-
 import { useTrialBalanceTableColumns } from './components';
 
 /**

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import { DataTable } from 'components';
-import FinancialSheet from 'components/FinancialSheet';
+
+import { DataTable, FinancialSheet } from 'components';
 
 import { useVendorsBalanceColumns } from './components';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
+import { DataTable, FinancialSheet } from 'components';
+
 import { useVendorsTransactionsColumns } from './components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';