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

feat(UnrealizedGainorLoss): add Unrealized gain or loss.

Browse Source
This commit is contained in:
elforjani13
2022-02-03 22:47:56 +02:00
committed by a.bouhuolia
parent 3036b232b5
commit e1fe28736e
17 changed files with 447 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/config/sidebarMenu.js
View File

@@ -645,6 +645,10 @@ export default [
text: <T id={'realized_gain_or_loss.label'} />,
href: '/financial-reports/realized-gain-loss',
},
{
text: <T id={'unrealized_gain_or_loss.label'} />,
href: '/financial-reports/unrealized-gain-loss',
},
{
text: <T id={'Sales/Purchases'} />,
label: true,

65
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLoss.js Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
import { FinancialStatement } from 'components';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import UnrealizedGainOrLossHeader from './UnrealizedGainOrLossHeader';
import UnrealizedGainOrLossTable from './UnrealizedGainOrLossTable';
import UnrealizedGainOrLossActionsBar from './UnrealizedGainOrLossActionsBar';
import withCurrentOrganization from '../../Organization/withCurrentOrganization';
import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
import { UnrealizedGainOrLossProvider } from './UnrealizedGainOrLossProvider';
import { UnrealizedGainOrLossLoadingBar } from './components';
import { compose } from 'utils';
/**
* Unrealized Gain or Loss
*/
function UnrealizedGainOrLoss({
// #withPreferences
organizationName,
//#withUnrealizedGainOrLossActions
toggleUnrealizedGainOrLossFilterDrawer,
}) {
// Handle refetch unrealized Gain or Loss after filter change.
const handleFilterSubmit = (filter) => {};
// Handle format number submit.
const handleNumberFormatSubmit = (values) => {};
React.useEffect(
() => () => {
toggleUnrealizedGainOrLossFilterDrawer(false);
},
[toggleUnrealizedGainOrLossFilterDrawer],
);
return (
<UnrealizedGainOrLossProvider>
<UnrealizedGainOrLossActionsBar />
<DashboardPageContent>
<FinancialStatement>
<UnrealizedGainOrLossHeader
pageFilter={[]}
onSubmitFilter={handleFilterSubmit}
/>
<UnrealizedGainOrLossLoadingBar />
<div className="financial-statement__body">
<UnrealizedGainOrLossTable companyName={organizationName} />
</div>
</FinancialStatement>
</DashboardPageContent>
</UnrealizedGainOrLossProvider>
);
}
export default compose(
withCurrentOrganization(({ organization }) => ({
organizationName: organization.name,
})),
withUnrealizedGainOrLossActions,
)(UnrealizedGainOrLoss);

122
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.js Normal file
View File

@@ -0,0 +1,122 @@
import React from 'react';
import {
NavbarGroup,
NavbarDivider,
Button,
Classes,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T, Icon } from 'components';
import classNames from 'classnames';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import { useUnrealizedGainOrLossContext } from './UnrealizedGainOrLossProvider';
import withUnrealizedGainOrLoss from './withUnrealizedGainOrLoss';
import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
import { compose, saveInvoke } from 'utils';
/**
* unrealized Gain or Loss actions bar.
*/
function UnrealizedGainOrLossActionsBar({
//#withRealizedGainOrLoss
isFilterDrawerOpen,
//#withRealizedGainOrLossActions
toggleUnrealizedGainOrLossFilterDrawer,
//#ownProps
numberFormat,
onNumberFormatSubmit,
}) {
// Handle filter toggle click.
const handleFilterToggleClick = () => {
toggleUnrealizedGainOrLossFilterDrawer();
};
// Handle recalculate report button.
const handleRecalculateReport = () => {};
// handle number format form submit.
const handleNumberFormatSubmit = (values) =>
saveInvoke(onNumberFormatSubmit, values);
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
text={<T id={'recalc_report'} />}
onClick={handleRecalculateReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<NavbarDivider />
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
isFilterDrawerOpen ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
onClick={handleFilterToggleClick}
active={isFilterDrawerOpen}
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={false}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'format'} />}
icon={<Icon icon="numbers" width={23} height={16} />}
/>
</Popover>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
export default compose(
withUnrealizedGainOrLoss(({ unrealizedGainOrLossDrawerFilter }) => ({
isFilterDrawerOpen: unrealizedGainOrLossDrawerFilter,
})),
withUnrealizedGainOrLossActions,
)(UnrealizedGainOrLossActionsBar);

17
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossGeneralPanel.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Row, Col } from '../../../components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
/**
* Unrealized Gain or Loss header - General panel.
*/
export default function UnrealizedGainOrLossGeneralPanel() {
return (
<div>
<FinancialStatementDateRange />
<SelectDisplayColumnsBy />
</div>
);
}

