fix: logo style.

fix: page forms style.
feat: auto-fill items entries from item details.
fix: hiding dashboard copyright bar.

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js

@@ -4,55 +4,57 @@ import { FormattedMessage as T } from 'react-intl';
 import { FastField } from 'formik';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { Row, Col } from 'components';
+import { Row, Col, Postbox } from 'components';
 import Dragzone from 'components/Dragzone';
 
 import { inputIntent } from 'utils';
 
 /**
  * Estimate form footer.
- */ 
+ */
 export default function EstiamteFormFooter({}) {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
-        <Col md={8}>
-          {/* --------- Customer Note --------- */}
-          <FastField name={'note'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'customer_note'} />}
-                className={'form-group--customer_note'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+      <Postbox title={'Estimate details'} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Customer Note --------- */}
+            <FastField name={'note'}>
+              {({ form, field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'customer_note'} />}
+                  className={'form-group--customer_note'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
 
-          {/* --------- Terms and conditions --------- */}
-          <FastField name={'terms_conditions'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'terms_conditions'} />}
-                className={'form-group--terms_conditions'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
+            {/* --------- Terms and conditions --------- */}
+            <FastField name={'terms_conditions'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'terms_conditions'} />}
+                  className={'form-group--terms_conditions'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
 
-        <Col md={4}>
-          <Dragzone
-            initialFiles={[]}
-            // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
-          />
-        </Col>
-      </Row>
+          <Col md={4}>
+            <Dragzone
+              initialFiles={[]}
+              // onDrop={handleDropFiles}
+              // onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Sales/Estimates/EstimateForm/utils.js

@@ -7,8 +7,8 @@ export const defaultEstimateEntry = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
-  quantity: 1,
+  discount: '',
+  quantity: '',
   description: '',
 };
 

client/src/containers/Sales/Estimates/EstimatesLanding/components.js

@@ -49,7 +49,7 @@ export const statusAccessor = (row) => (
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDeliver, onReject, onApprove, onDelete ,onDrawer },
+  payload: { onEdit, onDeliver, onReject, onApprove, onDelete, onDrawer },
 }) {
   const { formatMessage } = useIntl();
 
@@ -101,9 +101,10 @@ export function ActionsMenu({
         </Choose.When>
       </Choose>
       <MenuItem
-          text={formatMessage({ id: 'estimate_paper' })}
-          onClick={() => onDrawer()}
-        />
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
+        text={formatMessage({ id: 'estimate_paper' })}
+        onClick={() => onDrawer()}
+      />
       <MenuItem
         text={formatMessage({ id: 'delete_estimate' })}
         intent={Intent.DANGER}

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js

@@ -123,7 +123,11 @@ function InvoiceForm({
     };
 
     // Handle the request error.
-    const onError = ({ response: { data: { errors } } }) => {
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
       if (errors) {
         handleErrors(errors, { setErrors });
       }
@@ -146,6 +150,7 @@ function InvoiceForm({
       )}
     >
       <Formik
+        enableReinitialize={true}
         validationSchema={
           isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
         }
@@ -154,10 +159,7 @@ function InvoiceForm({
       >
         <Form>
           <InvoiceFormHeader />
-
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <InvoiceItemsEntriesEditorField />
-          </div>
+          <InvoiceItemsEntriesEditorField />
           <InvoiceFormFooter />
           <InvoiceFloatingActions />
           <InvoiceFormDialogs />

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js

@@ -11,6 +11,9 @@ export default function InvoiceFormDialogs() {
 
   // Update the form once the invoice number form submit confirm.
   const handleInvoiceNumberFormConfirm = (values) => {
+    debugger;
+    console.log(values, 'XX');
+
     setFieldValue(
       'invoice_no',
       transactionNumber(values.number_prefix, values.next_number),

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { CLASSES } from 'common/classes';
-import { Row, Col } from 'components';
+import { Row, Col, Postbox } from 'components';
 import Dragzone from 'components/Dragzone';
 
 import { inputIntent } from 'utils';
@@ -12,44 +12,46 @@ import { inputIntent } from 'utils';
 export default function InvoiceFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
-        <Col md={8}>
-          {/* --------- Invoice message --------- */}
-          <FastField name={'invoice_message'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'invoice_message'} />}
-                className={'form-group--invoice_message'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+      <Postbox title={'Invoice details'} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Invoice message --------- */}
+            <FastField name={'invoice_message'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'invoice_message'} />}
+                  className={'form-group--invoice_message'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
 
-          {/* --------- Terms and conditions --------- */}
-          <FastField name={'terms_conditions'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'terms_conditions'} />}
-                className={'form-group--terms_conditions'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
+            {/* --------- Terms and conditions --------- */}
+            <FastField name={'terms_conditions'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'terms_conditions'} />}
+                  className={'form-group--terms_conditions'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
 
-        <Col md={4}>
-          <Dragzone
-            initialFiles={[]}
-            // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
-          />
-        </Col>
-      </Row>
+          <Col md={4}>
+            <Dragzone
+              initialFiles={[]}
+              // onDrop={handleDropFiles}
+              // onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -45,7 +45,7 @@ function InvoiceFormHeaderFields({
           <FormGroup
             label={<T id={'customer_name'} />}
             inline={true}
-            className={classNames('form-group--customer-name', CLASSES.FILL)}
+            className={classNames('form-group--customer-name', 'form-group--select-list', CLASSES.FILL)}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import InvoiceForm from './InvoiceForm';
-
 import 'style/pages/SaleInvoice/PageForm.scss';
+
+import InvoiceForm from './InvoiceForm';
 import { InvoiceFormProvider } from './InvoiceFormProvider';
 
 /**

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 
@@ -8,20 +10,22 @@ import { useInvoiceFormContext } from './InvoiceFormProvider';
  */
 export default function InvoiceItemsEntriesEditorField() {
   const { items } = useInvoiceFormContext();
- 
+
   return (
-    <FastField name={'entries'}>
-      {({ form, field: { value }, meta: { error, touched } }) => (
-        <ItemsEntriesTable
-          entries={value}
-          onUpdateData={(entries) => {
-            form.setFieldValue('entries', entries);
-          }}
-          items={items}
-          errors={error}
-          linesNumber={4}
-        />
-      )}
-    </FastField>
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              form.setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+          />
+        )}
+      </FastField>
+    </div>
   );
 }

client/src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -9,8 +9,8 @@ export const defaultInvoiceEntry = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
-  quantity: 1,
+  discount: '',
+  quantity: '',
   description: '',
   total: 0,
 };

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -118,6 +118,7 @@ export function ActionsMenu({
         />
       </If>
       <MenuItem
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'invoice_paper' })}
         onClick={() => onDrawer()}
       />

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -165,7 +165,7 @@ function PaymentReceiveForm({
             <PaymentReceiveFormFooter />
             <PaymentReceiveFloatingActions />
 
-            {/* Alerts & Dialogs */}
+            {/* ------- Alerts & Dialogs ------- */}
             <PaymentReceiveFormAlerts />
             <PaymentReceiveFormDialogs />
           </PaymentReceiveInnerProvider>

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { FastField } from 'formik';
-import { Row, Col } from 'components';
+import { Row, Col, Postbox } from 'components';
 import { CLASSES } from 'common/classes';
 
 /**
@@ -12,21 +12,23 @@ import { CLASSES } from 'common/classes';
 export default function PaymentReceiveFormFooter({ getFieldProps }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
-        <Col md={8}>
-          {/* --------- Statement --------- */}
-          <FastField name={'statement'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'statement'} />}
-                className={'form-group--statement'}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
+      <Postbox title={'Payment receive details'} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Statement --------- */}
+            <FastField name={'statement'}>
+              {({ form, field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'statement'} />}
+                  className={'form-group--statement'}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js

@@ -45,15 +45,6 @@ function PaymentReceiveItemsTable({
     onUpdateData(newRows);
   }, [entries, onUpdateData]);
 
-  // Handle click clear all lines button.
-  const handleClickClearAllLines = () => {
-    const fullAmount = safeSumBy(entries, 'payment_amount');
-
-    if (fullAmount > 0) {
-      openAlert('clear-all-lines-payment-receive');
-    }
-  };
- 
   return (
     <CloudLoadingIndicator isLoading={isDueInvoicesFetching}>
       <DataTableEditable
@@ -67,16 +58,7 @@ function PaymentReceiveItemsTable({
           updateData: handleUpdateData,
         }}
         noResults={noResultsMessage}
-        actions={
-          <Button
-            small={true}
-            className={'button--secondary button--clear-lines'}
-            onClick={handleClickClearAllLines}
-          >
-            <T id={'clear_all_lines'} />
-          </Button>
-        }
-        totalRow={true}
+        footer={true}
       />
     </CloudLoadingIndicator>
   );

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js

@@ -88,12 +88,13 @@ export const usePaymentReceiveEntriesColumns = () => {
         disableSortBy: true,
         disableResizing: true,
         width: 250,
+        className: 'date'
       },
       {
         Header: formatMessage({ id: 'invocie_number' }),
         accessor: InvNumberCellAccessor,
         disableSortBy: true,
-        className: '',
+        className: 'invoice_number',
       },
       {
         Header: formatMessage({ id: 'invoice_amount' }),
@@ -102,7 +103,7 @@ export const usePaymentReceiveEntriesColumns = () => {
         Cell: MoneyTableCell,
         disableSortBy: true,
         width: 100,
-        className: '',
+        className: 'invoice_amount',
       },
       {
         Header: formatMessage({ id: 'amount_due' }),
@@ -111,7 +112,7 @@ export const usePaymentReceiveEntriesColumns = () => {
         Cell: MoneyTableCell,
         disableSortBy: true,
         width: 150,
-        className: '',
+        className: 'amount_due',
       },
       {
         Header: formatMessage({ id: 'payment_amount' }),
@@ -120,7 +121,7 @@ export const usePaymentReceiveEntriesColumns = () => {
         Footer: PaymentAmountFooterCell,
         disableSortBy: true,
         width: 150,
-        className: '',
+        className: 'payment_amount',
       },
     ],
     [formatMessage],

client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -35,6 +35,7 @@ export function ActionsMenu({
         onClick={safeCallback(onEdit, paymentReceive)}
       />
       <MenuItem
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'payment_receive_paper' })}
         onClick={() => onDrawer()}
       />

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js

@@ -10,11 +10,9 @@ import { CLASSES } from 'common/classes';
 import { ERROR } from 'common/errors';
 import {
   EditReceiptFormSchema,
-  CreateReceiptFormSchema,
+  CreateReceiptFormSchema,   
 } from './ReceiptForm.schema';
 
-import 'style/pages/SaleReceipt/PageForm.scss';
-
 import { useReceiptFormContext } from './ReceiptFormProvider';
 
 import ReceiptFromHeader from './ReceiptFormHeader';

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js

@@ -3,51 +3,53 @@ import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FastField } from 'formik';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'react-intl';
-import { Dragzone, Row, Col } from 'components';
+import { Dragzone, Postbox, Row, Col } from 'components';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 
 export default function ReceiptFormFooter({}) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
-        <Col md={8}>
-          {/* --------- Receipt message --------- */}
-          <FastField name={'receipt_message'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'receipt_message'} />}
-                className={'form-group--receipt_message'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+      <Postbox title={'Invoice details'} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Receipt message --------- */}
+            <FastField name={'receipt_message'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'receipt_message'} />}
+                  className={'form-group--receipt_message'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
 
-          {/* --------- Statement--------- */}
-          <FastField name={'statement'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'statement'} />}
-                className={'form-group--statement'}
-                intent={inputIntent({ error, touched })}
-              >
-                <TextArea growVertically={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
+            {/* --------- Statement--------- */}
+            <FastField name={'statement'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'statement'} />}
+                  className={'form-group--statement'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
 
-        <Col md={4}>
-          <Dragzone
-            initialFiles={[]}
-            // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
-          />
-        </Col>
-      </Row>
+          <Col md={4}>
+            <Dragzone
+              initialFiles={[]}
+              // onDrop={handleDropFiles}
+              // onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
+import 'style/pages/SaleReceipt/PageForm.scss';
+
 import ReceiptFrom from './ReceiptForm';
 import { ReceiptFormProvider } from './ReceiptFormProvider';
 

client/src/containers/Sales/Receipts/ReceiptForm/utils.js

@@ -7,7 +7,7 @@ export const defaultReceiptEntry = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
+  discount: '',
   quantity: '',
   description: '',
 };

client/src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -15,7 +15,7 @@ import { Choose, Money, Icon, If } from 'components';
 import moment from 'moment';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onClose ,onDrawer },
+  payload: { onEdit, onDelete, onClose, onDrawer },
   row: { original: receipt },
 }) {
   const { formatMessage } = useIntl();
@@ -39,9 +39,10 @@ export function ActionsMenu({
         />
       </If>
       <MenuItem
-          text={formatMessage({ id: 'receipt_paper' })}
-          onClick={() => onDrawer()}
-        />
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
+        text={formatMessage({ id: 'receipt_paper' })}
+        onClick={() => onDrawer()}
+      />
       <MenuItem
         text={formatMessage({ id: 'delete_receipt' })}
         intent={Intent.DANGER}