feat(FinancialSheet): add skeleton view.

src/common/index.js

@@ -1,4 +1,3 @@
-
-
-
 export * from './TableStyle';
+
+export const Align = { Left: 'left', Right: 'right', Center: 'center' };

src/components/Datatable/TableHeaderSkeleton.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -8,7 +9,13 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: 'th',
+        className: clsx(
+          'th',
+          {
+            [`align-${column.align}`]: column.align,
+          },
+          column.className,
+        ),
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/Datatable/TableSkeletonRows.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -11,7 +12,13 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: 'td',
+        className: clsx(
+          'td',
+          {
+            [`align-${column.align}`]: column.align,
+          },
+          column.className,
+        ),
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/FinancialReport/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const FinancialStatementRoot = styled.div``;
+const FinancialStatementBodyRoot = styled.div``;
+
+/**
+ * 
+ * @returns {React.JSX}
+ */
+export function FinancialReport({ children, className }) {
+  return <FinancialStatementRoot children={children} className={className} />;
+}
+
+/**
+ *
+ * @param {React.JSX}
+ */
+export function FinancialReportBody({ children, className }) {
+  return (
+    <FinancialStatementBodyRoot children={children} className={className} />
+  );
+}

src/components/FinancialSheet.js

@@ -1,101 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import moment from 'moment';
-import classnames from 'classnames';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-
-import { If, LoadingIndicator, MODIFIER } from 'components';
-
-export default function FinancialSheet({
-  companyName,
-  sheetType,
-  fromDate,
-  toDate,
-  asDate,
-  children,
-  accountingBasis,
-  name,
-  loading,
-  className,
-  basis,
-  minimal = false,
-  fullWidth = false,
-  currentDate = true,
-}) {
-  
-  const format = 'DD MMMM YYYY';
-  const formattedFromDate = useMemo(() => moment(fromDate).format(format), [
-    fromDate,
-  ]);
-  const formattedToDate = useMemo(() => moment(toDate).format(format), [
-    toDate,
-  ]);
-  const formattedAsDate = useMemo(() => moment(asDate).format(format), [
-    asDate,
-  ]);
-
-  const nameModifer = name ? `financial-sheet--${name}` : '';
-  const methodsLabels = useMemo(
-    () => ({
-      cash: intl.get('cash'),
-      accrual: intl.get('accrual'),
-    }),
-    [],
-  );
-  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
-  const basisLabel = useMemo(() => getBasisLabel(basis), [
-    getBasisLabel,
-    basis,
-  ]);
-
-  return (
-    <div
-      className={classnames('financial-sheet', nameModifer, className, {
-        [MODIFIER.FINANCIAL_SHEET_MINIMAL]: minimal,
-        'is-full-width': fullWidth,
-      })}
-    >
-      {loading ? (
-        <LoadingIndicator loading={loading} spinnerSize={34} />
-      ) : (
-        <div className={classnames('financial-sheet__inner')}>
-          <If condition={!!companyName}>
-            <h1 class="financial-sheet__title">{companyName}</h1>
-          </If>
-
-          <If condition={!!sheetType}>
-            <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
-          </If>
-
-          <div class="financial-sheet__date">
-            <If condition={asDate}>
-              <T id={'as'} /> {formattedAsDate}
-            </If>
-
-            <If condition={fromDate && toDate}>
-              <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
-              {formattedToDate}
-            </If>
-          </div>
-
-          <div class="financial-sheet__table">{children}</div>
-          <div class="financial-sheet__accounting-basis">{accountingBasis}</div>
-
-          <div class="financial-sheet__footer">
-            <If condition={basisLabel}>
-              <span class="financial-sheet__basis">
-                <T id={'accounting_basis'} /> {basisLabel}
-              </span>
-            </If>
-
-            <If condition={currentDate}>
-              <span class="financial-sheet__current-date">
-                {moment().format('YYYY MMM DD  HH:MM')}
-              </span>
-            </If>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

src/components/FinancialSheet/FinancialSheet.js

@@ -0,0 +1,95 @@
+import React, { useMemo, useCallback } from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+import { If, FormattedMessage as T } from 'components';
+import {
+  FinancialSheetRoot,
+  FinancialSheetFooterCurrentTime,
+  FinancialSheetFooterBasis,
+  FinancialSheetFooter,
+  FinancialSheetAccountingBasis,
+  FinancialSheetTable,
+  FinancialSheetDate,
+  FinancialSheetType,
+  FinancialSheetTitle,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet.
+ * @returns {React.JSX}
+ */
+export function FinancialSheet({
+  companyName,
+  sheetType,
+  fromDate,
+  toDate,
+  asDate,
+  children,
+  accountingBasis,
+  basis,
+  minimal = false,
+  fullWidth = false,
+  currentDate = true,
+}) {
+  const format = 'DD MMMM YYYY';
+  const formattedFromDate = useMemo(
+    () => moment(fromDate).format(format),
+    [fromDate],
+  );
+  const formattedToDate = useMemo(
+    () => moment(toDate).format(format),
+    [toDate],
+  );
+  const formattedAsDate = useMemo(
+    () => moment(asDate).format(format),
+    [asDate],
+  );
+  const methodsLabels = useMemo(
+    () => ({
+      cash: intl.get('cash'),
+      accrual: intl.get('accrual'),
+    }),
+    [],
+  );
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(
+    () => getBasisLabel(basis),
+    [getBasisLabel, basis],
+  );
+
+  return (
+    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
+      {companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
+      {sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
+
+      <FinancialSheetDate>
+        <If condition={asDate}>
+          <T id={'as'} /> {formattedAsDate}
+        </If>
+        <If condition={fromDate && toDate}>
+          <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+          {formattedToDate}
+        </If>
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>{children}</FinancialSheetTable>
+      <FinancialSheetAccountingBasis>
+        {accountingBasis}
+      </FinancialSheetAccountingBasis>
+
+      <FinancialSheetFooter>
+        {basisLabel && (
+          <FinancialSheetFooterBasis>
+            <T id={'accounting_basis'} /> {basisLabel}
+          </FinancialSheetFooterBasis>
+        )}
+        {currentDate && (
+          <FinancialSheetFooterCurrentTime>
+            {moment().format('YYYY MMM DD  HH:MM')}
+          </FinancialSheetFooterCurrentTime>
+        )}
+      </FinancialSheetFooter>
+    </FinancialSheetRoot>
+  );
+}

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Align } from 'common';
+import { SkeletonText, DataTable } from 'components';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { TableStyle } from 'common';
+import {
+  FinancialSheetRoot,
+  FinancialSheetTitle,
+  FinancialSheetType,
+  FinancialSheetDate,
+  FinancialSheetTable,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet paper skeleton.
+ * @returns {React.JSX}
+ */
+export function FinancialSheetSkeleton({
+  minimal,
+  fullWidth,
+  titleCharsLength,
+  typeCharsLength,
+  dateCharsLength,
+  skeletonTableColumns,
+}) {
+  return (
+    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
+      <FinancialSheetTitle>
+        <SkeletonText charsLength={titleCharsLength} />
+      </FinancialSheetTitle>
+
+      <FinancialSheetType>
+        <SkeletonText charsLength={typeCharsLength} />
+      </FinancialSheetType>
+
+      <FinancialSheetDate>
+        <SkeletonText charsLength={dateCharsLength} />
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>
+        <FinancialSkeletonTable
+          columns={skeletonTableColumns}
+          data={[]}
+          noInitialFetch={true}
+          expandable={true}
+          styleName={TableStyle.Constrant}
+          TableLoadingRenderer={TableSkeletonRows}
+          TableHeaderSkeletonRenderer={TableSkeletonHeader}
+          headerLoading={true}
+          loading={true}
+        />
+      </FinancialSheetTable>
+    </FinancialSheetRoot>
+  );
+}
+
+FinancialSheetSkeleton.defaultProps = {
+  titleCharsLength: 20,
+  typeCharsLength: 40,
+  dateCharsLength: 20,
+  skeletonTableColumns: [
+    {
+      id: 'skeleton-1',
+      className: 'skeleton-1',
+    },
+    {
+      id: 'skeleton-2',
+      className: 'skeleton-2',
+      align: Align.Right,
+    },
+  ],
+};
+
+const FinancialSkeletonTable = styled(DataTable)`
+  .table .th .skeleton,
+  .table .td .skeleton {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+`;

src/components/FinancialSheet/StyledFinancialSheet.js

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+export const FinancialSheetRoot = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  min-width: 640px;
+  width: auto;
+  padding: 30px 18px;
+  max-width: 100%;
+  margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  ${(props) =>
+    props.fullWidth &&
+    `
+    width: 100%;
+    margin-top: 25px;`}
+
+  ${(props) =>
+    props.minimal &&
+    `
+    border: 0;
+    padding: 0;
+    margin-top: 20px;
+
+  ${FinancialSheetTitle} {
+    font-size: 18px;
+    color: #333;
+  }
+  ${FinancialSheetTitle} + ${FinancialSheetDate} {
+    margin-top: 8px;
+  }
+  ${FinancialSheetDate} {
+    margin-top: 20px;
+  }  
+`}
+`;
+
+export const FinancialSheetTitle = styled.h1`
+  margin: 0;
+  font-weight: 400;
+  font-size: 20px;
+  color: #464646;
+  text-align: center;
+`;
+
+export const FinancialSheetType = styled.h6`
+  text-align: center;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetDate = styled.div`
+  text-align: center;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetFooter = styled.div`
+  color: #888;
+  text-align: center;
+  margin-top: auto;
+  padding-top: 18px;
+  font-size: 13px;
+
+  > span + span {
+    padding-left: 10px;
+  }
+`;
+export const FinancialSheetTable = styled.div`
+  margin-top: 24px;
+`;
+export const FinancialSheetFooterBasis = styled.span``;
+export const FinancialSheetFooterCurrentTime = styled.span``;
+
+export const FinancialSheetAccountingBasis = styled.div``;

src/components/FinancialSheet/index.js

@@ -0,0 +1,2 @@
+export * from './FinancialSheet';
+export * from './FinancialSheetSkeleton';

src/components/FinancialStatement.js

@@ -1,15 +1,24 @@
 import React from 'react';
-import className from 'classnames';
+import styled from 'styled-components';
-import 'style/containers/FinancialStatements/FinancialSheet.scss';
 
-export default function FinancialStatements({ name, children }) {
+const FinancialStatementRoot = styled.div``;
+const FinancialStatementBodyRoot = styled.div``;
+
+/**
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export function FinancialStatement({ children, className }) {
+  return <FinancialStatementRoot children={children} className={className} />;
+}
+
+/**
+ *
+ * @param {React.JSX}
+ */
+export function FinancialStatementBody({ children, className }) {
   return (
-    <div
+    <FinancialStatementBodyRoot children={children} className={className} />
-      className={className('financial-statement', {
-        [`financial-statement--${name}`]: name,
-      })}
-    >
-      {children}
-    </div>
   );
 }

src/components/Skeleton.js

@@ -6,14 +6,36 @@ import { randomNumber } from 'utils';
 /**
  * Skeleton component.
  */
-export default function Skeleton({
+export function Skeleton({
   Tag = 'span',
   minWidth = 40,
   maxWidth = 100,
+  children,
 }) {
-  const randomWidth = useMemo(() => randomNumber(minWidth, maxWidth), [
+  const randomWidth = useMemo(
-    minWidth,
+    () => randomNumber(minWidth, maxWidth),
-    maxWidth,
+    [minWidth, maxWidth],
-  ]);
+  );
-  return <Tag className={'skeleton'} style={{ width: `${randomWidth}%` }} />;
+  return (
+    <Tag
+      className={'skeleton'}
+      style={{ width: `${randomWidth}%` }}
+      children={children}
+    />
+  );
+}
+
+export function SkeletonText({
+  Tag = 'span',
+  charsLength,
+  minChars = 40,
+  maxChars = 100,
+}) {
+  const computedCharLength = useMemo(
+    () => (charsLength ? charsLength : randomNumber(minChars, maxChars)),
+    [charsLength, minChars, maxChars],
+  );
+  const randamText = 'X'.repeat(computedCharLength);
+
+  return <Tag className={'skeleton'}>{randamText}</Tag>;
 }

src/components/index.js

@@ -5,9 +5,6 @@ import Choose from './Utils/Choose';
 import For from './Utils/For';
 import { FormattedMessage, FormattedHTMLMessage } from './FormattedMessage';
 import ListSelect from './ListSelect';
-import FinancialStatement from './FinancialStatement';
-// import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
-// import DynamicFilterCompatatorField from './DynamicFilter/DynamicFilterCompatatorField';
 import ErrorMessage from './ErrorMessage';
 import MODIFIER from './modifiers';
 import FieldHint from './FieldHint';
@@ -41,7 +38,6 @@ import InputPrependText from './Forms/InputPrependText';
 import PageFormBigNumber from './PageFormBigNumber';
 import AccountsMultiSelect from './AccountsMultiSelect';
 import ContactsMultiSelect from './ContactsMultiSelect';
-import Skeleton from './Skeleton';
 import ContextMenu from './ContextMenu';
 import TableFastCell from './Datatable/TableFastCell';
 import DashboardContentTable from './Dashboard/DashboardContentTable';
@@ -95,6 +91,10 @@ export * from './Card';
 export * from './Customers'
 export * from './Vendors'
 export * from './Table';
+export * from './Skeleton';
+export * from './FinancialStatement';
+export * from './FinancialReport';
+export * from './FinancialSheet';
 
 const Hint = FieldHint;
 
@@ -110,7 +110,6 @@ export {
   T,
   Money,
   ListSelect,
-  FinancialStatement,
   // DynamicFilterValueField,
   // DynamicFilterCompatatorField,
   MODIFIER,
@@ -148,7 +147,6 @@ export {
   DataTableEditable,
   ContactsMultiSelect,
   TableFastCell,
-  Skeleton,
   ContextMenu,
   DashboardContentTable,
   DashboardPageContent,

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -1,8 +1,7 @@
-import React, { useCallback } from 'react';
+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 { 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+
 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}
+      asDate={query.to_date}
-      toDate={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-top: 0.32rem;
-        padding-bottom: 0.36rem;
+        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 { DataTable, FinancialSheet } from 'components';
-import FinancialSheet from 'components/FinancialSheet';
+
 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
 
 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+
 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, FinancialSheet } from 'components';
-import { DataTable } 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, FinancialSheet } from 'components';
-import { DataTable } 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
-import { useJournalSheetContext } from './JournalProvider';
 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}
@@ -60,14 +57,15 @@ export default function JournalSheetTable({
         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'}
       />

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 { DataTable, FinancialSheet, FormattedMessage as T } from 'components';
-
-import { useProfitLossSheetColumns } from './hooks';
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
 
 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-top: 0.32rem;
-        padding-bottom: 0.36rem;
+        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{
+      &:last-of-type .td {
-        border-bottom: 1px solid #bbb;
+        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, FinancialSheet } from 'components';
-import { DataTable } 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, FinancialSheet } from 'components';
-import { DataTable } 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
 
 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, FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+
 import { useVendorsTransactionsColumns } from './components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 

src/style/components/DataTable/DataTable.scss

@@ -147,6 +147,19 @@
         width: 65%;
         margin: 10px 0;
       }
+
+      &.align-right {
+        .skeleton {
+          margin-left: auto;
+        }
+      }
+
+      &.align-center {
+        .skeleton {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
     }
 
     .th {
@@ -363,13 +376,14 @@
 .table-constrant,
 .table--constrant {
   .table {
-    .thead{
+    .thead {
-      .tr:first-of-type .th{
+      .tr:first-of-type .th {
         border-top: 1px solid #000000;
       }
     }
+
     .thead .th {
-      background: transparent;
+      background: #fff;
       color: #222222;
       border-bottom: 1px solid #000000;
       padding: 0.5rem;

src/style/containers/FinancialStatements/FinancialSheet.scss

@@ -1,118 +0,0 @@
-// Financial sheet.
-// -----------------------
-.financial-sheet {
-  border: 2px solid #f0f0f0;
-  border-radius: 10px;
-  min-width: 640px;
-  width: auto;
-  padding: 30px 18px;
-  max-width: 100%;
-  margin: 35px auto;
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-
-  &__title {
-    margin: 0;
-    font-weight: 400;
-    font-size: 20px;
-    color: #464646;
-    text-align: center;
-  }
-  &__sheet-type {
-    text-align: center;
-    margin: 0;
-    font-size: 16px;
-    font-weight: 400;
-    color: #666;
-    margin-top: 6px;
-  }
-  &__date {
-    text-align: center;
-    color: #666;
-    margin-top: 6px;
-  }
-  &__table {
-    margin-top: 24px;
-
-    .table {
-      .tbody,
-      .thead {
-        .tr .td,
-        .tr .th {
-          background: #fff;
-        }
-      }
-
-      .tr.no-results {
-        .td {
-          flex-direction: column;
-          padding: 20px;
-          color: #666;
-          align-items: center;
-        }
-      }
-    }
-  }
-  &__inner {
-    &.is-loading {
-      display: none;
-    }
-  }
-  &__footer {
-    color: #888;
-    text-align: center;
-    margin-top: auto;
-    padding-top: 18px;
-    font-size: 13px;
-
-
-    > span + span{
-      padding-left: 10px;
-    }
-  }
-  .dashboard__loading-indicator {
-    margin: auto;
-    padding: 0;
-  }
-  &--expended {
-    width: auto;
-  }
-
-  &--minimal {
-    border: 0;
-    padding: 0;
-    margin-top: 20px;
-
-    .financial-sheet {
-      &__title {
-        font-size: 18px;
-        color: #333;
-      }
-      &__title + .financial-sheet__date {
-        margin-top: 8px;
-      }
-      &__table {
-        margin-top: 20px;
-      }
-    }
-  }
-  &.is-full-width {
-    width: 100%;
-    margin-top: 25px;
-  }
-}
-
-.financial-statement {
-  &__header {
-  }
-
-  &__body {
-    padding-left: 15px;
-    padding-right: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}