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

feat: auto-increment sale invoice, receipt, estimate and payment receive.

Browse Source 
feat: style sales and purchases forms.
This commit is contained in:
Ahmed Bouhuolia
2020-10-27 21:05:43 +02:00
parent 0ec0865a6e
commit 8e9abb4d7d
24 changed files with 689 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/common/classes.js
View File

@@ -1,16 +1,20 @@
import { Classes } from '@blueprintjs/core';
const CLASSES = {
DATATABLE_EDITOR: 'DATATABLE_EDITOR',
DATATABLE_EDITOR: 'datatable-editor',
DATATABLE_EDITOR_ACTIONS: 'datatable-editor__actions',
DATATABLE_EDITOR_ITEMS_ENTRIES: 'items-entries-table',
PAGE_FORM: 'page-form',
PAGE_FORM_HEADER: 'page-form__header',
PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
PAGE_FORM_FOOTER: 'page-form__footer',
PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-action',
PAGE_FORM_BILL: 'page-form--bill',
PAGE_FORM_ESTIMATE: 'page-form--estimate',
PAGE_FORM_INVOICE: 'page-form--invoice',
PAGE_FORM_RECEIPT: 'page-form--receipt',
...Classes,
};

2
client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -247,7 +247,7 @@ function MakeJournalEntriesTable({
};
return (
<div class="make-journal-entries__table">
<div class="make-journal-entries__table datatable-editor">
<DataTable
columns={columns}
data={tableRows}

9
client/src/containers/Sales/Estimate/EntriesItemsTable.js
View File

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { omit } from 'lodash';
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { Hint, Icon } from 'components';
@@ -229,7 +230,10 @@ function EstimateTable({
);
return (
<div className={'estimate-form__table datatable-editor'}>
<div className={classNames(
CLASSES.DATATABLE_EDITOR,
CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
)}>
<DataTable
columns={columns}
data={rows}
@@ -240,9 +244,8 @@ function EstimateTable({
updateData: handleUpdateData,
removeRow: handleRemoveRow,
}}
className={CLASSES.DATATABLE_EDITOR}
/>
<div className={'datatable-editor__actions mt1'}>
<div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
<Button
small={true}
className={'button--secondary button--new-line'}

5
client/src/containers/Sales/Estimate/EstimateForm.js
View File

@@ -317,7 +317,7 @@ const EstimateForm = ({
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Row>
<Col md={7}>
<Col md={8}>
<FormGroup
label={<T id={'customer_note'} />}
className={'form-group--customer_note'}
@@ -327,6 +327,7 @@ const EstimateForm = ({
{...formik.getFieldProps('note')}
/>
</FormGroup>
<FormGroup
label={<T id={'terms_conditions'} />}
className={'form-group--terms_conditions'}
@@ -338,7 +339,7 @@ const EstimateForm = ({
</FormGroup>
</Col>
<Col md={5}>
<Col md={4}>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}

2
client/src/containers/Sales/Estimate/EstimateFormHeader.js
View File

@@ -139,7 +139,7 @@ function EstimateFormHeader({
/>
</FormGroup>
</Col>
<Col md={4}>
<Col md={4} className={'col--expiration-date'}>
<FormGroup
label={<T id={'expiration_date'} />}
inline={true}

75
client/src/containers/Sales/Invoice/InvoiceForm.js
View File

@@ -8,10 +8,11 @@ import React, {
import * as Yup from 'yup';
import { useFormik } from 'formik';
import moment from 'moment';
import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import { Row, Col } from 'react-grid-system';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import InvoiceFormHeader from './InvoiceFormHeader';
import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -23,7 +24,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
import withSettings from 'containers/Settings/withSettings';
import { AppToaster } from 'components';
import { AppToaster, Col, Row } from 'components';
import Dragzone from 'components/Dragzone';
import useMedia from 'hooks/useMedia';
@@ -307,7 +308,7 @@ function InvoiceForm({
};
return (
<div className={'invoice-form'}>
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
<form onSubmit={formik.handleSubmit}>
<InvoiceFormHeader formik={formik} />
<EstimatesItemsTable
@@ -316,37 +317,43 @@ function InvoiceForm({
onClickClearAllLines={handleClearAllLines}
formik={formik}
/>
<Row>
<Col>
<FormGroup
label={<T id={'invoice_message'} />}
className={'form-group--customer_note'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('invoice_message')}
/>
</FormGroup>
<FormGroup
label={<T id={'terms_conditions'} />}
className={'form-group--terms_conditions'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('terms_conditions')}
/>
</FormGroup>
</Col>
<Col>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</Col>
</Row>
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Row>
<Col md={8}>
{/* --------- Invoice message --------- */}
<FormGroup
label={<T id={'invoice_message'} />}
className={'form-group--invoice_message'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('invoice_message')}
/>
</FormGroup>
{/* --------- Terms and conditions --------- */}
<FormGroup
label={<T id={'terms_conditions'} />}
className={'form-group--terms_conditions'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('terms_conditions')}
/>
</FormGroup>
</Col>
<Col md={4}>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</Col>
</Row>
</div>
</form>
<InvoiceFormFooter

183
client/src/containers/Sales/Invoice/InvoiceFormHeader.js
View File

@@ -5,20 +5,21 @@ import {
Intent,
Position,
MenuItem,
Classes,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import { Row, Col } from 'react-grid-system';
import moment from 'moment';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
ListSelect,
ErrorMessage,
FieldRequiredHint,
Icon,
InputPrependButton,
Row,
Col,
} from 'components';
import withCustomers from 'containers/Customers/withCustomers';
@@ -81,13 +82,17 @@ function InvoiceFormHeader({
}, [openDialog]);
return (
<div class="page-form page-form--invoice">
<div className={'page-form__primary-section'}>
{/* customer name */}
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
{/* ----------- Customer name ----------- */}
<FormGroup
label={<T id={'customer_name'} />}
inline={true}
className={classNames('form-group--select-list', Classes.FILL)}
className={classNames(
'form-group--select-list',
'form-group--customer-name',
CLASSES.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={errors.customer_id && touched.customer_id && Intent.DANGER}
helperText={
@@ -107,79 +112,109 @@ function InvoiceFormHeader({
labelProp={'display_name'}
/>
</FormGroup>
</div>
<Row>
<Col>
<FormGroup
label={<T id={'invoice_date'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={
errors.invoice_date && touched.invoice_date && Intent.DANGER
}
helperText={
<ErrorMessage name="invoice_date" {...{ errors, touched }} />
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.invoice_date)}
onChange={handleDateChange('invoice_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</Col>
<Row>
<Col md={7} className={'col--invoice-date'}>
{/* ----------- Invoice date ----------- */}
<FormGroup
label={<T id={'invoice_date'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
className={classNames(
'form-group--select-list',
'form-group--invoice-date',
CLASSES.FILL
)}
intent={
errors.invoice_date && touched.invoice_date && Intent.DANGER
}
helperText={
<ErrorMessage name="invoice_date" {...{ errors, touched }} />
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.invoice_date)}
onChange={handleDateChange('invoice_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</Col>
<Col>
<FormGroup
label={<T id={'due_date'} />}
inline={true}
className={classNames('form-group--select-list', Classes.FILL)}
intent={errors.due_date && touched.due_date && Intent.DANGER}
helperText={
<ErrorMessage name="due_date" {...{ errors, touched }} />
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.due_date)}
onChange={handleDateChange('due_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</Col>
</Row>
{/* invoice */}
<FormGroup
label={<T id={'invoice_no'} />}
inline={true}
className={('form-group--estimate', Classes.FILL)}
labelInfo={<FieldRequiredHint />}
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
helperText={<ErrorMessage name="invoice_no" {...{ errors, touched }} />}
>
<InputGroup
<Col md={5} className={'col--due-date'}>
{/* ----------- Due date ----------- */}
<FormGroup
label={<T id={'due_date'} />}
inline={true}
className={classNames(
'form-group--select-list',
'form-group--due-date',
CLASSES.FILL
)}
intent={errors.due_date && touched.due_date && Intent.DANGER}
helperText={
<ErrorMessage name="due_date" {...{ errors, touched }} />
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.due_date)}
onChange={handleDateChange('due_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</Col>
</Row>
{/* ----------- Invoice number ----------- */}
<FormGroup
label={<T id={'invoice_no'} />}
inline={true}
className={classNames('form-group--invoice-no', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
minimal={true}
{...getFieldProps('invoice_no')}
/>
</FormGroup>
helperText={
<ErrorMessage name="invoice_no" {...{ errors, touched }} />
}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleInvoiceNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated invoice number',
position: Position.BOTTOM_LEFT,
}}
/>
}
>
<InputGroup
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
minimal={true}
{...getFieldProps('invoice_no')}
/>
</FormGroup>
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', Classes.FILL)}
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
>
<InputGroup
{/* ----------- Reference ----------- */}
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
helperText={
<ErrorMessage name="reference" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.reference_no && touched.reference_no && Intent.DANGER
}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
</div>
</div>
);
}

71
client/src/containers/Sales/Receipt/ReceiptForm.js
View File

@@ -12,7 +12,9 @@ import moment from 'moment';
import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import { Row, Col } from 'react-grid-system';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import ReceiptFromHeader from './ReceiptFormHeader';
import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -24,7 +26,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
import withSettings from 'containers/Settings/withSettings';
import { AppToaster } from 'components';
import { AppToaster, Row, Col } from 'components';
import Dragzone from 'components/Dragzone';
import useMedia from 'hooks/useMedia';
@@ -305,7 +307,7 @@ function ReceiptForm({
}, [receiptNumber]);
return (
<div className={'receipt-form'}>
<div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
<form onSubmit={formik.handleSubmit}>
<ReceiptFromHeader formik={formik} />
@@ -316,37 +318,40 @@ function ReceiptForm({
formik={formik}
/>
<Row>
<Col>
<FormGroup
label={<T id={'receipt_message'} />}
className={'form-group--'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('receipt_message')}
/>
</FormGroup>
<FormGroup
label={<T id={'statement'} />}
className={'form-group--statement'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('statement')}
/>
</FormGroup>
</Col>
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Row>
<Col md={8}>
<FormGroup
label={<T id={'receipt_message'} />}
className={'form-group--receipt_message'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('receipt_message')}
/>
</FormGroup>
<Col>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</Col>
</Row>
<FormGroup
label={<T id={'statement'} />}
className={'form-group--statement'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('statement')}
/>
</FormGroup>
</Col>
<Col md={4}>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
/>
</Col>
</Row>
</div>
</form>
<ReceiptFormFooter
formik={formik}

120
client/src/containers/Sales/Receipt/ReceiptFormHeader.js
View File

@@ -5,7 +5,6 @@ import {
Intent,
Position,
MenuItem,
Classes,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
@@ -13,6 +12,7 @@ import { FormattedMessage as T } from 'react-intl';
import moment from 'moment';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
AccountsSelectList,
ListSelect,
@@ -91,15 +91,15 @@ function ReceiptFormHeader({
}, [openDialog]);
return (
<div class="page-form receipt-form">
<div class="page-form__primary-section">
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
{/*- Customer name -*/}
<FormGroup
label={<T id={'customer_name'} />}
inline={true}
className={classNames(
'form-group--select-list',
Classes.FILL,
CLASSES.FILL,
'form-group--customer',
)}
labelInfo={<FieldRequiredHint />}
@@ -128,7 +128,7 @@ function ReceiptFormHeader({
className={classNames(
'form-group--deposit-account',
'form-group--select-list',
Classes.FILL,
CLASSES.FILL,
)}
inline={true}
labelInfo={<FieldRequiredHint />}
@@ -155,7 +155,7 @@ function ReceiptFormHeader({
<FormGroup
label={<T id={'receipt_date'} />}
inline={true}
className={classNames('form-group--select-list', Classes.FILL)}
className={classNames('form-group--select-list', CLASSES.FILL)}
intent={errors.receipt_date && touched.receipt_date && Intent.DANGER}
helperText={
<ErrorMessage name="receipt_date" {...{ errors, touched }} />
@@ -168,73 +168,61 @@ function ReceiptFormHeader({
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</div>
{/* receipt_no */}
<FormGroup
label={<T id={'receipt'} />}
inline={true}
className={('form-group--receipt_number', Classes.FILL)}
labelInfo={<FieldRequiredHint />}
intent={
errors.receipt_number && touched.receipt_number && Intent.DANGER
}
helperText={
<ErrorMessage name="receipt_number" {...{ errors, touched }} />
}
>
<InputGroup
{/* receipt_no */}
<FormGroup
label={<T id={'receipt'} />}
inline={true}
className={('form-group--receipt_number', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={
errors.receipt_number && touched.receipt_number && Intent.DANGER
}
minimal={true}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleReceiptNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated receipt number',
position: Position.BOTTOM_LEFT,
}}
/>
helperText={
<ErrorMessage name="receipt_number" {...{ errors, touched }} />
}
{...getFieldProps('receipt_number')}
/>
</FormGroup>
>
<InputGroup
intent={
errors.receipt_number && touched.receipt_number && Intent.DANGER
}
minimal={true}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleReceiptNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated receipt number',
position: Position.BOTTOM_LEFT,
}}
/>
}
{...getFieldProps('receipt_number')}
/>
</FormGroup>
{/*- Reference -*/}
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', Classes.FILL)}
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
>
<InputGroup
{/*- Reference -*/}
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
{/*- Send to email -*/}
<FormGroup
label={<T id={'send_to_email'} />}
inline={true}
className={classNames('form-group--send_to_email', Classes.FILL)}
intent={errors.send_to_email && touched.send_to_email && Intent.DANGER}
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
>
<InputGroup
intent={
errors.send_to_email && touched.send_to_email && Intent.DANGER
helperText={
<ErrorMessage name="reference" {...{ errors, touched }} />
}
minimal={true}
{...getFieldProps('send_to_email')}
/>
</FormGroup>
>
<InputGroup
intent={
errors.reference_no && touched.reference_no && Intent.DANGER
}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
</div>
</div>
);
}

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

@@ -68,11 +68,13 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'pages/register-organizaton';
@import 'pages/bills';
@import 'pages/estimates';
@import 'pages/invoice-form';
@import 'pages/receipt-form';
// Views
@import 'views/filter-dropdown';
@import 'views/sidebar';
@import 'pages/estimate';
// @import 'pages/estimate';
.App {
min-width: 960px;
@@ -215,11 +217,152 @@ body.authentication {
}
&__footer{
padding: 15px;
margin: 15px 0 0 0;
}
}
.datatable-editor{
padding: 15px 15px 0;
.bp3-form-group {
margin-bottom: 0;
}
.table {
border: 1px dotted rgb(195, 195, 195);
border-bottom: transparent;
border-left: transparent;
.th,
.td {
border-left: 1px dotted rgb(195, 195, 195);
&.index {
text-align: center;
span {
width: 100%;
font-weight: 500;
}
}
}
.thead {
.tr .th {
padding: 10px 10px;
background-color: #f2f5fa;
font-size: 14px;
font-weight: 500;
color: #1e1c3e;
&.index > div {
width: 100%;
}
}
}
.tbody {
.tr .td {
padding: 7px;
border-bottom: 1px dotted rgb(195, 195, 195);
min-height: 46px;
&.index {
background-color: #f2f5fa;
> span {
margin-top: auto;
margin-bottom: auto;
}
}
}
.tr {
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
.form-group--select-list .bp3-button {
border-color: #e5e5e5;
border-radius: 3px;
padding-left: 8px;
padding-right: 8px;
}
.form-group--select-list {
&.bp3-intent-danger {
.bp3-button:not(.bp3-minimal) {
border-color: #db3737;
}
}
}
&:last-of-type {
.td {
border-bottom: transparent;
.bp3-button,
.bp3-input-group {
display: none;
}
}
}
.td.actions {
.bp3-button {
background-color: transparent;
color: #e66d6d;
&:hover {
color: #c23030;
}
svg {
color: inherit;
}
}
}
&.row--total {
.account.td,
.debit.td,
.credit.td {
> span {
padding-top: 2px;
}
}
.debit.td,
.credit.td {
> span {
font-weight: 600;
color: #444;
}
}
}
.td {
&.note {
.bp3-form-group {
width: 100%;
}
}
}
}
}
.th {
color: #444;
font-weight: 600;
border-bottom: 1px dotted #666;
}
.td {
border-bottom: 1px dotted #999;
}
.actions.td {
.bp3-button {
background: transparent;
margin: 0;
}
}
}
.table{
.tbody{
.tr .td.actions .bp3-button{

7
client/src/style/pages/bills.scss
View File

@@ -17,7 +17,7 @@
.bp3-form-group{
&.bp3-inline{
max-width: 450px;
max-width: 420px;
}
&.form-group{
@@ -45,12 +45,9 @@
.row--bill-date{
.col:first-of-type{
max-width: 465px;
max-width: 435px;
}
}
.col--estimate-date{
max-width: 530px;
}
}
#{$self}__footer{

52
client/src/style/pages/estimates.scss
View File

@@ -3,5 +3,57 @@
#{$self}__header{
.bp3-form-group{
margin-bottom: 18px;
}
.bp3-label{
min-width: 140px;
}
.bp3-form-content{
width: 100%;
}
.bp3-form-group{
&.bp3-inline{
max-width: 420px;
}
}
.bp3-form-group{
&.form-group{
&--customer{
max-width: 650px;
}
&--expiration-date{
max-width: 340px;
.bp3-label{
min-width: 120px;
}
}
}
}
.col--estimate-date{
max-width: 435px;
}
}
#{$self}__footer{
.form-group--customer_note,
.form-group--terms_conditions{
max-width: 450px;
width: 100%;
textarea{
width: 100%;
min-height: 50px;
}
}
}
}

52
client/src/style/pages/invoice-form.scss Normal file
View File

@@ -0,0 +1,52 @@
.page-form--invoice{
$self: '.page-form';
#{$self}__header{
.bp3-label{
min-width: 140px;
}
.bp3-form-content{
width: 100%;
}
.bp3-form-group{
margin-bottom: 18px;
&.bp3-inline{
max-width: 420px;
}
&.form-group{
&--customer-name{
max-width: 600px
}
&--due-date{
max-width: 300px;
.bp3-label{
min-width: 95px;
}
}
}
}
.col--invoice-date{
max-width: 435px;
}
}
#{$self}__footer{
.form-group--invoice_message,
.form-group--terms_conditions{
max-width: 450px;
width: 100%;
textarea{
width: 100%;
min-height: 60px;
}
}
}
}

140
client/src/style/pages/make-journal-entries.scss
View File

@@ -17,145 +17,7 @@
}
&__table {
padding: 15px 15px 0;
.bp3-form-group {
margin-bottom: 0;
}
.table {
border: 1px dotted rgb(195, 195, 195);
border-bottom: transparent;
border-left: transparent;
.th,
.td {
border-left: 1px dotted rgb(195, 195, 195);
&.index {
text-align: center;
span {
width: 100%;
font-weight: 500;
}
}
}
.thead {
.tr .th {
padding: 10px 10px;
background-color: #f2f5fa;
font-size: 14px;
font-weight: 500;
color: #1e1c3e;
&.index > div {
width: 100%;
}
}
}
.tbody {
.tr .td {
padding: 7px;
border-bottom: 1px dotted rgb(195, 195, 195);
min-height: 46px;
&.index {
background-color: #f2f5fa;
> span {
margin-top: auto;
margin-bottom: auto;
}
}
}
.tr {
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
.form-group--select-list .bp3-button {
border-color: #e5e5e5;
border-radius: 3px;
padding-left: 8px;
padding-right: 8px;
}
.form-group--select-list {
&.bp3-intent-danger {
.bp3-button:not(.bp3-minimal) {
border-color: #db3737;
}
}
}
&:last-of-type {
.td {
border-bottom: transparent;
.bp3-button,
.bp3-input-group {
display: none;
}
}
}
.td.actions {
.bp3-button {
background-color: transparent;
color: #e66d6d;
&:hover {
color: #c23030;
}
svg {
color: inherit;
}
}
}
&.row--total {
.account.td,
.debit.td,
.credit.td {
> span {
padding-top: 2px;
}
}
.debit.td,
.credit.td {
> span {
font-weight: 600;
color: #444;
}
}
}
.td {
&.note {
.bp3-form-group {
width: 100%;
}
}
}
}
}
.th {
color: #444;
font-weight: 600;
border-bottom: 1px dotted #666;
}
.td {
border-bottom: 1px dotted #999;
}
.actions.td {
.bp3-button {
background: transparent;
margin: 0;
}
}
}
}
.bp3-button {

41
client/src/style/pages/receipt-form.scss Normal file
View File

@@ -0,0 +1,41 @@
.page-form--receipt{
$self: '.page-form';
#{$self}__header{
.bp3-label{
min-width: 140px;
}
.bp3-form-content{
width: 100%;
}
.bp3-form-group{
margin-bottom: 18px;
&.bp3-inline{
max-width: 450px;
}
&.form-group{
&--customer{
max-width: 600px
}
}
}
}
#{$self}__footer{
.form-group--receipt_message,
.form-group--statement{
max-width: 450px;
width: 100%;
textarea{
width: 100%;
min-height: 50px;
}
}
}
}