diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
index 56118a26e..0b335dedc 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -28,7 +28,7 @@ export default function BalanceSheetTable({
// Retrieve default expanded rows of balance sheet.
const expandedRows = React.useMemo(
- () => defaultExpanderReducer(table?.rows || [], 3),
+ () => defaultExpanderReducer(table.rows, 3),
[table],
);
diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
index 122b921f9..be8143f0f 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
@@ -1,12 +1,14 @@
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
+import styled from 'styled-components';
import { DataTable, FinancialSheet } from 'components';
import { useCustomersTransactionsColumns } from './components';
import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
-import { defaultExpanderReducer } from 'utils';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
/**
* Customers transactions table.
@@ -18,7 +20,6 @@ export default function CustomersTransactionsTable({
// Customers transactions context.
const {
customersTransactions: { tableRows },
- isCustomersTransactionsLoading,
query,
} = useCustomersTransactionsContext();
@@ -30,30 +31,74 @@ export default function CustomersTransactionsTable({
[tableRows],
);
- const rowClassNames = (row) => {
- return [`row-type--${row.original.row_types}`];
- };
-
return (
-
);
}
+
+const CustomersTransactionsDataTable = styled(DataTable)`
+ .table {
+ .tbody {
+ .tr .td {
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ }
+ .tr:not(.no-results) .td {
+ border-left: 1px solid #ececec;
+ }
+ .tr:last-child .td {
+ border-bottom: 1px solid #e0e0e0;
+ }
+
+ .tr.row_type {
+ &--CUSTOMER {
+ .td {
+ &.customer_name {
+ font-weight: 500;
+ }
+ }
+ &:not(:first-child).is-expanded .td {
+ border-top: 1px solid #ddd;
+ }
+ }
+ &--OPENING_BALANCE,
+ &--CLOSING_BALANCE {
+ font-weight: 500;
+ }
+ &--CUSTOMER {
+ &.is-expanded {
+ .td.running_balance .cell-inner {
+ display: none;
+ }
+ }
+ &:not(:first-child).is-expanded .td {
+ border-top: 1px solid #ddd;
+ }
+ }
+ &--CUSTOMER:last-child {
+ .td {
+ border-bottom: 1px solid #ddd;
+ }
+ }
+ }
+ }
+ }
+`;
diff --git a/src/containers/FinancialStatements/CustomersTransactions/components.js b/src/containers/FinancialStatements/CustomersTransactions/components.js
index 938e7b019..9b7ec89ee 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/components.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/components.js
@@ -5,6 +5,8 @@ import { useCustomersTransactionsContext } from './CustomersTransactionsProvider
import FinancialLoadingBar from '../FinancialLoadingBar';
import { getForceWidth, getColumnWidth } from 'utils';
+import { Align } from 'common';
+
/**
* Retrieve customers transactions columns.
*/
@@ -29,7 +31,6 @@ export const useCustomersTransactionsColumns = () => {
);
},
className: 'customer_name',
- // textOverview: true,
},
{
Header: intl.get('account_name'),
@@ -59,6 +60,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 100,
magicSpacing: 10,
}),
+ align: Align.Right,
},
{
Header: intl.get('debit'),
@@ -69,6 +71,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 100,
magicSpacing: 10,
}),
+ align: Align.Right,
},
{
Header: intl.get('running_balance'),
@@ -79,6 +82,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 120,
magicSpacing: 10,
}),
+ align: Align.Right,
},
],
[tableRows],
diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
index 737861626..a05faffb0 100644
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
+import styled from 'styled-components';
import { DataTable, FinancialSheet } from 'components';
@@ -40,8 +41,9 @@ export default function VendorsTransactionsTable({
loading={isVendorsTransactionsLoading}
fromDate={query.from_date}
toDate={query.to_date}
+ fullWidth={true}
>
-
);
}
+
+const VendorsTransactionsDataTable = styled(DataTable)`
+ .table {
+ .tbody {
+ .tr .td {
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ }
+ .tr:not(.no-results) .td {
+ border-left: 1px solid #ececec;
+ }
+ .tr:last-child .td {
+ border-bottom: 1px solid #e0e0e0;
+ }
+
+ .tr.row_type {
+ &--VENDOR {
+ .td {
+ &.vendor_name {
+ font-weight: 500;
+ }
+ }
+ &:not(:first-child).is-expanded .td {
+ border-top: 1px solid #ddd;
+ }
+ }
+ &--OPENING_BALANCE,
+ &--CLOSING_BALANCE {
+ font-weight: 500;
+ }
+ &--VENDOR {
+ &.is-expanded {
+ .td.running_balance .cell-inner {
+ display: none;
+ }
+ }
+ &:not(:first-child).is-expanded .td {
+ border-top: 1px solid #ddd;
+ }
+ }
+ &--VENDOR:last-child {
+ .td {
+ border-bottom: 1px solid #ddd;
+ }
+ }
+ }
+ }
+ }
+`;
diff --git a/src/style/pages/FinancialStatements/ARAgingSummary.scss b/src/style/pages/FinancialStatements/ARAgingSummary.scss
deleted file mode 100644
index 2199f87b2..000000000
--- a/src/style/pages/FinancialStatements/ARAgingSummary.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-
-.financial-sheet{
- &--receivable-aging-summary{
-
- .financial-sheet__table{
-
- .bigcapital-datatable{
- .tbody,
- .thead{
- .tr .td.customer_name ~ .td,
- .tr .th.customer_name ~ .th{
- text-align: right;
- }
- }
- .tbody{
-
- }
- }
- }
- }
-}
-
-.financial-statement--AR-aging-summary{
-
- .financial-header-drawer{
- .bp3-drawer{
- max-height: 550px;
- }
- }
-}
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss
deleted file mode 100644
index 7b9bd32e0..000000000
--- a/src/style/pages/FinancialStatements/ContactsTransactions.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.financial-sheet {
-
- &--customer-transactions,
- &--vendor-transactions {
- width: 100%;
-
- .financial-sheet__table {
-
- .tbody,
- .thead {
-
- .tr .td,
- .tr .th {
-
- &.credit,
- &.debit,
- &.running_balance {
- text-align: right;
- }
- }
- }
-
- .tbody {
- .tr .td {
- padding-top: 0.2rem;
- padding-bottom: 0.2rem;
- border-top-color: transparent;
- border-bottom-color: transparent;
-
- &.customer_name,
- &.vendor_name {
- >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 #e0e0e0;
- }
-
- .tr.row-type {
-
- &--CUSTOMER,
- &--VENDOR {
- .td {
-
- &.customer_name,
- &.vendor_name {
- font-weight: 500;
- }
-
- &.name {
- // border-left-color: transparent;
- }
- }
-
- &:not(:first-child).is-expanded .td {
- border-top: 1px solid #ddd;
- }
- }
-
- &--OPENING_BALANCE,
- // &--TRANSACTION,
- &--CLOSING_BALANCE {
- font-weight: 500;
- }
-
- &--CUSTOMER,
- &--VENDOR {
- &.is-expanded {
- .td.running_balance .cell-inner {
- display: none;
- }
- }
-
- &:not(:first-child).is-expanded .td {
- border-top: 1px solid #ddd;
- }
- }
-
- &--CUSTOMER:last-child,
- &--VENDOR:last-child {
- .td {
- border-bottom: 1px solid #ddd;
- }
- }
- }
- }
- }
- }
-}
-
-.financial-statement--transactions {
- .financial-header-drawer {
- .bp3-drawer {
- max-height: 450px;
- }
- }
-}
\ No newline at end of file