QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: integrate balance sheet and P&L sheet with new API.

Browse Source
This commit is contained in:
a.bouhuolia
2022-01-30 15:57:27 +02:00
parent fa455152a3
commit 3d78d2d051
13 changed files with 147 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -5,23 +5,21 @@ import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
import { FinancialStatement } from 'components';
import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import { BalanceSheetProvider } from './BalanceSheetProvider';
import { BalanceSheetBody } from './BalanceSheetBody';
import { FinancialReportBody } from '../FinancialReportPage';
import withBalanceSheetActions from './withBalanceSheetActions';
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
/**
* Balance sheet.
* @returns {React.JSX}
*/
function BalanceSheet({
// #withCurrentOrganization
organizationName,
// #withBalanceSheetActions
toggleBalanceSheetFilterDrawer,
}) {
@@ -42,7 +40,6 @@ function BalanceSheet({
};
setFilter({ ..._filter });
};
// Handle number format submit.
const handleNumberFormatSubmit = (values) => {
setFilter({
@@ -50,7 +47,6 @@ function BalanceSheet({
numberFormat: values,
});
};
// Hides the balance sheet filter drawer once the page unmount.
useEffect(
() => () => {
@@ -66,6 +62,7 @@ function BalanceSheet({
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<BalanceSheetLoadingBar />
{/* <BalanceSheetAlerts /> */}
<DashboardPageContent>
<FinancialStatement>
@@ -73,20 +70,13 @@ function BalanceSheet({
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__body">
<BalanceSheetTable companyName={organizationName} />
</div>
<FinancialReportBody>
<BalanceSheetBody />
</FinancialReportBody>
</FinancialStatement>
</DashboardPageContent>
{/* <BalanceSheetAlerts /> */}
</BalanceSheetProvider>
);
}
export default compose(
withCurrentOrganization(({ organization }) => ({
organizationName: organization.name,
})),
withBalanceSheetActions,
)(BalanceSheet);
export default compose(withBalanceSheetActions)(BalanceSheet);

30
src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import BalanceSheetTable from './BalanceSheetTable';
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
import { useBalanceSheetContext } from './BalanceSheetProvider';
import { compose } from 'utils';
/**
* Balance sheet body JSX.
* @returns {React.JSX}
*/
function BalanceSheetBodyJSX({
// #withCurrentOrganization
organizationName,
}) {
const { isLoading } = useBalanceSheetContext();
return isLoading ? (
'loading'
) : (
<BalanceSheetTable companyName={organizationName} />
);
}
export const BalanceSheetBody = compose(
withCurrentOrganization(({ organization }) => ({
organizationName: organization.name,
})),
)(BalanceSheetBodyJSX);

1
src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js
View File

@@ -10,7 +10,6 @@ function BalanceSheetProvider({ filter, ...props }) {
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
filter,
]);
// Fetches the balance sheet report.
const {
data: balanceSheet,

9
src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -36,14 +36,13 @@ export default function BalanceSheetTable({
name="balance-sheet"
companyName={companyName}
sheetType={intl.get('balance_sheet')}
// fromDate={query.from_date}
// toDate={query.to_date}
// basis={query.basis}
// loading={isLoading}
fromDate={query.from_date}
toDate={query.to_date}
basis={query.basis}
>
<BalanceSheetDataTable
columns={tableColumns}
data={table?.rows || []}
data={table.rows}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
expandable={true}

13
src/containers/FinancialStatements/BalanceSheet/components.js
View File

@@ -1,9 +1,12 @@
import React from 'react';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { FormattedMessage as T, Icon, If } from 'components';
import { useBalanceSheetContext } from './BalanceSheetProvider';
import { FormattedMessage as T } from 'components';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { FinancialComputeAlert } from '../FinancialReportPage';
import { dynamicColumns } from './utils';
/**
@@ -22,14 +25,14 @@ export function BalanceSheetAlerts() {
return (
<If condition={balanceSheet.meta.is_cost_compute_running}>
<div class="alert-compute-running">
<FinancialComputeAlert>
<Icon icon="info-block" iconSize={12} />{' '}
<T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
<Button onClick={handleRecalcReport} minimal={true} small={true}>
<T id={'report.compute_running.refresh'} />
</Button>
</div>
</FinancialComputeAlert>
</If>
);
}
@@ -57,7 +60,7 @@ export const useBalanceSheetColumns = () => {
} = useBalanceSheetContext();
return React.useMemo(
() => dynamicColumns(table?.columns || [], table?.rows || []),
() => dynamicColumns(table.columns, table.rows),
[table],
);
};

48
src/containers/FinancialStatements/FinancialReportPage.js
View File

@@ -1,18 +1,60 @@
import React from 'react';
import classNames from 'classnames';
import { DashboardInsider } from 'components';
import styled from 'styled-components';
import { CLASSES } from 'common/classes';
import 'style/pages/FinancialStatements/FinancialReportPage.scss';
/**
* Financial report page.
*/
export default function FinancialReportPage(props) {
return (
<DashboardInsider
<FinancialReportPageRoot
{...props}
className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
/>
);
}
export const FinancialComputeAlert = styled.div`
position: relative;
padding: 8px 20px;
border-radius: 2px;
background-color: #fdecda;
color: #342515;
font-size: 13px;
button {
font-size: 12px;
min-height: 16px;
padding: 0 4px;
&,
&:hover {
color: #824400;
text-decoration: underline;
}
}
svg {
margin-right: 6px;
position: relative;
top: -2px;
fill: #975f19;
}
`;
export const FinancialProgressbar = styled.div`
.progress-materializecss {
top: -2px;
}
`;
export const FinancialReportPageRoot = styled(DashboardInsider)``;
export const FinancialReportBody = styled.div`
padding-left: 15px;
padding-right: 15px;
display: flex;
justify-content: center;
align-items: center;
`;

35
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import ProfitLossSheetTable from './ProfitLossSheetTable';
import { FinancialReportBody } from '../FinancialReportPage';
import withCurrentOrganization from '../../Organization/withCurrentOrganization';
import { useProfitLossSheetContext } from './ProfitLossProvider';
import { compose } from 'utils';
/**
* @returns {React.JSX}
*/
function ProfitLossBodyJSX({
// #withPreferences
organizationName,
}) {
const { isLoading } = useProfitLossSheetContext();
return (
<FinancialReportBody>
{isLoading ? (
'loading'
) : (
<ProfitLossSheetTable companyName={organizationName} />
)}
</FinancialReportBody>
);
}
export const ProfitLossBody = compose(
withCurrentOrganization(({ organization }) => ({
organizationName: organization.name,
})),
)(ProfitLossBodyJSX);

27
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -3,25 +3,21 @@ import moment from 'moment';
import { compose } from 'utils';
import ProfitLossSheetHeader from './ProfitLossSheetHeader';
import ProfitLossSheetTable from './ProfitLossSheetTable';
import ProfitLossActionsBar from './ProfitLossActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withProfitLossActions from './withProfitLossActions';
import withCurrentOrganization from '../../Organization/withCurrentOrganization';
import { ProfitLossSheetProvider } from './ProfitLossProvider';
import { ProfitLossSheetLoadingBar, ProfitLossSheetAlerts } from './components';
import { ProfitLossBody } from './ProfitLossBody';
/**
* Profit/Loss financial statement sheet.
*/
function ProfitLossSheet({
// #withPreferences
organizationName,
// #withProfitLossActions
toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
}) {
@@ -32,7 +28,6 @@ function ProfitLossSheet({
displayColumnsType: 'total',
filterByOption: 'with-transactions',
});
// Handle submit filter.
const handleSubmitFilter = (filter) => {
const _filter = {
@@ -42,7 +37,6 @@ function ProfitLossSheet({
};
setFilter(_filter);
};
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
setFilter({
@@ -64,19 +58,15 @@ function ProfitLossSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
{/* <ProfitLossSheetLoadingBar /> */}
<ProfitLossSheetLoadingBar />
{/* <ProfitLossSheetAlerts /> */}
<DashboardPageContent>
<div class="financial-statement">
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleSubmitFilter}
/>
<div class="financial-statement__body">
<ProfitLossSheetTable companyName={organizationName} />
</div>
</div>
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleSubmitFilter}
/>
<ProfitLossBody />
</DashboardPageContent>
</ProfitLossSheetProvider>
);
@@ -85,7 +75,4 @@ function ProfitLossSheet({
export default compose(
withDashboardActions,
withProfitLossActions,
withCurrentOrganization(({ organization }) => ({
organizationName: organization.name,
})),
)(ProfitLossSheet);

2
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import moment from 'moment';
import { Formik, Form } from 'formik';
import { FormattedMessage as T } from 'components';

8
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -17,7 +17,7 @@ export default function ProfitLossSheetTable({
}) {
// Profit/Loss sheet context.
const {
profitLossSheet: { table },
profitLossSheet: { table, query },
isLoading,
} = useProfitLossSheetContext();
@@ -34,11 +34,11 @@ export default function ProfitLossSheetTable({
<FinancialSheet
companyName={companyName}
sheetType={<T id={'profit_loss_sheet'} />}
// fromDate={query.from_date}
// toDate={query.to_date}
fromDate={query.from_date}
toDate={query.to_date}
name="profit-loss-sheet"
loading={isLoading}
// basis={query.basis}
basis={query.basis}
>
<ProfitLossDataTable
columns={tableColumns}

143
src/containers/FinancialStatements/reducers.js
View File

@@ -1,32 +1,9 @@
import React from 'react';
containers/FinancialStatements/reducersimport React from 'react';
import { chain } from 'lodash';
import moment from 'moment';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
export const balanceSheetRowsReducer = (accounts) => {
return accounts.map((account) => {
return {
...account,
children: balanceSheetRowsReducer([
...(account.children ? account.children : []),
...(account.total && account.children && account.children.length > 0
? [
{
name: intl.get('total_name', { name: account.name }),
row_types: ['total-row', account.section_type],
total: { ...account.total },
...(account.total_periods && {
total_periods: account.total_periods,
}),
},
]
: []),
]),
};
});
};
export const trialBalanceSheetReducer = (sheet) => {
const results = [];
@@ -44,124 +21,6 @@ export const trialBalanceSheetReducer = (sheet) => {
return results;
};
export const profitLossSheetReducer = (profitLoss) => {
const results = [];
if (profitLoss.income) {
results.push({
name: <T id={'income'} />,
total: profitLoss.income.total,
children: [
...profitLoss.income.accounts,
{
name: <T id={'total_income'} />,
total: profitLoss.income.total,
total_periods: profitLoss.income.total_periods,
rowTypes: ['income_total', 'section_total', 'total'],
},
],
total_periods: profitLoss.income.total_periods,
});
}
if (profitLoss.cost_of_sales) {
results.push({
name: <T id={'cost_of_sales'} />,
total: profitLoss.cost_of_sales.total,
children: [
...profitLoss.cost_of_sales.accounts,
{
name: <T id={'total_cost_of_sales'} />,
total: profitLoss.cost_of_sales.total,
total_periods: profitLoss.cost_of_sales.total_periods,
rowTypes: ['cogs_total', 'section_total', 'total'],
},
],
total_periods: profitLoss.cost_of_sales.total_periods,
});
}
if (profitLoss.gross_profit) {
results.push({
name: <T id={'gross_profit'} />,
total: profitLoss.gross_profit.total,
total_periods: profitLoss.gross_profit.total_periods,
rowTypes: ['gross_total', 'section_total', 'total'],
});
}
if (profitLoss.expenses) {
results.push({
name: <T id={'expenses'} />,
total: profitLoss.expenses.total,
children: [
...profitLoss.expenses.accounts,
{
name: <T id={'total_expenses'} />,
total: profitLoss.expenses.total,
total_periods: profitLoss.expenses.total_periods,
rowTypes: ['expenses_total', 'section_total', 'total'],
},
],
total_periods: profitLoss.expenses.total_periods,
});
}
if (profitLoss.operating_profit) {
results.push({
name: <T id={'net_operating_income'} />,
total: profitLoss.operating_profit.total,
total_periods: profitLoss.income.total_periods,
rowTypes: ['net_operating_total', 'section_total', 'total'],
});
}
if (profitLoss.other_income) {
results.push({
name:<T id={'other_income'}/>,
total: profitLoss.other_income.total,
total_periods: profitLoss.other_income.total_periods,
children: [
...profitLoss.other_income.accounts,
{
name: <T id={'total_other_income'} />,
total: profitLoss.other_income.total,
total_periods: profitLoss.other_income.total_periods,
rowTypes: ['expenses_total', 'section_total', 'total'],
},
],
});
}
if (profitLoss.other_expenses) {
results.push({
name: <T id={'other_expenses'} />,
total: profitLoss.other_expenses.total,
total_periods: profitLoss.other_expenses.total_periods,
children: [
...profitLoss.other_expenses.accounts,
{
name: <T id={'total_other_expenses'} />,
total: profitLoss.other_expenses.total,
total_periods: profitLoss.other_expenses.total_periods,
rowTypes: ['expenses_total', 'section_total', 'total'],
},
],
});
}
if (profitLoss.net_other_income) {
results.push({
name: <T id={'net_other_income'} />,
total: profitLoss.net_other_income.total,
total_periods: profitLoss.net_other_income.total_periods,
rowTypes: ['net_other_income', 'section_total', 'total'],
});
}
if (profitLoss.net_income) {
results.push({
name: <T id={'net_income'} />,
total: profitLoss.net_income.total,
total_periods: profitLoss.net_income.total_periods,
rowTypes: ['net_income_total', 'section_total', 'total'],
});
}
return results;
};
export const journalTableRowsReducer = (journal) => {
const TYPES = {

30
src/hooks/query/financialReports.js
View File

@@ -1,8 +1,6 @@
import { useRequestQuery } from '../useQueryRequest';
import {
trialBalanceSheetReducer,
balanceSheetRowsReducer,
profitLossSheetReducer,
generalLedgerTableRowsReducer,
journalTableRowsReducer,
ARAgingSummaryTableRowsMapper,
@@ -28,27 +26,9 @@ export function useBalanceSheet(query, props) {
},
},
{
select: (res) => ({
table: res.data.table
}),
defaultData: {
table: {},
},
select: (res) => res.data,
...props,
},
// {
// select: (res) => ({
// tableRows: balanceSheetRowsReducer(res.data.data),
// ...res.data,
// }),
// defaultData: {
// data: [],
// columns: [],
// query: {},
// tableRows: [],
// },
// ...props,
// },
);
}
@@ -62,7 +42,6 @@ export function useTrialBalanceSheet(query, props) {
method: 'get',
url: '/financial_statements/trial_balance_sheet',
params: query,
},
{
select: (res) => ({
@@ -94,12 +73,7 @@ export function useProfitLossSheet(query, props) {
},
},
{
select: (res) => ({
table: res.data.table
}),
defaultData: {
table: {},
},
select: (res) => res.data,
...props,
},
);

31
src/style/pages/FinancialStatements/FinancialReportPage.scss
View File

@@ -4,35 +4,8 @@
.dashboard__insider--financial-report{
.alert-compute-running{
position: relative;
padding: 8px 20px;
border-radius: 2px;
background-color: #fdecda;
color: #342515;
font-size: 13px;
button{
font-size: 12px;
min-height: 16px;
padding: 0 4px;
&,
&:hover{
color: #824400;
text-decoration: underline;
}
}
svg{
margin-right: 6px;
position: relative;
top: -2px;
fill: #975f19;
}
}
.financial-progressbar{
.progress-materializecss{
top: -2px;
}
}
}