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

WIP Financial statements.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-04-03 01:17:17 +02:00
parent cf5f56ae32
commit 4227f2f9a8
40 changed files with 1750 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -8,6 +8,9 @@ import BalanceSheetHeader from './BalanceSheetHeader';
import LoadingIndicator from 'components/LoadingIndicator';
import BalanceSheetTable from './BalanceSheetTable';
import moment from 'moment';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
function BalanceSheet({
fetchBalanceSheet,
@@ -22,20 +25,15 @@ function BalanceSheet({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'cash',
display_columns_by: 'total',
display_columns_type: 'total',
display_columns_by: '',
none_zero: false,
});
const [reload, setReload] = useState(false);
const fetchHook = useAsync(async () => {
const fetchHook = useAsync(async (query = filter) => {
await Promise.all([
fetchBalanceSheet({
...filter,
display_columns_type: 'total',
}),
fetchBalanceSheet({ ...query }),
]);
setReload(false);
});
// Handle fetch the data of balance sheet.
@@ -57,30 +55,37 @@ function BalanceSheet({
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback((filter) => {
setFilter({
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
});
setReload(true);
}, [setFilter]);
};
setFilter({ ..._filter });
fetchHook.execute(_filter);
}, [setFilter, fetchHook]);
return (
<div class="financial-statement">
<BalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<DashboardInsider>
<BalanceSheetActionsBar />
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<BalanceSheetTable
balanceSheet={balanceSheet}
balanceSheetIndex={balanceSheetIndex}
onFetchData={handleFetchData}
asDate={new Date()} />
</LoadingIndicator>
</div>
</div>
<DashboardPageContent>
<div class="financial-statement">
<BalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<BalanceSheetTable
balanceSheet={balanceSheet}
balanceSheetIndex={balanceSheetIndex}
onFetchData={handleFetchData}
asDate={new Date()} />
</LoadingIndicator>
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
);
}

63
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarHeading,
NavbarDivider,
Intent,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
export default function JournalActionsBar({
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text='Customize Report'
/>
<NavbarDivider />
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text="Filter"
icon={ <Icon icon="filter" /> } />
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Print'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
)
}

243
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -1,233 +1,108 @@
import React, {useState, useMemo, useEffect} from 'react';
import React, {useMemo, useCallback} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import {Row, Col} from 'react-grid-system';
import {
Button,
FormGroup,
Position,
MenuItem,
RadioGroup,
Radio,
HTMLSelect,
Intent,
Popover,
Classes,
} from "@blueprintjs/core";
import {Select} from '@blueprintjs/select';
import {DateInput} from '@blueprintjs/datetime';
import SelectList from 'components/SelectList';
import {useIntl} from 'react-intl';
import {
momentFormatter,
handleStringChange,
parseDateRangeQuery,
} from 'utils';
import moment from 'moment';
import Icon from 'components/Icon';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
export default function BalanceSheetHeader({
onSubmitFilter,
pageFilter,
}) {
const intl = useIntl();
const displayColumnsByOptions = [
{key: 'total', name: 'Total'},
{key: 'year', name: 'Year'},
{key: 'month', name: 'Month'},
{key: 'week', name: 'Week'},
{key: 'day', name: 'Day'},
{key: 'quarter', name: 'Quarter'},
];
const [filter, setFilter] = useState({
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
basis: 'cash',
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate(),
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
to_date: Yup.date().min(Yup.ref('from_date')).required(),
}),
onSubmit: (values, actions) => {
onSubmitFilter(values);
actions.setSubmitting(false);
},
});
const setFilterByKey = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const [reportDateRange, setReportDateRange] = useState('this_year');
useEffect(() => {
if (reportDateRange === 'custom') { return; }
const dateRange = parseDateRangeQuery(reportDateRange);
if (dateRange) {
setFilter((filter) => ({ ...filter, ...dateRange, }));
}
}, [reportDateRange])
const selectedDisplayColumnOpt = useMemo(() => {
return displayColumnsByOptions.find(o => o.key === filter.display_columns_by);
}, [filter.display_columns_by, displayColumnsByOptions]);
// Account type item of select filed.
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
};
// Handle item select of `display columns by` field.
const onItemSelectDisplayColumns = (item) => {
setFilterByKey('display_columns_by', item.key);
};
// Handle any date change.
const handleDateChange = (name) => (date) => {
setReportDateRange('custom');
setFilterByKey(name, date);
};
const onItemSelectDisplayColumns = useCallback((item) => {
formik.setFieldValue('display_columns_type', item.type);
formik.setFieldValue('display_columns_by', item.by);
}, []);
// handle submit filter submit button.
const handleSubmitClick = () => {
onSubmitFilter(filter);
};
const dateRangeOptions = [
{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 handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
const [activeRowsColumns, setActiveRowsColumns] = useState(false);
const filterAccountsOptions = useMemo(() => [
{key: '', name: 'Accounts with Zero Balance'},
{key: 'all-trans', name: 'All Transactions' },
], []);
const onClickActiveRowsColumnsBtn = () => {
setActiveRowsColumns(!activeRowsColumns);
};
const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
}, []);
const activeRowsColumnsPopover = (
<div>
<h5>Columns</h5>
<RadioGroup
name="none_zero"
selectedValue={filter.none_zero}
onChange={handleStringChange((value) => {
setFilterByKey('none_zero', value);
})}
>
<Radio label="All" value="0" />
<Radio label="Non-Zero" value="1" />
</RadioGroup>
</div>
);
const infoIcon = useMemo(() =>
(<Icon icon="info-circle" iconSize={12} />), []);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const handleAccountingBasisChange = useCallback((value) => {
formik.setFieldValue('basis', value);
}, [formik]);
return (
<FinancialStatementHeader>
<Row>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
labelInfo={infoIcon}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={(event) => setReportDateRange(event.target.value)} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
labelInfo={infoIcon}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.from_date}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
labelInfo={infoIcon}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.to_date}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
</Row>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FormGroup
label={'Display report columns'}
labelInfo={infoIcon}
className="form-group-display-columns-by form-group--select-list bp3-fill"
inline={false}>
<Select
items={displayColumnsByOptions}
noResults={<MenuItem disabled={true} text="No results." />}
filterable={false}
itemRenderer={accountTypeItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemSelectDisplayColumns}>
<Button
rightIcon="caret-down"
fill={true}
text={selectedDisplayColumnOpt ? selectedDisplayColumnOpt.name : 'Select'} />
</Select>
</FormGroup>
<SelectDisplayColumnsBy onItemSelect={onItemSelectDisplayColumns} />
</Col>
<Col sm={3}>
<FormGroup
label={'Show non-zero or active only'}
label={'Filter Accounts'}
className="form-group--select-list bp3-fill"
inline={false}>
<Popover
isOpen={activeRowsColumns}
content={activeRowsColumnsPopover}
minimal={true}
position={Position.BOTTOM}>
<Button
rightIcon="caret-down"
fill={true}
text="Active rows/Columns Active"
onClick={onClickActiveRowsColumnsBtn} />
</Popover>
<SelectList
items={filterAccountsOptions}
itemRenderer={filterAccountRenderer}
onItemSelect={onItemSelectDisplayColumns}
popoverProps={{ minimal: true }}
filterable={false} />
</FormGroup>
</Col>
<Col sm={3}>
<RadioGroup
inline={true}
label={intl.formatMessage({'id': 'accounting_basis'})}
name="accounting_bahandleRadioChangesis"
selectedValue={filter.accounting_basis}
onChange={handleStringChange((value) => {
setFilterByKey('accounting_basis', value);
})}
>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />
</RadioGroup>
<RadiosAccountingBasis
selectedValue={formik.values.basis}
onChange={handleAccountingBasisChange} />
</Col>
<Col sm={3}>
<Button intent={Intent.PRIMARY} type="submit" onClick={handleSubmitClick}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
{ 'Calculate Report' }
</Button>
</Col>

