mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
@@ -0,0 +1,103 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import moment from 'moment';
|
||||
import GeneralLedgerTable from 'containers/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 GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function GeneralLedger({
|
||||
changePageTitle,
|
||||
getGeneralLedgerSheetIndex,
|
||||
getGeneralLedgerSheet,
|
||||
fetchGeneralLedger,
|
||||
generalLedgerSheetLoading,
|
||||
requestFetchAccounts,
|
||||
organizationSettings,
|
||||
}) {
|
||||
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([
|
||||
requestFetchAccounts(),
|
||||
]);
|
||||
});
|
||||
|
||||
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
|
||||
companyName={organizationSettings.name}
|
||||
loading={generalLedgerSheetLoading}
|
||||
data={[
|
||||
... (generalLedgerSheet) ?
|
||||
generalLedgerSheet.tableRows : [],
|
||||
]}
|
||||
onFetchData={handleFetchData} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
AccountsConnect,
|
||||
GeneralLedgerConnect,
|
||||
SettingsConnect,
|
||||
)(GeneralLedger);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import React, {useState, useMemo, useEffect, useCallback} from 'react';
|
||||
import FinancialStatementHeader from 'containers/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/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 mt2'}>
|
||||
{ 'Calculate Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountsConnect
|
||||
)(GeneralLedgerHeader);
|
||||
@@ -0,0 +1,165 @@
|
||||
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';
|
||||
import {
|
||||
defaultExpanderReducer,
|
||||
} from 'utils';
|
||||
|
||||
|
||||
const ROW_TYPE = {
|
||||
CLOSING_BALANCE: 'closing_balance',
|
||||
OPENING_BALANCE: 'opening_balance',
|
||||
ACCOUNT: 'account_name',
|
||||
TRANSACTION: 'transaction',
|
||||
}
|
||||
|
||||
export default function GeneralLedgerTable({
|
||||
companyName,
|
||||
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]);
|
||||
|
||||
// Default expanded rows of general ledger table.
|
||||
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'General Ledger Sheet'}
|
||||
date={new Date()}
|
||||
name="general-ledger"
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={data}
|
||||
onFetchData={handleFetchData}
|
||||
expanded={expandedRows}
|
||||
virtualizedRows={true}
|
||||
fixedItemSize={37}
|
||||
fixedSizeHeight={1000} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user