mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
Merge branch 'master' of https://github.com/abouolia/Ratteb
This commit is contained in:
a.bouhuolia
15
client/src/containers/Drawer/withDrawerActions.js
Normal file
15
client/src/containers/Drawer/withDrawerActions.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { connect } from 'react-redux';
|
||||
import t from 'store/types';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
openDrawer: (name, payload) =>
|
||||
dispatch({ type: t.OPEN_DRAWER, name, payload }),
|
||||
closeDrawer: (name, payload) =>
|
||||
dispatch({ type: t.CLOSE_DRAWER, name, payload }),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
19
client/src/containers/Drawer/withDrawers.js
Normal file
19
client/src/containers/Drawer/withDrawers.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
isDrawerOpenFactory,
|
||||
getDrawerPayloadFactory,
|
||||
} from 'store/dashboard/dashboard.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const isDrawerOpen = isDrawerOpenFactory();
|
||||
const getDrawerPayload = getDrawerPayloadFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapped = {
|
||||
isOpen: isDrawerOpen(state, props),
|
||||
payload: getDrawerPayload(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
29
client/src/containers/Drawers/DrawerTemplate.js
Normal file
29
client/src/containers/Drawers/DrawerTemplate.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { Position, Drawer } from '@blueprintjs/core';
|
||||
|
||||
export default function DrawerTemplate({
|
||||
children,
|
||||
isOpen,
|
||||
isClose,
|
||||
drawerProps,
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<Drawer
|
||||
isOpen={isOpen}
|
||||
usePortal={false}
|
||||
hasBackdrop={true}
|
||||
title={<T id={'view_paper'} />}
|
||||
position={Position.RIGHT}
|
||||
canOutsideClickClose={true}
|
||||
canEscapeKeyClose={true}
|
||||
size={'65%'}
|
||||
onClose={isClose}
|
||||
{...drawerProps}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
client/src/containers/Drawers/PaperTemplate.js
Normal file
123
client/src/containers/Drawers/PaperTemplate.js
Normal file
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import { Icon } from 'components';
|
||||
import 'style/components/Drawer/DrawerTemplate.scss';
|
||||
|
||||
export default function PaperTemplate({ labels: propLabels }) {
|
||||
const labels = {
|
||||
name: 'Estimate',
|
||||
billedTo: 'Billed to',
|
||||
date: 'Estimate date',
|
||||
refNo: 'Estimate No.',
|
||||
billedFrom: 'Billed from',
|
||||
amount: 'Estimate amount',
|
||||
dueDate: 'Due date',
|
||||
...propLabels,
|
||||
};
|
||||
|
||||
return (
|
||||
<div id={'page-size'}>
|
||||
<div className={'template'}>
|
||||
<div className={'template__header'}>
|
||||
<div className={'template__header--title'}>
|
||||
<h1>{labels.name}</h1>
|
||||
<p>info@bigcapital.ly </p>
|
||||
</div>
|
||||
<Icon icon="bigcapital" height={30} width={200} />
|
||||
</div>
|
||||
|
||||
<div className="template__content">
|
||||
<div className="template__content__info">
|
||||
<span> {labels.billedTo} </span>
|
||||
<p className={'info-paragraph'}>Joe Biden</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.date} </span>
|
||||
|
||||
<p className={'info-paragraph'}>1/1/2022</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.refNo} </span>
|
||||
<p className={'info-paragraph'}>IN-2022</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.amount} </span>
|
||||
<p className={'info-paragraph-amount'}>6,000 LYD</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.billedFrom} </span>
|
||||
<p className={'info-paragraph'}>Donald Trump</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.dueDate} </span>
|
||||
<p className={'info-paragraph'}>25/03/2022</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="template__table">
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell ">Description</span>
|
||||
<span className="template__table__rows--cell">Rate</span>
|
||||
<span className="template__table__rows--cell">Qty</span>
|
||||
<span className="template__table__rows--cell">Total</span>
|
||||
</div>
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell">
|
||||
Nulla commodo magnanon dolor excepteur nisi aute laborum.
|
||||
</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">100 LYD</span>
|
||||
</div>
|
||||
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell">
|
||||
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
|
||||
laborum.
|
||||
</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">100 LYD</span>
|
||||
</div>
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell">
|
||||
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
|
||||
laborum.
|
||||
</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">100 LYD</span>
|
||||
</div>
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell">
|
||||
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
|
||||
laborum.
|
||||
</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">100 LYD</span>
|
||||
</div>
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell">
|
||||
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
|
||||
laborum.
|
||||
</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">1</span>
|
||||
<span className="template__table__rows--cell">100 LYD</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="template__terms">
|
||||
<div className="template__terms__title">
|
||||
<h4>Conditions and terms</h4>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Est excepteur laboris do sit dolore sit exercitation non.</li>
|
||||
<li>Lorem duis aliqua minim elit cillum.</li>
|
||||
<li>Dolor ad quis Lorem ut mollit consectetur.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
102
client/src/containers/Drawers/PaymentPaperTemplate.js
Normal file
102
client/src/containers/Drawers/PaymentPaperTemplate.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import { Icon } from 'components';
|
||||
import 'style/components/Drawer/DrawerTemplate.scss';
|
||||
|
||||
export default function PaymentPaperTemplate({ labels: propLabels }) {
|
||||
const labels = {
|
||||
title: 'Payment receive',
|
||||
billedTo: 'Billed to',
|
||||
paymentDate: 'Payment date',
|
||||
paymentNo: 'Payment No.',
|
||||
billedFrom: 'Billed from',
|
||||
referenceNo: 'Reference No',
|
||||
amountReceived: 'Amount received',
|
||||
...propLabels,
|
||||
};
|
||||
|
||||
return (
|
||||
<div id={'page-size'}>
|
||||
<div className={'template'}>
|
||||
<div className={'template__header'}>
|
||||
<div className={'template__header--title'}>
|
||||
<h1>{labels.title}</h1>
|
||||
<p>info@bigcapital.ly </p>
|
||||
</div>
|
||||
<Icon icon="bigcapital" height={30} width={200} />
|
||||
</div>
|
||||
|
||||
<div className="template__content">
|
||||
<div className="template__content__info">
|
||||
<span> {labels.billedTo} </span>
|
||||
<p className={'info-paragraph'}>Step Currency</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.paymentDate} </span>
|
||||
<p className={'info-paragraph'}>1/1/2022</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.paymentNo} </span>
|
||||
<p className={'info-paragraph'}>IN-2022</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.amountReceived} </span>
|
||||
<p className={'info-paragraph-amount'}>60,000 USD</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.billedFrom} </span>
|
||||
<p className={'info-paragraph'}> Klay Thompson</p>
|
||||
</div>
|
||||
<div className="template__content__info">
|
||||
<span> {labels.referenceNo} </span>
|
||||
<p className={'info-paragraph'}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="template__table">
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell-payment-receive ">
|
||||
Invoice number
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive ">
|
||||
Invoice date
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive ">
|
||||
Invoice amount
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive ">
|
||||
Payment amount
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
INV-1
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
12 Jan 2021
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
50,000 USD
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
1000 USD
|
||||
</span>
|
||||
</div>
|
||||
<div className="template__table__rows">
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
INV-2{' '}
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
12 Jan 2021
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
50,000 USD
|
||||
</span>
|
||||
<span className="template__table__rows--cell-payment-receive">
|
||||
1000 USD
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { queryCache, useQuery } from 'react-query';
|
||||
import moment from 'moment';
|
||||
|
||||
import { FinancialStatement } from 'components';
|
||||
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
|
||||
import APAgingSummaryHeader from './APAgingSummaryHeader';
|
||||
import APAgingSummaryTable from './APAgingSummaryTable';
|
||||
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
|
||||
import withAPAgingSummary from './withAPAgingSummary';
|
||||
import { transformFilterFormToQuery } from './common';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
|
||||
|
||||
/**
|
||||
* AP aging summary report.
|
||||
*/
|
||||
function APAgingSummary({
|
||||
// #withSettings
|
||||
organizationName,
|
||||
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
setDashboardBackLink,
|
||||
|
||||
// #withAPAgingSummary
|
||||
APAgingSummaryRefresh,
|
||||
|
||||
// #withAPAgingSummaryActions
|
||||
requestPayableAgingSummary,
|
||||
refreshAPAgingSummary,
|
||||
toggleFilterAPAgingSummary,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const [query, setQuery] = useState({
|
||||
asDate: moment().endOf('day').format('YYYY-MM-DD'),
|
||||
agingBeforeDays: 30,
|
||||
agingPeriods: 3,
|
||||
});
|
||||
|
||||
// handle fetching payable aging summary report.
|
||||
const fetchAPAgingSummarySheet = useQuery(
|
||||
['payable-aging-summary', query],
|
||||
(key, _query) =>
|
||||
requestPayableAgingSummary({
|
||||
...transformFilterFormToQuery(_query),
|
||||
}),
|
||||
{ enable: true },
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'payable_aging_summary' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (APAgingSummaryRefresh) {
|
||||
queryCache.invalidateQueries('payable-aging-summary');
|
||||
refreshAPAgingSummary(false);
|
||||
}
|
||||
}, [APAgingSummaryRefresh, refreshAPAgingSummary]);
|
||||
|
||||
useEffect(() => {
|
||||
setDashboardBackLink(true);
|
||||
return () => {
|
||||
setDashboardBackLink(false);
|
||||
};
|
||||
}, [setDashboardBackLink]);
|
||||
|
||||
const handleFilterSubmit = (filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
setQuery(_filter);
|
||||
refreshAPAgingSummary(true);
|
||||
toggleFilterAPAgingSummary(false);
|
||||
};
|
||||
|
||||
const handleNumberFormatSubmit = (numberFormat) => {
|
||||
setQuery({
|
||||
...query,
|
||||
numberFormat,
|
||||
});
|
||||
refreshAPAgingSummary(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<APAgingSummaryActionsBar
|
||||
numberFormat={query.numberFormat}
|
||||
onNumberFormatSubmit={handleNumberFormatSubmit}
|
||||
/>
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement>
|
||||
<APAgingSummaryHeader
|
||||
pageFilter={query}
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
/>
|
||||
<div className={'financial-statement__body'}>
|
||||
<APAgingSummaryTable organizationName={organizationName} />
|
||||
</div>
|
||||
</FinancialStatement>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withAPAgingSummaryActions,
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
organizationName: organizationSettings.name,
|
||||
})),
|
||||
withAPAgingSummary(({ APAgingSummaryRefresh }) => ({
|
||||
APAgingSummaryRefresh,
|
||||
})),
|
||||
)(APAgingSummary);
|
||||
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarDivider,
|
||||
NavbarGroup,
|
||||
Classes,
|
||||
Button,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
|
||||
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import { Icon } from 'components';
|
||||
import NumberFormatDropdown from 'components/NumberFormatDropdown';
|
||||
|
||||
import withAPAgingSummary from './withAPAgingSummary';
|
||||
import withARAgingSummaryActions from './withAPAgingSummaryActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* AP Aging summary sheet - Actions bar.
|
||||
*/
|
||||
function APAgingSummaryActionsBar({
|
||||
//#withPayableAgingSummary
|
||||
payableAgingFilter,
|
||||
payableAgingLoading,
|
||||
|
||||
//#withARAgingSummaryActions
|
||||
toggleFilterAPAgingSummary,
|
||||
refreshAPAgingSummary,
|
||||
|
||||
//#ownProps
|
||||
numberFormat,
|
||||
onNumberFormatSubmit,
|
||||
}) {
|
||||
const handleFilterToggleClick = () => toggleFilterAPAgingSummary();
|
||||
|
||||
// handle recalculate report button.
|
||||
const handleRecalculateReport = () => refreshAPAgingSummary(true);
|
||||
|
||||
// handle number format submit.
|
||||
const handleNumberFormatSubmit = (numberFormat) =>
|
||||
safeInvoke(onNumberFormatSubmit, numberFormat);
|
||||
|
||||
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={
|
||||
payableAgingFilter ? (
|
||||
<T id={'hide_customizer'} />
|
||||
) : (
|
||||
<T id={'customize_report'} />
|
||||
)
|
||||
}
|
||||
onClick={handleFilterToggleClick}
|
||||
active={payableAgingFilter}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
<Popover
|
||||
content={
|
||||
<NumberFormatDropdown
|
||||
numberFormat={numberFormat}
|
||||
onSubmit={handleNumberFormatSubmit}
|
||||
submitDisabled={payableAgingLoading}
|
||||
/>
|
||||
}
|
||||
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={Classes.MINIMAL}
|
||||
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(
|
||||
withARAgingSummaryActions,
|
||||
withAPAgingSummary(
|
||||
({ payableAgingSummaryLoading, payableAgingSummaryFilter }) => ({
|
||||
payableAgingLoading: payableAgingSummaryLoading,
|
||||
payableAgingFilter: payableAgingSummaryFilter,
|
||||
}),
|
||||
),
|
||||
)(APAgingSummaryActionsBar);
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { Formik, Form, validateYupSchema } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import moment from 'moment';
|
||||
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
|
||||
|
||||
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
|
||||
import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
|
||||
|
||||
import withAPAgingSummary from './withAPAgingSummary';
|
||||
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* AP Aging Summary Report - Drawer Header.
|
||||
*/
|
||||
function APAgingSummaryHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
payableAgingFilter,
|
||||
|
||||
// #withPayableAgingSummaryActions
|
||||
toggleFilterAPAgingSummary,
|
||||
}) {
|
||||
const validationSchema = Yup.object({
|
||||
as_date: Yup.date().required().label('asDate'),
|
||||
aging_days_before: Yup.number()
|
||||
.required()
|
||||
.integer()
|
||||
.positive()
|
||||
.label('agingBeforeDays'),
|
||||
aging_periods: Yup.number()
|
||||
.required()
|
||||
.integer()
|
||||
.positive()
|
||||
.label('agingPeriods'),
|
||||
});
|
||||
|
||||
// initial values.
|
||||
const initialValues = {
|
||||
as_date: moment(pageFilter.asDate).toDate(),
|
||||
aging_days_before: 30,
|
||||
aging_periods: 3,
|
||||
};
|
||||
|
||||
// handle form submit.
|
||||
const handleSubmit = (values, { setSubmitting }) => {
|
||||
onSubmitFilter(values);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
// handle cancel button click.
|
||||
const handleCancelClick = () => toggleFilterAPAgingSummary();
|
||||
return (
|
||||
<FinancialStatementHeader isOpen={payableAgingFilter}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Form>
|
||||
<Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
|
||||
<Tab
|
||||
id={'general'}
|
||||
title={<T id={'general'} />}
|
||||
panel={<APAgingSummaryHeaderGeneral />}
|
||||
/>
|
||||
</Tabs>
|
||||
<div className={'financial-header-drawer__footer'}>
|
||||
<Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
|
||||
<T id={'calculate_report'} />
|
||||
</Button>
|
||||
<Button onClick={handleCancelClick} minimal={true}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
</FinancialStatementHeader>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withAPAgingSummaryActions,
|
||||
withAPAgingSummary(({ payableAgingSummaryFilter }) => ({
|
||||
payableAgingFilter: payableAgingSummaryFilter,
|
||||
})),
|
||||
)(APAgingSummaryHeader);
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { FastField } from 'formik';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { Row, Col, FieldHint } from 'components';
|
||||
import {
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
inputIntent,
|
||||
handleDateChange,
|
||||
} from 'utils';
|
||||
|
||||
/**
|
||||
* AP Aging Summary - Drawer Header - General Fields.
|
||||
*/
|
||||
export default function APAgingSummaryHeaderGeneral() {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
<FastField name={'asDate'}>
|
||||
{({ form, field: { value }, meta: { error } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'as_date'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
fill={true}
|
||||
intent={inputIntent({ error })}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((selectedDate) => {
|
||||
form.setFieldValue('asDate', selectedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
minimal={true}
|
||||
fill={true}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
<FastField name={'aging_days_before'}>
|
||||
{({ field, meta: { error } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'aging_before_days'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
intent={inputIntent({ error })}
|
||||
>
|
||||
<InputGroup intent={error && Intent.DANGER} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
<FastField name={'aging_periods'}>
|
||||
{({ field, meta: { error } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'aging_periods'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
intent={inputIntent({ error })}
|
||||
>
|
||||
<InputGroup intent={error && Intent.DANGER} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { DataTable } from 'components';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
|
||||
import withAPAgingSummary from './withAPAgingSummary';
|
||||
|
||||
import { compose, getColumnWidth } from 'utils';
|
||||
|
||||
/**
|
||||
* AP aging summary table sheet.
|
||||
*/
|
||||
function APAgingSummaryTable({
|
||||
//#withPayableAgingSummary
|
||||
payableAgingColumns,
|
||||
payableAgingRows,
|
||||
payableAgingLoading,
|
||||
|
||||
//#ownProps
|
||||
organizationName,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const agingColumns = useMemo(
|
||||
() =>
|
||||
payableAgingColumns.map((agingColumn) => {
|
||||
return `${agingColumn.before_days} - ${
|
||||
agingColumn.to_days || 'And Over'
|
||||
}`;
|
||||
}),
|
||||
[payableAgingColumns],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: <T id={'vendor_name'} />,
|
||||
accessor: 'name',
|
||||
className: 'name',
|
||||
width: 240,
|
||||
sticky: 'left',
|
||||
textOverview: true,
|
||||
},
|
||||
{
|
||||
Header: <T id={'current'} />,
|
||||
accessor: 'current',
|
||||
className: 'current',
|
||||
width: getColumnWidth(payableAgingRows, `current`, {
|
||||
minWidth: 120,
|
||||
}),
|
||||
},
|
||||
|
||||
...agingColumns.map((agingColumn, index) => ({
|
||||
Header: agingColumn,
|
||||
accessor: `aging-${index}`,
|
||||
width: getColumnWidth(payableAgingRows, `aging-${index}`, {
|
||||
minWidth: 120,
|
||||
}),
|
||||
})),
|
||||
{
|
||||
Header: <T id={'total'} />,
|
||||
accessor: 'total',
|
||||
width: getColumnWidth(payableAgingRows, 'total', {
|
||||
minWidth: 120,
|
||||
}),
|
||||
},
|
||||
],
|
||||
[payableAgingRows],
|
||||
);
|
||||
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={organizationName}
|
||||
name={'payable-aging-summary'}
|
||||
sheetType={formatMessage({ id: 'payable_aging_summary' })}
|
||||
asDate={new Date()}
|
||||
loading={payableAgingLoading}
|
||||
>
|
||||
<DataTable
|
||||
className={'bigcapital-datatable--financial-report'}
|
||||
columns={columns}
|
||||
data={payableAgingRows}
|
||||
rowClassNames={rowClassNames}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withAPAgingSummary(
|
||||
({
|
||||
payableAgingSummaryLoading,
|
||||
payableAgingSummaryColumns,
|
||||
payableAgingSummaryRows,
|
||||
}) => ({
|
||||
payableAgingLoading: payableAgingSummaryLoading,
|
||||
payableAgingColumns: payableAgingSummaryColumns,
|
||||
payableAgingRows: payableAgingSummaryRows,
|
||||
}),
|
||||
),
|
||||
)(APAgingSummaryTable);
|
||||
@@ -0,0 +1,5 @@
|
||||
import { transformToCamelCase, flatObject } from 'utils';
|
||||
|
||||
export const transformFilterFormToQuery = (form) => {
|
||||
return flatObject(transformToCamelCase(form));
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getFinancialSheetFactory,
|
||||
getFinancialSheetColumnsFactory,
|
||||
getFinancialSheetTableRowsFactory,
|
||||
} from 'store/financialStatement/financialStatements.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const mapStateToProps = (state, props) => {
|
||||
const getAPAgingSheet = getFinancialSheetFactory('payableAgingSummary');
|
||||
const getAPAgingSheetColumns = getFinancialSheetColumnsFactory(
|
||||
'payableAgingSummary',
|
||||
);
|
||||
const getAPAgingSheetRows = getFinancialSheetTableRowsFactory(
|
||||
'payableAgingSummary',
|
||||
);
|
||||
|
||||
const {
|
||||
loading,
|
||||
filter,
|
||||
refresh,
|
||||
} = state.financialStatements.payableAgingSummary;
|
||||
|
||||
const mapped = {
|
||||
payableAgingSummarySheet: getAPAgingSheet(state, props),
|
||||
payableAgingSummaryColumns: getAPAgingSheetColumns(state, props),
|
||||
payableAgingSummaryRows: getAPAgingSheetRows(state, props),
|
||||
payableAgingSummaryLoading: loading,
|
||||
payableAgingSummaryFilter: filter,
|
||||
APAgingSummaryRefresh: refresh,
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
fetchPayableAginSummary,
|
||||
payableAgingSummaryRefresh,
|
||||
} from 'store/financialStatement/financialStatements.actions';
|
||||
|
||||
const mapActionsToProps = (dispatch) => ({
|
||||
requestPayableAgingSummary: (query) =>
|
||||
dispatch(fetchPayableAginSummary({ query })),
|
||||
refreshAPAgingSummary: (refresh) =>
|
||||
dispatch(payableAgingSummaryRefresh(refresh)),
|
||||
toggleFilterAPAgingSummary: () =>
|
||||
dispatch({
|
||||
type: 'PAYABLE_AGING_SUMMARY_FILTER_TOGGLE',
|
||||
}),
|
||||
});
|
||||
|
||||
export default connect(null, mapActionsToProps);
|
||||
@@ -29,16 +29,13 @@ function ReceivableAgingSummarySheet({
|
||||
});
|
||||
|
||||
// Handle filter submit.
|
||||
const handleFilterSubmit = useCallback(
|
||||
(filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
},
|
||||
[],
|
||||
);
|
||||
const handleFilterSubmit = useCallback((filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter(_filter);
|
||||
}, []);
|
||||
|
||||
// Handle number format submit.
|
||||
const handleNumberFormatSubmit = (numberFormat) => {
|
||||
@@ -49,8 +46,8 @@ function ReceivableAgingSummarySheet({
|
||||
<ARAgingSummaryProvider filter={filter}>
|
||||
<ARAgingSummaryActionsBar
|
||||
numberFormat={filter.numberFormat}
|
||||
onNumberFormatSubmit={handleNumberFormatSubmit}/>
|
||||
|
||||
onNumberFormatSubmit={handleNumberFormatSubmit}
|
||||
/>
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement>
|
||||
<ARAgingSummaryHeader
|
||||
@@ -58,9 +55,7 @@ function ReceivableAgingSummarySheet({
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
/>
|
||||
<div class="financial-statement__body">
|
||||
<ARAgingSummaryTable
|
||||
organizationName={organizationName}
|
||||
/>
|
||||
<ARAgingSummaryTable organizationName={organizationName} />
|
||||
</div>
|
||||
</FinancialStatement>
|
||||
</DashboardPageContent>
|
||||
|
||||
@@ -48,7 +48,6 @@ function ARAgingSummaryActionsBar({
|
||||
const handleNumberFormatSubmit = (numberFormat) => {
|
||||
safeInvoke(onNumberFormatSubmit, numberFormat);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
@@ -98,7 +97,7 @@ function ARAgingSummaryActionsBar({
|
||||
className={Classes.MINIMAL}
|
||||
text={<T id={'filter'} />}
|
||||
icon={<Icon icon="filter-16" iconSize={16} />}
|
||||
/>
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
|
||||
32
client/src/containers/Homepage/AnnouncementList.js
Normal file
32
client/src/containers/Homepage/AnnouncementList.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { announcementLists } from 'common/homepageOptions';
|
||||
|
||||
function AnnouncementBox({ title, description }) {
|
||||
return (
|
||||
<div className={'announcement-box'}>
|
||||
<div className={'announcement-box__title'}>{title}</div>
|
||||
<div className={'announcement-box__description'}>{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AnnouncementList() {
|
||||
return (
|
||||
<section className={'announcements-list'}>
|
||||
<div className={'announcements-list__title'}>Announcement</div>
|
||||
|
||||
{announcementLists.map(({ title, description }) => (
|
||||
<AnnouncementBox title={title} description={description} />
|
||||
))}
|
||||
|
||||
<a href={'#'} className={'btn-view-all'}>
|
||||
<T id={'view_all'} />
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnnouncementList;
|
||||
@@ -1,19 +1,19 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import HomepageContent from './HomepageContent';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function DashboardHomepage({ changePageTitle, name }) {
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(name)
|
||||
changePageTitle(name);
|
||||
}, [name, changePageTitle]);
|
||||
|
||||
return (
|
||||
<DashboardInsider name="homepage">
|
||||
|
||||
<HomepageContent />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
@@ -23,4 +23,4 @@ export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
name: organizationSettings.name,
|
||||
})),
|
||||
)(DashboardHomepage);
|
||||
)(DashboardHomepage);
|
||||
|
||||
16
client/src/containers/Homepage/HomepageContent.js
Normal file
16
client/src/containers/Homepage/HomepageContent.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import ShortcutBoxes from './ShortcutBoxes';
|
||||
import AnnouncementList from './AnnouncementList';
|
||||
|
||||
import 'style/pages/HomePage/HomePage.scss';
|
||||
|
||||
function HomepageContent() {
|
||||
return (
|
||||
<div className={'homepage__container'}>
|
||||
<ShortcutBoxes />
|
||||
<AnnouncementList />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomepageContent;
|
||||
45
client/src/containers/Homepage/ShortcutBoxes.js
Normal file
45
client/src/containers/Homepage/ShortcutBoxes.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { shortcutBox } from 'common/homepageOptions';
|
||||
import { Icon } from 'components';
|
||||
|
||||
function ShortcutBox({ title, iconColor, description }) {
|
||||
return (
|
||||
<div className={'shortcut-box'}>
|
||||
<div className={'shortcut-box__header'}>
|
||||
<span
|
||||
className={'header--icon'}
|
||||
style={{ backgroundColor: `${iconColor}` }}
|
||||
>
|
||||
<Icon icon={'clock'} iconSize={24} />
|
||||
</span>
|
||||
<span>
|
||||
<a href={'#'}>
|
||||
<Icon icon={'arrow-top-right'} iconSize={24} />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div className={'shortcut-box__title'}>{title}</div>
|
||||
<div className={'shortcut-box__description'}>{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShortcutBoxes() {
|
||||
return (
|
||||
<section className={'shortcut-boxes'}>
|
||||
{shortcutBox.map(({ title, description, iconColor }) => {
|
||||
return (
|
||||
<ShortcutBox
|
||||
title={title}
|
||||
description={description}
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShortcutBoxes;
|
||||
298
client/src/containers/Sales/Estimate/EstimatesDataTable.js
Normal file
298
client/src/containers/Sales/Estimate/EstimatesDataTable.js
Normal file
@@ -0,0 +1,298 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Tag,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { compose, saveInvoke } from 'utils';
|
||||
import { useIsValuePassed } from 'hooks';
|
||||
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { DataTable, Money, Choose, Icon, If } from 'components';
|
||||
import EstimatesEmptyStatus from './EstimatesEmptyStatus';
|
||||
import { statusAccessor } from './components';
|
||||
import withEstimates from './withEstimates';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
|
||||
// Estimates transactions datatable.
|
||||
function EstimatesDataTable({
|
||||
// #withEstimates
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimatesTableQuery,
|
||||
estimatesCurrentViewId,
|
||||
|
||||
// #withEstimatesActions
|
||||
addEstimatesTableQueries,
|
||||
|
||||
// #withSettings
|
||||
baseCurrency,
|
||||
|
||||
// #ownProps
|
||||
onEditEstimate,
|
||||
onDeleteEstimate,
|
||||
onDeliverEstimate,
|
||||
onApproveEstimate,
|
||||
onRejectEstimate,
|
||||
onDrawerEstimate,
|
||||
onSelectedRowsChange,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const isLoaded = useIsValuePassed(estimatesLoading, false);
|
||||
|
||||
const handleEditEstimate = useCallback(
|
||||
(estimate) => () => {
|
||||
saveInvoke(onEditEstimate, estimate);
|
||||
},
|
||||
[onEditEstimate],
|
||||
);
|
||||
|
||||
const handleDeleteEstimate = useCallback(
|
||||
(estimate) => () => {
|
||||
saveInvoke(onDeleteEstimate, estimate);
|
||||
},
|
||||
[onDeleteEstimate],
|
||||
);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(estimate) => (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={formatMessage({ id: 'view_details' })}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
icon={<Icon icon="pen-18" />}
|
||||
text={formatMessage({ id: 'edit_estimate' })}
|
||||
onClick={handleEditEstimate(estimate)}
|
||||
/>
|
||||
<If condition={!estimate.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_delivered' })}
|
||||
onClick={() => onDeliverEstimate(estimate)}
|
||||
/>
|
||||
</If>
|
||||
<Choose>
|
||||
<Choose.When
|
||||
condition={estimate.is_delivered && estimate.is_approved}
|
||||
>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={() => onRejectEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When
|
||||
condition={estimate.is_delivered && estimate.is_rejected}
|
||||
>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={() => onApproveEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When condition={estimate.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={() => onApproveEstimate(estimate)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={() => onRejectEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
</Choose>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'estimate_paper' })}
|
||||
onClick={() => onDrawerEstimate()}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_estimate' })}
|
||||
intent={Intent.DANGER}
|
||||
onClick={handleDeleteEstimate(estimate)}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[handleDeleteEstimate, handleEditEstimate, formatMessage],
|
||||
);
|
||||
|
||||
const onRowContextMenu = useCallback(
|
||||
(cell) => {
|
||||
return actionMenuList(cell.row.original);
|
||||
},
|
||||
[actionMenuList],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'estimate_date',
|
||||
Header: formatMessage({ id: 'estimate_date' }),
|
||||
accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'estimate_date',
|
||||
},
|
||||
{
|
||||
id: 'customer_id',
|
||||
Header: formatMessage({ id: 'customer_name' }),
|
||||
accessor: 'customer.display_name',
|
||||
width: 140,
|
||||
className: 'customer_id',
|
||||
},
|
||||
{
|
||||
id: 'expiration_date',
|
||||
Header: formatMessage({ id: 'expiration_date' }),
|
||||
accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'expiration_date',
|
||||
},
|
||||
{
|
||||
id: 'estimate_number',
|
||||
Header: formatMessage({ id: 'estimate_number' }),
|
||||
accessor: (row) =>
|
||||
row.estimate_number ? `#${row.estimate_number}` : null,
|
||||
width: 140,
|
||||
className: 'estimate_number',
|
||||
},
|
||||
{
|
||||
id: 'amount',
|
||||
Header: formatMessage({ id: 'amount' }),
|
||||
accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
|
||||
|
||||
width: 140,
|
||||
className: 'amount',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'status',
|
||||
Header: formatMessage({ id: 'status' }),
|
||||
accessor: (row) => statusAccessor(row),
|
||||
width: 140,
|
||||
className: 'status',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'reference',
|
||||
Header: formatMessage({ id: 'reference_no' }),
|
||||
accessor: 'reference',
|
||||
width: 140,
|
||||
className: 'reference',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[actionMenuList, formatMessage],
|
||||
);
|
||||
|
||||
const handleFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
const page = pageIndex + 1;
|
||||
|
||||
addEstimatesTableQueries({
|
||||
...(sortBy.length > 0
|
||||
? {
|
||||
column_sort_by: sortBy[0].id,
|
||||
sort_order: sortBy[0].desc ? 'desc' : 'asc',
|
||||
}
|
||||
: {}),
|
||||
page_size: pageSize,
|
||||
page,
|
||||
});
|
||||
},
|
||||
[addEstimatesTableQueries],
|
||||
);
|
||||
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(selectedRows) => {
|
||||
saveInvoke(
|
||||
onSelectedRowsChange,
|
||||
selectedRows.map((s) => s.original),
|
||||
);
|
||||
},
|
||||
[onSelectedRowsChange],
|
||||
);
|
||||
|
||||
const showEmptyStatus = [
|
||||
estimatesCurrentPage.length === 0,
|
||||
estimatesCurrentViewId === -1,
|
||||
].every((d) => d === true);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
|
||||
<LoadingIndicator loading={estimatesLoading && !isLoaded} mount={false}>
|
||||
<Choose>
|
||||
<Choose.When condition={showEmptyStatus}>
|
||||
<EstimatesEmptyStatus />
|
||||
</Choose.When>
|
||||
|
||||
<Choose.Otherwise>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={estimatesCurrentPage}
|
||||
onFetchData={handleFetchData}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
rowContextMenu={onRowContextMenu}
|
||||
pagination={true}
|
||||
pagesCount={estimatesPageination.pagesCount}
|
||||
initialPageSize={estimatesTableQuery.page_size}
|
||||
initialPageIndex={estimatesTableQuery.page - 1}
|
||||
/>
|
||||
</Choose.Otherwise>
|
||||
</Choose>
|
||||
</LoadingIndicator>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withEstimateActions,
|
||||
withEstimates(
|
||||
({
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimatesTableQuery,
|
||||
estimatesCurrentViewId,
|
||||
}) => ({
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimatesTableQuery,
|
||||
estimatesCurrentViewId,
|
||||
}),
|
||||
),
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(EstimatesDataTable);
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
|
||||
import PaperTemplate from 'containers/Drawers/PaperTemplate';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
import withDrawerActions from 'containers/Drawer/withDrawerActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function EstimateDrawer({
|
||||
name,
|
||||
//#withDrawer
|
||||
isOpen,
|
||||
payload,
|
||||
|
||||
closeDrawer,
|
||||
}) {
|
||||
// handle close Drawer
|
||||
const handleDrawerClose = () => {
|
||||
closeDrawer(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
|
||||
<PaperTemplate />
|
||||
</DrawerTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers(), withDrawerActions)(EstimateDrawer);
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
|
||||
import PaperTemplate from 'containers/Drawers/PaperTemplate';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
import withDrawerActions from 'containers/Drawer/withDrawerActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function InvoiceDrawer({
|
||||
name,
|
||||
//#withDrawer
|
||||
isOpen,
|
||||
payload,
|
||||
|
||||
closeDrawer,
|
||||
}) {
|
||||
// handle close Drawer
|
||||
const handleDrawerClose = () => {
|
||||
closeDrawer(name);
|
||||
};
|
||||
|
||||
const propLabels = {
|
||||
labels: {
|
||||
name: 'Invoice',
|
||||
billedTo: 'Billed to',
|
||||
date: 'Invoice date',
|
||||
refNo: 'Invoice No.',
|
||||
billedFrom: 'Billed from',
|
||||
amount: 'Invoice amount',
|
||||
dueDate: 'Due date',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
|
||||
<PaperTemplate labels={propLabels.labels} />
|
||||
</DrawerTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer);
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
|
||||
import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
import withDrawerActions from 'containers/Drawer/withDrawerActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function PaymentReceiveDrawer({
|
||||
name,
|
||||
//#withDrawer
|
||||
isOpen,
|
||||
payload,
|
||||
|
||||
closeDrawer,
|
||||
}) {
|
||||
// handle close Drawer
|
||||
const handleDrawerClose = () => {
|
||||
closeDrawer(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
|
||||
<PaymentPaperTemplate />
|
||||
</DrawerTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers(), withDrawerActions)(PaymentReceiveDrawer);
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
|
||||
import PaperTemplate from 'containers/Drawers/PaperTemplate';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
import withDrawerActions from 'containers/Drawer/withDrawerActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ReceiptDrawer = ({
|
||||
name,
|
||||
//#withDrawer
|
||||
isOpen,
|
||||
payload,
|
||||
|
||||
closeDrawer,
|
||||
}) => {
|
||||
// handle close Drawer
|
||||
const handleDrawerClose = () => {
|
||||
closeDrawer(name);
|
||||
};
|
||||
|
||||
const propLabels = {
|
||||
labels: {
|
||||
name: 'Receipt',
|
||||
billedTo: 'Billed to',
|
||||
date: 'Receipt date',
|
||||
refNo: 'Receipt No.',
|
||||
billedFrom: 'Billed from',
|
||||
amount: 'Receipt amount',
|
||||
dueDate: 'Due date',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
|
||||
<PaperTemplate labels={propLabels.labels} />
|
||||
</DrawerTemplate>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(withDrawers(), withDrawerActions)(ReceiptDrawer);
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
|
||||
import 'style/pages/Subscription/BillingPlans.scss'
|
||||
import 'style/pages/Subscription/BillingPlans.scss';
|
||||
|
||||
import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
|
||||
import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
|
||||
import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod';
|
||||
import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
|
||||
|
||||
/**
|
||||
* Billing plans form.
|
||||
@@ -26,5 +26,5 @@ export default function BillingPlansForm() {
|
||||
description={<T id={'please_enter_your_preferred_payment_method'} />}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user