feat: Item validate cost, income and inventory account type.

feat: Style sales and purchases forms - 80% progress. feat: Validate purchase-able and sell-able items in invoices and bills. feat: Fix bugs in inventory FIFO/LIFO cost methods.
2026-02-18 05:40:31 +00:00 · 2020-08-22 11:58:08 +02:00
parent b46570dc01
commit 45088b2d3b
34 changed files with 841 additions and 636 deletions
--- a/client/src/components/classes.js
+++ b/client/src/components/classes.js
@@ -0,0 +1,4 @@
+
+export default {
+  DATATABLE_EDITOR: 'datatable-editor',
+};
--- a/client/src/containers/Purchases/Bill/BillForm.js
+++ b/client/src/containers/Purchases/Bill/BillForm.js
@@ -9,6 +9,7 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
+import { Row, Col } from 'react-grid-system';

 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
@@ -291,15 +292,22 @@ function BillForm({
          onClickAddNewRow={onClickAddNewRow}
          onClickClearAllLines={onClickCleanAllLines}
        />
-        <FormGroup label={<T id={'note'} />} className={'form-group--'}>
-          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
-        </FormGroup>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+        <Row>
+          <Col>
+            <FormGroup label={<T id={'note'} />} className={'form-group--'}>
+              <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+            </FormGroup>
+          </Col>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
      </form>
      <BillFormFooter
        formik={formik}
--- a/client/src/containers/Purchases/Bill/BillFormFooter.js
+++ b/client/src/containers/Purchases/Bill/BillFormFooter.js
@@ -9,7 +9,7 @@ export default function BillFormFooter({
  bill,
 }) {
  return (
-    <div>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Purchases/Bill/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -76,12 +76,10 @@ function BillFormHeader({
    }
  };

-  console.log(vendorsCurrentPage, 'vendorsCurrentPage');
-  console.log(vendorItems, 'vendorItems');
  return (
-    <div>
-      <div>
-        {/* vendor  account name */}
+    <div className="page-form page-form--bill">
+      <div className={'page-form__primary-section'}>
+        {/* Vendor  account name */}
        <FormGroup
          label={<T id={'vendor_name'} />}
          inline={true}
--- a/client/src/containers/Purchases/BillForm.js
+++ b/client/src/containers/Purchases/BillForm.js
@@ -11,7 +11,8 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';

 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omit } from 'lodash';
+import { omit } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import BillFormHeader from './BillFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -273,15 +274,24 @@ function BillForm({
          onClickAddNewRow={onClickAddNewRow}
          onClickClearAllLines={onClickCleanAllLines}
        />
-        <FormGroup label={<T id={'note'} />} className={'form-group--'}>
-          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
-        </FormGroup>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+
+        <Row>
+          <Col>
+            <FormGroup label={<T id={'note'} />} className={'form-group--'}>
+              <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+            </FormGroup>
+          </Col>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
+      
        <BillFormFooter
          formik={formik}
          onSubmit={handleSubmitClick}
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -1,10 +1,11 @@
 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 CLASSES from 'components/classes';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
-
-import { compose, formattedAmount } from 'utils';
 import {
  InputGroupCell,
  MoneyFieldCell,
@@ -14,7 +15,7 @@ import {
 } from 'components/DataTableCells';

 import withItems from 'containers/Items/withItems';
-import { omit } from 'lodash';
+import { compose, formattedAmount } from 'utils';

 const ActionsCellRenderer = ({
  row: { index },
@@ -92,6 +93,7 @@ function EstimateTable({
        width: 40,
        disableResizing: true,
        disableSortBy: true,
+        className: 'index',
      },
      {
        Header: formatMessage({ id: 'product_and_service' }),
@@ -108,6 +110,7 @@ function EstimateTable({
        Cell: InputGroupCell,
        disableSortBy: true,
        className: 'description',
+        width: 120,
      },

      {
@@ -123,7 +126,7 @@ function EstimateTable({
        accessor: 'rate',
        Cell: TotalEstimateCellRederer(MoneyFieldCell, 'rate'),
        disableSortBy: true,
-        width: 150,
+        width: 100,
        className: 'rate',
      },
      {
@@ -230,8 +233,9 @@ function EstimateTable({
          updateData: handleUpdateData,
          removeRow: handleRemoveRow,
        }}
+        className={CLASSES.DATATABLE_EDITOR}
      />
-      <div className={'mt1'}>
+      <div className={'datatable-editor-actions mt1'}>
        <Button
          small={true}
          className={'button--secondary button--new-line'}
--- a/client/src/containers/Sales/Estimate/Estimate.schema.js
+++ b/client/src/containers/Sales/Estimate/Estimate.schema.js
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -5,14 +5,13 @@ import React, {
  useRef,
  useState,
 } from '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, omit } from 'lodash';
-import { queryCache } from 'react-query';
+import { pick } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import EstimateFormHeader from './EstimateFormHeader';
 import EstimatesItemsTable from './EntriesItemsTable';
@@ -103,13 +102,11 @@ const EstimateForm = ({
      .min(1)
      .max(1024)
      .label(formatMessage({ id: 'note' })),
-
    terms_conditions: Yup.string()
      .trim()
      .min(1)
      .max(1024)
      .label(formatMessage({ id: 'note' })),
-
    entries: Yup.array().of(
      Yup.object().shape({
        quantity: Yup.number().nullable(),
@@ -320,27 +317,35 @@ const EstimateForm = ({
          formik={formik}
          // defaultRow={defaultEstimate}
        />
-        <FormGroup
-          label={<T id={'customer_note'} />}
-          className={'form-group--customer_note'}
-        >
-          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'terms_conditions'} />}
-          className={'form-group--terms_conditions'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('terms_conditions')}
-          />
-        </FormGroup>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'customer_note'} />}
+              className={'form-group--customer_note'}
+            >
+              <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+            </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>
      </form>
      <EstimateFormFooter
        formik={formik}
--- a/client/src/containers/Sales/Estimate/EstimateFormFooter.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
@@ -11,7 +11,7 @@ export default function EstimateFormFooter({
  estimate,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -68,13 +68,16 @@ function EstimateFormHeader({
  );

  return (
-    <div className={'estimate-form'}>
-      <div className={'estimate-form__primary-section'}>
-        {/* customer name */}
+    <div className={'page-form page-form--estimate'}>
+      <div className={'page-form__primary-section'}>
        <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',
+            Classes.FILL,
+          )}
          labelInfo={<FieldRequiredHint />}
          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
          helperText={
@@ -94,7 +97,7 @@ function EstimateFormHeader({
            labelProp={'display_name'}
          />
        </FormGroup>
-        {/* estimate_date */}
+        
        <Row>
          <Col

@@ -104,7 +107,11 @@ function EstimateFormHeader({
              label={<T id={'estimate_date'} />}
              inline={true}
              labelInfo={<FieldRequiredHint />}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames(
+                'form-group--select-list',
+                Classes.FILL,
+                'form-group--estimate-date'
+              )}
              intent={
                errors.estimate_date && touched.estimate_date && Intent.DANGER
              }
@@ -127,7 +134,11 @@ function EstimateFormHeader({
            <FormGroup
              label={<T id={'expiration_date'} />}
              inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames(
+                'form-group--select-list',
+                'form-group--expiration-date',
+                Classes.FILL
+              )}
              intent={
                errors.expiration_date &&
                touched.expiration_date &&
@@ -147,11 +158,12 @@ function EstimateFormHeader({
          </Col>
        </Row>
      </div>
-      {/* Estimate */}
+
+      {/*- Estimate -*/}
      <FormGroup
        label={<T id={'estimate'} />}
        inline={true}
-        className={('form-group--estimate', Classes.FILL)}
+        className={('form-group--estimate-number', Classes.FILL)}
        labelInfo={<FieldRequiredHint />}
        intent={
          errors.estimate_number && touched.estimate_number && Intent.DANGER
@@ -168,6 +180,7 @@ function EstimateFormHeader({
          {...getFieldProps('estimate_number')}
        />
      </FormGroup>
+    
      <FormGroup
        label={<T id={'reference'} />}
        inline={true}
--- a/client/src/containers/Sales/Estimate/Estimates.js
+++ b/client/src/containers/Sales/Estimate/Estimates.js
@@ -33,6 +33,7 @@ function Estimates({
    requestFetchCustomers({}),
  );

+  // 
  const handleFormSubmit = useCallback(
    (payload) => {
      payload.redirect && history.push('/estimates');
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ b/client/src/containers/Sales/Estimate/withEstimates.js
@@ -13,6 +13,7 @@ export default (mapState) => {

  const mapStateToProps = (state, props) => {
    const query = getEstimatesTableQuery(state, props);
+  
    const mapped = {
      estimatesCurrentPage: getEstimatesItems(state, props, query),
      estimateViews: getResourceViews(state, props, 'sales_estimates'),
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -11,6 +11,7 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import InvoiceFormHeader from './InvoiceFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -308,31 +309,38 @@ function InvoiceForm({
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
        />
-        <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>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+        <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>
      </form>
+
      <InvoiceFormFooter
        formik={formik}
        onSubmitClick={handleSubmitClick}
--- a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
@@ -9,7 +9,7 @@ export default function EstimateFormFooter({
  invoice,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -68,8 +68,8 @@ function InvoiceFormHeader({
  );

  return (
-    <div className={'invoice-form'}>
-      <div className={'invoice__primary-section'}>
+    <div class="page-form page-form--invoice">
+      <div className={'page-form__primary-section'}>
        {/* customer name */}
        <FormGroup
          label={<T id={'customer_name'} />}
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -12,6 +12,7 @@ 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 ReceiptFromHeader from './ReceiptFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -296,31 +297,38 @@ function ReceiptForm({
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
        />
-        <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>

-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+        <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>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>        
      </form>
      <ReceiptFormFooter
        formik={formik}
--- a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
@@ -9,7 +9,7 @@ export default function ReceiptFormFooter({
  receipt,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -83,13 +83,17 @@ function ReceiptFormHeader({
  );

  return (
-    <div>
-      <div>
-        {/* customer name */}
+    <div class="page-form receipt-form">
+      <div class="page-form__primary-section">
+        {/*- Customer name -*/}
        <FormGroup
          label={<T id={'customer_name'} />}
          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames(
+            'form-group--select-list',
+            Classes.FILL,
+            'form-group--customer',
+          )}
          labelInfo={<FieldRequiredHint />}
          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
          helperText={
@@ -110,10 +114,11 @@ function ReceiptFormHeader({
          />
        </FormGroup>

+        {/*- Deposit account -*/}
        <FormGroup
          label={<T id={'deposit_account'} />}
          className={classNames(
-            'form-group--deposit_account_id',
+            'form-group--deposit-account',
            'form-group--select-list',
            Classes.FILL,
          )}
@@ -172,6 +177,7 @@ function ReceiptFormHeader({
        />
      </FormGroup> */}

+      {/*- Reference -*/}
      <FormGroup
        label={<T id={'reference'} />}
        inline={true}
@@ -185,6 +191,8 @@ function ReceiptFormHeader({
          {...getFieldProps('reference_no')}
        />
      </FormGroup>
+
+      {/*- Send to email -*/}
      <FormGroup
        label={<T id={'send_to_email'} />}
        inline={true}
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -59,10 +59,13 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'pages/invite-user.scss';
@import 'pages/exchange-rate.scss';
@import 'pages/customer.scss';
-@import 'pages/estimate.scss';
+@import 'pages/estimates';
+@import 'pages/receipts';
+@import 'pages/invoices';

- // Views
-  @import 'views/filter-dropdown';
+
+// Views
+@import 'views/filter-dropdown';
@import 'views/sidebar';

 .App {
--- a/client/src/style/pages/estimate.scss
+++ b/client/src/style/pages/estimate.scss
@@ -1,379 +0,0 @@
-.estimate-form {
-  padding-bottom: 30px;
-  display: flex;
-  flex-direction: column;
-  .bp3-form-group {
-    width: 100%;
-    margin: 25px 20px 15px;
-  }
-  .bp3-label {
-    margin: 0 20px 0;
-    font-weight: 500;
-    font-size: 13px;
-    color: #444;
-    width: 130px;
-  }
-  .bp3-form-content {
-    width: 35%;
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
-      width: 120%;
-    }
-  }
-
-  &__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 {
-          > span,
-          > div {
-            text-align: center;
-            width: 100%;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .thead {
-        .tr .th {
-          padding: 10px 10px;
-          background-color: #f2f5fa;
-          font-size: 14px;
-          font-weight: 500;
-          color: #333;
-        }
-      }
-
-      .tbody {
-        .tr .td {
-          padding: 7px;
-          border-bottom: 1px dotted rgb(195, 195, 195);
-          min-height: 46px;
-
-          &.index {
-            background-color: #f2f5fa;
-            text-align: center;
-
-            > span {
-              margin-top: auto;
-              margin-bottom: auto;
-            }
-          }
-        }
-        .tr {
-          .bp3-form-group .bp3-input,
-          .form-group--select-list .bp3-button {
-            border-radius: 3px;
-            padding-left: 8px;
-            padding-right: 8px;
-          }
-
-          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-          .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
-            border-color: #e5e5e5;
-          }
-
-          &:last-of-type {
-            .td {
-              border-bottom: transparent;
-
-              .bp3-button,
-              .bp3-input-group {
-                display: none;
-              }
-            }
-          }
-
-          .td.actions {
-            .bp3-button {
-              background-color: transparent;
-              color: #e68f8e;
-
-              &:hover {
-                color: #c23030;
-              }
-            }
-          }
-
-          &.row--total {
-            .td.amount {
-              font-weight: bold;
-            }
-          }
-        }
-      }
-      .th {
-        color: #444;
-        font-weight: 600;
-        border-bottom: 1px dotted #666;
-      }
-
-      .td {
-        border-bottom: 1px dotted #999;
-
-        &.description {
-          .bp3-form-group {
-            width: 100%;
-          }
-        }
-      }
-
-      .actions.td {
-        .bp3-button {
-          background: transparent;
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  &__floating-footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background: #fff;
-    padding: 18px 18px;
-    border-top: 1px solid #ececec;
-
-    .has-mini-sidebar & {
-      left: 50px;
-    }
-  }
-  .bp3-button {
-    &.button--clear-lines {
-      background-color: #fcefef;
-    }
-  }
-  .button--clear-lines,
-  .button--new-line {
-    padding-left: 14px;
-    padding-right: 14px;
-  }
-  .dropzone-container {
-    margin-top: 0;
-    align-self: flex-end;
-  }
-  .dropzone {
-    width: 300px;
-    height: 75px;
-  }
-
-  .form-group--description {
-    .bp3-label {
-      font-weight: 500;
-      font-size: 13px;
-      color: #444;
-    }
-    .bp3-form-content {
-      // width: 280px;
-      textarea {
-        width: 450px;
-        min-height: 75px;
-      }
-    }
-  }
-}
-
-
-// .estimate-form {
-//   padding-bottom: 30px;
-//   display: flex;
-//   flex-direction: column;
-
-//   .bp3-form-group {
-//     margin: 25px 20px 15px;
-//     width: 100%;
-//     .bp3-label {
-//       font-weight: 500;
-//       font-size: 13px;
-//       color: #444;
-//       width: 130px;
-//     }
-//     .bp3-form-content {
-//       // width: 400px;
-//       width: 45%;
-//     }
-//   }
-//   // .expense-form-footer {
-//   //   display: flex;
-//   //   padding: 30px 25px 0;
-//   //   justify-content: space-between;
-//   // }
-
-//   &__primary-section {
-//     background: #fbfbfb;
-//   }
-//   &__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 {
-//           > span,
-//           > div {
-//             text-align: center;
-//             width: 100%;
-//             font-weight: 500;
-//           }
-//         }
-//       }
-
-//       .thead {
-//         .tr .th {
-//           padding: 10px 10px;
-//           background-color: #f2f5fa;
-//           font-size: 14px;
-//           font-weight: 500;
-//           color: #333;
-//         }
-//       }
-
-//       .tbody {
-//         .tr .td {
-//           padding: 7px;
-//           border-bottom: 1px dotted rgb(195, 195, 195);
-//           min-height: 46px;
-
-//           &.index {
-//             background-color: #f2f5fa;
-//             text-align: center;
-
-//             > span {
-//               margin-top: auto;
-//               margin-bottom: auto;
-//             }
-//           }
-//         }
-//         .tr {
-//           .bp3-form-group .bp3-input,
-//           .form-group--select-list .bp3-button {
-//             border-radius: 3px;
-//             padding-left: 8px;
-//             padding-right: 8px;
-//           }
-
-//           .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-//           .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
-//             border-color: #e5e5e5;
-//           }
-
-//           &:last-of-type {
-//             .td {
-//               border-bottom: transparent;
-
-//               .bp3-button,
-//               .bp3-input-group {
-//                 display: none;
-//               }
-//             }
-//           }
-
-//           .td.actions {
-//             .bp3-button {
-//               background-color: transparent;
-//               color: #e68f8e;
-
-//               &:hover {
-//                 color: #c23030;
-//               }
-//             }
-//           }
-
-//           &.row--total {
-//             .td.amount {
-//               font-weight: bold;
-//             }
-//           }
-//         }
-//       }
-//       .th {
-//         color: #444;
-//         font-weight: 600;
-//         border-bottom: 1px dotted #666;
-//       }
-
-//       .td {
-//         border-bottom: 1px dotted #999;
-
-//         &.description {
-//           .bp3-form-group {
-//             width: 100%;
-//           }
-//         }
-//       }
-
-//       .actions.td {
-//         .bp3-button {
-//           background: transparent;
-//           margin: 0;
-//         }
-//       }
-//     }
-//   }
-//   &__floating-footer {
-//     position: fixed;
-//     bottom: 0;
-//     width: 100%;
-//     background: #fff;
-//     padding: 18px 18px;
-//     border-top: 1px solid #ececec;
-
-//     .has-mini-sidebar & {
-//       left: 50px;
-//     }
-//   }
-//   .bp3-button {
-//     &.button--clear-lines {
-//       background-color: #fcefef;
-//     }
-//   }
-//   .button--clear-lines,
-//   .button--new-line {
-//     padding-left: 14px;
-//     padding-right: 14px;
-//   }
-//   .dropzone-container {
-//     margin-top: 0;
-//     align-self: flex-end;
-//   }
-//   .dropzone {
-//     width: 300px;
-//     height: 75px;
-//   }
-
-//   .form-group--description {
-//     .bp3-label {
-//       font-weight: 500;
-//       font-size: 13px;
-//       color: #444;
-//     }
-//     .bp3-form-content {
-//       // width: 280px;
-//       textarea {
-//         width: 450px;
-//         min-height: 75px;
-//       }
-//     }
-//   }
-// }
--- a/client/src/style/pages/estimates.scss
+++ b/client/src/style/pages/estimates.scss
@@ -0,0 +1,159 @@
+.page-form{
+  padding: 15px;
+
+  .bp3-form-group{
+
+    .bp3-label{
+      width: 100%;
+      max-width: 170px;
+      min-width: 140px;
+    }
+    .bp3-form-content{
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+
+  &__primary-section {
+    background: #fbfbfb;
+    margin: -15px -15px 25px;
+    padding: 30px 15px 10px;
+  }
+
+  .form-group{
+
+    &--customer{
+
+      .bp3-form-content{
+        max-width: 420px;
+      }
+    }
+  }
+}
+
+.datatable-editor {
+  padding: 15px 15px 0;
+
+  &-actions{
+    padding: 0 15px;
+
+    .bp3-button.button--clear-lines {
+      background-color: #fcefef;
+    }
+  }
+
+  .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 {
+        > span,
+        > div {
+          text-align: center;
+          width: 100%;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .thead {
+      .tr .th {
+        padding: 10px 10px;
+        background-color: #f2f5fa;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 7px;
+        border-bottom: 1px dotted rgb(195, 195, 195);
+        min-height: 46px;
+
+        &.index {
+          background-color: #f2f5fa;
+          text-align: center;
+
+          > span {
+            margin-top: auto;
+            margin-bottom: auto;
+          }
+        }
+      }
+      .tr {
+        .bp3-form-group .bp3-input,
+        .form-group--select-list .bp3-button {
+          border-radius: 3px;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+        .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
+          border-color: #E5E5E5;
+        }
+
+        &:last-of-type {
+          .td {
+            border-bottom: transparent;
+
+            .bp3-button,
+            .bp3-input-group {
+              display: none;
+            }
+          }
+        }
+
+        .td.actions {
+          .bp3-button {
+            background-color: transparent;
+
+            svg{
+              color: #e68f8e;
+            }
+            &:hover svg{
+              color: #c23030;
+            }
+          }
+        }
+
+        &.row--total {
+          
+          .td.amount{
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    .th {
+      color: #444;
+      font-weight: 600;
+      border-bottom: 1px dotted #666;
+    }
+    .td {
+      border-bottom: 1px dotted #999;
+
+      &.description{
+        .bp3-form-group{
+          width: 100%;
+        }
+      }
+    }
+    .actions.td {
+      .bp3-button {
+        background: transparent;
+        margin: 0;
+      }
+    }
+  }
+}
--- a/client/src/style/pages/invoices.scss
+++ b/client/src/style/pages/invoices.scss
--- a/client/src/style/pages/receipts.scss
+++ b/client/src/style/pages/receipts.scss