mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
WIP Version 0.0.1
This commit is contained in:
Ahmed Bouhuolia
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import React, {useState, useMemo, useCallback, useEffect} from 'react';
|
||||
import moment from 'moment';
|
||||
import useAsync from 'hooks/async';
|
||||
import {compose} from 'utils';
|
||||
import ProfitLossSheetHeader from './ProfitLossSheetHeader';
|
||||
import ProfitLossSheetTable from './ProfitLossSheetTable';
|
||||
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 SettingsConnect from 'connectors/Settings.connect';
|
||||
|
||||
|
||||
function ProfitLossSheet({
|
||||
changePageTitle,
|
||||
fetchProfitLossSheet,
|
||||
getProfitLossSheetIndex,
|
||||
profitLossSheetLoading,
|
||||
organizationSettings,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
basis: 'cash',
|
||||
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('Profit/Loss Sheet');
|
||||
}, [changePageTitle]);
|
||||
|
||||
// Fetches profit/loss sheet.
|
||||
const fetchHook = useAsync((query = filter) => {
|
||||
return Promise.all([
|
||||
fetchProfitLossSheet(query),
|
||||
]);
|
||||
}, false);
|
||||
|
||||
// Retrieve profit/loss sheet index based on the given filter query.
|
||||
const profitLossSheetIndex = useMemo(() =>
|
||||
getProfitLossSheetIndex(filter),
|
||||
[getProfitLossSheetIndex, filter]);
|
||||
|
||||
// Handle submit filter.
|
||||
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'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
fetchHook.execute(_filter);
|
||||
}, [fetchHook]);
|
||||
|
||||
// Handle fetch data of profit/loss sheet table.
|
||||
const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<ProfitLossActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<div class="financial-statement">
|
||||
<ProfitLossSheetHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleSubmitFilter} />
|
||||
|
||||
<div class="financial-statement__body">
|
||||
<ProfitLossSheetTable
|
||||
companyName={organizationSettings.name}
|
||||
profitLossSheetIndex={profitLossSheetIndex}
|
||||
onFetchData={handleFetchData}
|
||||
loading={profitLossSheetLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DashboardConnect,
|
||||
ProfitLossSheetConnect,
|
||||
SettingsConnect,
|
||||
)(ProfitLossSheet);
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, {useCallback} from 'react';
|
||||
import {Row, Col} from 'react-grid-system';
|
||||
import {
|
||||
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/FinancialStatements/FinancialStatementDateRange';
|
||||
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
|
||||
import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
|
||||
import RadiosAccountingBasis from '../RadiosAccountingBasis';
|
||||
|
||||
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
// Handle item select of `display columns by` field.
|
||||
const handleItemSelectDisplayColumns = useCallback((item) => {
|
||||
formik.setFieldValue('display_columns_type', item.type);
|
||||
formik.setFieldValue('display_columns_by', item.by);
|
||||
}, [formik]);
|
||||
|
||||
const handleSubmitClick = useCallback(() => {
|
||||
formik.submitForm();
|
||||
}, [formik]);
|
||||
|
||||
const handleAccountingBasisChange = useCallback((value) => {
|
||||
formik.setFieldValue('basis', value);
|
||||
}, [formik]);
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader>
|
||||
<FinancialStatementDateRange formik={formik} />
|
||||
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<RadiosAccountingBasis
|
||||
selectedValue={formik.values.basis}
|
||||
onChange={handleAccountingBasisChange} />
|
||||
</Col>
|
||||
|
||||
<Col sm={3}>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleSubmitClick}
|
||||
className={'button--submit-filter mt2'}>
|
||||
{ 'Run Report' }
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import React, {useState, useMemo, useCallback} from 'react';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Money from 'components/Money';
|
||||
import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
|
||||
import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
|
||||
import { compose, defaultExpanderReducer } from 'utils';
|
||||
|
||||
|
||||
function ProfitLossSheetTable({
|
||||
loading,
|
||||
onFetchData,
|
||||
profitLossTableRows,
|
||||
profitLossQuery,
|
||||
profitLossColumns,
|
||||
companyName,
|
||||
}) {
|
||||
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: 'name',
|
||||
className: "name",
|
||||
},
|
||||
{
|
||||
Header: 'Acc. Code',
|
||||
accessor: 'code',
|
||||
className: "account_code",
|
||||
},
|
||||
...(profitLossQuery.display_columns_type === 'total') ? [
|
||||
{
|
||||
Header: 'Total',
|
||||
Cell: ({ cell }) => {
|
||||
const row = cell.row.original;
|
||||
if (row.total) {
|
||||
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
className: "total",
|
||||
}
|
||||
] : [],
|
||||
...(profitLossQuery.display_columns_type === 'date_periods') ?
|
||||
(profitLossColumns.map((column, index) => ({
|
||||
id: `date_period_${index}`,
|
||||
Header: column,
|
||||
accessor: (row) => {
|
||||
if (row.periods && row.periods[index]) {
|
||||
const amount = row.periods[index].formatted_amount;
|
||||
return (<Money amount={amount} currency={'USD'} />);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
width: 100,
|
||||
})))
|
||||
: [],
|
||||
], [profitLossQuery.display_columns_type, profitLossColumns]);
|
||||
|
||||
// Handle data table fetch data.
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
onFetchData && onFetchData(...args);
|
||||
}, [onFetchData]);
|
||||
|
||||
// Retrieve default expanded rows of balance sheet.
|
||||
const expandedRows = useMemo(() =>
|
||||
defaultExpanderReducer(profitLossTableRows, 1),
|
||||
[profitLossTableRows]);
|
||||
|
||||
// Retrieve conditional datatable row classnames.
|
||||
const rowClassNames = useCallback((row) => {
|
||||
return {
|
||||
[`row--${row.rowType}`]: row.rowType,
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={companyName}
|
||||
sheetType={'Profit/Loss Sheet'}
|
||||
date={new Date()}
|
||||
name="profit-loss-sheet"
|
||||
loading={loading}
|
||||
basis={profitLossQuery.basis}>
|
||||
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={profitLossTableRows}
|
||||
onFetchData={handleFetchData}
|
||||
expanded={expandedRows}
|
||||
rowClassNames={rowClassNames}
|
||||
noInitialFetch={true} />
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ProfitLossSheetConnect,
|
||||
ProfitLossSheetTableConnect,
|
||||
)(ProfitLossSheetTable);
|
||||
Reference in New Issue
Block a user