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

feat: Financial statements enhancement.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-06-17 22:06:33 +02:00
parent 5c43f902e3
commit 3e15cd42c8
75 changed files with 1308 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
client/src/components/ContactsListField.js Normal file
View File

@@ -0,0 +1,51 @@
import React, { useCallback, useState } from 'react';
import {
MenuItem,
Button,
} from '@blueprintjs/core';
import ListSelect from 'components/ListSelect';
import { FormattedMessage as T } from 'react-intl';
export default function ContactsListField({
contacts,
onContactSelected,
error,
initialContact,
defautlSelectText = (<T id={'select_contact'} />)
}) {
const [selectedContact, setSelectedContact] = useState(
initialContact || null
);
const contactTypeLabel = (contactType) => {
switch(contactType) {
case 'customer':
return 'Customer';
case 'vendor':
return 'Vendor';
}
};
// Contact item of select accounts field.
const contactItem = useCallback((item, { handleClick, modifiers, query }) => (
<MenuItem text={item.display_name} label={contactTypeLabel(item.contact_type)} key={item.id} onClick={handleClick} />
), []);
const onContactSelect = useCallback((contact) => {
setSelectedContact(contact.id);
onContactSelected && onContactSelected(contact.id);
}, [setSelectedContact, onContactSelected]);
return (
<ListSelect
items={contacts}
noResults={<MenuItem disabled={true} text='No results.' />}
itemRenderer={contactItem}
popoverProps={{ minimal: true }}
filterable={true}
onItemSelect={onContactSelect}
labelProp={'display_name'}
selectedItem={selectedContact}
selectedItemProp={'id'}
defaultText={defautlSelectText} />
);
}

42
client/src/components/Dashboard/DashboardTopbar.js
View File

