From ecda9296b86ab28fa3d74bf5cf136cea53b1bb73 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sun, 2 Jan 2022 17:24:35 +0200 Subject: [PATCH] fix(FinancialReport): `BIG-205` Financial reports missing border final border bottom. --- .../CustomersTransactionsTable.js | 16 ++--- .../InventoryItemDetails/utils.js | 1 + .../VendorsTransactionsTable.js | 16 ++--- .../ContactsBalanceSummary.scss | 16 +++-- .../ContactsTransactions.scss | 23 ++++++- .../FinancialStatements/GeneralLedger.scss | 69 +++++++++++-------- .../InventoryItemDetails.scss | 23 +++++-- 7 files changed, 107 insertions(+), 57 deletions(-) diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index 295725768..3ff054d9e 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -1,13 +1,12 @@ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; import { useCustomersTransactionsColumns } from './components'; import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; -import { defaultExpanderReducer, getColumnWidth } from 'utils'; +import { defaultExpanderReducer } from 'utils'; /** * Customers transactions table. @@ -16,19 +15,20 @@ export default function CustomersTransactionsTable({ // #ownProps companyName, }) { - - + // Customers transactions context. const { customersTransactions: { tableRows }, isCustomersTransactionsLoading, query, } = useCustomersTransactionsContext(); + // Customers transactions table columns. const columns = useCustomersTransactionsColumns(); - const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [ - tableRows, - ]); + const expandedRows = useMemo( + () => defaultExpanderReducer(tableRows, 4), + [tableRows], + ); const rowClassNames = (row) => { return [`row-type--${row.original.row_types}`]; diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js index 35d2e29f1..cffc6058f 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js @@ -18,6 +18,7 @@ const columnsMapper = (data, index, column) => ({ magicSpacing: 10, }), disableSortBy: true, + textOverview: true, }); /** diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js index 637115d88..a12f2408b 100644 --- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js +++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -1,13 +1,12 @@ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; import { useVendorsTransactionsColumns } from './components'; import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; -import { defaultExpanderReducer, getColumnWidth } from 'utils'; +import { defaultExpanderReducer } from 'utils'; /** * Vendors transactions table. @@ -17,19 +16,20 @@ export default function VendorsTransactionsTable({ // #ownProps companyName, }) { - - + // Vendor transactions context. const { vendorsTransactions: { tableRows }, isVendorsTransactionsLoading, query, } = useVendorsTransactionsContext(); + // Retireve vendor transactions table columns. const columns = useVendorsTransactionsColumns(); - const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 5), [ - tableRows, - ]); + const expandedRows = useMemo( + () => defaultExpanderReducer(tableRows, 5), + [tableRows], + ); const rowClassNames = (row) => { return [`row-type--${row.original.row_types}`]; diff --git a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss index def379b49..df41bc845 100644 --- a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss +++ b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss @@ -1,25 +1,26 @@ .financial-sheet { + &--customers-balance-summary, &--vendors-balance-summary { .financial-sheet__table { + .thead, .tbody { - .tr .td.customer_name ~ .td, - .tr .th.customer_name ~ .th { + + .tr .td.customer_name~.td, + .tr .th.customer_name~.th { text-align: right; } } + .tbody { .tr:not(.no-results) { - &.row-type--CUSTOMER, - &.row-type--VENDOR { - border-top: 1px solid #BBB - } .td { border-bottom: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; } + &.row-type--TOTAL { font-weight: 500; @@ -33,6 +34,7 @@ } } } + .financial-statement--balance-summary { .financial-header-drawer { .bp3-drawer { @@ -40,4 +42,4 @@ max-height: 415px; } } -} +} \ No newline at end of file diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss index 7fb3ff80a..7b9bd32e0 100644 --- a/src/style/pages/FinancialStatements/ContactsTransactions.scss +++ b/src/style/pages/FinancialStatements/ContactsTransactions.scss @@ -1,13 +1,17 @@ .financial-sheet { + &--customer-transactions, &--vendor-transactions { width: 100%; .financial-sheet__table { + .tbody, .thead { + .tr .td, .tr .th { + &.credit, &.debit, &.running_balance { @@ -15,6 +19,7 @@ } } } + .tbody { .tr .td { padding-top: 0.2rem; @@ -24,39 +29,51 @@ &.customer_name, &.vendor_name { - > div { + >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 { @@ -64,10 +81,12 @@ display: none; } } + &:not(:first-child).is-expanded .td { border-top: 1px solid #ddd; } } + &--CUSTOMER:last-child, &--VENDOR:last-child { .td { @@ -86,4 +105,4 @@ max-height: 450px; } } -} +} \ No newline at end of file diff --git a/src/style/pages/FinancialStatements/GeneralLedger.scss b/src/style/pages/FinancialStatements/GeneralLedger.scss index a50936220..c5f499aa0 100644 --- a/src/style/pages/FinancialStatements/GeneralLedger.scss +++ b/src/style/pages/FinancialStatements/GeneralLedger.scss @@ -1,75 +1,88 @@ +.financial-sheet { + &--general-ledger { + .financial-sheet__table { -.financial-sheet{ - &--general-ledger{ - .financial-sheet__table{ .tbody, - .thead{ + .thead { + .tr .td, - .tr .th{ + .tr .th { + &.credit, &.debit, &.running_balance, - &.amount{ + &.amount { text-align: right; } } } - .tbody{ - - .tr .td{ + + .tbody { + .tr .td { padding-top: 0.2rem; padding-bottom: 0.2rem; border-top-color: transparent; border-bottom-color: transparent; - - &.date{ - > div{ + + &.date { + >div { display: flex; } - span.force-width{ + + span.force-width { position: relative; } } } - .tr:not(.no-results) .td{ + + .tr:not(.no-results) .td { border-left: 1px solid #ececec; } - .tr{ - &.is-expanded{ + .tr:last-child .td { + border-bottom: 1px solid #ececec; + } - .td.amount{ + .tr { + &.is-expanded { - .cell-inner{ + .td.amount { + + .cell-inner { display: none } } } } - .tr.row-type{ + + .tr.row-type { - &--ACCOUNT_ROW{ - .td{ - &.date{ + &--ACCOUNT_ROW { + .td { + &.date { font-weight: 500; } - &.name{ + + &.name { border-left-color: transparent; } } - &:not(:first-child).is-expanded .td{ + + &:not(:first-child).is-expanded .td { border-top: 1px solid #DDD; } } + &--OPENING_BALANCE, - &--CLOSING_BALANCE{ - .amount{ + &--CLOSING_BALANCE { + .amount { font-weight: 500; } } - &--CLOSING_BALANCE{ - .name{ + + &--CLOSING_BALANCE { + .name { font-weight: 500; } } diff --git a/src/style/pages/FinancialStatements/InventoryItemDetails.scss b/src/style/pages/FinancialStatements/InventoryItemDetails.scss index d2458d1c3..b795ad410 100644 --- a/src/style/pages/FinancialStatements/InventoryItemDetails.scss +++ b/src/style/pages/FinancialStatements/InventoryItemDetails.scss @@ -3,21 +3,25 @@ width: 100%; .financial-sheet__table { + .tbody, .thead { - .tr .td.transaction_id ~ .td, - .tr .th.transaction_id ~ .th { + + .tr .td.transaction_id~.td, + .tr .th.transaction_id~.th { text-align: right; } } + .tbody { .tr .td { padding-top: 0.2rem; padding-bottom: 0.2rem; border-top-color: transparent; border-bottom-color: transparent; + &.date { - > div { + >div { display: flex; } @@ -26,10 +30,15 @@ } } } + .tr:not(.no-results) .td { border-left: 1px solid #ececec; } + .tr:last-child .td { + border-bottom: 1px solid #ddd; + } + .tr.row-type { &--ITEM { .td { @@ -37,15 +46,18 @@ border-left-color: transparent; } } + &:not(:first-child).is-expanded .td { border-top: 1px solid #ddd; } } + &--ITEM, &--OPENING_ENTRY, &--CLOSING_ENTRY { font-weight: 500; } + &--ITEM { &.is-expanded { .td.value .cell-inner { @@ -58,20 +70,23 @@ } } } + .number-format-dropdown { .toggles-fields { .bp3-form-group:first-child { display: none; } } + .form-group--money-format { display: none; } } + .financial-statement--inventory-details { .financial-header-drawer { .bp3-drawer { max-height: 350px; } } -} +} \ No newline at end of file