fix(FinancialReport): BIG-205 Financial reports missing border final border bottom.
This commit is contained in:
@@ -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}`];
|
||||
|
||||
@@ -18,6 +18,7 @@ const columnsMapper = (data, index, column) => ({
|
||||
magicSpacing: 10,
|
||||
}),
|
||||
disableSortBy: true,
|
||||
textOverview: true,
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -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}`];
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user