105
client/src/containers/Dashboard/FinancialStatements/FinancialStatementDateRange.js Normal file
View File

@@ -0,0 +1,105 @@
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 Icon from 'components/Icon';
import {
parseDateRangeQuery
} from 'utils';
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 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);
}
}
setReportDateRange(value);
}, [formik]);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
return (
<Row>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
labelInfo={infoIcon}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={handleDateRangeChange} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
labelInfo={infoIcon}
minimal={true}
fill={true}
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 }}
fill={true} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
labelInfo={infoIcon}
minimal={true}
fill={true}
intent={formik.errors.to_date && Intent.DANGER}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={formik.values.to_date}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true}
intent={formik.errors.to_date && Intent.DANGER} />
</FormGroup>
</Col>
</Row>
);
}

100
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -0,0 +1,100 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import moment from 'moment';
import GeneralLedgerTable from 'containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable';
import useAsync from 'hooks/async';
import DashboardConnect from 'connectors/Dashboard.connector';
import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
import GeneralLedgerHeader from './GeneralLedgerHeader';
import {compose} from 'utils';
import DashboardInsider from 'components/Dashboard/DashboardInsider'
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardActionsBar from 'components/Accounts/AccountsActionsBar'
import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
import AccountsConnect from 'connectors/Accounts.connector';
function GeneralLedger({
changePageTitle,
getGeneralLedgerSheetIndex,
getGeneralLedgerSheet,
fetchGeneralLedger,
generalLedgerSheetLoading,
fetchAccounts,
}) {
const [filter, setFilter] = useState({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural',
none_zero: true,
});
// Change page title of the dashboard.
useEffect(() => {
changePageTitle('General Ledger');
}, []);
const fetchHook = useAsync(() => {
return Promise.all([
fetchAccounts(),
]);
});
const fetchSheet = useAsync((query = filter) => {
return Promise.all([
fetchGeneralLedger(query),
]);
}, false);
const generalLedgerSheetIndex = useMemo(() =>
getGeneralLedgerSheetIndex(filter),
[getGeneralLedgerSheetIndex, filter]);
const generalLedgerSheet = useMemo(() =>
getGeneralLedgerSheet(generalLedgerSheetIndex),
[generalLedgerSheetIndex, getGeneralLedgerSheet])
// Handle fetch data of trial balance table.
const handleFetchData = useCallback(() => { fetchSheet.execute() }, [fetchSheet]);
// Handle financial statement filter change.
const handleFilterSubmit = useCallback((filter) => {
const parsedFilter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
fetchSheet.execute(parsedFilter);
}, [setFilter, fetchSheet]);
const handleFilterChanged = () => {};
return (
<DashboardInsider>
<GeneralLedgerActionsBar onFilterChanged={handleFilterChanged} />
<DashboardPageContent>
<div class="financial-statement financial-statement--general-ledger">
<GeneralLedgerHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__table">
<GeneralLedgerTable
loading={generalLedgerSheetLoading}
data={[
... (generalLedgerSheet) ?
generalLedgerSheet.tableRows : [],
]}
onFetchData={handleFetchData} />
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
DashboardConnect,
AccountsConnect,
GeneralLedgerConnect,
)(GeneralLedger);

63
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarHeading,
NavbarDivider,
Intent,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
export default function GeneralLedgerActionsBar({
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text='Customize Report'
/>
<NavbarDivider />
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text="Filter"
icon={ <Icon icon="filter" /> } />
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Print'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
);
}

97
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -0,0 +1,97 @@
import React, {useState, useMemo, useEffect, useCallback} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import {useIntl} from 'react-intl';
import {
Button,
FormGroup,
Classes,
} from '@blueprintjs/core';
import {Row, Col} from 'react-grid-system';
import {
compose,
} from 'utils';
import moment from 'moment';
import AccountsConnect from 'connectors/Accounts.connector'
import classNames from 'classnames';
import AccountsMultiSelect from 'components/AccountsMultiSelect';
import {useFormik} from 'formik';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import * as Yup from 'yup';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
function GeneralLedgerHeader({
onSubmitFilter,
pageFilter,
accounts,
}) {
const intl = useIntl();
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
to_date: Yup.date().min(Yup.ref('from_date')).required(),
}),
onSubmit(values, actions) {
onSubmitFilter(values);
actions.setSubmitting(false);
},
});
// handle submit filter submit button.
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, []);
const onAccountSelected = useCallback((selectedAccounts) => {
console.log(selectedAccounts);
}, []);
const handleAccountingBasisChange = useCallback((value) => {
formik.setFieldValue('basis', value);
}, [formik]);
return (
<FinancialStatementHeader>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FormGroup
label={'Specific Accounts'}
className={classNames('form-group--select-list', Classes.FILL)}
>
<AccountsMultiSelect
accounts={accounts}
onAccountSelected={onAccountSelected} />
</FormGroup>
</Col>
<Col sm={3}>
<RadiosAccountingBasis
onChange={handleAccountingBasisChange}
selectedValue={formik.values.basis} />
</Col>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
{ 'Calculate Report' }
</Button>
</Col>
</Row>
</FinancialStatementHeader>
)
}
export default compose(
AccountsConnect
)(GeneralLedgerHeader);

