mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
feat: Optimize SCSS architecture.
This commit is contained in:
@@ -19,6 +19,8 @@ import withARAgingSummary from './withARAgingSummary';
|
||||
import { compose } from 'utils';
|
||||
import { transfromFilterFormToQuery } from './common';
|
||||
|
||||
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
|
||||
|
||||
/**
|
||||
* AR aging summary report.
|
||||
*/
|
||||
|
||||
@@ -5,7 +5,7 @@ import FinancialSheet from 'components/FinancialSheet';
|
||||
|
||||
import withARAgingSummary from './withARAgingSummary';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, getColumnWidth } from 'utils';
|
||||
|
||||
/**
|
||||
* AR aging summary table sheet.
|
||||
@@ -37,28 +37,34 @@ function ReceivableAgingSummaryTable({
|
||||
accessor: 'name',
|
||||
className: 'customer_name',
|
||||
sticky: 'left',
|
||||
width: 200,
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
Header: <T id={'current'} />,
|
||||
accessor: 'current',
|
||||
className: 'current',
|
||||
width: 120,
|
||||
width: getColumnWidth(receivableAgingRows, `current`, {
|
||||
minWidth: 120,
|
||||
}),
|
||||
},
|
||||
...agingColumns.map((agingColumn, index) => ({
|
||||
Header: agingColumn,
|
||||
accessor: `aging-${index }`,
|
||||
width: 120,
|
||||
width: getColumnWidth(receivableAgingRows, `aging-${index }`, {
|
||||
minWidth: 120,
|
||||
}),
|
||||
})),
|
||||
{
|
||||
Header: (<T id={'total'} />),
|
||||
id: 'total',
|
||||
accessor: 'total',
|
||||
className: 'total',
|
||||
width: 140,
|
||||
width: getColumnWidth(receivableAgingRows, 'total', {
|
||||
minWidth: 120,
|
||||
}),
|
||||
},
|
||||
],
|
||||
[agingColumns],
|
||||
[receivableAgingRows, agingColumns],
|
||||
);
|
||||
|
||||
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
|
||||
|
||||
@@ -21,6 +21,8 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
|
||||
|
||||
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
|
||||
|
||||
import 'style/pages/FinancialStatements/BalanceSheet.scss';
|
||||
|
||||
function BalanceSheet({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
|
||||
@@ -9,6 +9,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
import 'style/pages/FinancialStatements/FinancialSheets.scss';
|
||||
|
||||
function FinancialReportsItem({ title, desc, link }) {
|
||||
return (
|
||||
<div class="financial-reports__item">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Position, Drawer } from '@blueprintjs/core';
|
||||
import 'style/containers/FinancialStatements/DrawerHeader.scss';
|
||||
|
||||
export default function FinancialStatementHeader({
|
||||
children,
|
||||
|
||||
@@ -21,6 +21,8 @@ import { compose } from 'utils';
|
||||
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
|
||||
import withGeneralLedger from './withGeneralLedger';
|
||||
|
||||
import 'style/pages/FinancialStatements/GeneralLedger.scss';
|
||||
|
||||
/**
|
||||
* General Ledger (GL) sheet.
|
||||
*/
|
||||
|
||||
@@ -19,6 +19,8 @@ import withJournal from './withJournal';
|
||||
|
||||
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
|
||||
|
||||
import 'style/pages/FinancialStatements/Journal.scss';
|
||||
|
||||
function Journal({
|
||||
// #withJournalActions
|
||||
requestFetchJournalSheet,
|
||||
|
||||
@@ -45,7 +45,7 @@ function JournalSheetTable({
|
||||
Header: formatMessage({ id: 'transaction_type' }),
|
||||
accessor: (r) =>
|
||||
rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
|
||||
className: 'transaction_type',
|
||||
className: 'reference_type_formatted',
|
||||
width: 145,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -19,6 +19,11 @@ import withSettings from 'containers/Settings/withSettings';
|
||||
|
||||
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
|
||||
|
||||
import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
|
||||
|
||||
/**
|
||||
* Profit/Loss financial statement sheet.
|
||||
*/
|
||||
function ProfitLossSheet({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
@@ -18,6 +18,8 @@ import withTrialBalanceActions from './withTrialBalanceActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withTrialBalance from './withTrialBalance';
|
||||
|
||||
import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
|
||||
|
||||
/**
|
||||
* Trial balance sheet.
|
||||
*/
|
||||
|
||||
@@ -7,11 +7,11 @@ import Money from 'components/Money';
|
||||
|
||||
import withTrialBalance from './withTrialBalance';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, getColumnWidth } from 'utils';
|
||||
|
||||
function TrialBalanceSheetTable({
|
||||
// #withTrialBalanceDetail
|
||||
trialBalance,
|
||||
trialBalanceTableRows,
|
||||
trialBalanceSheetLoading,
|
||||
|
||||
// #withTrialBalanceTable
|
||||
@@ -27,44 +27,57 @@ function TrialBalanceSheetTable({
|
||||
Header: formatMessage({ id: 'account_name' }),
|
||||
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
|
||||
className: 'name',
|
||||
minWidth: 150,
|
||||
maxWidth: 150,
|
||||
width: 150,
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'credit' }),
|
||||
accessor: 'credit',
|
||||
Cell: ({ cell }) => {
|
||||
const { currency_code, credit } = cell.row.original;
|
||||
return (<Money amount={credit} currency={currency_code} />);
|
||||
return <Money amount={credit} currency={currency_code} />;
|
||||
},
|
||||
className: 'credit',
|
||||
width: 95,
|
||||
width: getColumnWidth(trialBalanceTableRows, `credit`, {
|
||||
minWidth: 95,
|
||||
}),
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'debit' }),
|
||||
accessor: 'debit',
|
||||
Cell: ({ cell }) => {
|
||||
const { currency_code, debit } = cell.row.original;
|
||||
return (<Money amount={debit} currency={currency_code} />);
|
||||
return <Money amount={debit} currency={currency_code} />;
|
||||
},
|
||||
className: 'debit',
|
||||
width: 95,
|
||||
width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'balance' }),
|
||||
accessor: 'balance',
|
||||
Cell: ({ cell }) => {
|
||||
const { currency_code, balance } = cell.row.original;
|
||||
return (<Money amount={balance} currency={currency_code} />);
|
||||
return <Money amount={balance} currency={currency_code} />;
|
||||
},
|
||||
className: 'balance',
|
||||
width: 95,
|
||||
width: getColumnWidth(trialBalanceTableRows, `balance`, {
|
||||
minWidth: 95,
|
||||
}),
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
[trialBalanceTableRows, formatMessage],
|
||||
);
|
||||
|
||||
const rowClassNames = (row) => {
|
||||
const { original } = row;
|
||||
const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
|
||||
|
||||
return {
|
||||
...rowTypes.reduce((acc, rowType) => {
|
||||
acc[`row_type--${rowType}`] = rowType;
|
||||
return acc;
|
||||
}, {}),
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
@@ -78,24 +91,27 @@ function TrialBalanceSheetTable({
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={trialBalance.data}
|
||||
data={trialBalanceTableRows}
|
||||
expandable={true}
|
||||
expandToggleColumn={1}
|
||||
expandColumnSpace={1}
|
||||
sticky={true}
|
||||
rowClassNames={rowClassNames}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withTrialBalance(({
|
||||
trialBalance,
|
||||
trialBalanceSheetLoading,
|
||||
trialBalanceQuery
|
||||
}) => ({
|
||||
trialBalance,
|
||||
trialBalanceSheetLoading,
|
||||
trialBalanceQuery
|
||||
})),
|
||||
withTrialBalance(
|
||||
({
|
||||
trialBalanceTableRows,
|
||||
trialBalanceSheetLoading,
|
||||
trialBalanceQuery,
|
||||
}) => ({
|
||||
trialBalanceTableRows,
|
||||
trialBalanceSheetLoading,
|
||||
trialBalanceQuery,
|
||||
}),
|
||||
),
|
||||
)(TrialBalanceSheetTable);
|
||||
|
||||
@@ -2,16 +2,19 @@ import {connect} from 'react-redux';
|
||||
import {
|
||||
getFinancialSheetFactory,
|
||||
getFinancialSheetQueryFactory,
|
||||
getFinancialSheetTableRowsFactory,
|
||||
} from 'store/financialStatement/financialStatements.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const mapStateToProps = (state, props) => {
|
||||
const getTrialBalance = getFinancialSheetFactory('trialBalance');
|
||||
const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
|
||||
const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
|
||||
|
||||
const mapped = {
|
||||
trialBalance: getTrialBalance(state, props),
|
||||
trialBalanceQuery: getBalanceSheetQuery(state, props),
|
||||
trialBalanceTableRows: getTrialBalanceRows(state, props),
|
||||
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
|
||||
trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
|
||||
trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
|
||||
|
||||
Reference in New Issue
Block a user