diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
index ee2a9709c..d3cb35169 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -25,9 +25,6 @@ import { getDefaultGeneralLedgerQuery } from './common';
function GeneralLedger({
// #withGeneralLedgerActions
toggleGeneralLedgerFilterDrawer,
-
- // #withSettings
- organizationName,
}) {
const [filter, setFilter] = useState({
...getDefaultGeneralLedgerQuery(),
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
index dc6c4b413..4b6eed676 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -1,10 +1,10 @@
import React, { useMemo } from 'react';
-
-import { defaultExpanderReducer } from 'utils';
import intl from 'react-intl-universal';
+import styled from 'styled-components';
-import { FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+
+import { FinancialSheet, DataTable } from 'components';
import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
import TableFastCell from 'components/Datatable/TableFastCell';
@@ -27,11 +27,10 @@ export default function GeneralLedgerTable({ companyName }) {
const columns = useGeneralLedgerTableColumns();
// Default expanded rows of general ledger table.
- const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
- tableRows,
- ]);
-
- const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
+ const expandedRows = useMemo(
+ () => defaultExpanderReducer(tableRows, 1),
+ [tableRows],
+ );
return (
-
);
}
+
+const GeneralLedgerDataTable = styled(DataTable)`
+ .tbody {
+ .tr .td {
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ }
+ .tr.is-expanded {
+ .td:not(.date) .cell-inner {
+ opacity: 0;
+ }
+ }
+
+ .tr:not(.no-results) .td {
+ border-left: 1px solid #ececec;
+ }
+ .tr:last-child .td {
+ border-bottom: 1px solid #ececec;
+ }
+
+ .tr.row_type {
+ &--ACCOUNT_ROW {
+ .td {
+ &.date {
+ font-weight: 500;
+ }
+
+ &.name {
+ border-left-color: transparent;
+ }
+ }
+
+ &:not(:first-child).is-expanded .td {
+ border-top: 1px solid #ddd;
+ }
+ }
+
+ &--OPENING_BALANCE,
+ &--CLOSING_BALANCE {
+ .amount {
+ font-weight: 500;
+ }
+ }
+
+ &--CLOSING_BALANCE {
+ .name {
+ font-weight: 500;
+ }
+ }
+ }
+ }
+`;
diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js
index ee60301f0..45f4e6e88 100644
--- a/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -2,12 +2,14 @@ import React from 'react';
import intl from 'react-intl-universal';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
-import { FormattedMessage as T } from 'components';
+import { ForceWidth, FormattedMessage as T } from 'components';
-import { getForceWidth, getColumnWidth } from 'utils';
+import { getColumnWidth } from 'utils';
import { useGeneralLedgerContext } from './GeneralLedgerProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
+import { Align } from 'common';
+
/**
* Retrieve the general ledger table columns.
*/
@@ -23,19 +25,11 @@ export function useGeneralLedgerTableColumns() {
Header: intl.get('date'),
accessor: (row) => {
if (row.rowType === 'ACCOUNT_ROW') {
- return (
-
- {row.date}
-
- );
+ return ;
}
return row.date;
},
className: 'date',
- // textOverview: true,
width: 120,
},
{
@@ -73,6 +67,7 @@ export function useGeneralLedgerTableColumns() {
magicSpacing: 10,
}),
textOverview: true,
+ align: Align.Right,
},
{
Header: intl.get('debit'),
@@ -83,6 +78,7 @@ export function useGeneralLedgerTableColumns() {
magicSpacing: 10,
}),
textOverview: true,
+ align: Align.Right,
},
{
Header: intl.get('amount'),
@@ -93,6 +89,7 @@ export function useGeneralLedgerTableColumns() {
magicSpacing: 10,
}),
textOverview: true,
+ align: Align.Right,
},
{
Header: intl.get('running_balance'),
@@ -103,6 +100,7 @@ export function useGeneralLedgerTableColumns() {
magicSpacing: 10,
}),
textOverview: true,
+ align: Align.Right,
},
],
[tableRows],
diff --git a/src/containers/FinancialStatements/reducers.js b/src/containers/FinancialStatements/reducers.js
index 14a421a37..7196cb8dc 100644
--- a/src/containers/FinancialStatements/reducers.js
+++ b/src/containers/FinancialStatements/reducers.js
@@ -73,13 +73,13 @@ export const generalLedgerTableRowsReducer = (accounts) => {
return {
name: '',
code: account.code,
- rowType: 'ACCOUNT_ROW',
+ row_types: 'ACCOUNT_ROW',
date: account.name,
children: [
{
...account.opening_balance,
name: ,
- rowType: 'OPENING_BALANCE',
+ row_types: 'OPENING_BALANCE',
date: moment(account.opening_balance.date).format('DD MMM YYYY'),
},
...account.transactions.map((transaction) => ({
@@ -91,7 +91,7 @@ export const generalLedgerTableRowsReducer = (accounts) => {
{
...account.closing_balance,
name: ,
- rowType: 'CLOSING_BALANCE',
+ row_types: 'CLOSING_BALANCE',
date: moment(account.closing_balance.date).format('DD MMM YYYY'),
},
],
diff --git a/src/style/pages/FinancialStatements/GeneralLedger.scss b/src/style/pages/FinancialStatements/GeneralLedger.scss
deleted file mode 100644
index c5f499aa0..000000000
--- a/src/style/pages/FinancialStatements/GeneralLedger.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-.financial-sheet {
- &--general-ledger {
- .financial-sheet__table {
-
- .tbody,
- .thead {
-
- .tr .td,
- .tr .th {
-
- &.credit,
- &.debit,
- &.running_balance,
- &.amount {
- text-align: right;
- }
- }
- }
-
- .tbody {
- .tr .td {
- padding-top: 0.2rem;
- padding-bottom: 0.2rem;
- border-top-color: transparent;
- border-bottom-color: transparent;
-
- &.date {
- >div {
- display: flex;
- }
-
- span.force-width {
- position: relative;
- }
- }
- }
-
- .tr:not(.no-results) .td {
- border-left: 1px solid #ececec;
- }
-
- .tr:last-child .td {
- border-bottom: 1px solid #ececec;
- }
-
- .tr {
- &.is-expanded {
-
- .td.amount {
-
- .cell-inner {
- display: none
- }
- }
- }
- }
-
- .tr.row-type {
-
-
- &--ACCOUNT_ROW {
- .td {
- &.date {
- font-weight: 500;
- }
-
- &.name {
- border-left-color: transparent;
- }
- }
-
- &:not(:first-child).is-expanded .td {
- border-top: 1px solid #DDD;
- }
- }
-
- &--OPENING_BALANCE,
- &--CLOSING_BALANCE {
- .amount {
- font-weight: 500;
- }
- }
-
- &--CLOSING_BALANCE {
- .name {
- font-weight: 500;
- }
- }
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/TrialBalanceSheet.scss b/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
deleted file mode 100644
index 2eff7447d..000000000
--- a/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-
-.financial-sheet{
-
- &--trial-balance{
- min-width: 720px;
-
- .financial-sheet__table{
- .thead,
- .tbody{
- .tr .td:not(:first-child),
- .tr .th:not(:first-child) {
- text-align: right;
- }
- }
- .tbody{
- .tr .td{
- border-bottom: 0;
- padding-top: 0.4rem;
- padding-bottom: 0.4rem;
- }
- .balance.td{
- border-top-color: #000;
- }
- .tr.row_type--total .td{
- border-top: 1px solid #bbb;
- font-weight: 500;
- border-bottom: 3px double #000;
- }
- }
- }
- }
-}
\ No newline at end of file