153
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
View File

@@ -0,0 +1,153 @@
import React, {useEffect, useState, useCallback, useMemo} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import moment from 'moment';
const ROW_TYPE = {
CLOSING_BALANCE: 'closing_balance',
OPENING_BALANCE: 'opening_balance',
ACCOUNT: 'account_name',
TRANSACTION: 'transaction',
}
export default function GeneralLedgerTable({
onFetchData,
loading,
data,
}) {
// Account name column accessor.
const accountNameAccessor = useCallback((row) => {
switch(row.rowType) {
case ROW_TYPE.OPENING_BALANCE:
return 'Opening Balance';
case ROW_TYPE.CLOSING_BALANCE:
return 'Closing Balance';
default:
return row.name;
}
}, [ROW_TYPE]);
// Date accessor.
const dateAccessor = useCallback((row) => {
const TYPES = [
ROW_TYPE.OPENING_BALANCE,
ROW_TYPE.CLOSING_BALANCE,
ROW_TYPE.TRANSACTION];
return (TYPES.indexOf(row.rowType) !== -1)
? moment(row.date).format('DD-MM-YYYY') : '';
}, [moment, ROW_TYPE]);
// Amount cell
const amountCell = useCallback(({ cell }) => {
const transaction = cell.row.original
if (transaction.rowType === ROW_TYPE.ACCOUNT) {
return (!cell.row.isExpanded) ?
(<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
}
return (<Money amount={transaction.amount} currency={"USD"} />);
}, []);
const referenceLink = useCallback((row) => {
return (<a href="">{ row.referenceId }</a>);
});
const columns = useMemo(() => [
{
// Build our expander column
id: 'expander', // Make sure it has an ID
className: 'expander',
Header: ({
getToggleAllRowsExpandedProps,
isAllRowsExpanded
}) => (
<span {...getToggleAllRowsExpandedProps()} className="toggle">
{isAllRowsExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
),
Cell: ({ row }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
className: 'toggle',
})}
>
{row.isExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
) : null,
width: 20,
disableResizing: true,
},
{
Header: 'Account Name',
accessor: accountNameAccessor,
className: "name",
},
{
Header: 'Date',
accessor: dateAccessor,
className: "date",
},
{
Header: 'Transaction Type',
accessor: 'referenceType',
className: 'transaction_type',
},
{
Header: 'Trans. NUM',
accessor: referenceLink,
className: 'transaction_number'
},
{
Header: 'Description',
accessor: 'note',
className: 'description',
},
{
Header: 'Amount',
Cell: amountCell,
className: 'amount'
},
{
Header: 'Balance',
Cell: amountCell,
className: 'balance',
},
], []);
const handleFetchData = useCallback(() => {
onFetchData && onFetchData();
}, [onFetchData]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
sheetType={'General Ledger Sheet'}
date={new Date()}
name="general-ledger"
loading={loading}>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={data}
onFetchData={handleFetchData} />
</FinancialSheet>
);
}

