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

refactoring: payment receive form.

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-17 19:45:18 +02:00
parent 95cccfd13b
commit e36817cb88
46 changed files with 775 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/ContactSelecetList.js
View File

@@ -14,6 +14,7 @@ export default function ContactSelecetList({
onContactSelected,
popoverFill = false,
disabled = false,
buttonProps
}) {
const contacts = useMemo(
() =>
@@ -94,6 +95,7 @@ export default function ContactSelecetList({
text={
selecetedContact ? selecetedContact.display_name : defaultSelectText
}
{...buttonProps}
/>
</Select>
);

2
client/src/components/Sidebar/SidebarMenu.js
View File

@@ -59,7 +59,7 @@ export default function SidebarMenu() {
disabled={item.disabled}
children={children}
dropdownType={item.dropdownType || 'collapse'}
caretIconSize={15}
caretIconSize={16}
onClick={handleItemClick}
callapseActive={!!isActive}
itemClassName={classNames({

2
client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js
View File

@@ -47,7 +47,7 @@ function InvoiceDeleteAlert({
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
.catch(({ response: { data: { errors } } }) => {
handleDeleteErrors(errors);
})
.finally(() => {

45
client/src/containers/Alerts/PaymentMades/ChangingFullAmountAlert.js
View File

@@ -1,15 +1,45 @@
import React from 'react';
import { Alert } from '@blueprintjs/core';
import { Intent, Alert } from '@blueprintjs/core';
import withAlertActions from 'containers/Alert/withAlertActions';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import { compose } from 'utils';
import { saveInvoke } from '../../../utils';
/**
* Changing full-amount alert in payment made form.
*/
function ChangingFullAmountAlert({
name,
onConfirm,
// #withAlertStoreConnect
isOpen,
payload: { },
// #withAlertActions
closeAlert,
}) {
// Handle the alert cancel.
const handleCancel = () => {
closeAlert(name);
};
// Handle confirm delete manual journal.
const handleConfirm = (event) => {
closeAlert(name);
saveInvoke(onConfirm, event)
};
function ChangingFullAmountAlert() {
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.DANGER}
isOpen={amountChangeAlert}
onCancel={handleCancelAmountChangeAlert}
onConfirm={handleConfirmAmountChangeAlert}
isOpen={isOpen}
onCancel={handleCancel}
onConfirm={handleConfirm}
>
<p>
Changing full amount will change all credit and payment were applied, Is
@@ -18,3 +48,8 @@ function ChangingFullAmountAlert() {
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ChangingFullAmountAlert);

62
client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js
View File

@@ -1,24 +1,54 @@
import React from 'react';
import { Intent, Alert } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import withAlertActions from 'containers/Alert/withAlertActions';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import { compose } from 'utils';
/**
* Alert description.
*/
function ClearPaymentTransactionAlert({
name,
export default function ClearTransactionAlert() {
// #withAlertStoreConnect
isOpen,
payload: { },
// #withAlertActions
closeAlert,
}) {
// Handle the alert cancel.
const handleCancel = () => {
closeAlert(name);
};
// Handle confirm delete manual journal.
const handleConfirm = () => {
};
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'action'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancel}
onConfirm={handleConfirm}
loading={false}
>
<p>
<T id={'are_you_sure_you_want_to_clear_this_transaction'} />
</p>
</Alert>
);
}
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.WARNING}
isOpen={clearFormAlert}
onCancel={handleCancelClearFormAlert}
onConfirm={handleConfirmCancelClearFormAlert}
>
<p>
<T id={'are_you_sure_you_want_to_clear_this_transaction'} />
</p>
</Alert>
)
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ClearPaymentTransactionAlert);

65
client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js
View File

@@ -1,23 +1,54 @@
import React from 'react';
import { Intent, Alert } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import withAlertActions from 'containers/Alert/withAlertActions';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import { compose } from 'utils';
/**
* Clearning all lines alert.
*/
function ClearAllLinesAlert({
name,
function ClearningAllLinesAlert() {
// #withAlertStoreConnect
isOpen,
payload: {},
return (
// #withAlertActions
closeAlert,
}) {
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.DANGER}
isOpen={clearLinesAlert}
onCancel={handleCancelClearLines}
onConfirm={handleConfirmClearLines}
>
<p>
Clearing the table lines will delete all credits and payments were
applied. Is this okay?
</p>
</Alert>
)
}
// Handle the alert cancel.
const handleCancel = () => {
closeAlert(name);
};
// Handle confirm delete manual journal.
const handleConfirm = () => {};
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'action'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancel}
onConfirm={handleConfirm}
loading={false}
>
<p>
Clearing the table lines will delete all credits and payments were
applied. Is this okay?
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ClearAllLinesAlert);

22
client/src/containers/Alerts/PaymentReceives/ChangingFullAmountAlert.js
View File

@@ -1,22 +0,0 @@
function ChangingFullAmountAlert() {
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.WARNING}
isOpen={amountChangeAlert}
onCancel={handleCancelAmountChangeAlert}
onConfirm={handleConfirmAmountChangeAlert}
>
<p>
<T
id={'changing_full_amount_will_change_all_credits_and_payment'}
/>
</p>
</Alert>
)
}

21
client/src/containers/Alerts/PaymentReceives/ClearTransactionAlert.js
View File

@@ -1,21 +0,0 @@
function ClearTransactionAlert() {
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.WARNING}
isOpen={clearFormAlert}
onCancel={handleCancelClearFormAlert}
onConfirm={handleConfirmCancelClearFormAlert}
>
<p>
<T id={'are_you_sure_you_want_to_clear_this_transaction'} />
</p>
</Alert>
)
}

66
client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js
View File

@@ -1,20 +1,54 @@
import React from 'react';
import { Intent, Alert } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import withAlertActions from 'containers/Alert/withAlertActions';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import { saveInvoke, compose } from 'utils';
function ClearingAllLinesAlert() {
/**
* Clearning all lines alert.
*/
function ClearningAllLinesAlert({
name,
onConfirm,
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.WARNING}
isOpen={clearLinesAlert}
onCancel={handleCancelClearLines}
onConfirm={handleConfirmClearLines}
>
<p>
<T id={'clearing_the_table_lines_will_delete_all_credits'} />
</p>
</Alert>
)
}
// #withAlertStoreConnect
isOpen,
payload: {},
// #withAlertActions
closeAlert,
}) {
// Handle the alert cancel.
const handleCancel = () => {
closeAlert(name);
};
// Handle confirm delete manual journal.
const handleConfirm = (event) => {
closeAlert(name);
saveInvoke(onConfirm, event)
};
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'action'} />}
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancel}
onConfirm={handleConfirm}
>
<p>
<T id={'clearing_the_table_lines_will_delete_all_credits'} />
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ClearningAllLinesAlert);

