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

Merge branch 'master' of https://github.com/abouolia/Ratteb

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-21 19:36:06 +02:00
parent 6e6103ca99 ef0057c90c
commit 947e5ad33d
41 changed files with 2112 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/common/homepageOptions.js Normal file
View File

@@ -0,0 +1,56 @@
export const shortcutBox = [
{
title: 'Request time Off',
iconColor: '#F3FEFA',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Benefits',
iconColor: '#F5F3FE',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Schedule a one-on-one',
iconColor: '#F2F9FF',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Payroll',
iconColor: '#FFFCED',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Submit an expense',
iconColor: '#FDF1F1',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Training',
iconColor: '#EFF1FE',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
];
export const announcementLists = [
{
title: 'Office closed on July 2nd',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
},
{
title: 'New Password policy ',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
},
{
title: 'Office closed on July 2nd',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
},
];

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

@@ -14,6 +14,7 @@ import Search from 'containers/GeneralSearch/Search';
import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
import GlobalHotkeys from './GlobalHotkeys';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import DrawersContainer from 'components/DrawersContainer';
import { compose } from 'utils';
@@ -47,6 +48,7 @@ function Dashboard({
<Search />
<DialogsContainer />
<GlobalHotkeys />
<DrawersContainer />
</DashboardLoadingIndicator>
);
}

16
client/src/components/DrawersContainer.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer';
import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer';
import ReceiptDrawer from 'containers/Sales/Receipt/ReceiptDrawer';
import PaymentReceive from 'containers/Sales/PaymentReceive/PaymentReceiveDrawer';
export default function DrawersContainer() {
return (
<div>
<EstimateDrawer name={'estimate-drawer'} />
<InvoiceDrawer name={'invoice-drawer'} />
<ReceiptDrawer name={'receipt-drawer'} />
<PaymentReceive name={'payment-receive-drawer'} />
</div>
);
}

6
client/src/config/sidebarMenu.js
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React from 'react';
import { FormattedMessage as T } from 'react-intl';
export default [
@@ -161,11 +161,11 @@ export default [
href: '/financial-reports/profit-loss-sheet',
},
{
text: 'A/R Aging Summary',
text: <T id={'receivable_aging_summary'} />,
href: '/financial-reports/receivable-aging-summary',
},
{
text: 'A/P Aging Summary',
text: <T id={'payable_aging_summary'} />,
href: '/financial-reports/payable-aging-summary',
},
],

15
client/src/containers/Drawer/withDrawerActions.js Normal file
View 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
View 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
View 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
View 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
View 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>
);
}

128
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js Normal file
View File

@@ -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);

123
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js Normal file
View File

@@ -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);

90
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js Normal file
View File

@@ -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);

77
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js Normal file
View File

@@ -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>
);
}

103
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js Normal file
View File

@@ -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);

5
client/src/containers/FinancialStatements/APAgingSummary/common.js Normal file
View File

@@ -0,0 +1,5 @@
import { transformToCamelCase, flatObject } from 'utils';
export const transformFilterFormToQuery = (form) => {
return flatObject(transformToCamelCase(form));
};

35
client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.js Normal file
View File

@@ -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);
};

18
client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.js Normal file
View File

@@ -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);

25
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
View File

@@ -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>

3
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
View File

@@ -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
View 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;

8
client/src/containers/Homepage/Homepage.js
View File

@@ -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
View 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
View 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
View 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);

29
client/src/containers/Sales/Estimates/EstimateForm/EstimateDrawer.js Normal file
View File

@@ -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);

41
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceDrawer.js Normal file
View File

@@ -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);

29
client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js Normal file
View File

@@ -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);

43
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptDrawer.js Normal file
View File

@@ -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);

8
client/src/containers/Subscriptions/BillingPlansForm.js
View File

@@ -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>
)
}
);
}

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