100
client/src/containers/Dashboard/FinancialStatements/Journal/Journal.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useEffect, useMemo} from 'react';
import React, {useState, useCallback, useEffect, useMemo} from 'react';
import {compose} from 'utils';
import LoadingIndicator from 'components/LoadingIndicator';
import JournalConnect from 'connectors/Journal.connect';
@@ -8,61 +8,91 @@ import {useIntl} from 'react-intl';
import moment from 'moment';
import JournalTable from './JournalTable';
import DashboardConnect from 'connectors/Dashboard.connector';
import JournalActionsBar from './JournalActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
function Journal({
fetchJournalSheet,
getJournalSheet,
getJournalSheetIndex,
changePageTitle,
journalSheetLoading,
}) {
const [filter, setFilter] = useState({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
});
const [reload, setReload] = useState(false);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchJournalSheet(filter),
]);
setReload(false);
basis: 'accural'
});
useEffect(() => {
changePageTitle('Journal');
changePageTitle('Journal Sheet');
}, []);
useEffect(() => {
if (reload) {
fetchHook.execute();
}
}, [reload, fetchHook]);
const fetchHook = useAsync((query = filter) => {
return Promise.all([
fetchJournalSheet(query),
]);
}, false);
const journalSheetIndex = useMemo(() => {
return getJournalSheetIndex(filter);
}, [filter, getJournalSheetIndex]);
// Retrieve journal sheet index by the given filter query.
const journalSheetIndex = useMemo(() =>
getJournalSheetIndex(filter),
[getJournalSheetIndex, filter]);
const handleFilterSubmit = (filter) => {
setFilter({
// Retrieve journal sheet by the given sheet index.
const journalSheet = useMemo(() =>
getJournalSheet(journalSheetIndex),
[getJournalSheet, journalSheetIndex]);
// Handle financial statement filter change.
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
});
setReload(true);
};
return (
<div class="financial-statement">
<JournalHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
};
setFilter(_filter);
fetchHook.execute(_filter);
}, [fetchHook]);
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<JournalTable
journalIndex={journalSheetIndex} />
</LoadingIndicator>
</div>
</div>
const handlePrintClick = useCallback(() => {
}, []);
const handleExportClick = useCallback(() => {
}, []);
const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
fetchHook.execute();
}, [fetchHook]);
return (
<DashboardInsider>
<JournalActionsBar
onFilterChanged={() => {}}
onPrintClick={handlePrintClick}
onExportClick={handleExportClick} />
<DashboardPageContent>
<div class="financial-statement financial-statement--journal">
<JournalHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__table">
<JournalTable
data={[
...(journalSheet && journalSheet.tableRows)
? journalSheet.tableRows : []
]}
loading={journalSheetLoading}
onFetchData={handleFetchData} />
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
)
}