108
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.js Normal file
View File

@@ -0,0 +1,108 @@
import React from 'react';
import moment from 'moment';
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { Formik, Form } from 'formik';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import UnrealizedGainOrLossGeneralPanel from './UnrealizedGainOrLossGeneralPanel';
import withUnrealizedGainOrLoss from './withUnrealizedGainOrLoss';
import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
import { compose, transformToForm } from 'utils';
/**
* Unrealized Gain or Loss.header.
*/
function UnrealizedGainOrLossHeader({
// #ownProps
onSubmitFilter,
pageFilter,
//#withUnrealizedGainOrLoss
isFilterDrawerOpen,
//#withUnrealizedGainOrLossActions
toggleUnrealizedGainOrLossFilterDrawer,
}) {
// Filter form default values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
// Initial form values.
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Validation schema.
const validationSchema = Yup.object().shape({
dateRange: Yup.string().optional(),
fromDate: Yup.date().required().label(intl.get('fromDate')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
.label(intl.get('toDate')),
displayColumnsType: Yup.string(),
});
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
toggleUnrealizedGainOrLossFilterDrawer(false);
setSubmitting(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleUnrealizedGainOrLossFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={isFilterDrawerOpen}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
<Form>
<Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
<Tab
id="general"
title={<T id={'general'} />}
panel={<UnrealizedGainOrLossGeneralPanel />}
/>
</Tabs>
<div class="financial-header-drawer__footer">
<Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
<T id={'calculate_report'} />
</Button>
<Button onClick={handleDrawerClose} minimal={true}>
<T id={'cancel'} />
</Button>
</div>
</Form>
</Formik>
</FinancialStatementHeader>
);
}
export default compose(
withUnrealizedGainOrLoss(({ unrealizedGainOrLossDrawerFilter }) => ({
isFilterDrawerOpen: unrealizedGainOrLossDrawerFilter,
})),
withUnrealizedGainOrLossActions,
)(UnrealizedGainOrLossHeader);

22
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossProvider.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
const UnrealizedGainOrLossContext = React.createContext();
/**
* Unrealized Gain or Loss provider.
*/
function UnrealizedGainOrLossProvider({ filter, ...props }) {
const provider = {};
return (
<FinancialReportPage name="unrealized-gain-loss">
<UnrealizedGainOrLossContext.Provider value={provider} {...props} />
</FinancialReportPage>
);
}
const useUnrealizedGainOrLossContext = () =>
React.useContext(UnrealizedGainOrLossContext);
export { UnrealizedGainOrLossProvider, useUnrealizedGainOrLossContext };

21
src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossTable.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DataTable } from 'components';
import FinancialSheet from 'components/FinancialSheet';
/**
* Unrealized Gain or Loss table.
*/
export default function UnrealizedGainOrLossTable({
// #ownProps
companyName,
}) {
return (
<FinancialSheet
name="unrealized-gain-loss"
companyName={companyName}
sheetType={intl.get('unrealized_gain_or_loss.label')}
></FinancialSheet>
);
}

18
src/containers/FinancialStatements/UnrealizedGainOrLoss/components.js Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { FormattedMessage as T } from 'components';
import { useUnrealizedGainOrLossContext } from './UnrealizedGainOrLossProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Unrealized Gain or Loss loading bar.
*/
export function UnrealizedGainOrLossLoadingBar() {
return (
<If condition={false}>
<FinancialLoadingBar />
</If>
);
}

12
src/containers/FinancialStatements/UnrealizedGainOrLoss/withUnrealizedGainOrLoss.js Normal file
View File

@@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { getUnrealizedGainOrLossFilterDrawer } from '../../../store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
unrealizedGainOrLossDrawerFilter: getUnrealizedGainOrLossFilterDrawer(state),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

9
src/containers/FinancialStatements/UnrealizedGainOrLoss/withUnrealizedGainOrLossActions.js Normal file
View File

