mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
feat(FinancialReports): add alert cost compute transactions is running.
This commit is contained in:
@@ -66,6 +66,8 @@ const CLASSES = {
|
||||
PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
|
||||
PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
|
||||
|
||||
FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
|
||||
|
||||
...Classes,
|
||||
CARD: 'card',
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default [
|
||||
{ path: 'invoices/new', name: 'Sale invoice' },
|
||||
{ path: 'bill//new', name: 'Purchase invoice' },
|
||||
{ path: 'bills//new', name: 'Purchase invoice' },
|
||||
{ path: 'make-journal-entry', name: 'Manual journal' },
|
||||
{ path: 'expenses/new', name: 'Expense' },
|
||||
{ path: 'customers/new', name: 'Customer' },
|
||||
|
||||
@@ -7,13 +7,14 @@ export default function DashboardInsider({
|
||||
children,
|
||||
name,
|
||||
mount = false,
|
||||
className,
|
||||
}) {
|
||||
return (
|
||||
<div className={classnames({
|
||||
'dashboard__insider': true,
|
||||
'dashboard__insider--loading': loading,
|
||||
[`dashboard__insider--${name}`]: !!name,
|
||||
})}>
|
||||
}, className)}>
|
||||
<LoadingIndicator loading={loading} mount={mount}>
|
||||
{ children }
|
||||
</LoadingIndicator>
|
||||
|
||||
@@ -162,11 +162,11 @@ export default [
|
||||
href: '/financial-reports/profit-loss-sheet',
|
||||
},
|
||||
{
|
||||
text: <T id={'receivable_a_r'} />,
|
||||
text: <T id={'AR_Aging_Summary'} />,
|
||||
href: '/financial-reports/receivable-aging-summary',
|
||||
},
|
||||
{
|
||||
text: <T id={'payable_a_p'} />,
|
||||
text: <T id={'AP_Aging_Summary'} />,
|
||||
href: '/financial-reports/payable-aging-summary',
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import moment from 'moment';
|
||||
|
||||
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
|
||||
import 'style/pages/FinancialStatements/APAgingSummary.scss';
|
||||
|
||||
import { FinancialStatement } from 'components';
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import BalanceSheetHeader from './BalanceSheetHeader';
|
||||
import BalanceSheetTable from './BalanceSheetTable';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
|
||||
|
||||
import { BalanceSheetAlerts } from './components';
|
||||
import { FinancialStatement } from 'components';
|
||||
|
||||
import withBalanceSheetActions from './withBalanceSheetActions';
|
||||
@@ -63,6 +63,8 @@ function BalanceSheet({
|
||||
numberFormat={filter.numberFormat}
|
||||
onNumberFormatSubmit={handleNumberFormatSubmit}
|
||||
/>
|
||||
<BalanceSheetAlerts />
|
||||
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement>
|
||||
<BalanceSheetHeader
|
||||
|
||||
@@ -13,6 +13,9 @@ import withBalanceSheetActions from './withBalanceSheetActions';
|
||||
import { compose } from 'utils';
|
||||
import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
|
||||
|
||||
/**
|
||||
* Balance sheet header.
|
||||
*/
|
||||
function BalanceSheetHeader({
|
||||
// #ownProps
|
||||
onSubmitFilter,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import FinancialReportPage from '../FinancialReportPage';
|
||||
import { useBalanceSheet } from 'hooks/query';
|
||||
import { transformFilterFormToQuery } from '../common';
|
||||
|
||||
@@ -7,7 +7,9 @@ const BalanceSheetContext = createContext();
|
||||
|
||||
function BalanceSheetProvider({ filter, ...props }) {
|
||||
// Transformes the given filter to query.
|
||||
const query = React.useMemo(() => transformFilterFormToQuery(filter), [filter]);
|
||||
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
|
||||
filter,
|
||||
]);
|
||||
|
||||
// Fetches the balance sheet report.
|
||||
const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
|
||||
@@ -16,17 +18,19 @@ function BalanceSheetProvider({ filter, ...props }) {
|
||||
balanceSheet,
|
||||
isLoading: isFetching,
|
||||
refetchBalanceSheet: refetch,
|
||||
|
||||
|
||||
query,
|
||||
filter,
|
||||
};
|
||||
return (
|
||||
<DashboardInsider name={'balance-sheet'}>
|
||||
<FinancialReportPage
|
||||
name={'balance-sheet'}
|
||||
>
|
||||
<BalanceSheetContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
</FinancialReportPage>
|
||||
);
|
||||
}
|
||||
|
||||
const useBalanceSheetContext = () => useContext(BalanceSheetContext);
|
||||
|
||||
export { BalanceSheetProvider, useBalanceSheetContext };
|
||||
export { BalanceSheetProvider, useBalanceSheetContext };
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@blueprintjs/core';
|
||||
import { Icon, If } from 'components';
|
||||
import { useBalanceSheetContext } from './BalanceSheetProvider';
|
||||
|
||||
/**
|
||||
* Balance sheet alerts.
|
||||
*/
|
||||
export function BalanceSheetAlerts() {
|
||||
const {
|
||||
isLoading,
|
||||
refetchBalanceSheet,
|
||||
balanceSheet,
|
||||
} = useBalanceSheetContext();
|
||||
|
||||
// Handle recalculate the report button.
|
||||
const handleRecalcReport = () => {
|
||||
refetchBalanceSheet();
|
||||
};
|
||||
// Can't display any error if the report is loading.
|
||||
if (isLoading) { return null; }
|
||||
|
||||
return (
|
||||
<If condition={balanceSheet.meta.is_cost_compute_running}>
|
||||
<div class="alert-compute-running">
|
||||
<Icon icon="info-block" iconSize={12} /> Just a moment! We're
|
||||
calculating your cost transactions and this doesn't take much time.
|
||||
Please check after sometime.{' '}
|
||||
|
||||
<Button onClick={handleRecalcReport} minimal={true} small={true}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</If>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,6 @@ import { Col, Row, ListSelect, MODIFIER } from 'components';
|
||||
import { filterAccountsOptions } from './common';
|
||||
|
||||
|
||||
|
||||
export default function FinancialAccountsFilter({ ...restProps }) {
|
||||
const SUBMENU_POPOVER_MODIFIERS = {
|
||||
flip: { boundariesElement: 'viewport', padding: 20 },
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { DashboardInsider } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import 'style/pages/FinancialStatements/FinancialReportPage.scss';
|
||||
|
||||
/**
|
||||
* Financial report page.
|
||||
*/
|
||||
export default function FinancialReportPage(props) {
|
||||
return (
|
||||
<DashboardInsider
|
||||
{...props}
|
||||
className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -466,7 +466,8 @@ export default {
|
||||
name_: 'name',
|
||||
as: 'As',
|
||||
receivable_aging_summary: 'Receivable Aging Summary',
|
||||
receivable_a_r: 'Receivable A/R',
|
||||
AR_Aging_Summary: 'A/R Aging Summary',
|
||||
AP_Aging_Summary: 'A/P Aging Summary',
|
||||
customers: 'Customers',
|
||||
new_customers: 'New Customers',
|
||||
customer_type_: 'Customer type',
|
||||
|
||||
@@ -337,6 +337,12 @@ export default {
|
||||
],
|
||||
viewBox: '0 0 24 24',
|
||||
},
|
||||
'info-block': {
|
||||
path: [
|
||||
'M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z',
|
||||
],
|
||||
viewBox: '0 0 16 16',
|
||||
},
|
||||
currency: {
|
||||
path: [
|
||||
'M10.9571,13.44a6.9356,6.9356,0,0,0,0-9.2751,4.8008,4.8008,0,1,1,0,9.2751Zm-5.156.1632a4.8008,4.8008,0,1,1,4.8008-4.8008A4.8008,4.8008,0,0,1,5.8011,13.603Z',
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
font-size: 15px;
|
||||
|
||||
&:not([class*="bp3-intent-"]):not(.bp3-minimal) {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
.financial-sheet{
|
||||
&--payable-aging-summary{
|
||||
|
||||
.financial-sheet__table{
|
||||
|
||||
.bigcapital-datatable{
|
||||
.tbody,
|
||||
.thead{
|
||||
.tr .td.customer_name ~ .td,
|
||||
.tr .th.customer_name ~ .th{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr:not(.no-results) {
|
||||
.td{
|
||||
border-bottom: 0;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
&:not(:first-child) .td{
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
&.row-type--total{
|
||||
font-weight: 500;
|
||||
|
||||
.td{
|
||||
border-top: 1px solid #333;
|
||||
border-bottom: 3px double #333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,9 @@
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
&:not(:first-child) .td{
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
&.row-type--total{
|
||||
font-weight: 500;
|
||||
|
||||
@@ -27,9 +30,7 @@
|
||||
border-bottom: 3px double #333;
|
||||
}
|
||||
}
|
||||
&:not(:first-child) .td{
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
|
||||
|
||||
.dashboard__insider--financial-report{
|
||||
|
||||
.alert-compute-running{
|
||||
position: relative;
|
||||
padding: 8px 20px;
|
||||
border-radius: 2px;
|
||||
background-color: #fdecda;
|
||||
color: #342515;
|
||||
font-size: 12px;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user