63
client/src/containers/Dashboard/FinancialStatements/Journal/JournalActionsBar.js Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarHeading,
NavbarDivider,
Intent,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
export default function JournalActionsBar({
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text='Customize Report'
/>
<NavbarDivider />
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text="Filter"
icon={ <Icon icon="filter" /> } />
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Print'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
)
}

118
client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js
View File

@@ -1,115 +1,53 @@
import React, {useState, useMemo, useEffect} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import React, {useCallback} from 'react';
import {Row, Col} from 'react-grid-system';
import {
Button,
FormGroup,
Position,
HTMLSelect,
Intent,
} from '@blueprintjs/core';
import {DateInput} from '@blueprintjs/datetime';
import moment from 'moment';
import {
momentFormatter,
parseDateRangeQuery,
} from 'utils';
import {useFormik} from 'formik';
import {useIntl} from 'react-intl';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
export default function JournalHeader({
pageFilter,
onSubmitFilter,
}) {
const intl = useIntl();
const [filter, setFilter] = useState({
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
to_date: Yup.date().min(Yup.ref('from_date')).required(),
}),
onSubmit: (values, actions) => {
onSubmitFilter(values);
actions.setSubmitting(false);
},
});
const setFilterByKey = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const [reportDateRange, setReportDateRange] = useState('this_year');
const dateRangeOptions = [
{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 = (name) => (date) => {
setReportDateRange('custom');
setFilterByKey(name, date);
};
useEffect(() => {
if (reportDateRange === 'custom') { return; }
const dateRange = parseDateRangeQuery(reportDateRange);
if (dateRange) {
setFilter((filter) => ({ ...filter, ...dateRange }));
}
}, [reportDateRange]);
const handleSubmitClick = () => { onSubmitFilter(filter); };
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
return (
<FinancialStatementHeader>
<Row>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={(event) => setReportDateRange(event.target.value)} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.from_date}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.to_date}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
</Row>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<Button
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitClick}>
onClick={handleSubmitClick}
class={'button--submit-filter'}>
{ 'Run Report' }
</Button>
</Col>

85
client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useEffect, useMemo} from 'react';
import React, {useState, useEffect, useCallback, useMemo} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import {compose} from 'utils';
@@ -8,82 +8,87 @@ import {
getFinancialSheet,
} from 'store/financialStatement/financialStatements.selectors';
import {connect} from 'react-redux';
import Money from 'components/Money';
function JournalSheetTable({
journalIndex,
journalTableData,
onFetchData,
data,
loading,
}) {
const rowTypeFilter = (rowType, value, types) => {
return (types.indexOf(rowType) === -1) ? '' : value;
};
const exceptRowTypes = (rowType, value, types) => {
return (types.indexOf(rowType) !== -1) ? '' : value;
};
const columns = useMemo(() => [
{
Header: 'Date',
accessor: r => moment(r.date).format('YYYY/MM/DD'),
accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
className: 'date',
},
{
Header: 'Account Name',
accessor: 'account.name',
width: 85,
},
{
Header: 'Transaction Type',
accessor: 'transaction_type',
accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
className: "transaction_type",
width: 145,
},
{
Header: 'Num.',
accessor: 'reference_id',
accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
className: 'reference_id',
width: 70,
},
{
Header: 'Note',
Header: 'Description',
accessor: 'note',
},
{
Header: 'Acc. Code',
accessor: 'account.code',
width: 120,
className: 'account_code',
},
{
Header: 'Account',
accessor: 'account.name',
},
{
Header: 'Credit',
accessor: 'credit',
accessor: r => exceptRowTypes(
r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
},
{
Header: 'Debit',
accessor: 'debit',
accessor: r => exceptRowTypes(
r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
},
], []);
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args)
}, [onFetchData]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
sheetType={'Balance Sheet'}
date={[]}>
sheetType={'Journal Sheet'}
date={new Date()}
name="journal"
loading={loading}>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={journalTableData} />
data={data}
onFetchData={handleFetchData}
noResults={"This report does not contain any data."} />
</FinancialSheet>
);
}
const mapStateToProps = (state, props) => {
const journalTableData = [];
const journalSheet = getFinancialSheet(state.financialStatements.journalSheets, props.journalIndex);
if (journalSheet && journalSheet.journal) {
journalSheet.journal.forEach((journal) => {
journal.entries.forEach((entry, index) => {
journalTableData.push({ ...entry, index });
});
journalTableData.push({
credit: journal.credit,
debit: journal.debit,
total: true,
})
})
}
return {
journalSheet,
journalTableData,
}
}
export default compose(
connect(mapStateToProps),
JournalConnect,
)(JournalSheetTable);

