diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js index e2ab82bec..c284793ec 100644 --- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js +++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js @@ -29,7 +29,6 @@ export default function APAgingSummaryTable({ return ( ({ textOverview: true, width: 400, disableSortBy: true, + sticky: Align.Left, }); /** diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js index 893519bb5..e18c2139f 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js @@ -21,6 +21,7 @@ export default function CustomersBalanceSummaryTable({ CustomerBalanceSummary: { table }, } = useCustomersBalanceSummaryContext(); + // Retrieves the customers summary columns. const columns = useCustomersSummaryColumns(); return ( diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index be8143f0f..6c3d50689 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -58,10 +58,10 @@ const CustomersTransactionsDataTable = styled(DataTable)` .table { .tbody { .tr .td { - padding-top: 0.2rem; - padding-bottom: 0.2rem; + padding-top: 0.36rem; + padding-bottom: 0.36rem; } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } .tr:last-child .td { @@ -73,6 +73,11 @@ const CustomersTransactionsDataTable = styled(DataTable)` .td { &.customer_name { font-weight: 500; + + .cell-inner { + white-space: nowrap; + position: relative; + } } } &:not(:first-child).is-expanded .td { diff --git a/src/containers/FinancialStatements/CustomersTransactions/components.js b/src/containers/FinancialStatements/CustomersTransactions/components.js index 9b7ec89ee..a1f85ba0a 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/components.js +++ b/src/containers/FinancialStatements/CustomersTransactions/components.js @@ -3,14 +3,13 @@ import intl from 'react-intl-universal'; import { If } from 'components'; import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; import FinancialLoadingBar from '../FinancialLoadingBar'; -import { getForceWidth, getColumnWidth } from 'utils'; +import { getColumnWidth } from 'utils'; import { Align } from 'common'; /** * Retrieve customers transactions columns. */ - export const useCustomersTransactionsColumns = () => { const { customersTransactions: { tableRows }, @@ -20,16 +19,7 @@ export const useCustomersTransactionsColumns = () => { () => [ { Header: intl.get('customer_name'), - accessor: ({ cells }) => { - return ( - - {cells[0].value} - - ); - }, + accessor: 'cells[0].value', className: 'customer_name', }, { diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index 4b6eed676..57482841c 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -78,7 +78,7 @@ const GeneralLedgerDataTable = styled(DataTable)` } } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } .tr:last-child .td { @@ -90,10 +90,11 @@ const GeneralLedgerDataTable = styled(DataTable)` .td { &.date { font-weight: 500; - } - &.name { - border-left-color: transparent; + .cell-inner{ + white-space: nowrap; + position: relative; + } } } diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js index 45f4e6e88..7fe7e5c33 100644 --- a/src/containers/FinancialStatements/GeneralLedger/components.js +++ b/src/containers/FinancialStatements/GeneralLedger/components.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Button } from '@blueprintjs/core'; import { Icon, If } from 'components'; -import { ForceWidth, FormattedMessage as T } from 'components'; +import { FormattedMessage as T } from 'components'; import { getColumnWidth } from 'utils'; import { useGeneralLedgerContext } from './GeneralLedgerProvider'; @@ -23,12 +23,7 @@ export function useGeneralLedgerTableColumns() { () => [ { Header: intl.get('date'), - accessor: (row) => { - if (row.rowType === 'ACCOUNT_ROW') { - return ; - } - return row.date; - }, + accessor: 'date', className: 'date', width: 120, }, diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js index 05d44b4bf..deeb51796 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js @@ -37,6 +37,7 @@ export function InventoryItemDetailsTable({ loading={isInventoryItemDetailsLoading} fromDate={query.from_date} toDate={query.to_date} + fullWidth={true} > div { - display: flex; - } - - span.force-width { - position: relative; - } - } + padding-top: 0.3rem; + padding-bottom: 0.3rem; } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } @@ -87,8 +76,14 @@ const InventoryItemDetailsDataTable = styled(DataTable)` &.transaction_type { border-left-color: transparent; } - } + &.date { + .cell-inner { + white-space: nowrap; + position: relative; + } + } + } &:not(:first-child).is-expanded .td { border-top: 1px solid #ddd; } diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js index cffc6058f..8e59352ea 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js @@ -1,17 +1,43 @@ import * as R from 'ramda'; + import { getColumnWidth } from 'utils'; -import { CellForceWidth } from '../../../components'; +import { Align } from 'common'; + +const itemNameOrDateColumn = R.curry((data, index, column) => ({ + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: column.key, + width: getColumnWidth(data, `cells.${index}.key`, { + minWidth: 130, + magicSpacing: 10, + }), + disableSortBy: true, +})); + +const numericColumn = R.curry((data, index, column) => ({ + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: column.key, + width: getColumnWidth(data, `cells.${index}.key`, { + minWidth: 130, + magicSpacing: 10, + }), + disableSortBy: true, + align: Align.Right, +})); /** * columns mapper. */ -const columnsMapper = (data, index, column) => ({ +const columnsMapper = R.curry((data, index, column) => ({ id: column.key, key: column.key, Header: column.label, - Cell: CellForceWidth, accessor: `cells[${index}].value`, - forceWidthAccess: `cells[0].value`, className: column.key, width: getColumnWidth(data, `cells.${index}.key`, { minWidth: 130, @@ -19,7 +45,7 @@ const columnsMapper = (data, index, column) => ({ }), disableSortBy: true, textOverview: true, -}); +})); /** * Inventory item details columns. @@ -27,7 +53,17 @@ const columnsMapper = (data, index, column) => ({ export const dynamicColumns = (columns, data) => { const mapper = (column, index) => { return R.compose( - R.when(R.pathEq(['key']), R.curry(columnsMapper)(data, index)), + R.cond([ + [R.pathEq(['key'], 'date'), itemNameOrDateColumn(data, index)], + [R.pathEq(['key'], 'running_quantity'), numericColumn(data, index)], + [R.pathEq(['key'], 'profit_margin'), numericColumn(data, index)], + [R.pathEq(['key'], 'running_value'), numericColumn(data, index)], + [R.pathEq(['key'], 'quantity'), numericColumn(data, index)], + [R.pathEq(['key'], 'rate'), numericColumn(data, index)], + [R.pathEq(['key'], 'total'), numericColumn(data, index)], + [R.pathEq(['key'], 'value'), numericColumn(data, index)], + [R.T, columnsMapper(data, index)], + ]), )(column); }; return columns.map(mapper); diff --git a/src/containers/FinancialStatements/VendorsTransactions/components.js b/src/containers/FinancialStatements/VendorsTransactions/components.js index bfb8e0fe5..cfc6586d2 100644 --- a/src/containers/FinancialStatements/VendorsTransactions/components.js +++ b/src/containers/FinancialStatements/VendorsTransactions/components.js @@ -1,9 +1,10 @@ import React from 'react'; import intl from 'react-intl-universal'; + import { If } from 'components'; import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; import FinancialLoadingBar from '../FinancialLoadingBar'; -import { getColumnWidth, getForceWidth } from 'utils'; +import { getColumnWidth } from 'utils'; /** * Retrieve vendors transactions columns. @@ -17,19 +18,8 @@ export const useVendorsTransactionsColumns = () => { () => [ { Header: intl.get('vendor_name'), - accessor: ({ cells }) => { - return ( - - {cells[0].value} - - ); - }, + accessor: 'cells[1].value', className: 'vendor_name', - // textOverview: true, - // width: 240, }, { Header: intl.get('account_name'),