@@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { toggleUnrealizedGainOrLossFilterDrawer } from '../../../store/financialStatement/financialStatements.actions';
const mapDispatchToProps = (dispatch) => ({
toggleUnrealizedGainOrLossFilterDrawer: (toggle) =>
dispatch(toggleUnrealizedGainOrLossFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);

1
src/hooks/query/types.js
View File

@@ -25,6 +25,7 @@ const FINANCIAL_REPORTS = {
INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS',
TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE',
REALIZED_GAIN_OR_LOSS: 'REALIZED_GAIN_OR_LOSS',
UNREALIZED_GAIN_OR_LOSS: 'UNREALIZED_GAIN_OR_LOSS',
};
const BILLS = {

4
src/lang/en/index.json
View File

@@ -1846,5 +1846,7 @@
"branch.dialog.label.website": "Website",
"branch.dialog.success_message": "The branch has been created successfully.",
"branch.alert.delete_message":"The branch has been deleted successfully",
"branch.once_delete_this_branch":"Once you delete this branch, you won't be able to restore it later. Are you sure you want to delete this branch?"
"branch.once_delete_this_branch":"Once you delete this branch, you won't be able to restore it later. Are you sure you want to delete this branch?",
"realized_gain_or_loss.label":"Realized Gain or Loss",
"unrealized_gain_or_loss.label":"Unrealized Gain or Loss"
}

14
src/routes/dashboard.js
View File

@@ -383,13 +383,25 @@ export const getDashboardRoutes = () => [
'../containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss'
),
),
breadcrumb: intl.get('realized_gain_or_loss.label'),
pageTitle: intl.get('realized_gain_or_loss.label'),
backLink: true,
sidebarExpand: false,
subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
},
{
path: `/financial-reports/unrealized-gain-loss`,
component: lazy(() =>
import(
'../containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLoss'
),
),
breadcrumb: intl.get('unrealized_gain_or_loss.label'),
pageTitle: intl.get('unrealized_gain_or_loss.label'),
backLink: true,
sidebarExpand: false,
subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
},
{
path: '/financial-reports',
component: lazy(() =>

15
src/store/financialStatement/financialStatements.actions.js
View File

@@ -209,7 +209,7 @@ export function toggleInventoryItemDetailsFilterDrawer(toggle) {
* Toggle display of the Realized Gain or Loss filter drawer.
* @param {boolean} toggle
*/
export function toggleRealizedGainOrLossCilterDrawer(toggle) {
export function toggleRealizedGainOrLossFilterDrawer(toggle) {
return {
type: `${t.REALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
@@ -217,3 +217,16 @@ export function toggleRealizedGainOrLossCilterDrawer(toggle) {
},
};
}
/**
* Toggle display of the Unrealized Gain or Loss filter drawer.
* @param {boolean} toggle
*/
export function toggleUnrealizedGainOrLossFilterDrawer(toggle) {
return {
type: `${t.UNREALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle,
},
};
}

4
src/store/financialStatement/financialStatements.reducer.js
View File

@@ -54,6 +54,9 @@ const initialState = {
realizedGainOrLoss: {
displayFilterDrawer: false,
},
unrealizedGainOrLoss: {
displayFilterDrawer: false,
},
};
/**
@@ -106,5 +109,6 @@ export default createReducer(initialState, {
'inventoryItemDetails',
),
...financialStatementFilterToggle(t.REALIZED_GAIN_OR_LOSS, 'realizedGainOrLoss'),
...financialStatementFilterToggle(t.UNREALIZED_GAIN_OR_LOSS, 'unrealizedGainOrLoss'),
});

13
src/store/financialStatement/financialStatements.selectors.js
View File

@@ -77,6 +77,10 @@ export const realizedGainOrLossFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('realizedGainOrLoss')(state);
};
export const unrealizedGainOrLossFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('unrealizedGainOrLoss')(state);
};
/**
* Retrieve balance sheet filter drawer.
*/
@@ -253,3 +257,12 @@ export const getRealizedGainOrLossFilterDrawer = createSelector(
return isOpen;
},
);
/**
* Retrieve Unrealized Gain or Loss filter drawer.
*/
export const getUnrealizedGainOrLossFilterDrawer = createSelector(
unrealizedGainOrLossFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);

1
src/store/financialStatement/financialStatements.types.js
View File

@@ -17,4 +17,5 @@ export default {
CASH_FLOW_STATEMENT: 'CASH FLOW STATEMENT',
INVENTORY_ITEM_DETAILS: 'INVENTORY ITEM DETAILS',
REALIZED_GAIN_OR_LOSS: 'REALIZED GAIN OR LOSS',
UNREALIZED_GAIN_OR_LOSS: 'UNREALIZED GAIN OR LOSS',
};