51
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarHeading,
NavbarDivider,
Intent,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
export default function ProfitLossActionsBar({
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text='Customize Report'
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Print'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
);
}

89
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -1,74 +1,81 @@
import React, {useState, useEffect, useMemo} from 'react';
import React, {useState, useMemo, useCallback, useEffect} from 'react';
import ProfitLossSheetHeader from './ProfitLossSheetHeader';
import ProfitLossSheetTable from './ProfitLossSheetTable';
import LoadingIndicator from 'components/LoadingIndicator';
import { useAsync } from 'react-use';
import moment from 'moment';
import useAsync from 'hooks/async';
import {compose} from 'utils';
import DashboardConnect from 'connectors/Dashboard.connector';
import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
import DashboardInsider from 'components/Dashboard/DashboardInsider'
import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
import ProfitLossActionsBar from './ProfitLossActionsBar';
import moment from 'moment';
function ProfitLossSheet({
changePageTitle,
fetchProfitLossSheet,
getProfitLossSheetIndex,
getProfitLossSheet,
getProfitLossSheetAccounts,
getProfitLossSheetColumns,
}) {
const [filter, setFilter] = useState({});
const [reload, setReload] = useState(false);
const [filter, setFilter] = useState({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
});
// Change page title of the dashboard.
useEffect(() => {
changePageTitle('Trial Balance Sheet');
changePageTitle('Profit/Loss Sheet');
}, []);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchProfitLossSheet(filter),
// Fetches profit/loss sheet.
const fetchHook = useAsync((query = filter) => {
return Promise.all([
fetchProfitLossSheet(query),
]);
});
}, false);
const handleFilterSubmit = (filter) => {
setFilter({
const profitLossSheetIndex = useMemo(() =>
getProfitLossSheetIndex(filter),
[getProfitLossSheetIndex, filter])
const profitLossSheet = useMemo(() =>
getProfitLossSheet(profitLossSheetIndex),
[getProfitLossSheet, profitLossSheetIndex]);
const handleSubmitFilter = useCallback((filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
});
setReload(true);
}
};
setFilter(_filter);
fetchHook.execute(_filter);
}, []);
const profitLossSheetIndex = useMemo(() => {
return getProfitLossSheetIndex(filter);
}, [filter, getProfitLossSheetIndex]);
const profitLossSheetAccounts = useMemo(() => {
return getProfitLossSheetAccounts(profitLossSheetIndex);
}, [profitLossSheetIndex, getProfitLossSheet]);
const profitLossSheetColumns = useMemo(() => {
return getProfitLossSheetColumns(profitLossSheetIndex);
}, [profitLossSheetIndex])
// Handle fetch data of profit/loss sheet table.
const handleFetchData = useCallback(() => {
fetchHook.execute();
}, [fetchHook]);
return (
<div class="financial-statement">
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<DashboardInsider>
<ProfitLossActionsBar />
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<div class="financial-statement">
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleSubmitFilter} />
<ProfitLossSheetTable
accounts={profitLossSheetAccounts}
columns={profitLossSheetColumns} />
</LoadingIndicator>
<div class="financial-statement__body">
<LoadingIndicator loading={false}>
<ProfitLossSheetTable
data={[]}
onFetchData={handleFetchData} />
</LoadingIndicator>
</div>
</div>
</div>
</DashboardInsider>
);
}

