fix financial statements.

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

@@ -157,6 +157,10 @@ function GeneralLedgerTable({
     () => defaultExpanderReducer(generalLedgerTableRows, 1),
     [generalLedgerTableRows]);
 
+  const rowClassNames = (row) => ([
+    `row-type--${row.original.rowType}`,
+  ]);
+
   return (
     <FinancialSheet
       companyName={companyName}
@@ -171,10 +175,13 @@ function GeneralLedgerTable({
         columns={columns}
         data={generalLedgerTableRows}
         onFetchData={handleFetchData}
+        rowClassNames={rowClassNames}
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={37}
-        fixedSizeHeight={1000} />
+        fixedSizeHeight={1000}
+        expandable={true}
+        expandToggleColumn={1} />
     </FinancialSheet>
   ); 
 }

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

@@ -16,7 +16,6 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournalActions from './withJournalActions';
 
 
-
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
@@ -40,7 +39,7 @@ function Journal({
   }, []);
 
   const fetchHook = useQuery(['journal', filter],
-    (key, query) => { requestFetchJournalSheet(query); },
+    (key, query) => requestFetchJournalSheet(query),
     { manual: true });
 
   // Handle financial statement filter change.

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

@@ -25,6 +25,8 @@ function JournalSheetTable({
   onFetchData,
   companyName,
 }) {
+  const { formatMessage } = useIntl();
+
   const rowTypeFilter = (rowType, value, types) => {
     return (types.indexOf(rowType) === -1) ? '' : value;
   };
@@ -32,7 +34,6 @@ function JournalSheetTable({
   const exceptRowTypes = (rowType, value, types) => {
     return (types.indexOf(rowType) !== -1) ? '' : value;    
   };
-const {formatMessage} =useIntl();
 
   const columns = useMemo(() => [
     {
@@ -100,9 +101,8 @@ const {formatMessage} =useIntl();
         columns={columns}
         data={journalSheetTableRows}
         onFetchData={handleFetchData}
-        noResults={"This report does not contain any data."}
-        expanded={expandedRows}
-        noInitialFetch={true} />
+        noResults={"This report does not contain any data between date period."}
+        expanded={expandedRows} />
     </FinancialSheet>
   );
 }

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

@@ -26,46 +26,7 @@ function ProfitLossSheetTable({
 
   const {formatMessage} =useIntl();
 
-  const columns = useMemo(() => [
-    {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },  
+  const columns = useMemo(() => [ 
     {
       Header: formatMessage({id:'account_name'}),
       accessor: 'name',
@@ -116,11 +77,9 @@ function ProfitLossSheetTable({
     [profitLossTableRows]);
 
   // Retrieve conditional datatable row classnames.
-  const rowClassNames = useCallback((row) => {
-    return {
-      [`row--${row.rowType}`]: row.rowType,
-    };
-  }, []);
+  const rowClassNames = useCallback((row) => ({
+    [`row--${row.rowType}`]: row.rowType,
+  }), []);
 
   return (
     <FinancialSheet
@@ -138,7 +97,9 @@ function ProfitLossSheetTable({
         data={profitLossTableRows}
         onFetchData={handleFetchData}
         expanded={expandedRows}
-        rowClassNames={rowClassNames} />
+        rowClassNames={rowClassNames}
+        expandable={true}
+        expandToggleColumn={1} />
     </FinancialSheet>
   );
 }

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

@@ -31,65 +31,30 @@ function TrialBalanceSheetTable({
 
   const columns = useMemo(() => [
     {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',      
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) : (<span class="arrow-right" />)
-          }
-        </span>
-      ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ? (<span class="arrow-down" />) : (<span class="arrow-right" />) }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },
-    {
-      Header: formatMessage({id:'account_name'}),
+      Header: formatMessage({ id:'account_name' }),
       accessor: 'name',
       className: "name",
     },
     {
-      Header: formatMessage({id:'code'}), 
+      Header: formatMessage({ id:'code' }), 
       accessor: 'code',
       className: "code",
       width: 120,
     },
     {
-      Header: formatMessage({id:'credit'}),
+      Header: formatMessage({ id:'credit' }),
       accessor: r => (<Money amount={r.credit} currency="USD" />),
       className: 'credit',
       width: 120,
     },
     {
-      Header: formatMessage({id:'debit'}),
+      Header: formatMessage({ id:'debit' }),
       accessor: r => (<Money amount={r.debit} currency="USD" />),
       className: 'debit',
       width: 120,
     },
     {
-      Header: formatMessage({id:'balance'}),
+      Header: formatMessage({ id:'balance' }),
       accessor: r => (<Money amount={r.balance} currency="USD" />),
       className: 'balance',
       width: 120,
@@ -113,12 +78,13 @@ function TrialBalanceSheetTable({
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={trialBalanceAccounts}
-        onFetchData={handleFetchData} />
+        onFetchData={handleFetchData}
+        expandable={true}
+        expandToggleColumn={1} />
     </FinancialSheet>
   ); 
 }
 
-
 const mapStateToProps = (state, props) => {
   const { trialBalanceQuery } = props;
   return {

client/src/style/pages/financial-statements.scss

@@ -39,12 +39,12 @@
 }
 
 .financial-sheet{
-  border: 1px solid #E2E2E2;
+  border: 1px solid #EEE;
   min-width: 640px;
   width: auto;
   padding: 30px 20px;
   max-width: 100%;
-  margin: 25px auto 35px;
+  margin: 15px auto 35px;
   min-height: 400px;
   display: flex;
   flex-direction: column;
@@ -109,6 +109,27 @@
   &--trial-balance{
     min-width: 720px;
   }
+  &--general-ledger{
+    .table .tbody{
+     
+      .tr.row-type{
+
+        &--opening_balance,
+        &--closing_balance{
+          background-color: #fbfbfb;
+        }
+
+        &--closing_balance .td{
+          border-bottom-color: #666;
+        }
+
+        &--account_name .td.name{
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
   &--general-ledger,
   &--journal{
     width: auto;