@@ -322,7 +322,7 @@ export default {
full_name: 'Full Name',
the_user_has_been_inactivated_successfully:
'The user has been inactivated successfully.',
the_user_has_been_deleted_successfully:
the_user_has_been_deleted_successfully:
'The user has been deleted successfully.',
customize_report: 'Customize Report',
print: 'Print',
@@ -942,7 +942,7 @@ export default {
delete_adjustment: 'Delete Adjustment',
the_make_adjustment_has_been_created_successfully:
'The make adjustment has been created successfully.',
the_adjustment_has_been_deleted_successfully:
the_adjustment_has_been_deleted_successfully:
'The adjustment has been deleted successfully.',
once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it: `Once you delete this inventory a adjustment, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
select_adjustment_account: 'Select adjustment account',
@@ -964,9 +964,16 @@ export default {
selected_customers: '{count} Selected Customers',
transaction_number: 'Transaction #',
running_balance: 'Running balance',
view_all: 'View all',
payment_via_voucher: 'Payment via voucher',
voucher_number: 'Voucher number',
voucher: 'Voucher',
payment_number_is_not_unique: 'Payment number is not unique.',
change_full_amount: 'Change full amount'
change_full_amount: 'Change full amount',
view_paper: 'View Paper',
estimate_paper: 'Estimate Paper',
invoice_paper: 'Invoice Paper',
receipt_paper: 'Receipt Paper',
payable_aging_summary: 'Payable Aging Summary',
payment_receive_paper: 'Payment Receive Paper',
};

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

@@ -155,6 +155,14 @@ export default [
backLink: true,
sidebarShrink: true,
},
{
path: '/financial-reports/payable-aging-summary',
component: LazyLoader({
loader: () =>
import('containers/FinancialStatements/APAgingSummary/APAgingSummary'),
}),
breadcrumb: 'Payable Aging Summary',
},
{
path: `/financial-reports/journal-sheet`,
component: lazy(() =>

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

@@ -354,17 +354,17 @@ export default {
path: ['M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'],
viewBox: '0 0 24 24',
},
'numbers': {
numbers: {
path: [
'M2.9377,11V5.26q0-.3633.0069-.9238T2.98,3.3a3.6334,3.6334,0,0,1-.35.3785q-.1677.1538-.3642.3076L1.16,4.9105.0535,3.5246,3.19,1.0046H5.08V11Z',
'M7.8655,11V9.5158l2.5058-2.5332q.7559-.77,1.2178-1.295a4.512,4.512,0,0,0,.6719-.9521,2.0537,2.0537,0,0,0,.21-.917,1.0375,1.0375,0,0,0-.3711-.875,1.455,1.455,0,0,0-.917-.2871,2.2924,2.2924,0,0,0-1.0712.2661A6.6756,6.6756,0,0,0,9,3.6789L7.8376,2.2926A10.771,10.771,0,0,1,8.7615,1.6a4.4132,4.4132,0,0,1,1.1264-.5323A4.931,4.931,0,0,1,11.3791.8644a3.9291,3.9291,0,0,1,1.7012.3433,2.6249,2.6249,0,0,1,1.1123.9521,2.5386,2.5386,0,0,1,.3926,1.4068A3.5845,3.5845,0,0,1,14.27,5.0788a5.32,5.32,0,0,1-.9307,1.3579q-.6166.6715-1.4981,1.498L10.595,9.1378v.07h4.27V11Z',
'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z'
'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z',
],
viewBox: '0 0 23 12',
},
"small-tick": {
'small-tick': {
path: [
'M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm5-14c-.28 0-.53.11-.71.29L8 12.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l7-7A1.003 1.003 0 0015 6z'
'M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm5-14c-.28 0-.53.11-.71.29L8 12.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l7-7A1.003 1.003 0 0015 6z',
],
viewBox: '0 0 20 20'
},
@@ -391,5 +391,9 @@ export default {
'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'
],
viewBox: '0 0 24 24',
}
},
'arrow-top-right': {
path: ['M9,5v2h6.59L4,18.59L5.41,20L17,8.41V15h2V5H9'],
viewBox: '0 0 24 24',
},
};

23
client/src/store/dashboard/dashboard.actions.js
View File

@@ -13,7 +13,7 @@ export function openDialog(name, payload) {
name: name,
payload: payload,
};
};
}
export function closeDialog(name, payload) {
return {
@@ -24,7 +24,7 @@ export function closeDialog(name, payload) {
}
export function openAlert(name, payload) {
return {
return {
type: t.OPEN_ALERT,
name,
payload,
@@ -32,9 +32,24 @@ export function openAlert(name, payload) {
}
export function closeAlert(name, payload) {
return {
return {
type: t.CLOSE_ALERT,
name,
payload,
};
}
}
export function openDrawer(name, payload) {
return {
type: t.OPEN_DRAWER,
name,
payload,
};
}
export function closeDrawer(name, payload) {
return {
type: t.CLOSE_DRAWER,
name,
payload,
};
}

54
client/src/store/dashboard/dashboard.reducer.js
View File

@@ -1,7 +1,7 @@
import t from 'store/types';
import { createReducer } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
const initialState = {
pageTitle: '',
@@ -12,6 +12,7 @@ const initialState = {
previousSidebarExpended: null,
dialogs: {},
alerts: {},
drawers: {},
topbarEditViewId: null,
requestsLoading: 0,
backLink: false,
@@ -61,10 +62,19 @@ const reducerInstance = createReducer(initialState, {
isOpen: false,
};
},
[t.CLOSE_ALL_DIALOGS]: (state, action) => {
[t.OPEN_DRAWER]: (state, action) => {
state.drawers[action.name] = {
isOpen: true,
payload: action.payload || {},
};
},
[t.CLOSE_DRAWER]: (state, action) => {
state.drawers[action.name] = {
...state.drawers[action.name],
isOpen: false,
};
},
[t.CLOSE_ALL_DIALOGS]: (state, action) => {},
[t.SET_TOPBAR_EDIT_VIEW]: (state, action) => {
state.topbarEditViewId = action.id;
@@ -102,27 +112,31 @@ const reducerInstance = createReducer(initialState, {
[t.SET_DASHBOARD_BACK_LINK]: (state, action) => {
const { backLink } = action.payload;
state.backLink = backLink;
}
},
});
export default persistReducer({
key: 'bigcapital:dashboard',
blacklist: [
'pageTitle',
'pageSubtitle',
'pageHint',
'preferencesPageTitle',
'topbarEditViewId',
'backLink'
],
storage,
}, reducerInstance);
export default persistReducer(
{
key: 'bigcapital:dashboard',
blacklist: [
'pageTitle',
'pageSubtitle',
'pageHint',
'preferencesPageTitle',
'topbarEditViewId',
'backLink',
],
storage,
},
reducerInstance,
);
export const getDialogPayload = (state, dialogName) => {
return typeof state.dashboard.dialogs[dialogName] !== 'undefined'
? state.dashboard.dialogs[dialogName].payload : {};
? state.dashboard.dialogs[dialogName].payload
: {};
};
export const getDialogActiveStatus = (state, dialogName) => {
return true;
};
};

53
client/src/store/dashboard/dashboard.selectors.js
View File

@@ -1,33 +1,40 @@
import { createSelector } from "@reduxjs/toolkit";
import { createSelector } from '@reduxjs/toolkit';
const dialogByNameSelector = (state, props) => state.dashboard.dialogs?.[props.dialogName];
const dialogByNameSelector = (state, props) =>
state.dashboard.dialogs?.[props.dialogName];
export const isDialogOpenFactory = () => createSelector(
dialogByNameSelector,
(dialog) => {
export const isDialogOpenFactory = () =>
createSelector(dialogByNameSelector, (dialog) => {
return dialog && dialog.isOpen;
},
);
});
export const getDialogPayloadFactory = () => createSelector(
dialogByNameSelector,
(dialog) => {
export const getDialogPayloadFactory = () =>
createSelector(dialogByNameSelector, (dialog) => {
return { ...dialog?.payload };
},
);
});
const alertByNameSelector = (state, props) => state.dashboard.alerts?.[props.name];
const alertByNameSelector = (state, props) =>
state.dashboard.alerts?.[props.name];
export const isAlertOpenFactory = () => createSelector(
alertByNameSelector,
(alert) => {
export const isAlertOpenFactory = () =>
createSelector(alertByNameSelector, (alert) => {
return alert && alert.isOpen;
},
);
});
export const getAlertPayloadFactory = () => createSelector(
alertByNameSelector,
(alert) => {
export const getAlertPayloadFactory = () =>
createSelector(alertByNameSelector, (alert) => {
return { ...alert?.payload };
},
);
});
const drawerByNameSelector = (state, props) =>
state.dashboard.drawers?.[props.name];
export const isDrawerOpenFactory = () =>
createSelector(drawerByNameSelector, (drawer) => {
return drawer && drawer.isOpen;
});
export const getDrawerPayloadFactory = () =>
createSelector(drawerByNameSelector, (drawer) => {
return { ...drawer?.payload };
});

7
client/src/store/dashboard/dashboard.types.js
View File

@@ -1,4 +1,3 @@
export default {
OPEN_DIALOG: 'OPEN_DIALOG',
CLOSE_DIALOG: 'CLOSE_DIALOG',
@@ -6,6 +5,8 @@ export default {
CLOSE_ALERT: 'CLOSE_ALERT',
CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS',
CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS',
OPEN_DRAWER: 'OPEN_DRAWER',
CLOSE_DRAWER: 'CLOSE_DRAWER',
CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE',
CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT',
CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE',
@@ -18,5 +19,5 @@ export default {
SIDEBAR_SHRINK: 'SIDEBAR_SHRINK',
RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND',
RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND',
SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK'
};
SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK',
};

353
client/src/store/financialStatement/financialStatements.actions.js
View File

@@ -1,185 +1,266 @@
import ApiService from "services/ApiService";
import ApiService from 'services/ApiService';
import t from 'store/types';
export const balanceSheetRefresh = (refresh) => {
return dispatch => dispatch({
type: 'BALANCE_SHEET_REFRESH',
payload: { refresh },
});
return (dispatch) =>
dispatch({
type: 'BALANCE_SHEET_REFRESH',
payload: { refresh },
});
};
export const fetchGeneralLedger = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/general_ledger', { params: query }).then((response) => {
dispatch({
type: t.GENERAL_LEDGER_STATEMENT_SET,
data: response.data,
});
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: false,
loading: true,
});
resolve(response);
}).catch((error) => { reject(error); });
});
ApiService.get('/financial_statements/general_ledger', { params: query })
.then((response) => {
dispatch({
type: t.GENERAL_LEDGER_STATEMENT_SET,
data: response.data,
});
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: false,
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const refreshGeneralLedgerSheet = (refresh) => {
return (dispatch) => dispatch({
type: t.GENERAL_LEDGER_REFRESH,
payload: { refresh },
});
return (dispatch) =>
dispatch({
type: t.GENERAL_LEDGER_REFRESH,
payload: { refresh },
});
};
export const fetchBalanceSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/balance_sheet', { params: query }).then((response) => {
dispatch({
type: t.BALANCE_SHEET_STATEMENT_SET,
data: response.data,
query: query,
});
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: false,
loading: true,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
}).catch((error) => { reject(error); });
});
ApiService.get('/financial_statements/balance_sheet', { params: query })
.then((response) => {
dispatch({
type: t.BALANCE_SHEET_STATEMENT_SET,
data: response.data,
query: query,
});
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: false,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const fetchTrialBalanceSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.TRIAL_BALANCE_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/trial_balance_sheet', { params: query }).then((response) => {
dispatch({
type: t.TRAIL_BALANCE_STATEMENT_SET,
data: response.data,
});
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.TRIAL_BALANCE_SHEET_LOADING,
loading: false,
loading: true,
});
resolve(response.data);
}).catch((error) => { reject(error); })
})
ApiService.get('/financial_statements/trial_balance_sheet', {
params: query,
})
.then((response) => {
dispatch({
type: t.TRAIL_BALANCE_STATEMENT_SET,
data: response.data,
});
dispatch({
type: t.TRIAL_BALANCE_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
export const trialBalanceRefresh = (refresh) => {
return (dispatch) => dispatch({
type: t.TRIAL_BALANCE_REFRESH,
payload: { refresh },
});
return (dispatch) =>
dispatch({
type: t.TRIAL_BALANCE_REFRESH,
payload: { refresh },
});
};
export const fetchProfitLossSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/profit_loss_sheet', { params: query }).then((response) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_SET,
profitLoss: response.data.data,
columns: response.data.columns,
query: response.data.query,
});
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: false,
loading: true,
});
resolve(response.data);
}).catch((error) => { reject(error); });
})
ApiService.get('/financial_statements/profit_loss_sheet', {
params: query,
})
.then((response) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_SET,
profitLoss: response.data.data,
columns: response.data.columns,
query: response.data.query,
});
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
export const profitLossRefresh = (refresh) => {
return dispatch => dispatch({
type: t.PROFIT_LOSS_REFRESH,
payload: { refresh },
});
}
return (dispatch) =>
dispatch({
type: t.PROFIT_LOSS_REFRESH,
payload: { refresh },
});
};
export const fetchJournalSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.JOURNAL_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/journal', { params: query }).then((response) => {
dispatch({
type: t.JOURNAL_SHEET_SET,
data: response.data,
query: response.data.query,
});
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.JOURNAL_SHEET_LOADING,
loading: false,
loading: true,
});
resolve(response.data);
}).catch(error => { reject(error); });
});
ApiService.get('/financial_statements/journal', { params: query })
.then((response) => {
dispatch({
type: t.JOURNAL_SHEET_SET,
data: response.data,
query: response.data.query,
});
dispatch({
type: t.JOURNAL_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
export const refreshJournalSheet = (refresh) => {
return dispatch => dispatch({
type: t.JOURNAL_SHEET_REFRESH,
payload: { refresh },
});
}
return (dispatch) =>
dispatch({
type: t.JOURNAL_SHEET_REFRESH,
payload: { refresh },
});
};
export const fetchReceivableAgingSummary = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: true,
},
});
ApiService
.get('/financial_statements/receivable_aging_summary', { params: query })
.then((response) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_SET,
payload: {
customers: response.data.data.customers,
total: response.data.data.total,
columns: response.data.columns,
query,
},
});
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: false,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: true,
},
});
});
}
ApiService.get('/financial_statements/receivable_aging_summary', {
params: query,
})
.then((response) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_SET,
payload: {
customers: response.data.data.customers,
total: response.data.data.total,
columns: response.data.columns,
query,
},
});
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: false,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const receivableAgingSummaryRefresh = (refresh) => {
return (dispatch) => dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
}
return (dispatch) =>
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
};
export const fetchPayableAginSummary = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.PAYABLE_AGING_SUMMARY_LOADING,
payload: {
loading: true,
},
});
ApiService.get('/financial_statements/payable_aging_summary', {
params: query,
})
.then((response) => {
dispatch({
type: t.PAYABLE_AGING_SUMMARY_SET,
payload: {
vendors: response.data.data.vendors,
total: response.data.data.total,
columns: response.data.columns,
query,
},
});
dispatch({
type: t.PAYABLE_AGING_SUMMARY_LOADING,
payload: {
loading: false,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const payableAgingSummaryRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: t.PAYABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
};

35
client/src/store/financialStatement/financialStatements.reducer.js
View File

@@ -6,6 +6,7 @@ import {
generalLedgerToTableRows,
profitLossToTableRowsMapper,
ARAgingSummaryTableRowsMapper,
APAgingSummaryTableRowsMapper,
mapTrialBalanceSheetToRows,
} from './financialStatements.mappers';
@@ -48,6 +49,13 @@ const initialState = {
filter: true,
refresh: false,
},
payableAgingSummary: {
sheet: {},
loading: false,
tableRows: [],
filter: true,
refresh: false,
},
};
const financialStatementFilterToggle = (financialName, statePath) => {
@@ -172,7 +180,7 @@ export default createReducer(initialState, {
const { refresh } = action.payload;
state.receivableAgingSummary.refresh = !!refresh;
},
[t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
[t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
const { loading } = action.payload;
state.receivableAgingSummary.loading = loading;
},
@@ -180,4 +188,29 @@ export default createReducer(initialState, {
'RECEIVABLE_AGING_SUMMARY',
'receivableAgingSummary',
),
[t.PAYABLE_AGING_SUMMARY_SET]: (state, action) => {
const { vendors, total, columns, query } = action.payload;
const receivableSheet = {
query,
columns,
vendors,
total,
tableRows: APAgingSummaryTableRowsMapper({ vendors, columns, total }),
};
state.payableAgingSummary.sheet = receivableSheet;
},
[t.PAYABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.payableAgingSummary.refresh = !!refresh;
},
[t.PAYABLE_AGING_SUMMARY_LOADING]: (state, action) => {
const { loading } = action.payload;
state.payableAgingSummary.loading = loading;
},
...financialStatementFilterToggle(
'PAYABLE_AGING_SUMMARY',
'payableAgingSummary',
),
});

8
client/src/store/financialStatement/financialStatements.types.js
View File

@@ -1,5 +1,3 @@
export default {
GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
@@ -25,4 +23,8 @@ export default {
RECEIVABLE_AGING_SUMMARY_SET: 'RECEIVABLE_AGING_SUMMARY_SET',
RECEIVABLE_AGING_REFRECH: 'RECEIVABLE_AGING_REFRECH',
RECEIVABLE_AGING_SUMMARY_REFRESH: 'RECEIVABLE_AGING_SUMMARY_REFRESH',
}
PAYABLE_AGING_SUMMARY_LOADING: 'PAYABLE_AGING_SUMMARY_LOADING',
PAYABLE_AGING_SUMMARY_SET: 'PAYABLE_AGING_SUMMARY_SET',
PAYABLE_AGING_SUMMARY_REFRESH: 'PAYABLE_AGING_SUMMARY_REFRESH',
};

139
client/src/style/components/Drawer/DrawerTemplate.scss Normal file
View File

@@ -0,0 +1,139 @@
#page-size {
margin: 0 auto;
// background-color: #ffffff;
background-color: transparent;
width: 21cm;
height: 29.7cm;
padding-bottom: 20px;
}
.template {
background-color: transparent;
// margin: 30px;
margin: 20px;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px 40px 16px 0px;
&--title h1 {
font-weight: 600;
color: #1c4587;
margin: 0;
}
&--title p {
color: #666666;
}
}
&__content {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #1155cc;
// padding-bottom: 40px;
padding-bottom: 35px;
&__info {
flex: 0 1 25%;
padding-left: 5px;
color: #999999;
font-size: 16px;
font-weight: 400;
line-height: 1.6rem;
margin-bottom: 10px;
.info-paragraph-amount {
margin-top: 8px;
color: #123163;
font-size: 26px;
font-weight: 500;
}
.info-paragraph {
font-size: 15px;
color: #000;
}
}
}
&__table {
display: flex;
flex-direction: column;
padding: 0px 5px;
margin: 5px 0px 20px 0px;
font-size: 16px;
&__rows {
display: flex;
margin-bottom: 15px;
color: #1155cc;
&--cell {
flex: 0 20%;
}
&--cell-payment-receive {
flex: 1;
}
&--cell:first-child {
flex: 1 0 20%;
padding-left: 5px;
}
}
&__rows:not(:first-child) {
color: #000;
border-bottom: 1px solid #cecbcb;
padding-bottom: 15px;
}
}
&__terms {
padding: 0px 5px;
&__title h4 {
font-size: 16px;
font-weight: 400;
color: #666666;
margin-bottom: 5px;
// font-size: 18px;
// font-weight: 500;
}
ul {
list-style: none;
}
ul li {
color: #000;
font-size: 14px;
}
ul li::before {
content: '•';
color: #b7b7b7;
display: inline-block;
width: 1em;
margin-left: 0.7em;
}
}
}
.bp3-drawer.bp3-position-right {
bottom: 0;
right: 0;
top: 0;
overflow: auto;
height: 100%;
.bp3-drawer-header .bp3-heading {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
flex: 1 1 auto;
line-height: inherit;
margin: 0;
font-size: 18px;
font-weight: 600;
color: #0d244a;
}
}

107
client/src/style/pages/HomePage/HomePage.scss Normal file
View File

@@ -0,0 +1,107 @@
.homepage {
&__container {
display: flex;
height: 100%;
margin: 22px 32px;
background-color: transparent;
.shortcut-boxes {
flex: 2;
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-bottom: 1px solid #d2dce2;
border-right: 1px solid #d2dce2;
.shortcut-box {
width: 50%;
// height: 174px;
padding: 16px;
border-left: 1px solid #d2dce2;
border-top: 1px solid #d2dce2;
background-color: transparent;
transition: 0.2s;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
span > a {
color: #d6d6e0;
}
.header--icon {
width: 38px;
height: 32px;
// background-color:#F3FEFA;
}
}
&__title {
font-size: 16px;
color: #48485c;
font-weight: 500;
line-height: 1.6rem;
margin-bottom: 10px;
}
&__description {
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
}
}
}
.announcements-list {
flex: 1;
flex-shrink: 0;
background-color: #fff;
border: 1px solid #d2dce2;
margin-left: 24px;
display: flex;
flex-direction: column;
padding-bottom: 32px;
width: 100%;
&__title {
font-size: 16px;
font-weight: 400;
margin: 16px;
}
.announcement-box {
padding: 16px;
width: 100%;
// margin-bottom: 20px;
&__title {
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
}
&____description {
}
&.announcement-box:not(:last-child) {
// border-top: 1px solid #d2dce2;
border-bottom: 1px solid #d2dce2;
}
}
.btn-view-all {
display: flex;
border-radius: 12px;
background: transparent;
padding: 5px;
margin: 20px;
vertical-align: middle;
text-align: center;
cursor: pointer;
text-decoration: none;
border: 1px solid;
justify-items: center;
justify-content: center;
}
}
}
}