247
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -1,227 +1,78 @@
import React, {useState, useMemo, useEffect} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import React, {useCallback} from 'react';
import {Row, Col} from 'react-grid-system';
import {
Button,
FormGroup,
Position,
MenuItem,
RadioGroup,
Radio,
HTMLSelect,
Intent,
Popover,
} from "@blueprintjs/core";
import {Select} from '@blueprintjs/select';
import {DateInput} from '@blueprintjs/datetime';
import {useIntl} from 'react-intl';
import {
momentFormatter,
handleStringChange,
parseDateRangeQuery,
} from 'utils';
Button,
} from '@blueprintjs/core';
import moment from 'moment';
import {useFormik} from 'formik';
import {useIntl} from 'react-intl';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
export default function ProfitLossSheetHeader({
onSubmitFilter,
export default function JournalHeader({
pageFilter,
onSubmitFilter,
}) {
const intl = useIntl();
const displayColumnsByOptions = [
{key: 'total', name: 'Total'},
{key: 'year', name: 'Year'},
{key: 'month', name: 'Month'},
{key: 'week', name: 'Week'},
{key: 'day', name: 'Day'},
{key: 'quarter', name: 'Quarter'},
];
const [filter, setFilter] = useState({
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
to_date: Yup.date().min(Yup.ref('from_date')).required(),
}),
onSubmit: (values, actions) => {
onSubmitFilter(values);
actions.setSubmitting(false);
},
});
const setFilterByKey = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const [reportDateRange, setReportDateRange] = useState('this_year');
useEffect(() => {
if (reportDateRange === 'custom') { return; }
const dateRange = parseDateRangeQuery(reportDateRange);
if (dateRange) {
setFilter((filter) => ({ ...filter, ...dateRange, }));
}
}, [reportDateRange])
const selectedDisplayColumnOpt = useMemo(() => {
return displayColumnsByOptions.find(o => o.key === filter.display_columns_by);
}, [filter.display_columns_by, displayColumnsByOptions]);
// Account type item of select filed.
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
};
// Handle item select of `display columns by` field.
const onItemSelectDisplayColumns = (item) => {
setFilterByKey('display_columns_by', item.key);
};
const handleItemSelectDisplayColumns = useCallback((item) => {
formik.setFieldValue('display_columns_type', item.type);
formik.setFieldValue('display_columns_by', item.by);
}, []);
// Handle any date change.
const handleDateChange = (name) => (date) => {
setReportDateRange('custom');
setFilterByKey(name, date);
};
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
// handle submit filter submit button.
const handleSubmitClick = () => {
onSubmitFilter(filter);
};
const dateRangeOptions = [
{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 handleAccountingBasisChange = useCallback((value) => {
formik.setFieldValue('basis', value);
}, [formik]);
const [activeRowsColumns, setActiveRowsColumns] = useState(false);
const onClickActiveRowsColumnsBtn = () => {
setActiveRowsColumns(!activeRowsColumns);
};
const activeRowsColumnsPopover = (
<div>
<h5>Columns</h5>
<RadioGroup
name="none_zero"
selectedValue={filter.none_zero}
onChange={handleStringChange((value) => {
setFilterByKey('none_zero', value);
})}
>
<Radio label="All" value="0" />
<Radio label="Non-Zero" value="1" />
</RadioGroup>
</div>
);
return (
<FinancialStatementHeader>
<Row>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={(event) => setReportDateRange(event.target.value)} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.from_date}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.to_date}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
</Row>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<FormGroup
label={'Display report columns'}
className="{'form-group-display-columns-by'}"
inline={false}>
<Select
items={displayColumnsByOptions}
noResults={<MenuItem disabled={true} text="No results." />}
filterable={false}
itemRenderer={accountTypeItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemSelectDisplayColumns}>
<Button
rightIcon="caret-down"
fill={true}
text={selectedDisplayColumnOpt ? selectedDisplayColumnOpt.name : 'Select'} />
</Select>
</FormGroup>
<SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
</Col>
<Col sm={3}>
<FormGroup
label={'Show non-zero or active only'}
inline={false}>
<Popover
isOpen={activeRowsColumns}
content={activeRowsColumnsPopover}
minimal={true}
position={Position.BOTTOM}>
<Button
rightIcon="caret-down"
fill={true}
text="Active rows/Columns Active"
onClick={onClickActiveRowsColumnsBtn} />
</Popover>
</FormGroup>
<RadiosAccountingBasis
selectedValue={formik.values.basis}
onChange={handleAccountingBasisChange} />
</Col>
<Col sm={3}>
<RadioGroup
inline={true}
label={intl.formatMessage({'id': 'accounting_basis'})}
name="accounting_bahandleRadioChangesis"
selectedValue={filter.accounting_basis}
onChange={handleStringChange((value) => {
setFilterByKey('accounting_basis', value);
})}
>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />
</RadioGroup>
</Col>
<Col sm={3}>
<Button intent={Intent.PRIMARY} type="submit" onClick={handleSubmitClick}>
{ 'Calculate Report' }
<Button
type="submit"
onClick={handleSubmitClick}
className={'button--submit-filter'}>
{ 'Run Report' }
</Button>
</Col>
</Row>
</FinancialStatementHeader>
)
);
}

44
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -0,0 +1,44 @@
import React, {useState, useMemo, useCallback} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
export default function ProfitLossSheetTable({
loading,
data,
onFetchData,
}) {
const columns = useMemo(() => [
{
Header: 'Account Name',
accessor: 'name',
className: "name",
},
{
Header: 'Acc. Code',
accessor: 'code',
className: "account_code",
},
])
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, [onFetchData]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
sheetType={'Profit/Loss Sheet'}
date={new Date()}
name="profit-loss-sheet"
loading={loading}>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={data}
onFetchData={handleFetchData} />
</FinancialSheet>
)
}

