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

feat: style sales and purchases forms.
2026-02-18 13:50:31 +00:00 · 2020-10-27 21:05:43 +02:00
parent 0ec0865a6e
commit 8e9abb4d7d
24 changed files with 689 additions and 362 deletions
--- a/client/src/containers/Accounting/MakeJournalEntriesTable.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js
@@ -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}
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -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'}
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -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}
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -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}
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -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
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -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>
  );
 }
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -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}
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -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>
  );
 }