3
client/src/containers/Items/ItemForm.schema.js
View File

@@ -2,7 +2,6 @@ import * as Yup from 'yup';
import { defaultTo } from 'lodash';
import { formatMessage } from 'services/intl';
import { DATATYPES_LENGTH } from 'common/dataTypes';
import { isBlank } from 'utils';
const Schema = Yup.object().shape({
active: Yup.boolean(),
@@ -20,6 +19,7 @@ const Schema = Yup.object().shape({
code: Yup.string().trim().min(0).max(DATATYPES_LENGTH.STRING),
cost_price: Yup.number()
.min(0)
.max(DATATYPES_LENGTH.DECIMAL_13_3)
.when(['purchasable'], {
is: true,
then: Yup.number()
@@ -29,6 +29,7 @@ const Schema = Yup.object().shape({
}),
sell_price: Yup.number()
.min(0)
.max(DATATYPES_LENGTH.DECIMAL_13_3)
.when(['sellable'], {
is: true,
then: Yup.number()

2
client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { DashboardContentTable, DashboardPageContent } from 'components';
import 'style/pages/SaleEstimate/List.scss';
import EstimatesActionsBar from './EstimatesActionsBar';
import EstimatesAlerts from '../EstimatesAlerts';
import EstimatesViewTabs from './EstimatesViewTabs';

1
client/src/containers/Sales/Estimates/EstimatesLanding/components.js
View File

@@ -75,6 +75,7 @@ export function ActionsMenu({
<Choose>
<Choose.When condition={original.is_delivered && original.is_approved}>
<MenuItem
icon={<Icon icon={'close-black'} />}
text={formatMessage({ id: 'mark_as_rejected' })}
onClick={safeCallback(onReject, original)}
/>

2
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
View File

@@ -122,7 +122,7 @@ function InvoiceForm({
};
// Handle the request error.
const onError = (errors) => {
const onError = ({ response: { data: { errors } } }) => {
if (errors) {
handleErrors(errors, { setErrors });
}

27
client/src/containers/Sales/Invoices/InvoicesLanding/components.js
View File

@@ -10,15 +10,19 @@ import {
Position,
Button
} from '@blueprintjs/core';
import { Choose, If, Icon } from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import { round } from 'lodash';
import { Choose, If, Icon } from 'components';
import { Money, AppToaster } from 'components';
import { formatMessage } from 'services/intl';
import { safeCallback } from 'utils';
const calculateStatus = (paymentAmount, balanceAmount) =>
paymentAmount / balanceAmount;
const calculateStatus = (paymentAmount, balanceAmount) => {
return round(paymentAmount / balanceAmount, 2);
}
export const statusAccessor = (row) => {
return (
@@ -52,7 +56,7 @@ export const statusAccessor = (row) => {
<T
id={'day_partially_paid'}
values={{
due: row.due_amount,
due: round(row.due_amount, 2),
currencySign: '$',
}}
/>
@@ -110,6 +114,7 @@ export function ActionsMenu({
/>
<If condition={!original.is_delivered}>
<MenuItem
icon={<Icon icon="send" iconSize={16} />}
text={formatMessage({ id: 'mark_as_delivered' })}
onClick={safeCallback(onDeliver, original)}
/>
@@ -157,13 +162,6 @@ export function useInvoicesTableColumns() {
width: 180,
className: 'customer_id',
},
{
id: 'invoice_no',
Header: formatMessage({ id: 'invoice_no__' }),
accessor: (row) => (row.invoice_no ? `#${row.invoice_no}` : null),
width: 100,
className: 'invoice_no',
},
{
id: 'balance',
Header: formatMessage({ id: 'balance' }),
@@ -171,6 +169,13 @@ export function useInvoicesTableColumns() {
width: 110,
className: 'balance',
},
{
id: 'invoice_no',
Header: formatMessage({ id: 'invoice_no__' }),
accessor: (row) => (row.invoice_no ? `#${row.invoice_no}` : null),
width: 100,
className: 'invoice_no',
},
{
id: 'status',
Header: formatMessage({ id: 'status' }),

17
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
View File

@@ -22,25 +22,23 @@ import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
* Payment receive floating actions bar.
*/
export default function PaymentReceiveFormFloatingActions() {
// Payment receive form context.
const { setSubmitPayload, isNewMode } = usePaymentReceiveFormContext();
// Formik form context.
const { isSubmitting } = useFormikContext();
const { isSubmitting, submitForm } = useFormikContext();
// History context.
const history = useHistory();
// Handle submit button click.
const handleSubmitBtnClick = (event) => {
setSubmitPayload({ redirect: true, });
setSubmitPayload({ redirect: true });
submitForm();
};
// Handle clear button click.
const handleClearBtnClick = (event) => {
};
const handleClearBtnClick = (event) => {};
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
@@ -49,12 +47,14 @@ export default function PaymentReceiveFormFloatingActions() {
// Handle submit & new button click.
const handleSubmitAndNewClick = (event) => {
setSubmitPayload({ redirect: false, resetForm: true, });
setSubmitPayload({ redirect: false, resetForm: true });
submitForm();
};
// Handle submit & continue editing button click.
const handleSubmitContinueEditingBtnClick = (event) => {
setSubmitPayload({ redirect: false, publish: true });
submitForm();
};
return (
@@ -63,6 +63,7 @@ export default function PaymentReceiveFormFloatingActions() {
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
@@ -109,4 +110,4 @@ export default function PaymentReceiveFormFloatingActions() {
/>
</div>
);
}
}

58
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
View File

@@ -1,17 +1,18 @@
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import { useIntl } from 'react-intl';
import { pick, sumBy, omit, isEmpty } from 'lodash';
import { sumBy, pick, isEmpty } from 'lodash';
import { Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { CLASSES } from 'common/classes';
import PaymentReceiveHeader from './PaymentReceiveFormHeader';
import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
import PaymentReceiveFormBody from './PaymentReceiveFormBody';
import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
import withSettings from 'containers/Settings/withSettings';
import {
@@ -24,7 +25,6 @@ import { compose } from 'utils';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import {
defaultPaymentReceive,
defaultPaymentReceiveEntry,
transformToEditForm,
} from './utils';
@@ -44,7 +44,8 @@ function PaymentReceiveForm({
// Payment receive form context.
const {
isNewMode,
paymentReceive,
paymentReceiveEditPage,
paymentEntriesEditPage,
paymentReceiveId,
submitPayload,
editPaymentReceiveMutate,
@@ -56,24 +57,17 @@ function PaymentReceiveForm({
? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
: paymentReceiveNextNumber;
// Form validation schema.
const validationSchema = isNewMode
? CreatePaymentReceiveFormSchema
: EditPaymentReceiveFormSchema;
// Form initial values.
const initialValues = useMemo(
() => ({
...(!isEmpty(paymentReceive)
? {
...transformToEditForm(paymentReceive, []),
}
...(!isEmpty(paymentReceiveEditPage)
? transformToEditForm(paymentReceiveEditPage, paymentEntriesEditPage)
: {
...paymentReceive,
...defaultPaymentReceive,
payment_receive_no: paymentReceiveNumber,
}),
}),
[paymentReceive, paymentReceiveNumber],
[paymentReceiveEditPage, paymentReceiveNumber, paymentEntriesEditPage],
);
// Handle form submit.
@@ -87,7 +81,7 @@ function PaymentReceiveForm({
const entries = values.entries
.filter((entry) => entry.invoice_id && entry.payment_amount)
.map((entry) => ({
...omit(entry, ['due_amount']),
...pick(entry, ['invoice_id', 'payment_amount']),
}));
// Calculates the total payment amount of entries.
@@ -125,7 +119,7 @@ function PaymentReceiveForm({
}
};
// Handle request response errors.
const onError = (errors) => {
const onError = ({ response: { data: { errors } } }) => {
const getError = (errorType) => errors.find((e) => e.type === errorType);
if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
@@ -146,12 +140,6 @@ function PaymentReceiveForm({
}
};
const transformDataTableToEntries = (dataTable) => {
return dataTable.map((data) => ({
...pick(data, Object.keys(defaultPaymentReceiveEntry)),
}));
};
return (
<div
className={classNames(
@@ -163,21 +151,23 @@ function PaymentReceiveForm({
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={validationSchema}
validationSchema={
isNewMode
? CreatePaymentReceiveFormSchema
: EditPaymentReceiveFormSchema
}
>
<Form>
<PaymentReceiveHeader />
<PaymentReceiveInnerProvider>
<PaymentReceiveHeader />
<PaymentReceiveFormBody />
<PaymentReceiveFormFooter />
<PaymentReceiveFloatingActions />
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<PaymentReceiveItemsTable />
</div>
<PaymentReceiveFormFooter />
<PaymentReceiveFloatingActions />
<PaymentReceiveFormAlerts />
</PaymentReceiveInnerProvider>
</Form>
</Formik>
{/* </form> */}
</div>
);
}

26
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormAlerts.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { useFormikContext } from 'formik';
import ClearingAllLinesAlert from 'containers/Alerts/PaymentReceives/ClearingAllLinesAlert';
import { clearAllPaymentEntries } from './utils';
/**
* Payment receive form alerts.
*/
export default function PaymentReceiveFormAlerts() {
const { values: { entries }, setFieldValue } = useFormikContext();
const handleClearingAllLines = () => {
const newEntries = clearAllPaymentEntries(entries);
setFieldValue('entries', newEntries);
setFieldValue('full_amount', '');
};
return (
<>
<ClearingAllLinesAlert
name={'clear-all-lines-payment-receive'}
onConfirm={handleClearingAllLines}
/>
</>
);
}

25
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormBody.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { FastField } from 'formik';
import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
/**
* Payment Receive form body.
*/
export default function PaymentReceiveFormBody() {
return (
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<FastField name={'entries'}>
{({ form, field: { value } }) => (
<PaymentReceiveItemsTable
entries={value}
onUpdateData={(newEntries) => {
form.setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
</div>
);
}

8
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
View File

@@ -20,9 +20,9 @@ function PaymentReceiveFormHeader({
// Formik form context.
const { values } = useFormikContext();
// Calculates the total receivable amount from due amount.
const receivableFullAmount = useMemo(
() => sumBy(values.entries, 'due_amount'),
// Calculates the total payment amount from due amount.
const paymentFullAmount = useMemo(
() => sumBy(values.entries, 'payment_amount'),
[values.entries],
);
@@ -35,7 +35,7 @@ function PaymentReceiveFormHeader({
<div class="big-amount">
<span class="big-amount__label">Amount Received</span>
<h1 class="big-amount__number">
<Money amount={receivableFullAmount} currency={baseCurrency} />
<Money amount={paymentFullAmount} currency={baseCurrency} />
</h1>
</div>
</div>

36
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js
View File

@@ -2,12 +2,11 @@ import React, { createContext, useContext } from 'react';
import { DashboardInsider } from 'components';
import {
useSettings,
usePaymentReceive,
usePaymentReceiveEditPage,
useAccounts,
useCustomers,
useCreatePaymentReceive,
useEditPaymentReceive,
useDueInvoices,
} from 'hooks/query';
// Payment receive form context.
@@ -18,15 +17,19 @@ const PaymentReceiveFormContext = createContext();
*/
function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
// Form state.
const [paymentCustomerId, setPaymentCustomerId] = React.useState(null);
const [submitPayload, setSubmitPayload] = React.useState({});
// Fetches payment recevie details.
const {
data: paymentReceive,
data: {
paymentReceive: paymentReceiveEditPage,
entries: paymentEntriesEditPage,
},
isLoading: isPaymentLoading,
isFetching: isPaymentFetching,
} = usePaymentReceive(paymentReceiveId, { enabled: !!paymentReceiveId });
} = usePaymentReceiveEditPage(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
// Handle fetch accounts data.
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
@@ -40,15 +43,6 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
isFetching: isCustomersFetching,
} = useCustomers();
// Fetches customer receivable invoices.
const {
data: dueInvoices,
isLoading: isDueInvoicesLoading,
isFetching: isDueInvoicesFetching,
} = useDueInvoices(paymentCustomerId, {
enabled: !!paymentCustomerId,
});
// Detarmines whether the new mode.
const isNewMode = !paymentReceiveId;
@@ -58,24 +52,20 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
// Provider payload.
const provider = {
paymentReceive,
paymentReceiveId,
paymentReceiveEditPage,
paymentEntriesEditPage,
accounts,
customers,
dueInvoices,
isPaymentLoading,
isPaymentFetching,
isAccountsFetching,
isCustomersFetching,
isDueInvoicesLoading,
isDueInvoicesFetching,
paymentCustomerId,
submitPayload,
isNewMode,
submitPayload,
setSubmitPayload,
setPaymentCustomerId,
editPaymentReceiveMutate,
createPaymentReceiveMutate,

91
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
View File

@@ -4,19 +4,25 @@ import {
InputGroup,
Position,
ControlGroup,
Button,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import { FastField, useFormikContext } from 'formik';
import { sumBy } from 'lodash';
import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
import { useAutofocus } from 'hooks';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
import {
compose,
safeSumBy,
momentFormatter,
tansformDateValue,
inputIntent,
} from 'utils';
import {
AccountsSelectList,
ContactSelecetList,
ErrorMessage,
FieldRequiredHint,
Icon,
InputPrependButton,
@@ -28,31 +34,44 @@ import {
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
import { toSafeInteger } from 'lodash';
/**
* Payment receive header fields.
*/
function PaymentReceiveHeaderFields({ baseCurrency }) {
// Payment receive form context.
const {
customers,
accounts,
isNewMode,
setPaymentCustomerId,
} = usePaymentReceiveFormContext();
const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
// Formik form context.
const { values } = useFormikContext();
const {
values: { entries },
setFieldValue,
} = useFormikContext();
const fullAmountReceived = useMemo(
() => sumBy(values.entries, 'payment_amount'),
[values.entries],
);
const customerFieldRef = useAutofocus();
const handleReceiveFullAmountClick = () => {};
// Calculates the full-amount received.
const totalDueAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [
entries,
]);
// Handle receive full-amount link click.
const handleReceiveFullAmountClick = () => {
const newEntries = fullAmountPaymentEntries(entries);
const fullAmount = safeSumBy(newEntries, 'payment_amount');
setFieldValue('entries', newEntries);
setFieldValue('full_amount', fullAmount);
};
// Handles the full-amount field blur.
const onFullAmountBlur = (value) => {
const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
setFieldValue('entries', newEntries);
};
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -72,11 +91,14 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer);
setPaymentCustomerId(customer.id);
form.setFieldValue('customer_id', customer.id);
form.setFieldValue('full_amount', '');
}}
popoverFill={true}
disabled={!isNewMode}
buttonProps={{
elementRef: (ref) => (customerFieldRef.current = ref),
}}
/>
</FormGroup>
)}
@@ -107,8 +129,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
</FastField>
{/* ------------ Full amount ------------ */}
<FastField name={'customer_name'}>
{({ form, field, meta: { error, touched } }) => (
<Field name={'full_amount'}>
{({
form: { setFieldValue },
field: { value, onChange },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'full_amount'} />}
inline={true}
@@ -120,24 +146,26 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
<ControlGroup>
<InputPrependText text={baseCurrency} />
<MoneyInputGroup
inputGroupProps={{
medium: true,
...field,
value={value}
onChange={(value) => {
setFieldValue('full_amount', value);
}}
onBlurValue={onFullAmountBlur}
/>
</ControlGroup>
<a
<Button
onClick={handleReceiveFullAmountClick}
href="#"
className={'receive-full-amount'}
small={true}
minimal={true}
>
Receive full amount (
<Money amount={fullAmountReceived} currency={baseCurrency} />)
</a>
<Money amount={totalDueAmount} currency={baseCurrency} />)
</Button>
</FormGroup>
)}
</FastField>
</Field>
{/* ------------ Payment receive no. ------------ */}
<FastField name={'payment_receive_no'}>
@@ -200,7 +228,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
</FastField>
{/* ------------ Reference No. ------------ */}
<FastField name={'customer_name'}>
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference'} />}
@@ -225,5 +253,4 @@ export default compose(
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
withDialogActions,
)(PaymentReceiveHeaderFields);

50
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveInnerProvider.js Normal file
View File

@@ -0,0 +1,50 @@
import React, { createContext, useContext, useEffect } from 'react';
import { useFormikContext } from 'formik';
import { useDueInvoices } from 'hooks/query';
import { transformInvoicesNewPageEntries } from './utils';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { isEmpty } from 'lodash';
const PaymentReceiveInnerContext = createContext();
/**
* Payment receive inner form provider.
*/
function PaymentReceiveInnerProvider({ ...props }) {
const { isNewMode } = usePaymentReceiveFormContext();
// Formik context.
const {
values: { customer_id: customerId },
setFieldValue,
} = useFormikContext();
// Fetches customer receivable invoices.
const {
data: dueInvoices,
isLoading: isDueInvoicesLoading,
isFetching: isDueInvoicesFetching,
} = useDueInvoices(customerId, {
enabled: !!customerId && isNewMode,
});
useEffect(() => {
if (!isDueInvoicesFetching && !isEmpty(dueInvoices)) {
setFieldValue('entries', transformInvoicesNewPageEntries(dueInvoices));
}
}, [isDueInvoicesFetching, dueInvoices, setFieldValue]);
// Provider payload.
const provider = {
dueInvoices,
isDueInvoicesLoading,
isDueInvoicesFetching,
};
return <PaymentReceiveInnerContext.Provider value={provider} {...props} />;
}
const usePaymentReceiveInnerContext = () =>
useContext(PaymentReceiveInnerContext);
export { PaymentReceiveInnerProvider, usePaymentReceiveInnerContext };

43
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback } from 'react';
import React, { useCallback } from 'react';
import { Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { CloudLoadingIndicator } from 'components';
@@ -8,43 +8,50 @@ import { CLASSES } from 'common/classes';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { DataTableEditable } from 'components';
import { usePaymentReceiveEntriesColumns } from './components';
import { compose, updateTableRow, safeSumBy } from 'utils';
import withAlertActions from 'containers/Alert/withAlertActions';
/**
* Payment receive items table.
*/
export default function PaymentReceiveItemsTable() {
function PaymentReceiveItemsTable({
entries,
onUpdateData,
// #withDialogActions
openAlert
}) {
// Payment receive form context.
const {
isNewMode,
isDueInvoicesFetching,
paymentCustomerId,
dueInvoices,
} = usePaymentReceiveFormContext();
// Payment receive entries form context.
const columns = usePaymentReceiveEntriesColumns();
// Detarmines takes payment receive invoices entries from customer receivable
// invoices or associated payment receive invoices.
const computedTableData = useMemo(
() => [
...(!isNewMode ? [] || [] : []),
...(isNewMode ? dueInvoices || [] : []),
],
[isNewMode, dueInvoices],
);
// No results message.
const noResultsMessage = paymentCustomerId
? 'There is no receivable invoices for this customer that can be applied for this payment'
: 'Please select a customer to display all open invoices for it.';
// Handle update data.
const handleUpdateData = useCallback((rows) => {}, []);
const handleUpdateData = useCallback((rowIndex, columnId, value) => {
const newRows = compose(
updateTableRow(rowIndex, columnId, value),
)(entries);
onUpdateData(newRows);
}, [entries, onUpdateData]);
// Handle click clear all lines button.
const handleClickClearAllLines = () => {
const fullAmount = safeSumBy(entries, 'payment_amount');
if (fullAmount > 0) {
openAlert('clear-all-lines-payment-receive');
}
};
return (
@@ -53,7 +60,7 @@ export default function PaymentReceiveItemsTable() {
progressBarLoading={isDueInvoicesFetching}
className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
columns={columns}
data={[]}
data={entries}
spinnerProps={false}
payload={{
errors: [],
@@ -74,3 +81,5 @@ export default function PaymentReceiveItemsTable() {
</CloudLoadingIndicator>
);
}
export default compose(withAlertActions)(PaymentReceiveItemsTable);

27
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
View File

@@ -1,6 +1,8 @@
import React from 'react';
import moment from 'moment';
import { useIntl } from 'react-intl';
import { Money } from 'components';
import { MoneyFieldCell } from 'components/DataTableCells';
import { safeSumBy, formattedAmount } from 'utils';
/**
@@ -21,15 +23,14 @@ function IndexCell({ row: { index } }) {
* Invoice number table cell accessor.
*/
function InvNumberCellAccessor(row) {
const invNumber = row?.invoice_no || row?.id;
return `#INV-${invNumber || ''}`;
return row?.invoice_no ? `#${row?.invoice_no || ''}` : '-';
}
/**
* Balance footer cell.
*/
function BalanceFooterCell({ rows }) {
const total = safeSumBy(rows, 'original.balance');
const total = safeSumBy(rows, 'original.amount');
return <span>{ formattedAmount(total, 'USD') }</span>;
}
@@ -49,6 +50,18 @@ function PaymentAmountFooterCell({ rows }) {
return <span>{ formattedAmount(totalPaymentAmount, 'USD') }</span>;
}
/**
* Mobey table cell.
*/
function MoneyTableCell({ value }) {
return <Money amount={value} currency={"USD"} />
}
function DateFooterCell() {
return 'Total';
}
/**
* Retrieve payment receive form entries columns.
*/
@@ -64,12 +77,14 @@ export const usePaymentReceiveEntriesColumns = () => {
width: 40,
disableResizing: true,
disableSortBy: true,
className: 'index'
},
{
Header: formatMessage({ id: 'Date' }),
id: 'invoice_date',
accessor: 'invoice_date',
Cell: InvoiceDateCell,
Footer: DateFooterCell,
disableSortBy: true,
disableResizing: true,
width: 250,
@@ -77,14 +92,14 @@ export const usePaymentReceiveEntriesColumns = () => {
{
Header: formatMessage({ id: 'invocie_number' }),
accessor: InvNumberCellAccessor,
Cell: 'invoice_no',
disableSortBy: true,
className: '',
},
{
Header: formatMessage({ id: 'invoice_amount' }),
accessor: 'balance',
accessor: 'amount',
Footer: BalanceFooterCell,
Cell: MoneyTableCell,
disableSortBy: true,
width: 100,
className: '',
@@ -93,6 +108,7 @@ export const usePaymentReceiveEntriesColumns = () => {
Header: formatMessage({ id: 'amount_due' }),
accessor: 'due_amount',
Footer: DueAmountFooterCell,
Cell: MoneyTableCell,
disableSortBy: true,
width: 150,
className: '',
@@ -100,6 +116,7 @@ export const usePaymentReceiveEntriesColumns = () => {
{
Header: formatMessage({ id: 'payment_amount' }),
accessor: 'payment_amount',
Cell: MoneyFieldCell,
Footer: PaymentAmountFooterCell,
disableSortBy: true,
width: 150,

72
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js
View File

@@ -1,12 +1,14 @@
import moment from 'moment';
import { transformToForm } from 'utils';
import { transformToForm, safeSumBy } from 'utils';
// Default payment receive entry.
export const defaultPaymentReceiveEntry = {
id: '',
payment_amount: '',
invoice_id: '',
invoice_no: '',
due_amount: '',
date: '',
amount: '',
};
// Form initial values.
@@ -21,13 +23,61 @@ export const defaultPaymentReceive = {
entries: [],
};
export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => {
return {
...transformToForm(paymentReceive, defaultPaymentReceive),
entries: [
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
})),
],
};
/**
*
*/
export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
...transformToForm(paymentReceive, defaultPaymentReceive),
full_amount: safeSumBy(paymentReceiveEntries, 'payment_amount'),
entries: [
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
})),
],
});
/**
* Transformes the given invoices to the new page receivable entries.
*/
export const transformInvoicesNewPageEntries = (invoices) => [
...invoices.map((invoice, index) => ({
index: index + 1,
invoice_id: invoice.id,
entry_type: 'invoice',
due_amount: invoice.due_amount,
date: invoice.invoice_date,
amount: invoice.balance,
payment_amount: 0,
invoice_no: invoice.invoice_no,
total_payment_amount: invoice.payment_amount,
})),
];
export const transformEntriesToEditForm = (receivableEntries) => [
...transformInvoicesNewPageEntries([...(receivableEntries || [])]),
];
export const clearAllPaymentEntries = (entries) => [
...entries.map((entry) => ({ ...entry, payment_amount: 0 })),
];
export const amountPaymentEntries = (amount, entries) => {
let total = amount;
return entries.map((item) => {
const diff = Math.min(item.due_amount, total);
total -= Math.max(diff, 0);
return {
...item,
payment_amount: diff,
};
});
};
export const fullAmountPaymentEntries = (entries) => {
return entries.map((item) => ({
...item,
payment_amount: item.due_amount,
}));
}

2
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
View File

@@ -57,7 +57,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
return (
<DashboardInsider
loading={isViewsLoading || isFieldsLoading}
name={'payment-receives'}
name={'payment-receives-list'}
>
<PaymentReceivesListContext.Provider value={state} {...props} />
</DashboardInsider>

17
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import React from 'react';
import 'style/pages/PaymentReceive/List.scss';
import { DashboardContentTable, DashboardPageContent } from 'components';
import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
@@ -8,7 +9,6 @@ import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
import PaymentReceivesTable from './PaymentReceivesTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withPaymentReceives from './withPaymentReceives';
import { compose, transformTableStateToQuery } from 'utils';
@@ -17,19 +17,9 @@ import { compose, transformTableStateToQuery } from 'utils';
* Payment receives list.
*/
function PaymentReceiveList({
// #withDashboardActions
changePageTitle,
// #withPaymentReceives
paymentReceivesTableState,
}) {
const { formatMessage } = useIntl();
// Changes the dashboard page title once the page mount.
useEffect(() => {
changePageTitle(formatMessage({ id: 'payment_Receives_list' }));
}, [changePageTitle, formatMessage]);
return (
<PaymentReceivesListProvider
query={transformTableStateToQuery(paymentReceivesTableState)}
@@ -50,7 +40,6 @@ function PaymentReceiveList({
}
export default compose(
withDashboardActions,
withPaymentReceives(({ paymentReceivesTableState }) => ({
paymentReceivesTableState,
})),

2
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
View File

@@ -29,7 +29,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
data: { paymentReceives, pagination, filterMeta },
isLoading: isPaymentReceivesLoading,
isFetching: isPaymentReceivesFetching,
} = usePaymentReceives(query);
} = usePaymentReceives(query, { keepPreviousData: true });
// Provider payload.
const provider = {

6
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
View File

@@ -1,10 +1,8 @@
import React, { useCallback } from 'react';
import classNames from 'classnames';
import { compose } from 'utils';
import { useHistory } from 'react-router-dom';
import { CLASSES } from 'common/classes';
import { compose } from 'utils';
import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
import { DataTable } from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';

16
client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
View File

@@ -91,9 +91,16 @@ export function usePaymentReceivesColumns() {
id: 'customer_id',
Header: formatMessage({ id: 'customer_name' }),
accessor: 'customer.display_name',
width: 140,
width: 160,
className: 'customer_id',
},
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: AmountAccessor,
width: 120,
className: 'amount',
},
{
id: 'payment_receive_no',
Header: formatMessage({ id: 'payment_receive_no' }),
@@ -102,13 +109,6 @@ export function usePaymentReceivesColumns() {
width: 140,
className: 'payment_receive_no',
},
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: AmountAccessor,
width: 140,
className: 'amount',
},
{
id: 'reference_no',
Header: formatMessage({ id: 'reference_no' }),

2
client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { DashboardContentTable, DashboardPageContent } from 'components';
import 'style/pages/SaleReceipt/List.scss';
import ReceiptActionsBar from './ReceiptActionsBar';
import ReceiptViewTabs from './ReceiptViewTabs';
import ReceiptsAlerts from '../ReceiptsAlerts';

63
client/src/hooks/query/paymentReceives.js
View File

@@ -1,7 +1,7 @@
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { defaultTo } from 'lodash';
import ApiService from 'services/ApiService';
import { transformPagination } from 'utils';
import { transformPagination, saveInvoke } from 'utils';
/**
* Retrieve accounts list.
@@ -43,8 +43,13 @@ export function useCreatePaymentReceive(props) {
return useMutation(
(values) => ApiService.post('sales/payment_receives', values),
{
onSuccess: () => {
onSuccess: (data, values) => {
client.invalidateQueries('PAYMENT_RECEIVES');
client.invalidateQueries('SALE_INVOICE_DUE');
client.invalidateQueries('SALE_INVOICES');
client.invalidateQueries('SALE_INVOICE');
saveInvoke(props?.onSuccess, data);
},
...props,
},
@@ -60,8 +65,13 @@ export function useEditPaymentReceive(props) {
return useMutation(
([id, values]) => ApiService.post(`sales/payment_receives/${id}`, values),
{
onSuccess: () => {
onSuccess: (data) => {
client.invalidateQueries('PAYMENT_RECEIVES');
client.invalidateQueries('SALE_INVOICE_DUE');
client.invalidateQueries('SALE_INVOICES');
client.invalidateQueries('SALE_INVOICE');
saveInvoke(props?.onSuccess, data);
},
...props,
},
@@ -75,10 +85,15 @@ export function useDeletePaymentReceive(props) {
const client = useQueryClient();
return useMutation(
(id, values) => ApiService.delete(`sales/payment_receives/${id}`, values),
(id) => ApiService.delete(`sales/payment_receives/${id}`),
{
onSuccess: () => {
onSuccess: (data, [id]) => {
client.invalidateQueries('PAYMENT_RECEIVES');
client.invalidateQueries('SALE_INVOICE_DUE');
client.invalidateQueries('SALE_INVOICES');
client.invalidateQueries('SALE_INVOICE');
saveInvoke(props?.onSuccess, data);
},
...props,
},
@@ -87,19 +102,53 @@ export function useDeletePaymentReceive(props) {
/**
* Retrieve specific payment receive.
* @param {number} id - Payment receive.
*/
export function usePaymentReceive(id, props) {
const states = useQuery(
['PAYMENT_RECEIVE', id],
() => ApiService.get(`sales/payment_receives/${id}`),
{
select: (res) => res.data.payment_receive,
select: (res) => ({
paymentReceive: res.data.payment_receive,
receivableEntries: res.data.receivable_entries,
}),
...props
},
);
return {
...states,
data: defaultTo(states.data, {}),
data: defaultTo(states.data, {
paymentReceive: {},
receivableInvoices: {},
paymentInvoices: {}
}),
}
}
/**
* Retrieve information of payment receive in edit page.
* @param {number} id - Payment receive id.
*/
export function usePaymentReceiveEditPage(id, props) {
const states = useQuery(
['PAYMENT_RECEIVE_EDIT_PAGE', id],
() => ApiService.get(`sales/payment_receives/${id}/edit-page`),
{
select: (res) => ({
paymentReceive: res.data.payment_receive,
entries: res.data.entries,
}),
...props,
},
);
return {
...states,
data: defaultTo(states.data, {
paymentReceive: {},
entries: [],
})
}
}

6
client/src/lang/en/index.js
View File

@@ -678,7 +678,7 @@ export default {
deposit_to: 'Deposit to',
edit_payment_receive: 'Edit Payment Receive',
delete_payment_receive: 'Delete Payment Receive',
payment_Receives_list: 'Payment Receives List',
payment_receives_list: 'Payment Receives List',
payment_receive: 'Payment Receive',
new_payment_receive: 'New Payment Receive',
payment_receives: 'Payment Receives',
@@ -965,5 +965,7 @@ export default {
running_balance: 'Running balance',
payment_via_voucher: 'Payment via voucher',
voucher_number: 'Voucher number',
voucher: 'Voucher'
voucher: 'Voucher',
payment_number_is_not_unique: 'Payment number is not unique.',
change_full_amount: 'Change full amount'
};

1
client/src/routes/dashboard.js
View File

@@ -389,6 +389,7 @@ export default [
),
),
breadcrumb: 'Payment Receives List',
pageTitle: formatMessage({ id: 'payment_receives_list' }),
},
// Bills

6
client/src/static/json/icons.js
View File

@@ -386,4 +386,10 @@ export default {
],
viewBox: '0 0 20 20',
},
"send": {
path: [
'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'
],
viewBox: '0 0 24 24',
}
};

5
client/src/style/App.scss
View File

@@ -95,3 +95,8 @@ body.hide-scrollbar .Pane2{
}
.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
background-color: #0066ff;
}

18
client/src/style/pages/PaymentReceive/List.scss Normal file
View File

@@ -0,0 +1,18 @@
.dashboard__insider--payment-receives-list{
.bigcapital-datatable{
.tbody{
.td.amount {
.cell-inner{
> span{
font-weight: 600;
}
}
}
}
}
}

14
client/src/style/pages/PaymentReceive/PageForm.scss
View File

@@ -20,10 +20,18 @@
&.bp3-inline{
max-width: 470px;
}
a.receive-full-amount{
button.receive-full-amount{
width: auto;
padding: 0;
min-height: auto;
font-size: 12px;
margin-top: 6px;
display: inline-block;
margin-top: 4px;
background-color: transparent;
color: #0052cc;
&:hover{
text-decoration: underline;
}
}
}
}

18
client/src/style/pages/SaleEstimate/List.scss Normal file
View File

@@ -0,0 +1,18 @@
.dashboard__insider--sale_estimate{
.bigcapital-datatable{
.tbody{
.td.amount {
.cell-inner{
> span{
font-weight: 600;
}
}
}
}
}
}

13
client/src/style/pages/SaleInvoice/List.scss
View File

@@ -7,6 +7,14 @@
.tbody{
.balance.td{
.cell-inner{
> span{
font-weight: 600;
}
}
}
.status.td{
.status-accessor{
@@ -33,7 +41,7 @@
line-height: 1;
display: block;
margin-bottom: 8px;
opacity: 0.65;
opacity: 0.7;
}
.fully-paid-icon{
width: 18px;
@@ -49,10 +57,11 @@
}
.bp3-progress-bar{
height: 4px;
max-width: 180px;
&,
.bp3-progress-meter{
border-radius: 4px;
border-radius: 0;
}
}
}

18
client/src/style/pages/SaleReceipt/List.scss Normal file
View File

@@ -0,0 +1,18 @@
.dashboard__insider--sales_receipts{
.bigcapital-datatable{
.tbody{
.td.amount {
.cell-inner{
> span{
font-weight: 600;
}
}
}
}
}
}