mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
105
client/src/containers/FinancialStatements/Journal/Journal.js
Normal file
105
client/src/containers/FinancialStatements/Journal/Journal.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import React, {useState, useCallback, useEffect, useMemo} from 'react';
|
||||
import {compose} from 'utils';
|
||||
import JournalConnect from 'connectors/Journal.connect';
|
||||
import JournalHeader from 'containers/FinancialStatements/Journal/JournalHeader';
|
||||
import useAsync from 'hooks/async';
|
||||
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';
|
||||
import SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
function Journal({
|
||||
fetchJournalSheet,
|
||||
getJournalSheet,
|
||||
getJournalSheetIndex,
|
||||
changePageTitle,
|
||||
journalSheetLoading,
|
||||
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'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle('Journal Sheet');
|
||||
}, []);
|
||||
|
||||
const fetchHook = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchJournalSheet(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Retrieve journal sheet index by the given filter query.
|
||||
const journalSheetIndex = useMemo(() =>
|
||||
getJournalSheetIndex(filter),
|
||||
[getJournalSheetIndex, filter]);
|
||||
|
||||
// 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'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
fetchHook.execute(_filter);
|
||||
}, [fetchHook]);
|
||||
|
||||
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
|
||||
companyName={organizationSettings.name}
|
||||
data={[
|
||||
...(journalSheet && journalSheet.tableRows)
|
||||
? journalSheet.tableRows : []
|
||||
]}
|
||||
loading={journalSheetLoading}
|
||||
onFetchData={handleFetchData} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
)
|
||||
}
|
||||
|
||||
export default compose(
|
||||
JournalConnect,
|
||||
DashboardConnect,
|
||||
SettingsConnect,
|
||||
)(Journal);
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
} 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/FinancialStatements/FinancialStatementDateRange';
|
||||
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
|
||||
|
||||
|
||||
export default function JournalHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
}) {
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
className={'button--submit-filter'}>
|
||||
{ 'Run Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, {useState, useEffect, useCallback, useMemo} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {compose, defaultExpanderReducer} from 'utils';
|
||||
import moment from 'moment';
|
||||
import JournalConnect from 'connectors/Journal.connect';
|
||||
import {
|
||||
getFinancialSheet,
|
||||
} from 'store/financialStatement/financialStatements.selectors';
|
||||
import {connect} from 'react-redux';
|
||||
import Money from 'components/Money';
|
||||
|
||||
function JournalSheetTable({
|
||||
onFetchData,
|
||||
data,
|
||||
loading,
|
||||
companyName,
|
||||
}) {
|
||||
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 => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
|
||||
className: 'date',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
Header: 'Transaction Type',
|
||||
accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
|
||||
className: "transaction_type",
|
||||
width: 145,
|
||||
},
|
||||
{
|
||||
Header: 'Num.',
|
||||
accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
|
||||
className: 'reference_id',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
Header: 'Description',
|
||||
accessor: 'note',
|
||||
},
|
||||
{
|
||||
Header: 'Acc. Code',
|
||||
accessor: 'account.code',
|
||||
width: 120,
|
||||
className: 'account_code',
|
||||
},
|
||||
{
|
||||
Header: 'Account',
|
||||
accessor: 'account.name',
|
||||
},
|
||||
{
|
||||
Header: 'Credit',
|
||||
accessor: r => exceptRowTypes(
|
||||
r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
|
||||
},
|
||||
{
|
||||
Header: 'Debit',
|
||||
accessor: r => exceptRowTypes(
|
||||
r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
|
||||
},
|
||||
], []);
|
||||
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
onFetchData && onFetchData(...args)
|
||||
}, [onFetchData]);
|
||||
|
||||
// Default expanded rows of general journal table.
|
||||
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'Journal Sheet'}
|
||||
date={new Date()}
|
||||
name="journal"
|
||||
loading={loading}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={data}
|
||||
onFetchData={handleFetchData}
|
||||
noResults={"This report does not contain any data."}
|
||||
expanded={expandedRows}
|
||||
noInitialFetch={true} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
JournalConnect,
|
||||
)(JournalSheetTable);
|
||||
Reference in New Issue
Block a user