@@ -7,6 +7,8 @@ import {
NavbarDivider,
Button,
Classes,
Tooltip,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
@@ -56,25 +58,27 @@ function DashboardTopbar({
<div class='dashboard__topbar'>
<div class='dashboard__topbar-left'>
<div class='dashboard__topbar-sidebar-toggle'>
<Button minimal={true} onClick={handleSidebarToggleBtn}>
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 20 20'
role='img'
focusable='false'
>
<title><T id={'menu'}/></title>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-miterlimit='5'
stroke-width='2'
d='M4 7h15M4 12h15M4 17h15'
></path>
</svg>
</Button>
<Tooltip content={<T id={'close_sidebar'} />} position={Position.RIGHT}>
<Button minimal={true} onClick={handleSidebarToggleBtn}>
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 20 20'
role='img'
focusable='false'
>
<title><T id={'menu'}/></title>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-miterlimit='5'
stroke-width='2'
d='M4 7h15M4 12h15M4 17h15'
></path>
</svg>
</Button>
</Tooltip>
</div>
<div class='dashboard__title'>

35
client/src/components/DataTableCells/ContactsListFieldCell.js Normal file
View File

@@ -0,0 +1,35 @@
import React, { useCallback, useMemo } from 'react';
import { FormGroup, Classes } from "@blueprintjs/core";
import classNames from 'classnames';
import ContactsListField from 'components/ContactsListField';
export default function ContactsListCellRenderer({
column: { id, value },
row: { index, original },
cell: { value: initialValue },
payload: { contacts, updateData, errors }
}) {
const handleContactSelected = useCallback((contactId) => {
updateData(index, id, contactId)
}, [updateData, index, id]);
const initialContact = useMemo(() => {
return contacts.find(c => c.id === initialValue);
}, [contacts, initialValue]);
return (
<FormGroup
className={classNames(
'form-group--select-list',
'form-group--contacts-list',
Classes.FILL,
)}
>
<ContactsListField
contacts={contacts}
onContactSelected={handleContactSelected}
initialContact={initialContact}
/>
</FormGroup>
)
}

2
client/src/components/DataTableCells/index.js
View File

@@ -1,9 +1,11 @@
import AccountsListFieldCell from './AccountsListFieldCell';
import MoneyFieldCell from './MoneyFieldCell';
import InputGroupCell from './InputGroupCell';
import ContactsListFieldCell from './ContactsListFieldCell';
export {
AccountsListFieldCell,
MoneyFieldCell,
InputGroupCell,
ContactsListFieldCell,
}

4
client/src/components/FieldHint.js
View File

@@ -3,6 +3,8 @@ import Icon from './Icon';
export default function FieldHint({ hint }) {
return (
<Icon icon="info-circle" iconSize={12} />
<span class="hint">
<Icon icon="info-circle" iconSize={12} />
</span>
);
}

7
client/src/components/MenuItemLabel.js Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export default function MenuItemLabel({
text
}) {
return (<span class="bp3-menu-item-label">{ text }</span>);
}

3
client/src/components/Sidebar/SidebarMenu.js
View File

@@ -4,6 +4,7 @@ import { useHistory, useLocation } from 'react-router-dom';
import sidebarMenuList from 'config/sidebarMenu';
import Icon from 'components/Icon';
import MenuItem from 'components/MenuItem';
import { MenuItemLabel } from 'components';
import classNames from 'classnames';
export default function SidebarMenu() {
@@ -29,6 +30,8 @@ export default function SidebarMenu() {
<div class="bp3-menu-spacer"></div>
) : item.divider ? (
<MenuDivider key={index} title={item.title} />
) : item.label ? (
<MenuItemLabel key={index} text={item.text} />
) : (
<MenuItem
key={index}

8
client/src/components/index.js
View File

@@ -2,16 +2,20 @@ import If from './Utils/If';
import Money from './Money';
import Icon from './Icon';
import Choose from './Utils/Choose';
// import For from './Utils/For';
import For from './Utils/For';
import ListSelect from './ListSelect';
import FinancialStatement from './FinancialStatement';
import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
import ErrorMessage from './ErrorMessage';
import MODIFIER from './modifiers';
import FieldHint from './FieldHint';
import MenuItemLabel from './MenuItemLabel';
const Hint = FieldHint;
export {
If,
For,
Money,
Icon,
ListSelect,
@@ -21,5 +25,7 @@ export {
MODIFIER,
ErrorMessage,
FieldHint,
Hint,
MenuItemLabel,
// For,
};

45
client/src/config/financialReportsMenu.js Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { FormattedMessage as T } from 'react-intl';
export default [
{
sectionTitle: 'Financial Accounting',
reports: [
{
title: 'Balance Sheet Report',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/balance-sheet',
},
{
title: 'Trial Balance Sheet',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/trial-balance-sheet',
},
{
title: 'Journal Report',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/journal-sheet',
},
{
title: 'Profit/Loss Report',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/profit-loss-sheet',
},
{
title: 'General Ledger Report',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/general-ledger',
},
{
title: 'Receivable Aging Summary',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/receivable-aging-summary',
},
{
title: 'Payable Aging Summary',
desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
link: '/financial-reports/payable-aging-summary',
},
]
},
];

111
client/src/config/sidebarMenu.js
View File

@@ -6,8 +6,6 @@ export default [
divider: true,
},
{
icon: 'homepage',
iconSize: 20,
text: <T id={'homepage'} />,
disabled: false,
href: '/homepage',
@@ -15,9 +13,12 @@ export default [
{
divider: true,
},
{
text: 'Sales & inventory',
label: true,
},
{
icon: 'homepage',
iconSize: 20,
text: <T id={'items'} />,
children: [
{
@@ -35,11 +36,41 @@ export default [
],
},
{
spacer: true,
text: <T id={'sales'} />,
children: [],
},
{
text: <T id={'purchases'} />,
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
},
],
},
{
text: <T id={'contacts'} />,
children: [
{
text: <T id={'customers'} />,
// href: '/',
},
{
text: <T id={'new_customers'} />,
href: '/customers/new',
},
],
},
{
divider: true,
},
{
text: 'Financial accounting',
label: true,
},
{
icon: 'balance-scale',
iconSize: 20,
text: <T id={'financial'} />,
children: [
{
@@ -61,92 +92,60 @@ export default [
],
},
{
icon: 'university',
iconSize: 20,
text: <T id={'banking'} />,
children: [],
},
{
icon: 'shopping-cart',
iconSize: 20,
text: <T id={'sales'} />,
children: [],
},
{
icon: 'balance-scale',
iconSize: 20,
text: <T id={'purchases'} />,
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
},
],
},
{
icon: 'analytics',
iconSize: 18,
text: <T id={'financial_reports'} />,
children: [
{
text: <T id={'all_reports'} />,
href: '/financial-reports',
},
{
divider: true,
},
{
text: <T id={'balance_sheet'} />,
href: '/balance-sheet',
href: '/financial-reports/balance-sheet',
},
{
text: <T id={'trial_balance_sheet'} />,
href: '/trial-balance-sheet',
href: '/financial-reports/trial-balance-sheet',
},
{
text: <T id={'journal'} />,
href: '/journal-sheet',
href: '/financial-reports/journal-sheet',
},
{
text: <T id={'general_ledger'} />,
href: '/general-ledger',
href: '/financial-reports/general-ledger',
},
{
text: <T id={'profit_loss_sheet'} />,
href: '/profit-loss-sheet',
href: '/financial-reports/profit-loss-sheet',
},
{
text: 'Receivable Aging Summary',
href: '/receivable-aging-summary'
href: '/financial-reports/receivable-aging-summary'
},
{
text: 'Payable Aging Summary',
href: '/payable-aging-summary'
href: '/financial-reports/payable-aging-summary'
}
],
},
{
text: <T id={'expenses'} />,
icon: 'receipt',
iconSize: 18,
children: [
{
text: <T id={'expenses'}/>,
href: '/expenses/new',
},
{
text: <T id={'expenses_list'}/>,
href: '/expenses-list',
},
],
},
{
text: <T id={'customers'} />,
icon: 'receipt',
iconSize: 18,
children: [
{
text: <T id={'customers'} />,
// href: '/',
},
{
text: <T id={'new_customers'} />,
href: '/customers/new',
text: <T id={'new_expense'}/>,
href: '/expenses/new',
},
],
},

2
client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -97,6 +97,7 @@ function MakeJournalEntriesForm({
is: (credit, debit) => credit || debit,
then: Yup.number().required(),
}),
contact_id: Yup.number().nullable(),
note: Yup.string().nullable(),
}),
),
@@ -114,6 +115,7 @@ function MakeJournalEntriesForm({
const defaultEntry = useMemo(
() => ({
account_id: null,
contact_id: null,
credit: 0,
debit: 0,
note: '',

10
client/src/containers/Accounting/MakeJournalEntriesHeader.js
View File

@@ -30,7 +30,7 @@ export default function MakeJournalEntriesHeader({
return (
<div class="make-journal-entries__header">
<Row>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={<T id={'journal_number'}/>}
labelInfo={infoIcon}
@@ -46,7 +46,7 @@ export default function MakeJournalEntriesHeader({
</FormGroup>
</Col>
<Col sm={2}>
<Col width={220}>
<FormGroup
label={<T id={'date'}/>}
intent={(errors.date && touched.date) && Intent.DANGER}
@@ -61,7 +61,7 @@ export default function MakeJournalEntriesHeader({
</FormGroup>
</Col>
<Col sm={4}>
<Col width={400}>
<FormGroup
label={<T id={'description'}/>}
className={'form-group--description'}
@@ -78,7 +78,7 @@ export default function MakeJournalEntriesHeader({
</Row>
<Row>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={<T id={'reference'}/>}
labelInfo={infoIcon}
@@ -94,7 +94,7 @@ export default function MakeJournalEntriesHeader({
</FormGroup>
</Col>
<Col sm={4}>
<Col width={220}>
<CurrenciesSelectList />
</Col>
</Row>

20
client/src/containers/Accounting/MakeJournalEntriesPage.js
View File

@@ -1,9 +1,11 @@
import React, { useCallback } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import MakeJournalEntriesForm from './MakeJournalEntriesForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
@@ -11,8 +13,14 @@ import {compose} from 'utils';
function MakeJournalEntriesPage({
requestFetchManualJournal,
// #withCustomersActions
requestFetchCustomers,
// #withAccountsActions
requestFetchAccounts,
// #withManualJournalActions
requestFetchManualJournal,
}) {
const history = useHistory();
const { id } = useParams();
@@ -20,6 +28,9 @@ function MakeJournalEntriesPage({
const fetchAccounts = useQuery('accounts-list',
(key) => requestFetchAccounts());
const fetchCustomers = useQuery('customers-list',
(key) => requestFetchCustomers());
const fetchJournal = useQuery(
id && ['manual-journal', id],
(key, journalId) => requestFetchManualJournal(journalId));
@@ -35,7 +46,11 @@ function MakeJournalEntriesPage({
return (
<DashboardInsider
loading={fetchJournal.isFetching || fetchAccounts.isFetching}
loading={
fetchJournal.isFetching ||
fetchAccounts.isFetching ||
fetchCustomers.isFetching
}
name={'make-journal-page'}>
<MakeJournalEntriesForm
onFormSubmit={handleFormSubmit}
@@ -47,5 +62,6 @@ function MakeJournalEntriesPage({
export default compose(
withAccountsActions,
withCustomersActions,
withManualJournalsActions,
)(MakeJournalEntriesPage);

27
client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -1,17 +1,20 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { omit } from 'lodash';
import DataTable from 'components/DataTable';
import Icon from 'components/Icon';
import { Hint } from 'components';
import { compose, formattedAmount } from 'utils';
import {
AccountsListFieldCell,
MoneyFieldCell,
InputGroupCell,
ContactsListFieldCell,
} from 'components/DataTableCells';
import { omit } from 'lodash';
import withAccounts from 'containers/Accounts/withAccounts';
import withCustomers from 'containers/Customers/withCustomers';
// Actions cell renderer.
const ActionsCellRenderer = ({
@@ -73,6 +76,9 @@ const NoteCellRenderer = (chainedComponent) => (props) => {
* Make journal entries table component.
*/
function MakeJournalEntriesTable({
// #withCustomers
customers,
// #withAccounts
accounts,
@@ -142,6 +148,7 @@ function MakeJournalEntriesTable({
width: 40,
disableResizing: true,
disableSortBy: true,
sticky: 'left',
},
{
Header: formatMessage({ id: 'account' }),
@@ -171,6 +178,16 @@ function MakeJournalEntriesTable({
disableResizing: true,
width: 150,
},
{
Header: (<><T id={'contact'} /><Hint /></>),
id: 'contact_id',
accessor: 'contact_id',
Cell: NoteCellRenderer(ContactsListFieldCell),
className: 'contact',
disableResizing: true,
disableSortBy: true,
width: 180,
},
{
Header: formatMessage({ id: 'note' }),
accessor: 'note',
@@ -216,6 +233,11 @@ function MakeJournalEntriesTable({
errors: errors.entries || [],
updateData: handleUpdateData,
removeRow: handleRemoveRow,
contacts: [
...customers.map((customer) => ({
...customer, contact_type: 'customer',
})),
],
}}
/>
@@ -244,4 +266,7 @@ export default compose(
withAccounts(({ accounts }) => ({
accounts,
})),
withCustomers(({ customersItems }) => ({
customers: customersItems,
})),
)(MakeJournalEntriesTable);

1
client/src/containers/Customers/withCustomers.js
View File

@@ -7,6 +7,7 @@ export default (mapState) => {
const mapped = {
customersViews: getResourceViews(state, 'customers'),
customersItems: Object.values(state.customers.items),
customers: getCustomersItems(state, state.customers.currentViewId),
customersLoading: state.customers.loading,
customerErrors: state.customers.errors,

14
client/src/containers/Expenses/ExpenseDataTable.js
View File

@@ -121,6 +121,17 @@ function ExpenseDataTable({
[handleEditExpense, handleDeleteExpense, handlePublishExpense],
);
const expenseAccountAccessor = (expense) => {
if (expense.categories.length === 1) {
return expense.categories[0].expense_account.name;
} else if (expense.categories.length > 1) {
const mutliCategories = expense.categories.map(category =>
(<div>- {category.expense_account.name} ${ category.amount }</div>)
);
return <Tooltip content={mutliCategories}>{ '- Multi Categories -' }</Tooltip>;
}
}
const columns = useMemo(
() => [
{
@@ -155,11 +166,10 @@ function ExpenseDataTable({
{
id: 'expense_account_id',
Header: formatMessage({ id: 'expense_account' }),
accessor:'expense_account_id',
accessor: expenseAccountAccessor,
width: 150,
className: 'expense_account',
},
{
id: 'publish',
Header: formatMessage({ id: 'publish' }),

50
client/src/containers/Expenses/ExpenseForm.js
View File

@@ -12,10 +12,11 @@ import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import { useQuery } from 'react-query';
import { Col, Row } from 'react-grid-system';
import ExpenseFormHeader from './ExpenseFormHeader';
import ExpenseTable from './ExpenseTable';
import ExpenseFooter from './ExpenseFooter';
import ExpenseFloatingFooter from './ExpenseFooter';
import withExpensesActions from 'containers/Expenses/withExpensesActions';
import withExpneseDetail from 'containers/Expenses/withExpenseDetail';
@@ -76,11 +77,11 @@ function ExpenseForm({
useEffect(() => {
if (expenseDetail && expenseDetail.id) {
changePageTitle(formatMessage({ id: 'edit_expense' }));
changePageSubtitle(`No. ${expenseDetail.payment_account_id}`);
// changePageSubtitle(`No. ${expenseDetail.payment_account_id}`);
} else {
changePageTitle(formatMessage({ id: 'new_expense' }));
}
// @todo not functions just states.
// @todo not functions just states.
}, [changePageTitle, changePageSubtitle, expenseDetail, formatMessage]);
const validationSchema = Yup.object().shape({
@@ -137,7 +138,6 @@ function ExpenseForm({
reference_no: '',
currency_code: '',
categories: [
// @todo @mohamed index
defaultCategory,
defaultCategory,
defaultCategory,
@@ -154,7 +154,8 @@ function ExpenseForm({
...pick(expenseDetail, Object.keys(defaultInitialValues)),
categories: expenseDetail.categories.map((category) => ({
...pick(category, Object.keys(defaultCategory)),
})),
}),
),
}
: {
...defaultInitialValues,
@@ -257,7 +258,7 @@ function ExpenseForm({
},
});
console.log(formik.errors);
console.log(formik.values, 'VALUES');
const handleSubmitClick = useCallback(
(payload) => {
@@ -298,29 +299,32 @@ function ExpenseForm({
defaultRow={defaultCategory}
/>
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
>
<TextArea
growVertically={true}
large={true}
{...formik.getFieldProps('description')}
/>
</FormGroup>
<div class="expense-form-footer">
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
>
<TextArea
growVertically={true}
large={true}
{...formik.getFieldProps('description')}
/>
</FormGroup>
<ExpenseFooter
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</div>
<ExpenseFloatingFooter
formik={formik}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>
</form>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</div>
);
}

24
client/src/containers/Expenses/ExpenseFormHeader.js
View File

@@ -117,7 +117,7 @@ function ExpenseFormHeader({
return (
<div className={'dashboard__insider--expense-form__header'}>
<Row>
<Col sm={3.5}>
<Col width={300}>
<FormGroup
label={<T id={'beneficiary'} />}
className={classNames('form-group--select-list', Classes.FILL)}
@@ -141,7 +141,8 @@ function ExpenseFormHeader({
/>
</FormGroup>
</Col>
<Col sm={3}>
<Col width={400}>
<FormGroup
label={<T id={'payment_account'} />}
className={classNames(
@@ -177,8 +178,9 @@ function ExpenseFormHeader({
</FormGroup>
</Col>
</Row>
<Row>
<Col sm={3.5}>
<Col width={300}>
<FormGroup
label={<T id={'payment_date'} />}
labelInfo={infoIcon}
@@ -189,17 +191,17 @@ function ExpenseFormHeader({
helperText={
<ErrorMessage name="payment_date" {...{ errors, touched }} />
}
minimal={true}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</Col>
<Col sm={2}>
<Col width={200}>
<FormGroup
label={<T id={'currency'} />}
className={classNames(
@@ -223,23 +225,25 @@ function ExpenseFormHeader({
onItemSelect={onItemsSelect('currency_code')}
selectedItem={values.currency_code}
selectedItemProp={'currency_code'}
defaultText={<T id={'select_currency_code'} />}
defaultText={<T id={'select_currency'} />}
labelProp={'currency_code'}
/>
</FormGroup>
</Col>
<Col sm={3}>
<Col width={200}>
<FormGroup
label={<T id={'ref_no'} />}
className={'form-group--ref_no'}
className={classNames(
'form-group--ref_no',
Classes.FILL,
)}
intent={
errors.reference_no && touched.reference_no && Intent.DANGER
}
helperText={
<ErrorMessage name="reference_no" {...{ errors, touched }} />
}
minimal={true}
>
<InputGroup
intent={

27
client/src/containers/Expenses/ExpenseTable.js
View File

@@ -1,9 +1,10 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DataTable from 'components/DataTable';
import Icon from 'components/Icon';
import { Hint } from 'components';
import { compose, formattedAmount } from 'utils';
import {
AccountsListFieldCell,
@@ -88,14 +89,16 @@ function ExpenseTable({
payload.removeRow(index);
};
return (
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
/>
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
/>
</Tooltip>
);
};
@@ -144,8 +147,7 @@ function ExpenseTable({
disableSortBy: true,
},
{
// @todo Add hint component after the header label.
Header: formatMessage({ id: 'expense_category' }),
Header: (<>{ formatMessage({ id: 'expense_category' }) }<Hint /></>),
id: 'expense_account_id',
accessor: 'expense_account_id',
Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
@@ -161,6 +163,7 @@ function ExpenseTable({
disableSortBy: true,
disableResizing: true,
width: 150,
className: 'amount',
},
{
Header: formatMessage({ id: 'description' }),
@@ -195,7 +198,6 @@ function ExpenseTable({
[rows],
);
return (
<div className={'dashboard__insider--expense-form__table'}>
<DataTable
@@ -235,5 +237,4 @@ export default compose(
withAccounts(({ accounts }) => ({
accounts,
})),
)(ExpenseTable);

16
client/src/containers/Expenses/ExpensesList.js
View File

@@ -12,6 +12,7 @@ import ExpenseDataTable from 'containers/Expenses/ExpenseDataTable';
import ExpenseActionsBar from 'containers/Expenses/ExpenseActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withExpenses from 'containers/Expenses/withExpenses';
import withExpensesActions from 'containers/Expenses/withExpensesActions';
import withViewsActions from 'containers/Views/withViewsActions';
@@ -24,6 +25,9 @@ function ExpensesList({
// #withViewsActions
requestFetchResourceViews,
// #withExpenses
expensesTableQuery,
//#withExpensesActions
requestFetchExpensesTable,
requestDeleteExpense,
@@ -44,8 +48,9 @@ function ExpensesList({
return requestFetchResourceViews('expenses');
});
const fetchExpenses = useQuery('expenses-table', () =>
requestFetchExpensesTable(),
const fetchExpenses = useQuery(
['expenses-table', expensesTableQuery],
() => requestFetchExpensesTable(),
);
useEffect(() => {
@@ -53,7 +58,6 @@ function ExpensesList({
}, [changePageTitle, formatMessage]);
// Handle delete expense click.
const handleDeleteExpense = useCallback(
(expnese) => {
setDeleteExpense(expnese);
@@ -108,8 +112,6 @@ function ExpensesList({
.catch((error) => {
setBulkDelete(false);
});
// @todo
}, [requestDeleteBulkExpenses, bulkDelete, formatMessage, selectedRowsCount]);
// Handle cancel bulk delete alert.
@@ -149,6 +151,7 @@ function ExpensesList({
message: formatMessage({ id: 'the_expense_id_has_been_published' }),
});
});
fetchExpenses.refetch();
},
[requestPublishExpense, formatMessage],
);
@@ -163,7 +166,7 @@ function ExpensesList({
return (
<DashboardInsider
loading={fetchViews.isFetching || fetchExpenses.isFetching}
loading={fetchViews.isFetching}
name={'expenses'}
>
<ExpenseActionsBar
@@ -232,5 +235,6 @@ function ExpensesList({
export default compose(
withDashboardActions,
withExpensesActions,
withExpenses(({ expensesTableQuery }) => ({ expensesTableQuery })),
withViewsActions,
)(ExpensesList);

17
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -26,7 +26,6 @@ function BalanceSheet({
fetchBalanceSheet,
// #withBalanceSheetDetail
balanceSheetLoading,
balanceSheetFilter,
// #withPreferences
@@ -41,6 +40,7 @@ function BalanceSheet({
display_columns_by: '',
none_zero: false,
});
const [refresh, setRefresh] = useState(true);
const fetchHook = useQuery(
['balance-sheet', filter],
@@ -50,7 +50,7 @@ function BalanceSheet({
// Handle fetch the data of balance sheet.
const handleFetchData = useCallback(() => {
fetchHook.refetch({ force: true });
setRefresh(true);
}, []);
useEffect(() => {
@@ -66,11 +66,18 @@ function BalanceSheet({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
fetchHook.refetch({ force: true });
setRefresh(true);
},
[setFilter],
);
useEffect(() => {
if (refresh) {
fetchHook.refetch({ force: true });
setRefresh(false);
}
}, [refresh]);
return (
<DashboardInsider>
<BalanceSheetActionsBar />
@@ -86,7 +93,6 @@ function BalanceSheet({
<div class="financial-statement__body">
<BalanceSheetTable
companyName={organizationSettings.name}
loading={balanceSheetLoading}
balanceSheetQuery={filter}
onFetchData={handleFetchData}
/>
@@ -100,8 +106,7 @@ function BalanceSheet({
export default compose(
withDashboardActions,
withBalanceSheetActions,
withBalanceSheetDetail(({ balanceSheetLoading, balanceSheetFilter }) => ({
balanceSheetLoading,
withBalanceSheetDetail(({ balanceSheetFilter }) => ({
balanceSheetFilter,
})),
withSettings,

21
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
View File

@@ -22,8 +22,12 @@ import withBalanceSheetActions from './withBalanceSheetActions';
function BalanceSheetActionsBar({
// #withBalanceSheetDetail
balanceSheetFilter,
// #withBalanceSheetActions
toggleBalanceSheetFilter,
refreshBalanceSheet
}) {
const filterDropdown = FilterDropdown({
fields: [],
@@ -34,6 +38,10 @@ function BalanceSheetActionsBar({
toggleBalanceSheetFilter();
};
const handleRecalcReport = () => {
refreshBalanceSheet(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -44,6 +52,16 @@ function BalanceSheetActionsBar({
/>
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={<T id={'recalc_report'} />}
onClick={handleRecalcReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<If condition={balanceSheetFilter}>
<Button
className={Classes.MINIMAL}
@@ -61,7 +79,6 @@ function BalanceSheetActionsBar({
icon={<Icon icon="arrow-to-bottom" />}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
@@ -75,6 +92,8 @@ function BalanceSheetActionsBar({
/>
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='print-16' iconSize={16} />}

63
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -1,6 +1,6 @@
import React, { useMemo, useCallback } from 'react';
import React, { useMemo, useCallback, useEffect } from 'react';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import { Row, Col } from 'react-grid-system';
import { Row, Col, Visible } from 'react-grid-system';
import {
Button,
FormGroup,
@@ -17,11 +17,19 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import withBalanceSheet from './withBalanceSheetDetail';
import withBalanceSheetActions from './withBalanceSheetActions';
export default function BalanceSheetHeader({
import { compose } from 'utils';
function BalanceSheetHeader({
onSubmitFilter,
pageFilter,
show
show,
refresh,
// #withBalanceSheetActions
refreshBalanceSheet
}) {
const { formatMessage } = useIntl();
@@ -49,11 +57,6 @@ export default function BalanceSheetHeader({
formik.setFieldValue('display_columns_by', item.by);
}, [formik]);
// Handle submit filter submit button.
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
const filterAccountsOptions = useMemo(() => [
{ key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
{ key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
@@ -63,24 +66,31 @@ export default function BalanceSheetHeader({
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
}, []);
const infoIcon = useMemo(() =>
(<Icon icon="info-circle" iconSize={12} />), []);
const handleAccountingBasisChange = useCallback((value) => {
formik.setFieldValue('basis', value);
}, [formik]);
// Handle submit filter submit button.
useEffect(() => {
if (refresh) {
formik.submitForm();
refreshBalanceSheet(false);
}
}, [refresh]);
return (
<FinancialStatementHeader show={show}>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FinancialStatementDateRange formik={formik} />
<Visible xl><Col width={'100%'} /></Visible>
<Col width={260} offset={10}>
<SelectDisplayColumnsBy
onItemSelect={onItemSelectDisplayColumns} />
</Col>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={<T id={'filter_accounts'} />}
className="form-group--select-list bp3-fill"
@@ -95,22 +105,19 @@ export default function BalanceSheetHeader({
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<RadiosAccountingBasis
selectedValue={formik.values.basis}
onChange={handleAccountingBasisChange} />
</Col>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter mt2'}>
<T id={'calculate_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
)
}
}
export default compose(
withBalanceSheet(({ balanceSheetRefresh }) => ({
refresh: balanceSheetRefresh,
})),
withBalanceSheetActions,
)(BalanceSheetHeader);

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

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback } from 'react';
import React, { useMemo, useEffect, useState, useCallback } from 'react';
import { connect } from 'react-redux';
import { useIntl } from 'react-intl';
@@ -20,23 +20,26 @@ function BalanceSheetTable({
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
balanceSheetLoading,
// #ownProps
onFetchData,
loading,
}) {
const { formatMessage } = useIntl();
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'account_name',
width: 100,
},
{
Header: formatMessage({ id: 'code' }),
Header: formatMessage({ id: 'account_code' }),
accessor: 'code',
className: 'code',
width: 80,
},
...(balanceSheetQuery.display_columns_type === 'total'
? [
@@ -55,7 +58,8 @@ function BalanceSheetTable({
}
return '';
},
className: 'credit',
className: 'total',
width: 80,
},
]
: []),
@@ -70,7 +74,7 @@ function BalanceSheetTable({
}
return '';
},
width: 100,
width: 80,
}))
: []),
],
@@ -89,18 +93,20 @@ function BalanceSheetTable({
return (
<FinancialSheet
name="balance-sheet"
companyName={organizationSettings.name}
sheetType={formatMessage({ id: 'balance_sheet' })}
fromDate={balanceSheetQuery.from_date}
toDate={balanceSheetQuery.to_date}
basis={balanceSheetQuery.basis}
loading={loading}
loading={balanceSheetLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={balanceSheetAccounts}
onFetchData={handleFetchData}
noInitialFetch={true}
expanded={expandedRows}
expandSubRows={true}
sticky={true}
@@ -124,10 +130,16 @@ const withBalanceSheetTable = connect(mapStateToProps);
export default compose(
withBalanceSheetTable,
withBalanceSheetDetail(
({ balanceSheetAccounts, balanceSheetColumns, balanceSheetQuery }) => ({
({
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
balanceSheetLoading,
}) => ({
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
balanceSheetLoading,
}),
),
withSettings,

11
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
View File

@@ -1,11 +1,14 @@
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import {
fetchBalanceSheet,
balanceSheetRefresh,
} from 'store/financialStatement/financialStatements.actions';
const mapDispatchToProps = (dispatch) => ({
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
toggleBalanceSheetFilter: () => dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
toggleBalanceSheetFilter: () =>
dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
refreshBalanceSheet: (refresh) => dispatch(balanceSheetRefresh(refresh)),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

1
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
View File

@@ -17,6 +17,7 @@ export default (mapState) => {
balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
balanceSheetLoading: state.financialStatements.balanceSheet.loading,
balanceSheetFilter: state.financialStatements.balanceSheet.filter,
balanceSheetRefresh: state.financialStatements.balanceSheet.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

59
client/src/containers/FinancialStatements/FinancialReports.js Normal file
View File

@@ -0,0 +1,59 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { For } from 'components';
import financialReportMenus from 'config/financialReportsMenu';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
function FinancialReportsItem({
title,
desc,
link
}) {
return (
<div class="financial-reports__item">
<Link class="title" to={link}>{ title }</Link>
<p class="desc">{ desc }</p>
</div>
);
}
function FinancialReportsSection({
sectionTitle,
reports
}) {
return (
<div class="financial-reports__section">
<div class="section-title">{ sectionTitle }</div>
<div class="financial-reports__list">
<For render={FinancialReportsItem} of={reports} />
</div>
</div>
)
}
function FinancialReports({
// #withDashboardActions
changePageTitle,
}) {
const { formatMessage } = useIntl();
useEffect(() => {
changePageTitle(formatMessage({ id: 'all_financial_reports' }));
}, [changePageTitle, formatMessage]);
return (
<div class="financial-reports">
<For render={FinancialReportsSection} of={financialReportMenus} />
</div>
);
}
export default compose(
withDashboardActions
)(FinancialReports);

119
client/src/containers/FinancialStatements/FinancialStatementDateRange.js
View File

@@ -1,96 +1,98 @@
import React, {useState, useCallback, useMemo} from 'react';
import {Row, Col} from 'react-grid-system';
import {momentFormatter} from 'utils';
import {DateInput} from '@blueprintjs/datetime';
import React, { useState, useCallback, useMemo } from 'react';
import { Row, Col } from 'react-grid-system';
import { momentFormatter } from 'utils';
import { DateInput } from '@blueprintjs/datetime';
import { useIntl } from 'react-intl';
import {
HTMLSelect,
FormGroup,
Intent,
Position,
} from '@blueprintjs/core';
import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
import Icon from 'components/Icon';
import { FieldHint } from 'components';
import {
parseDateRangeQuery
} from 'utils';
import { parseDateRangeQuery } from 'utils';
export default function FinancialStatementDateRange({
formik,
}) {
export default function FinancialStatementDateRange({ formik }) {
const intl = useIntl();
const [reportDateRange, setReportDateRange] = useState('this_year');
const dateRangeOptions = useMemo(() => [
{value: 'today', label: 'Today', },
{value: 'this_week', label: 'This Week'},
{value: 'this_month', label: 'This Month'},
{value: 'this_quarter', label: 'This Quarter'},
{value: 'this_year', label: 'This Year'},
{value: 'custom', label: 'Custom Range'},
], []);
const dateRangeOptions = useMemo(
() => [
{ value: 'today', label: 'Today' },
{ value: 'this_week', label: 'This Week' },
{ value: 'this_month', label: 'This Month' },
{ value: 'this_quarter', label: 'This Quarter' },
{ value: 'this_year', label: 'This Year' },
{ value: 'custom', label: 'Custom Range' },
],
[],
);
const handleDateChange = useCallback((name) => (date) => {
setReportDateRange('custom');
formik.setFieldValue(name, date);
}, [setReportDateRange, formik]);
const handleDateChange = useCallback(
(name) => (date) => {
setReportDateRange('custom');
formik.setFieldValue(name, date);
},
[setReportDateRange, formik],
);
// Handles date range field change.
const handleDateRangeChange = useCallback((e) => {
const value = e.target.value;
if (value !== 'custom') {
const dateRange = parseDateRangeQuery(value);
if (dateRange) {
formik.setFieldValue('from_date', dateRange.from_date);
formik.setFieldValue('to_date', dateRange.to_date);
const handleDateRangeChange = useCallback(
(e) => {
const value = e.target.value;
if (value !== 'custom') {
const dateRange = parseDateRangeQuery(value);
if (dateRange) {
formik.setFieldValue('from_date', dateRange.from_date);
formik.setFieldValue('to_date', dateRange.to_date);
}
}
}
setReportDateRange(value);
}, [formik]);
setReportDateRange(value);
},
[formik],
);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
return (
<Row>
<Col sm={3}>
<>
<Col width={260}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
label={intl.formatMessage({ id: 'report_date_range' })}
labelInfo={infoIcon}
minimal={true}
fill={true}>
fill={true}
>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={handleDateRangeChange} />
onChange={handleDateRangeChange}
/>
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
label={intl.formatMessage({ id: 'from_date' })}
labelInfo={infoIcon}
fill={true}
intent={formik.errors.from_date && Intent.DANGER}>
intent={formik.errors.from_date && Intent.DANGER}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={formik.values.from_date}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
minimal={true}
fill={true} />
fill={true}
/>
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
labelInfo={<FieldHint />}
label={intl.formatMessage({ id: 'to_date' })}
labelInfo={<FieldHint />}
fill={true}
intent={formik.errors.to_date && Intent.DANGER}>
intent={formik.errors.to_date && Intent.DANGER}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={formik.values.to_date}
@@ -98,9 +100,10 @@ export default function FinancialStatementDateRange({
popoverProps={{ position: Position.BOTTOM }}
fill={true}
minimal={true}
intent={formik.errors.to_date && Intent.DANGER} />
intent={formik.errors.to_date && Intent.DANGER}
/>
</FormGroup>
</Col>
</Row>
</>
);
}
}

18
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
View File

@@ -29,6 +29,7 @@ function GeneralLedgerActionsBar({
// #withGeneralLedgerActions
toggleGeneralLedgerSheetFilter,
refreshGeneralLedgerSheet
}) {
const filterDropdown = FilterDropdown({
fields: [],
@@ -41,6 +42,10 @@ function GeneralLedgerActionsBar({
toggleGeneralLedgerSheetFilter();
};
const handleRecalcReport = () => {
refreshGeneralLedgerSheet(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -52,6 +57,16 @@ function GeneralLedgerActionsBar({
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={'Re-calc Report'}
onClick={handleRecalcReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<If condition={generalLedgerSheetFilter}>
<Button
className={Classes.MINIMAL}
@@ -69,7 +84,6 @@ function GeneralLedgerActionsBar({
onClick={handleFilterClick}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
@@ -82,6 +96,8 @@ function GeneralLedgerActionsBar({
icon={<Icon icon="filter-16" iconSize={16} /> } />
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='print-16' iconSize={16} />}

52
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import React, { useEffect, useCallback } from 'react';
import { Button, FormGroup, Classes } from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { Row, Col, Visible } from 'react-grid-system';
import moment from 'moment';
import * as Yup from 'yup';
import { useFormik } from 'formik';
@@ -13,9 +13,12 @@ import withAccounts from 'containers/Accounts/withAccounts';
import classNames from 'classnames';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import { compose } from 'utils';
import withGeneralLedger from './withGeneralLedger';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import { compose } from 'utils';
function GeneralLedgerHeader({
onSubmitFilter,
@@ -24,8 +27,12 @@ function GeneralLedgerHeader({
// #withAccounts
accounts,
// #withGeneralLedgerActions
refreshGeneralLedgerSheet,
// #withGeneralLedger
generalLedgerSheetFilter,
generalLedgerSheetRefresh
}) {
const formik = useFormik({
enableReinitialize: true,
@@ -44,13 +51,8 @@ function GeneralLedgerHeader({
},
});
// handle submit filter submit button.
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, []);
const onAccountSelected = useCallback((selectedAccounts) => {
console.log(selectedAccounts);
}, []);
const handleAccountingBasisChange = useCallback(
@@ -59,13 +61,23 @@ function GeneralLedgerHeader({
},
[formik],
);
// handle submit filter submit button.
useEffect(() => {
if (generalLedgerSheetRefresh) {
formik.submitForm();
refreshGeneralLedgerSheet(false);
}
}, [formik, generalLedgerSheetRefresh])
return (
<FinancialStatementHeader show={generalLedgerSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FinancialStatementDateRange formik={formik} />
<Visible xl><Col width={'100%'} /></Visible>
<Col width={260}>
<FormGroup
label={<T id={'specific_accounts'} />}
className={classNames('form-group--select-list', Classes.FILL)}
@@ -77,23 +89,13 @@ function GeneralLedgerHeader({
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<RadiosAccountingBasis
onChange={handleAccountingBasisChange}
selectedValue={formik.values.basis}
/>
</Col>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter mt2'}
>
<T id={'calculate_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
);
@@ -103,7 +105,9 @@ export default compose(
withAccounts(({ accounts }) => ({
accounts,
})),
withGeneralLedger(({ generalLedgerSheetFilter }) => ({
withGeneralLedger(({ generalLedgerSheetFilter, generalLedgerSheetRefresh }) => ({
generalLedgerSheetFilter,
generalLedgerSheetRefresh,
})),
withGeneralLedgerActions,
)(GeneralLedgerHeader);

8
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
View File

@@ -1,11 +1,10 @@
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import {
getFinancialSheet,
getFinancialSheetQuery,
getFinancialSheetTableRows,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const { generalLedgerIndex } = props;
@@ -23,8 +22,11 @@ export default (mapState) => {
state.financialStatements.generalLedger.sheets,
generalLedgerIndex,
),
generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
generalLedgerSheetLoading:
state.financialStatements.generalLedger.loading,
generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
generalLedgerSheetRefresh:
state.financialStatements.generalLedger.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

2
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
View File

@@ -1,11 +1,13 @@
import {connect} from 'react-redux';
import {
fetchGeneralLedger,
refreshGeneralLedgerSheet,
} from 'store/financialStatement/financialStatements.actions';
const mapDispatchToProps = (dispatch) => ({
fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
refreshGeneralLedgerSheet: (refresh) => dispatch(refreshGeneralLedgerSheet(refresh)),
});
export default connect(null, mapDispatchToProps);

17
client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
View File

@@ -27,6 +27,7 @@ function JournalActionsBar({
// #withJournalActions
toggleJournalSheetFilter,
refreshJournalSheet,
}) {
const filterDropdown = FilterDropdown({
fields: [],
@@ -37,6 +38,10 @@ function JournalActionsBar({
toggleJournalSheetFilter();
};
const handleRecalcReport = () => {
refreshJournalSheet(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -47,6 +52,13 @@ function JournalActionsBar({
/>
<NavbarDivider />
<Button
className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
text={'Re-calc Report'}
onClick={handleRecalcReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<If condition={journalSheetFilter}>
<Button
className={Classes.MINIMAL}
@@ -64,7 +76,6 @@ function JournalActionsBar({
onClick={handleFilterToggleClick}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
@@ -78,9 +89,11 @@ function JournalActionsBar({
/>
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='print-16' iconSize={16} />}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<Button

48
client/src/containers/FinancialStatements/Journal/JournalHeader.js
View File

@@ -1,8 +1,6 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from 'react';
import { Row, Col } from 'react-grid-system';
import {
Button,
} from '@blueprintjs/core';
import { Button } from '@blueprintjs/core';
import moment from 'moment';
import { useFormik } from 'formik';
import { FormattedMessage as T } from 'react-intl';
@@ -12,24 +10,30 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withJournal from './withJournal';
import withJournalActions from './withJournalActions';
import { compose } from 'utils';
/**
* Journal sheet header.
* Journal sheet header.
*/
function JournalHeader({
pageFilter,
onSubmitFilter,
// #withJournalActions
refreshJournalSheet,
// #withJournal
journalSheetFilter,
journalSheetRefresh,
}) {
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
to_date: moment(pageFilter.to_date).toDate(),
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
@@ -41,29 +45,29 @@ function JournalHeader({
},
});
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
useEffect(() => {
if (journalSheetRefresh) {
formik.submitForm();
refreshJournalSheet(false);
}
}, [formik, journalSheetRefresh]);
return (
<FinancialStatementHeader show={journalSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
className={'button--submit-filter'}>
<T id={'run_report'} />
</Button>
</Col>
<FinancialStatementDateRange formik={formik} />
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
)(JournalHeader);
withJournal(({
journalSheetFilter,
journalSheetRefresh
}) => ({
journalSheetFilter,
journalSheetRefresh,
})),
withJournalActions,
)(JournalHeader);

1
client/src/containers/FinancialStatements/Journal/withJournal.js
View File

@@ -25,6 +25,7 @@ export default (mapState) => {
),
journalSheetLoading: state.financialStatements.journal.loading,
journalSheetFilter: state.financialStatements.journal.filter,
journalSheetRefresh: state.financialStatements.journal.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

4
client/src/containers/FinancialStatements/Journal/withJournalActions.js
View File

@@ -1,11 +1,13 @@
import {connect} from 'react-redux';
import {
fetchJournalSheet
fetchJournalSheet,
refreshJournalSheet,
} from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
refreshJournalSheet: (refresh) => dispatch(refreshJournalSheet(refresh)),
});
export default connect(null, mapDispatchToProps);

15
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
View File

@@ -19,11 +19,16 @@ function ProfitLossActionsBar({
// #withProfitLossActions
toggleProfitLossSheetFilter,
refreshProfitLossSheet,
}) {
const handleFilterClick = () => {
toggleProfitLossSheetFilter();
};
const handleRecalcReport = () => {
refreshProfitLossSheet(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -34,6 +39,16 @@ function ProfitLossActionsBar({
/>
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={'Re-calc Report'}
onClick={handleRecalcReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<If condition={profitLossSheetFilter}>
<Button
className={Classes.MINIMAL}

21
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -24,9 +24,6 @@ function ProfitLossSheet({
// #withProfitLossActions
fetchProfitLossSheet,
// #withProfitLoss
profitLossSheetLoading,
// #withPreferences
organizationSettings,
}) {
@@ -35,6 +32,7 @@ function ProfitLossSheet({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
});
const [refresh, setRefresh] = useState(true);
// Change page title of the dashboard.
useEffect(() => {
@@ -54,14 +52,21 @@ function ProfitLossSheet({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(_filter);
fetchHook.refetch({ force: true });
setRefresh(true);
}, []);
// Handle fetch data of profit/loss sheet table.
const handleFetchData = useCallback(() => {
fetchHook.refetch({ force: true });
setRefresh(true);
}, []);
useEffect(() => {
if (refresh) {
fetchHook.refetch({ force: true });
setRefresh(false);
}
}, [refresh, fetchHook]);
return (
<DashboardInsider>
<ProfitLossActionsBar />
@@ -76,8 +81,7 @@ function ProfitLossSheet({
<ProfitLossSheetTable
companyName={organizationSettings.name}
profitLossQuery={filter}
onFetchData={handleFetchData}
loading={profitLossSheetLoading} />
onFetchData={handleFetchData} />
</div>
</div>
</DashboardPageContent>
@@ -88,8 +92,5 @@ function ProfitLossSheet({
export default compose(
withDashboardActions,
withProfitLossActions,
withProfitLoss(({ profitLossSheetLoading }) => ({
profitLossSheetLoading,
})),
withSettings,
)(ProfitLossSheet);

48
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { Row, Col } from 'react-grid-system';
import React, { useCallback, useEffect } from 'react';
import { Row, Col, Visible } from 'react-grid-system';
import { Button } from '@blueprintjs/core';
import moment from 'moment';
import { useFormik } from 'formik';
@@ -11,6 +11,7 @@ import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import withProfitLoss from './withProfitLoss';
import withProfitLossActions from './withProfitLossActions';
import { compose } from 'utils';
@@ -21,6 +22,10 @@ function ProfitLossHeader({
// #withProfitLoss
profitLossSheetFilter,
profitLossSheetRefresh,
// #withProfitLossActions
refreshProfitLossSheet,
}) {
const { formatMessage } = useIntl();
const formik = useFormik({
@@ -54,10 +59,6 @@ function ProfitLossHeader({
[formik],
);
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
const handleAccountingBasisChange = useCallback(
(value) => {
formik.setFieldValue('basis', value);
@@ -65,36 +66,41 @@ function ProfitLossHeader({
[formik],
);
useEffect(() => {
if (profitLossSheetRefresh) {
formik.submitForm();
refreshProfitLossSheet(false);
}
}, [profitLossSheetRefresh]);
return (
<FinancialStatementHeader show={profitLossSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FinancialStatementDateRange formik={formik} />
<Visible xl><Col width={'100%'} /></Visible>
<Col width={260}>
<SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
</Col>
<Col sm={3}>
<Col width={260}>
<RadiosAccountingBasis
selectedValue={formik.values.basis}
onChange={handleAccountingBasisChange}
/>
</Col>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
className={'button--submit-filter mt2'}
>
<T id={'run_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
withProfitLoss(({
profitLossSheetFilter,
profitLossSheetRefresh,
}) => ({
profitLossSheetFilter,
profitLossSheetRefresh,
})),
withProfitLossActions,
)(ProfitLossHeader);

10
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -15,9 +15,9 @@ function ProfitLossSheetTable({
profitLossTableRows,
profitLossQuery,
profitLossColumns,
profitLossSheetLoading,
// #ownProps
loading,
onFetchData,
companyName,
}) {
@@ -31,7 +31,7 @@ function ProfitLossSheetTable({
className: 'name',
},
{
Header: formatMessage({ id: 'acc_code' }),
Header: formatMessage({ id: 'account_code' }),
accessor: 'code',
className: 'account_code',
},
@@ -102,7 +102,7 @@ function ProfitLossSheetTable({
fromDate={profitLossQuery.from_date}
toDate={profitLossQuery.to_date}
name="profit-loss-sheet"
loading={loading}
loading={profitLossSheetLoading}
basis={profitLossQuery.basis}
>
<DataTable
@@ -110,6 +110,7 @@ function ProfitLossSheetTable({
columns={columns}
data={profitLossTableRows}
onFetchData={handleFetchData}
noInitialFetch={true}
expanded={expandedRows}
rowClassNames={rowClassNames}
expandable={true}
@@ -132,10 +133,11 @@ const withProfitLossTable = connect(mapStateToProps);
export default compose(
withProfitLossTable,
withProfitLossDetail(
({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
({ profitLossQuery, profitLossColumns, profitLossTableRows, profitLossSheetLoading }) => ({
profitLossColumns,
profitLossQuery,
profitLossTableRows,
profitLossSheetLoading,
}),
),
)(ProfitLossSheetTable);

1
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
View File

@@ -20,6 +20,7 @@ export default (mapState) => {
profitLossSheetLoading: state.financialStatements.profitLoss.loading,
profitLossSheetFilter: state.financialStatements.profitLoss.filter,
profitLossSheetRefresh: state.financialStatements.profitLoss.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

2
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
View File

@@ -1,11 +1,13 @@
import {connect} from 'react-redux';
import {
fetchProfitLossSheet,
profitLossRefresh,
} from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
refreshProfitLossSheet: (refresh) => dispatch(profitLossRefresh(refresh)),
});
export default connect(null, mapDispatchToProps);

24
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary.js
View File

@@ -25,23 +25,25 @@ function ReceivableAgingSummarySheet({
}) {
const { formatMessage } = useIntl();
const [query, setQuery] = useState({
as_date: moment().format('YYYY-MM-DD'),
as_date: moment().endOf('day').format('YYYY-MM-DD'),
aging_before_days: 30,
aging_periods: 3,
});
const [refresh, setRefresh] = useState(true);
useEffect(() => {
changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
}, []);
const fetchSheet = useQuery(['receivable-aging-summary', query],
const fetchSheet = useQuery(
['receivable-aging-summary', query],
(key, q) => requestReceivableAgingSummary(q),
{ manual: true });
// Handle fetch the data of receivable aging summary sheet.
const handleFetchData = useCallback(() => {
fetchSheet.refetch({ force: true });
}, [fetchSheet]);
const handleFetchData = useCallback((...args) => {
setRefresh(true);
}, []);
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
@@ -49,8 +51,15 @@ function ReceivableAgingSummarySheet({
as_date: moment(filter.as_date).format('YYYY-MM-DD'),
};
setQuery(_filter);
fetchSheet.refetch({ force: true });
}, [fetchSheet]);
setRefresh(true);
}, []);
useEffect(() => {
if (refresh) {
fetchSheet.refetch({ force: true });
setRefresh(false);
}
}, [fetchSheet, refresh]);
return (
<DashboardInsider>
@@ -59,6 +68,7 @@ function ReceivableAgingSummarySheet({
<DashboardPageContent>
<FinancialStatement>
<ReceivableAgingSummaryHeader
pageFilter={query}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">

23
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryActionsBar.js
View File

@@ -23,8 +23,12 @@ import { compose } from 'utils';
function ReceivableAgingSummaryActionsBar({
toggleFilterReceivableAgingSummary,
// #withReceivableAging
receivableAgingFilter,
// #withReceivableAgingActions
toggleFilterReceivableAgingSummary,
refreshReceivableAgingSummary,
}) {
const filterDropdown = FilterDropdown({
fields: [],
@@ -35,6 +39,10 @@ function ReceivableAgingSummaryActionsBar({
toggleFilterReceivableAgingSummary();
};
const handleRecalcReport = () => {
refreshReceivableAgingSummary(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -45,6 +53,16 @@ function ReceivableAgingSummaryActionsBar({
/>
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={<T id={'recalc_report'} />}
icon={<Icon icon="refresh-16" iconSize={16} />}
onClick={handleRecalcReport}
/>
<If condition={receivableAgingFilter}>
<Button
className={Classes.MINIMAL}
@@ -62,7 +80,6 @@ function ReceivableAgingSummaryActionsBar({
icon={<Icon icon="arrow-to-bottom" />}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
@@ -76,6 +93,8 @@ function ReceivableAgingSummaryActionsBar({
/>
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='print-16' iconSize={16} />}

104
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryHeader.js
View File

@@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import { useIntl, FormattedMessage as T, } from 'react-intl';
import { useFormik } from "formik";
import React, { useCallback, useEffect } from 'react';
import { useIntl, FormattedMessage as T } from 'react-intl';
import { useFormik } from 'formik';
import { Row, Col } from 'react-grid-system';
import * as Yup from 'yup';
import {
@@ -11,22 +11,27 @@ import {
Button,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import moment from 'moment';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import {
ErrorMessage,
FieldHint,
FieldRequiredHint,
} from 'components';
import {
momentFormatter,
} from 'utils';
import { ErrorMessage, FieldHint, FieldRequiredHint } from 'components';
import { momentFormatter } from 'utils';
import withReceivableAging from './withReceivableAgingSummary';
import withReceivableAgingActions from './withReceivableAgingSummaryActions';
import { compose } from 'utils';
function ReceivableAgingSummaryHeader({
onSubmitFilter,
pageFilter,
onSubmitFilter,
receivableAgingFilter,
// #withReceivableAgingSummary
receivableAgingRefresh,
// #withReceivableAgingSummaryActions
refreshReceivableAgingSummary
}) {
const { formatMessage } = useIntl();
@@ -37,61 +42,75 @@ function ReceivableAgingSummaryHeader({
setFieldValue,
getFieldProps,
submitForm,
isSubmitting
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues: {
// as_date: new Date(),
as_date: moment(pageFilter.as_date).toDate(),
aging_before_days: 30,
aging_periods: 3,
},
validationSchema: Yup.object().shape({
as_date: Yup.date().required().label('As date'),
aging_before_days: Yup.number().required().integer().positive().label('aging_before_days'),
aging_periods: Yup.number().required().integer().positive().label('aging_periods'),
as_date: Yup.date().required().label('as_date'),
aging_before_days: Yup.number()
.required()
.integer()
.positive()
.label('aging_before_days'),
aging_periods: Yup.number()
.required()
.integer()
.positive()
.label('aging_periods'),
}),
onSubmit: (values, { setSubmitting }) => {
onSubmitFilter(values);
setSubmitting(false);
}
},
});
const handleDateChange = useCallback((name) => (date) => {
setFieldValue(name, date);
}, []);
const handleDateChange = useCallback(
(name) => (date) => {
setFieldValue(name, date);
},
[],
);
// Handle submit filter submit button.
const handleSubmitClick = useCallback(() => {
submitForm();
}, [submitForm]);
useEffect(() => {
if (receivableAgingRefresh) {
submitForm();
refreshReceivableAgingSummary(false);
}
}, [submitForm, receivableAgingRefresh]);
return (
<FinancialStatementHeader show={receivableAgingFilter}>
<Row>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={formatMessage({'id': 'as_date'})}
label={formatMessage({ id: 'as_date' })}
labelInfo={<FieldHint />}
fill={true}
intent={errors.as_date && Intent.DANGER}>
intent={errors.as_date && Intent.DANGER}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
// value={values.as_date}
value={values.as_date}
onChange={handleDateChange('as_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true}
fill={true} />
fill={true}
/>
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-before-days'}
intent={errors.aging_before_days && Intent.DANGER}
helperText={<ErrorMessage name="aging_before_days" {...{ errors, touched }} />}
>
<InputGroup
medium={true}
@@ -101,13 +120,12 @@ function ReceivableAgingSummaryHeader({
</FormGroup>
</Col>
<Col sm={3}>
<Col width={260}>
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-periods'}
intent={errors.aging_before_days && Intent.DANGER}
helperText={<ErrorMessage name="aging_periods" {...{ errors, touched }} />}
>
<InputGroup
medium={true}
@@ -117,24 +135,14 @@ function ReceivableAgingSummaryHeader({
</FormGroup>
</Col>
</Row>
<Row>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={isSubmitting}
className={'button--submit-filter'}>
<T id={'calculate_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withReceivableAging(({ receivableAgingSummaryFilter }) => ({
withReceivableAgingActions,
withReceivableAging(({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
receivableAgingRefresh: receivableAgingSummaryRefresh
})),
)(ReceivableAgingSummaryHeader);
)(ReceivableAgingSummaryHeader);

35
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryTable.js
View File

@@ -15,19 +15,18 @@ function ReceivableAgingSummaryTable({
organizationSettings,
// #withReceivableAgingSummary
receviableAgingRows = [],
receivableAgingRows,
receivableAgingLoading,
receivableAgingColumns,
// #ownProps
receivableAgingSummaryQuery,
onFetchData,
}) {
const { formatMessage } = useIntl();
const agingColumns = useMemo(() => {
return receivableAgingColumns.map((agingColumn) => {
return `${agingColumn.before_days} - ${agingColumn.to_days || '<'}`;
return `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`;
});
}, [receivableAgingColumns]);
@@ -36,25 +35,38 @@ function ReceivableAgingSummaryTable({
Header: (<T id={'customer_name'} />),
accessor: 'customer_name',
className: 'customer_name',
sticky: 'left',
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
id: `asd-${index}`,
accessor: (row) => {
const amount = row[`aging-${index}`];
if (row.rowType === 'total') {
return <Money amount={amount} currency={'USD'} />
}
return amount > 0 ? amount : '';
},
})),
{
Header: (<T id={'total'} />),
accessor: 'total',
id: 'total',
accessor: (row) => {
return <Money amount={row.total} currency={'USD'} />;
},
className: 'total',
},
]), [agingColumns]);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, [onFetchData]);
}, []);
return (
<FinancialSheet
companyName={organizationSettings.name}
name={'receivable-aging-summary'}
sheetType={formatMessage({ id: 'receivable_aging_summary' })}
asDate={new Date()}
loading={receivableAgingLoading}>
@@ -62,8 +74,10 @@ function ReceivableAgingSummaryTable({
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={receviableAgingRows}
data={receivableAgingRows}
rowClassNames={rowClassNames}
onFetchData={handleFetchData}
noInitialFetch={true}
sticky={true}
/>
</FinancialSheet>
@@ -75,8 +89,11 @@ export default compose(
withReceivableAgingSummaryTable,
withReceivableAgingSummary(({
receivableAgingSummaryLoading,
receivableAgingSummaryColumns }) => ({
receivableAgingSummaryColumns,
receivableAgingSummaryRows,
}) => ({
receivableAgingLoading: receivableAgingSummaryLoading,
receivableAgingColumns: receivableAgingSummaryColumns
receivableAgingColumns: receivableAgingSummaryColumns,
receivableAgingRows: receivableAgingSummaryRows,
})),
)(ReceivableAgingSummaryTable);

7
client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummary.js
View File

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import {
getFinancialSheet,
getFinancialSheetColumns,
getFinancialSheetTableRows,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
@@ -17,10 +18,16 @@ export default (mapState) => {
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryIndex,
),
receivableAgingSummaryRows: getFinancialSheetTableRows(
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryIndex,
),
receivableAgingSummaryLoading:
state.financialStatements.receivableAgingSummary.loading,
receivableAgingSummaryFilter:
state.financialStatements.receivableAgingSummary.filter,
receivableAgingSummaryRefresh:
state.financialStatements.receivableAgingSummary.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

14
client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryActions.js
View File

@@ -1,12 +1,18 @@
import { connect } from 'react-redux';
import { fetchReceivableAgingSummary } from 'store/financialStatement/financialStatements.actions';
import {
fetchReceivableAgingSummary,
receivableAgingSummaryRefresh,
} from 'store/financialStatement/financialStatements.actions';
const mapActionsToProps = (dispatch) => ({
requestReceivableAgingSummary: (query) =>
dispatch(fetchReceivableAgingSummary({ query })),
toggleFilterReceivableAgingSummary: () => dispatch({
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
toggleFilterReceivableAgingSummary: () =>
dispatch({
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
refreshReceivableAgingSummary: (refresh) =>
dispatch(receivableAgingSummaryRefresh(refresh)),
});
export default connect(null, mapActionsToProps);

15
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
View File

@@ -20,12 +20,17 @@ function TrialBalanceActionsBar({
// #withTrialBalanceActions
toggleTrialBalanceFilter,
refreshTrialBalance,
}) {
const handleFilterToggleClick = () => {
toggleTrialBalanceFilter();
};
const handleRecalcReport = () => {
refreshTrialBalance(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -36,6 +41,16 @@ function TrialBalanceActionsBar({
/>
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={'Re-calc Report'}
onClick={handleRecalcReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<If condition={trialBalanceSheetFilter}>
<Button
className={Classes.MINIMAL}

21
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -13,10 +13,8 @@ import { compose } from 'utils';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withTrialBalanceActions from './withTrialBalanceActions';
import withTrialBalance from './withTrialBalance';
import withSettings from 'containers/Settings/withSettings';
function TrialBalanceSheet({
// #withDashboardActions
changePageTitle,
@@ -24,9 +22,6 @@ function TrialBalanceSheet({
// #withTrialBalanceActions
fetchTrialBalanceSheet,
// #withTrialBalance
trialBalanceSheetLoading,
// #withPreferences
organizationSettings,
}) {
@@ -36,6 +31,7 @@ function TrialBalanceSheet({
basis: 'accural',
none_zero: false,
});
const [refresh, setRefresh] = useState(true);
const { formatMessage } = useIntl();
const fetchHook = useQuery(
@@ -46,7 +42,7 @@ function TrialBalanceSheet({
// handle fetch data of trial balance table.
const handleFetchData = useCallback(() => {
fetchHook.refetch({ force: true });
setRefresh(true);
}, []);
// Change page title of the dashboard.
@@ -62,11 +58,18 @@ function TrialBalanceSheet({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
fetchHook.refetch({ force: true });
setRefresh(true);
},
[fetchHook],
);
useEffect(() => {
if (refresh) {
fetchHook.refetch({ force: true });
setRefresh(false);
}
}, [refresh, fetchHook.refetch]);
return (
<DashboardInsider>
<TrialBalanceActionsBar />
@@ -83,7 +86,6 @@ function TrialBalanceSheet({
companyName={organizationSettings.name}
trialBalanceQuery={filter}
onFetchData={handleFetchData}
loading={trialBalanceSheetLoading}
/>
</div>
</div>
@@ -95,8 +97,5 @@ function TrialBalanceSheet({
export default compose(
withDashboardActions,
withTrialBalanceActions,
withTrialBalance(({ trialBalanceSheetLoading }) => ({
trialBalanceSheetLoading,
})),
withSettings,
)(TrialBalanceSheet);

37
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { useEffect } from 'react';
import * as Yup from 'yup';
import moment from 'moment';
import { Row, Col } from 'react-grid-system';
@@ -9,6 +9,7 @@ import { Button } from "@blueprintjs/core";
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import withTrialBalance from './withTrialBalance';
import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from 'utils';
@@ -19,6 +20,10 @@ function TrialBalanceSheetHeader({
// #withTrialBalance
trialBalanceSheetFilter,
trialBalanceSheetRefresh,
// #withTrialBalanceActions
refreshTrialBalance,
}) {
const { formatMessage } = useIntl();
const formik = useFormik({
@@ -38,29 +43,29 @@ function TrialBalanceSheetHeader({
}
});
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
useEffect(() => {
if (trialBalanceSheetRefresh) {
formik.submitForm();
refreshTrialBalance(false);
}
}, [formik, trialBalanceSheetRefresh]);
return (
<FinancialStatementHeader show={trialBalanceSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
<T id={'run_report'} />
</Button>
</Col>
<FinancialStatementDateRange formik={formik} />
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
withTrialBalance(({
trialBalanceSheetFilter,
trialBalanceSheetRefresh,
}) => ({
trialBalanceSheetFilter,
trialBalanceSheetRefresh
})),
withTrialBalanceActions,
)(TrialBalanceSheetHeader);

29
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
View File

@@ -14,13 +14,13 @@ import { compose } from 'utils';
function TrialBalanceSheetTable({
// #withTrialBalanceDetail
trialBalanceAccounts,
trialBalanceSheetLoading,
// #withTrialBalanceTable
trialBalanceIndex,
trialBalanceQuery,
onFetchData,
loading,
companyName,
}) {
const { formatMessage } = useIntl();
@@ -31,30 +31,41 @@ function TrialBalanceSheetTable({
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'name',
minWidth: 150,
maxWidth: 150,
width: 150,
},
{
Header: formatMessage({ id: 'code' }),
accessor: 'code',
className: 'code',
width: 120,
minWidth: 80,
maxWidth: 80,
width: 80,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: (r) => <Money amount={r.credit} currency="USD" />,
className: 'credit',
width: 120,
minWidth: 95,
maxWidth: 95,
width: 95,
},
{
Header: formatMessage({ id: 'debit' }),
accessor: (r) => <Money amount={r.debit} currency="USD" />,
className: 'debit',
width: 120,
minWidth: 95,
maxWidth: 95,
width: 95,
},
{
Header: formatMessage({ id: 'balance' }),
accessor: (r) => <Money amount={r.balance} currency="USD" />,
className: 'balance',
width: 120,
minWidth: 95,
maxWidth: 95,
width: 95,
},
],
[formatMessage],
@@ -71,7 +82,7 @@ function TrialBalanceSheetTable({
fromDate={trialBalanceQuery.from_date}
toDate={trialBalanceQuery.to_date}
name="trial-balance"
loading={loading}
loading={trialBalanceSheetLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
@@ -100,7 +111,11 @@ const withTrialBalanceTable = connect(mapStateToProps);
export default compose(
withTrialBalanceTable,
withTrialBalance(({ trialBalanceAccounts }) => ({
withTrialBalance(({
trialBalanceAccounts,
trialBalanceSheetLoading,
}) => ({
trialBalanceAccounts,
trialBalanceSheetLoading
})),
)(TrialBalanceSheetTable);

1
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
View File

@@ -19,6 +19,7 @@ export default (mapState) => {
),
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

4
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
View File

@@ -1,11 +1,13 @@
import {connect} from 'react-redux';
import {
fetchTrialBalanceSheet
fetchTrialBalanceSheet,
trialBalanceRefresh,
} from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
});
export default connect(null, mapDispatchToProps);

13
client/src/lang/en/index.js
View File

@@ -260,6 +260,7 @@ export default {
sales: 'Sales',
purchases: 'Purchases',
financial_reports: 'Financial Reports',
all_financial_reports: 'All Financial Reports',
balance_sheet: 'Balance Sheet',
trial_balance_sheet: 'Trial Balance Sheet',
journal: 'Journal',
@@ -347,7 +348,7 @@ export default {
select_language: 'Select Language',
select_date_format: 'Select Date Format',
select_time_zone: 'Select Time Zone',
select_currency_code: 'Select Currency Code',
select_currency: 'Select Currency',
select_parent_category: 'Select Parent Category',
the_options_has_been_successfully_created:
'The options has been successfully created',
@@ -422,7 +423,7 @@ export default {
payment_account_: 'Payment account',
expense_category: 'Expense Category',
total_currency: 'Total ({currency})',
amount_currency: 'Amount({currency})',
amount_currency: 'Amount ({currency})',
publish_expense: 'Publish Expense',
edit_expense: 'Edit Expense',
delete_expense: 'Delete Expense',
@@ -459,4 +460,12 @@ export default {
display_name:'Display Name',
the_customer_has_been_successfully_created:
'The customer has been successfully created.',
select_contact: 'Select contact',
contact: 'Contact',
contacts: 'Contacts',
close_sidebar: 'Close sidebar.',
recalc_report: 'Re-calc Report',
remove_the_line: 'Remove the line',
no_results: 'No results',
all_reports: 'All Reports',
};

26
client/src/routes/dashboard.js
View File

@@ -92,7 +92,7 @@ export default [
// Financial Reports.
{
path: `/general-ledger`,
path: `/financial-reports/general-ledger`,
component: LazyLoader({
loader: () =>
import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
@@ -100,7 +100,7 @@ export default [
breadcrumb: 'General Ledger',
},
{
path: `/balance-sheet`,
path: `/financial-reports/balance-sheet`,
component: LazyLoader({
loader: () =>
import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
@@ -108,42 +108,49 @@ export default [
breadcrumb: 'Balance Sheet',
},
{
path: `/trial-balance-sheet`,
path: `/financial-reports/trial-balance-sheet`,
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
),
breadcrumb: 'Trial Balance Sheet',
}),
breadcrumb: 'Trial Balance Sheet',
},
{
path: `/profit-loss-sheet`,
path: `/financial-reports/profit-loss-sheet`,
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'
),
breadcrumb: 'Profit Loss Sheet',
}),
breadcrumb: 'Profit Loss Sheet',
},
{
path: '/receivable-aging-summary',
path: '/financial-reports/receivable-aging-summary',
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary'
),
breadcrumb: 'Receivable Aging Summary',
}),
breadcrumb: 'Receivable Aging Summary',
},
{
path: `/journal-sheet`,
path: `/financial-reports/journal-sheet`,
component: LazyLoader({
loader: () => import('containers/FinancialStatements/Journal/Journal'),
}),
breadcrumb: 'Journal Sheet',
},
{
path: '/financial-reports',
component: LazyLoader({
loader: () => import('containers/FinancialStatements/FinancialReports'),
}),
breadcrumb: 'Financial Reports',
},
{
path: `/ExchangeRates`,
component: LazyLoader({
@@ -158,7 +165,6 @@ export default [
loader: () => import('containers/Expenses/Expenses'),
}),
breadcrumb: 'Expenses',
},
{
path: `/expenses/:id/edit`,

12
client/src/static/json/icons.js
View File

@@ -5,12 +5,6 @@ export default {
],
viewBox: '0 0 640 512',
},
homepage: {
path: [
'M4,7.5H7.5V4H4V7.5ZM9.25,18h3.5V14.5H9.25V18ZM4,18H7.5V14.5H4V18Zm0-5.25H7.5V9.25H4v3.5Zm5.25,0h3.5V9.25H9.25v3.5ZM14.5,4V7.5H18V4ZM9.25,7.5h3.5V4H9.25V7.5Zm5.25,5.25H18V9.25H14.5v3.5Zm0,5.25H18V14.5H14.5V18Z',
],
viewBox: '0 0 20 20',
},
university: {
path: [
'M472 440h-8v-56c0-13.255-10.745-24-24-24h-16V208h-48v152h-48V208h-48v152h-48V208h-48v152h-48V208H88v152H72c-13.255 0-24 10.745-24 24v56h-8c-13.255 0-24 10.745-24 24v16a8 8 0 0 0 8 8h464a8 8 0 0 0 8-8v-16c0-13.255-10.745-24-24-24zm-56 0H96v-32h320v32zm72.267-322.942L271.179 26.463a48.004 48.004 0 0 0-30.358 0L23.733 117.058A11.999 11.999 0 0 0 16 128.274V156c0 6.627 5.373 12 12 12h20v12c0 6.627 5.373 12 12 12h392c6.627 0 12-5.373 12-12v-12h20c6.627 0 12-5.373 12-12v-27.726c0-4.982-3.077-9.445-7.733-11.216zM64 144l192-72 192 72H64z',
@@ -263,4 +257,10 @@ export default {
],
viewBox: '0 0 16 16',
},
'refresh-16': {
path: [
'M13.645,2.35A8.0014,8.0014,0,1,0,15.725,10h-2.08a5.9972,5.9972,0,1,1-5.65-8,5.9149,5.9149,0,0,1,4.22,1.78L8.995,7h7V0Z',
],
viewBox: '0 0 16 16',
},
};

2
client/src/store/expenses/expenses.reducer.js
View File

@@ -89,5 +89,5 @@ const reducer = createReducer(initialState, {
export default createTableQueryReducers('expenses', reducer);
export const getExpenseById = (state, id) => {
return state.expenses.items[id] || {};
return state.expenses.items[id];
};

42
client/src/store/financialStatement/financialStatements.actions.js
View File

@@ -1,6 +1,13 @@
import ApiService from "services/ApiService";
import t from 'store/types';
export const balanceSheetRefresh = (refresh) => {
return dispatch => dispatch({
type: 'BALANCE_SHEET_REFRESH',
payload: { refresh },
});
};
export const fetchGeneralLedger = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
@@ -21,6 +28,13 @@ export const fetchGeneralLedger = ({ query }) => {
});
};
export const refreshGeneralLedgerSheet = (refresh) => {
return (dispatch) => dispatch({
type: t.GENERAL_LEDGER_REFRESH,
payload: { refresh },
});
};
export const fetchBalanceSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
@@ -65,6 +79,13 @@ export const fetchTrialBalanceSheet = ({ query }) => {
})
};
export const trialBalanceRefresh = (refresh) => {
return (dispatch) => dispatch({
type: t.TRIAL_BALANCE_REFRESH,
payload: { refresh },
});
};
export const fetchProfitLossSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
@@ -87,6 +108,13 @@ export const fetchProfitLossSheet = ({ query }) => {
})
};
export const profitLossRefresh = (refresh) => {
return dispatch => dispatch({
type: t.PROFIT_LOSS_REFRESH,
payload: { refresh },
});
}
export const fetchJournalSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
@@ -108,6 +136,13 @@ export const fetchJournalSheet = ({ query }) => {
});
};
export const refreshJournalSheet = (refresh) => {
return dispatch => dispatch({
type: t.JOURNAL_SHEET_REFRESH,
payload: { refresh },
});
}
export const fetchReceivableAgingSummary = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
@@ -139,4 +174,11 @@ export const fetchReceivableAgingSummary = ({ query }) => {
reject(error);
})
});
}
export const receivableAgingSummaryRefresh = (refresh) => {
return (dispatch) => dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
}

73
client/src/store/financialStatement/financialStatements.reducer.js
View File

@@ -8,28 +8,32 @@ import { omit } from 'lodash';
const initialState = {
balanceSheet: {
sheets: [],
loading: false,
loading: true,
filter: true,
refresh: false,
},
trialBalance: {
sheets: [],
loading: false,
loading: true,
filter: true,
refresh: false,
},
generalLedger: {
sheets: [],
loading: false,
filter: true,
refresh: false,
},
journal: {
sheets: [],
loading: false,
tableRows: [],
filter: true,
refresh: true,
},
profitLoss: {
sheets: [],
loading: false,
loading: true,
tableRows: [],
filter: true,
},
@@ -38,6 +42,7 @@ const initialState = {
loading: false,
tableRows: [],
filter: true,
refresh: false,
},
};
@@ -88,6 +93,36 @@ const mapJournalTableRows = (journal) => {
}, []);
};
const mapContactAgingSummary = sheet => {
const rows = [];
const mapAging = (agingPeriods) => {
return agingPeriods.reduce((acc, aging, index) => {
acc[`aging-${index}`] = aging.formatted_total;
return acc;
}, {});
}
sheet.customers.forEach((customer) => {
const agingRow = mapAging(customer.aging);
rows.push({
rowType: 'customer',
customer_name: customer.customer_name,
...agingRow,
total: customer.total,
});
});
rows.push({
rowType: 'total',
customer_name: 'Total',
...mapAging(sheet.total),
total: 0,
});
return rows;
};
const mapProfitLossToTableRows = (profitLoss) => {
return [
{
@@ -152,6 +187,12 @@ export default createReducer(initialState, {
[t.BALANCE_SHEET_LOADING]: (state, action) => {
state.balanceSheet.loading = !!action.loading;
},
[t.BALANCE_SHEET_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.balanceSheet.refresh = refresh;
},
...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
[t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
@@ -173,6 +214,12 @@ export default createReducer(initialState, {
[t.TRIAL_BALANCE_SHEET_LOADING]: (state, action) => {
state.trialBalance.loading = !!action.loading;
},
[t.TRIAL_BALANCE_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.trialBalance.refresh = refresh;
},
...financialStatementFilterToggle('TRIAL_BALANCE', 'trialBalance'),
[t.JOURNAL_SHEET_SET]: (state, action) => {
@@ -196,6 +243,10 @@ export default createReducer(initialState, {
[t.JOURNAL_SHEET_LOADING]: (state, action) => {
state.journal.loading = !!action.loading;
},
[t.JOURNAL_SHEET_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.journal.refresh = !!refresh;
},
...financialStatementFilterToggle('JOURNAL', 'journal'),
[t.GENERAL_LEDGER_STATEMENT_SET]: (state, action) => {
@@ -219,6 +270,10 @@ export default createReducer(initialState, {
[t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
state.generalLedger.loading = !!action.loading;
},
[t.GENERAL_LEDGER_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.generalLedger.refresh = !!refresh;
},
...financialStatementFilterToggle('GENERAL_LEDGER', 'generalLedger'),
[t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
@@ -243,6 +298,12 @@ export default createReducer(initialState, {
[t.PROFIT_LOSS_SHEET_LOADING]: (state, action) => {
state.profitLoss.loading = !!action.loading;
},
[t.PROFIT_LOSS_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.profitLoss.refresh = !!refresh;
},
...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
[t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
@@ -258,7 +319,7 @@ export default createReducer(initialState, {
query,
columns,
aging,
tableRows: aging
tableRows: mapContactAgingSummary(aging)
};
if (index !== -1) {
state.receivableAgingSummary[index] = receivableSheet;
@@ -266,5 +327,9 @@ export default createReducer(initialState, {
state.receivableAgingSummary.sheets.push(receivableSheet);
}
},
[t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.receivableAgingSummary.refresh = !!refresh;
},
...financialStatementFilterToggle('RECEIVABLE_AGING_SUMMARY', 'receivableAgingSummary'),
});

7
client/src/store/financialStatement/financialStatements.types.js
View File

@@ -3,19 +3,26 @@
export default {
GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
GENERAL_LEDGER_REFRESH: 'GENERAL_LEDGER_REFRESH',
BALANCE_SHEET_STATEMENT_SET: 'BALANCE_SHEET_STATEMENT_SET',
BALANCE_SHEET_LOADING: 'BALANCE_SHEET_LOADING',
BALANCE_SHEET_REFRESH: 'BALANCE_SHEET_REFRESH',
TRAIL_BALANCE_STATEMENT_SET: 'TRAIL_BALANCE_STATEMENT_SET',
TRIAL_BALANCE_SHEET_LOADING: 'TRIAL_BALANCE_SHEET_LOADING',
TRIAL_BALANCE_REFRESH: 'TRIAL_BALANCE_REFRESH',
JOURNAL_SHEET_SET: 'JOURNAL_SHEET_SET',
JOURNAL_SHEET_LOADING: 'JOURNAL_SHEET_LOADING',
JOURNAL_SHEET_REFRESH: 'JOURNAL_SHEET_REFRESH',
PROFIT_LOSS_SHEET_SET: 'PROFIT_LOSS_SHEET_SET',
PROFIT_LOSS_SHEET_LOADING: 'PROFIT_LOSS_SHEET_LOADING',
PROFIT_LOSS_REFRESH: 'PROFIT_LOSS_REFRESH',
RECEIVABLE_AGING_SUMMARY_LOADING: 'RECEIVABLE_AGING_SUMMARY_LOADING',
RECEIVABLE_AGING_SUMMARY_SET: 'RECEIVABLE_AGING_SUMMARY_SET',
RECEIVABLE_AGING_REFRECH: 'RECEIVABLE_AGING_REFRECH',
RECEIVABLE_AGING_SUMMARY_REFRESH: 'RECEIVABLE_AGING_SUMMARY_REFRESH',
}

15
client/src/style/App.scss
View File

@@ -6,6 +6,11 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
@import '@blueprintjs/core/src/common/_variables.scss';
// @import "@blueprintjs/core/src/common/colors.scss";
$blue1: #0069ff;
$blue2: #0052ff;
$blue3: rgb(0, 82, 204);
$pt-link-color: $blue3;
$pt-intent-primary: $blue1;
$menu-item-color-hover: $light-gray4;
$menu-item-color-active: $light-gray3;
@@ -118,3 +123,13 @@ body.authentication {
.bp3-datepicker-caption .bp3-html-select::after{
margin-right: 6px;
}
.hint{
color: #a1b2c5;
margin-left: 6px;
.bp3-icon{
vertical-align: middle;
}
}

8
client/src/style/components/data-table.scss
View File

@@ -254,10 +254,16 @@
border-top: 1px solid #666;
border-bottom: 1px solid #666;
padding: 10px 0.4rem;
padding: 8px 0.4rem;
color: #222;
}
}
.tbody{
.tr .td{
border-bottom: 1px dotted #BBB;
}
}
}
}
}

19
client/src/style/objects/form.scss
View File

@@ -1,4 +1,5 @@
$form-check-input-checked-color: #fff;
$form-check-input-checked-bg-color: $blue1;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
@@ -9,7 +10,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
left: 220px;
right: 0;
background: #fff;
padding: 14px 16px;
padding: 14px 18px;
border-top: 1px solid #ececec;
.has-mini-sidebar &{
@@ -48,7 +49,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
&.#{$ns}-intent-danger{
select{
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
box-shadow: 0 0 0 0 rgba(228, 226, 226, 0),
0 0 0 0 rgba(2, 2, 2, 0),
inset 0 0 0 1px #db3737,
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
@@ -285,13 +286,13 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
}
input:checked ~ .#{$ns}-control-indicator {
background-image: escape-svg($form-check-input-checked-bg-image);
border-color: #137cbd;
background-color: #137cbd;
border-color: $form-check-input-checked-bg-color;
background-color: $form-check-input-checked-bg-color;
}
input:indeterminate ~ .#{$ns}-control-indicator {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
border-color: #137cbd;
background-color: #137cbd;
border-color: $form-check-input-checked-bg-color;
background-color: $form-check-input-checked-bg-color;
box-shadow: 0 0 0 0 transparent;
}
}
@@ -314,8 +315,6 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
Styleguide radio
*/
&.#{$ns}-radio {
.#{$ns}-control-indicator{
border: 2px solid #cecece;
@@ -326,10 +325,10 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
}
input:checked ~ .#{$ns}-control-indicator{
border-color: #137cbd;
border-color: $form-check-input-checked-bg-color;
&::before {
background-image: radial-gradient(#137cbd 40%, transparent 40%);
background-image: radial-gradient($form-check-input-checked-bg-color 40%, transparent 40%);
}
}

17
client/src/style/pages/dashboard.scss
View File

@@ -68,8 +68,8 @@
background-size: contain;
background-color: #EED1F2;
border-radius: 50%;
height: 30px;
width: 30px;
height: 35px;
width: 35px;
.user-text {
font-size: 12px;
@@ -156,6 +156,19 @@
background: rgba(219, 55, 55, 0.1);
}
}
&.button--blue-highlight{
background-color: #ebfaff;
&:hover,
&:focus{
background-color: darken(#ebfaff, 2.5%);
}
}
&.button--gray-highlight{
background-color: rgba(127, 189, 255, 0.1);
}
}
.button--table-views{

93
client/src/style/pages/expense-form.scss
View File

@@ -9,70 +9,49 @@
width: 100%;
.bp3-form-group {
.bp3-label {
margin-bottom: 15px;
margin-right: 15px;
font-weight: 500;
font-size: 13px;
color: #444;
}
.bp3-form-content {
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
min-width: 300px;
min-height: 32px;
background: #fff;
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
}
}
.bp3-input-group {
display: block;
position: relative;
width: 300px;
}
&.form-group--ref_no {
.bp3-input-group .bp3-input {
position: relative;
width: 180px;
}
}
}
.form-group--payment_account {
.bp3-form-group {
display: flex;
flex-direction: column;
margin: 0 0 15px;
}
.bp3-form-content {
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
min-width: 380px;
min-height: 32px;
background: #fff;
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
}
}
}
.form-group--currency {
.bp3-form-group {
display: flex;
flex-direction: column;
margin: 0 0 15px;
}
.bp3-form-content {
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
min-width: 180px;
min-height: 32px;
background: #fff;
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
}
}
}
}
&__table {
padding: 15px 25px 0;
padding: 15px 15px 0;
.bp3-form-group {
margin-bottom: 0;
@@ -160,19 +139,9 @@
}
&.row--total {
.account.td,
.debit.td,
.credit.td {
> span {
padding-top: 6px;
}
}
.debit.td,
.credit.td {
> span {
font-weight: 600;
color: #444;
}
.td.amount{
font-weight: bold;
}
}
}
@@ -212,17 +181,17 @@
.dropzone {
width: 300px;
height: 75px;
}
margin-right: 20px;
.expense-form-footer{
display: flex;
padding: 30px 25px 0;
justify-content: space-between;
}
.form-group--description {
padding: 25px 27px 20px;
width: 100%;
.bp3-label {
margin-bottom: 15px;
margin-right: 15px;
font-weight: 500;
font-size: 13px;
color: #444;
@@ -230,10 +199,32 @@
.bp3-form-content {
// width: 280px;
textarea {
width: 300px;
height: 75px;
margin-right: 20px;
width: 450px;
min-height: 75px;
}
}
}
}
.dashboard__insider--expenses{
.bigcapital-datatable{
.tbody{
.total_amount{
font-weight: 600;
}
.description{
.bp3-icon{
color: #666;
}
.bp3-tooltip-indicator{
cursor: initial;
border-bottom: 0;
}
}
}
}
}

118
client/src/style/pages/financial-statements.scss
View File

@@ -52,7 +52,8 @@
}
.financial-sheet{
border: 1px solid #EEE;
border: 2px solid #F1F1F1;
border-radius: 10px;
min-width: 640px;
width: auto;
padding: 30px 20px;
@@ -64,22 +65,22 @@
&__title{
margin: 0;
font-weight: 300;
font-weight: 400;
font-size: 22px;
color: #333;
color: #464646;
text-align: center;
}
&__sheet-type{
text-align: center;
margin: 0;
font-size: 15px;
font-size: 16px;
font-weight: 400;
color: #666;
margin-top: 6px;
}
&__date{
text-align: center;
color: #888;
color: #666;
margin-top: 6px;
}
&__table{
@@ -93,11 +94,6 @@
background: #fff;
}
}
.tbody{
.code.td{
color: #777;
}
}
.tr.no-results{
.td{
flex-direction: column;
@@ -130,23 +126,32 @@
}
&--trial-balance{
min-width: 720px;
.financial-sheet__table{
.tbody{
.balance.td{
border-bottom-color: #000;
}
}
}
}
&--general-ledger{
.table .tbody{
.tr.row-type{
.financial-sheet__table{
.tbody{
.tr.row-type{
&--opening_balance,
&--closing_balance{
background-color: #fbfbfb;
}
&--opening_balance,
&--closing_balance{
background-color: #fbfbfb;
}
&--closing_balance .td{
border-bottom-color: #666;
}
&--closing_balance .td{
border-bottom-color: #666;
}
&--account_name .td.name{
font-weight: 500;
&--account_name .td.name{
font-weight: 500;
}
}
}
}
@@ -188,6 +193,9 @@
.account_code.td{
color: #666;
}
.total.td {
border-bottom-color: #000;
}
.row--income_total,
.row--expense_total,
@@ -201,4 +209,70 @@
}
}
}
&--balance-sheet{
.financial-sheet__table{
.tbody{
.total.td{
border-bottom-color: #000;
}
}
}
}
&--receivable-aging-summary{
.financial-sheet__table{
.tbody{
.row-type--total{
font-weight: 600;
.td{
background-color: #fafbff;
border-bottom-color: #666;
border-bottom-style: dotted;
}
}
}
}
}
}
.financial-reports{
padding: 20px 25px;
.section-title{
font-weight: 500;
margin-bottom: 1.6rem;
font-size: 20px;
color: rgb(31, 50, 85);
margin-top: 10px;
}
&__list{
display: flex;
flex-flow: wrap;
margin-left: -28px;
}
&__item{
width: 270px;
margin-bottom: 40px;
margin-left: 28px;
border-top: 2px solid #DDD;
padding-top: 16px;
.title{
font-size: 16px;
}
.desc{
color: rgb(31, 50, 85);
line-height: 1.55;
margin-top: 12px;
}
}
}

2
client/src/style/pages/make-journal-entries.scss
View File

@@ -48,7 +48,7 @@
background-color: #F2F5FA;
font-size: 14px;
font-weight: 500;
color: #333;
color: #1e1c3e;
}
}

56
client/src/style/views/Sidebar.scss
View File

@@ -37,7 +37,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
padding: 16px 12px;
&-logo{
margin-top: 2px;
position: relative;
top: 2px;
svg{
opacity: 0.5;
@@ -59,7 +60,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
.#{$ns}-menu-item {
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 10px 16px;
padding: 9px 16px;
font-size: 15px;
font-weight: 400;
@@ -81,7 +82,14 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
> .#{$ns}-icon-caret-right {
margin-right: -4px;
margin-top: 3px;
color: #42547b;
color: #354569;
}
&-label{
display: block;
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
padding: 4px 16px;
margin-top: 6px;
}
}
@@ -119,7 +127,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
color: $sidebar-menu-item-color;
}
.#{$ns}-menu-divider {
border-top-color: #152a55;
border-top-color: rgba(255, 255, 255, 0.1);
color: #6b708c;
margin: 4px 0;
}
@@ -134,39 +142,22 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
white-space: nowrap;
width: 50px;
// Hide text of bigcapital logo.
.sidebar__head-logo{
.bp3-icon-bigcapital{
path{
transition: opacity 0.3s ease-in-out;
}
path:not(.path-1):not(.path-2) {
opacity: 0;
}
}
}
// Hide text of menu items and right caret icon.
.bp3-collapse,
.bp3-icon-caret-right,
.bp3-menu-item .bp3-text-overflow-ellipsis{
display: none;
}
.sidebar__menu{
.bp3-menu{
> li:not(.bp3-submenu):not(.bp3-menu-divider):not(.has-icon){
.bp3-menu-item{
&:before{
content: "";
height: 18px;
width: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon='ellipsis-h' width='18' height='18' fill='%235c7080' viewBox='0 0 512 512'%3E%3Cdesc%3Eellipsis-h%3C/desc%3E%3Cpath d='M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z' class='path-1' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}
}
}
}
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
.sidebar__scroll-wrapper{
@@ -185,17 +176,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
}
}
}
.bp3-collapse,
.bp3-icon-caret-right,
.bp3-menu-item .bp3-text-overflow-ellipsis{
display: block;
}
.sidebar__menu .bp3-menu > li:not(.bp3-submenu):not(.bp3-menu-divider) .bp3-menu-item{
&:before{
display: none;
}
.sidebar__menu{
opacity: 1;
}
}
}