27
client/src/containers/Dashboard/FinancialStatements/RadiosAccountingBasis.js Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import {handleStringChange} from 'utils';
import {useIntl} from 'react-intl';
import {
RadioGroup,
Radio,
} from "@blueprintjs/core";
export default function RadiosAccountingBasis(props) {
const { onChange, ...rest } = props;
const intl = useIntl();
return (
<RadioGroup
inline={true}
label={intl.formatMessage({'id': 'accounting_basis'})}
name="basis"
onChange={handleStringChange((value) => {
onChange && onChange(value);
})}
{...rest}>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />
</RadioGroup>
);
}

43
client/src/containers/Dashboard/FinancialStatements/SelectDisplayColumnsBy.js Normal file
View File

@@ -0,0 +1,43 @@
import React, {useMemo, useCallback} from 'react';
import SelectList from 'components/SelectList';
import {
FormGroup,
MenuItem,
} from '@blueprintjs/core';
export default function SelectsListColumnsBy(props) {
const { formGroupProps, selectListProps } = props;
const displayColumnsByOptions = useMemo(() => [
{key: 'total', name: 'Total', type: 'total', by: '', },
{key: 'year', name: 'Year', type: 'date', by: 'year'},
{key: 'month', name: 'Month', type: 'date', by: 'month'},
{key: 'week', name: 'Week', type: 'date', by: 'month'},
{key: 'day', name: 'Day', type: 'date', by: 'day'},
{key: 'quarter', name: 'Quarter', type: 'date', by: 'quarter'},
]);
const itemRenderer = useCallback((item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
}, []);
return (
<FormGroup
label={'Display report columns'}
className="form-group-display-columns-by form-group--select-list bp3-fill"
inline={false}
{...formGroupProps}>
<SelectList
items={displayColumnsByOptions}
noResults={<MenuItem disabled={true} text="No results." />}
filterable={false}
itemRenderer={itemRenderer}
popoverProps={{ minimal: true }}
buttonLabel={'Select...'}
{...selectListProps} />
</FormGroup>
);
}

51
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarHeading,
NavbarDivider,
Intent,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
export default function GeneralLedgerActionsBar({
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text='Customize Report'
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Print'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
);
}

34
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -7,6 +7,10 @@ import moment from 'moment';
import {compose} from 'utils';
import TrialBalanceSheetConnect from 'connectors/TrialBalanceSheet.connect';
import DashboardConnect from 'connectors/Dashboard.connector';
import TrialBalanceActionsBar from './TrialBalanceActionsBar';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
function TrialBalanceSheet({
changePageTitle,
@@ -57,19 +61,25 @@ function TrialBalanceSheet({
}, [setFilter, fetchHook]);
return (
<div class="financial-statement">
<TrialBalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<DashboardInsider>
<TrialBalanceActionsBar />
<div class="financial-statement__body">
<TrialBalanceSheetTable
trialBalanceSheetAccounts={trialBalanceAccounts}
trialBalanceSheetIndex={trialBalanceSheetIndex}
onFetchData={handleFetchData}
loading={trialBalanceSheetLoading} />
</div>
</div>
<DashboardPageContent>
<div class="financial-statement">
<TrialBalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<TrialBalanceSheetTable
trialBalanceSheetAccounts={trialBalanceAccounts}
trialBalanceSheetIndex={trialBalanceSheetIndex}
onFetchData={handleFetchData}
loading={trialBalanceSheetLoading} />
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
)
}

102
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useCallback} from 'react';
import React, {useState, useCallback, useMemo} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import {Row, Col} from 'react-grid-system';
import {
@@ -12,98 +12,50 @@ import {
Intent,
Popover,
} from "@blueprintjs/core";
import {DateInput} from '@blueprintjs/datetime';
import moment from 'moment';
import {momentFormatter} from 'utils';
import {useIntl} from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Icon from 'components/Icon';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
export default function TrialBalanceSheetHeader({
pageFilter,
onSubmitFilter,
}) {
const intl = useIntl();
const [filter, setFilter] = useState({
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
})
const setFilterByKey = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required(),
to_date: Yup.date().min(Yup.ref('from_date')).required(),
}),
onSubmit: (values, actions) => {
onSubmitFilter(values);
actions.setSubmitting(false);
}
});
const [reportDateRange, setReportDateRange] = useState('this_year');
const dateRangeOptions = [
{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 = (name) => (date) => {
setReportDateRange('custom');
setFilterByKey(name, date);
};
const handleSubmitClick = useCallback(() => { onSubmitFilter(filter); }, [filter]);
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
return (
<FinancialStatementHeader>
<Row>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions}
value={reportDateRange}
onChange={(event) => setReportDateRange(event.target.value)} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.from_date}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={filter.to_date}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
</Row>
<FinancialStatementDateRange formik={formik} />
<Row>
<Col sm={3}>
<Button
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitClick}>
onClick={handleSubmitClick}
disabled={formik.isSubmitting}>
{ 'Run Report' }
</Button>
</Col>