feat: style bill form.

feat: add row and column of grid components.

client/src/containers/Sales/Estimate/EntriesItemsTable.js

@@ -4,8 +4,8 @@ import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import { CLASSES } from 'common/classes';
+import { Hint, Icon } from 'components';
 import DataTable from 'components/DataTable';
-import Icon from 'components/Icon';
 import {
   InputGroupCell,
   MoneyFieldCell,
@@ -66,6 +66,15 @@ const CellRenderer = (content, type) => (props) => {
   return content(props);
 };
 
+const ItemHeaderCell = () => {
+  return (
+    <>
+      <T id={'product_and_service'} />
+      <Hint />
+    </>
+  );
+};
+
 function EstimateTable({
   //#withitems
   itemsCurrentPage,
@@ -96,13 +105,12 @@ function EstimateTable({
         className: 'index',
       },
       {
-        Header: formatMessage({ id: 'product_and_service' }),
+        Header: ItemHeaderCell,
         id: 'item_id',
         accessor: 'item_id',
         Cell: EstimatesListFieldCell,
         disableSortBy: true,
-        disableResizing: true,
-        width: 250,
+        width: 180,
       },
       {
         Header: formatMessage({ id: 'description' }),
@@ -110,7 +118,7 @@ function EstimateTable({
         Cell: InputGroupCell,
         disableSortBy: true,
         className: 'description',
-        width: 120,
+        width: 100,
       },
 
       {
@@ -118,7 +126,7 @@ function EstimateTable({
         accessor: 'quantity',
         Cell: CellRenderer(InputGroupCell, 'quantity'),
         disableSortBy: true,
-        width: 100,
+        width: 80,
         className: 'quantity',
       },
       {
@@ -126,7 +134,7 @@ function EstimateTable({
         accessor: 'rate',
         Cell: TotalEstimateCellRederer(MoneyFieldCell, 'rate'),
         disableSortBy: true,
-        width: 100,
+        width: 80,
         className: 'rate',
       },
       {
@@ -134,8 +142,7 @@ function EstimateTable({
         accessor: 'discount',
         Cell: CellRenderer(PercentFieldCell, InputGroupCell),
         disableSortBy: true,
-        disableResizing: true,
-        width: 100,
+        width: 80,
         className: 'discount',
       },
       {
@@ -144,7 +151,7 @@ function EstimateTable({
           calculateDiscount(row.discount, row.quantity, row.rate),
         Cell: TotalEstimateCellRederer(DivFieldCell, 'total'),
         disableSortBy: true,
-        width: 150,
+        width: 120,
         className: 'total',
       },
       {
@@ -222,7 +229,7 @@ function EstimateTable({
   );
 
   return (
-    <div className={'estimate-form__table'}>
+    <div className={'estimate-form__table datatable-editor'}>
       <DataTable
         columns={columns}
         data={rows}
@@ -235,7 +242,7 @@ function EstimateTable({
         }}
         className={CLASSES.DATATABLE_EDITOR}
       />
-      <div className={'datatable-editor-actions mt1'}>
+      <div className={'datatable-editor__actions mt1'}>
         <Button
           small={true}
           className={'button--secondary button--new-line'}

client/src/containers/Sales/Estimate/EstimateForm.js

@@ -11,8 +11,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 EstimateFormHeader from './EstimateFormHeader';
 import EstimatesItemsTable from './EntriesItemsTable';
 import EstimateFormFooter from './EstimateFormFooter';
@@ -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/AppToaster';
+import { AppToaster, Row, Col } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 
@@ -301,7 +302,10 @@ const EstimateForm = ({
   };
 
   return (
-    <div>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_ESTIMATE,
+    )}>
       <form onSubmit={formik.handleSubmit}>
         <EstimateFormHeader formik={formik} />
         <EstimatesItemsTable
@@ -311,37 +315,39 @@ const EstimateForm = ({
           formik={formik}
         />
 
-        <Row>
-          <Col>
-            <FormGroup
-              label={<T id={'customer_note'} />}
-              className={'form-group--customer_note'}
-            >
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('note')}
+        <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+          <Row>
+            <Col md={7}>
+              <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 md={5}>
+              <Dragzone
+                initialFiles={initialAttachmentFiles}
+                onDrop={handleDropFiles}
+                onDeleteFile={handleDeleteFile}
+                hint={'Attachments: Maxiumum size: 20MB'}
               />
-            </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>
+            </Col>
+          </Row>
+        </div>
       </form>
       <EstimateFormFooter
         formik={formik}

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -9,16 +9,18 @@ import {
 } 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,7 +83,7 @@ function EstimateFormHeader({
   }, [openDialog]);
 
   return (
-    <div className={'page-form page-form--estimate'}>
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={'page-form__primary-section'}>
         <FormGroup
           label={<T id={'customer_name'} />}
@@ -112,15 +114,15 @@ function EstimateFormHeader({
         </FormGroup>
 
         <Row>
-          <Col>
+          <Col md={8} className={'col--estimate-date'}>
             <FormGroup
               label={<T id={'estimate_date'} />}
               inline={true}
               labelInfo={<FieldRequiredHint />}
               className={classNames(
                 'form-group--select-list',
-                Classes.FILL,
                 'form-group--estimate-date',
+                Classes.FILL,
               )}
               intent={
                 errors.estimate_date && touched.estimate_date && Intent.DANGER
@@ -137,7 +139,7 @@ function EstimateFormHeader({
               />
             </FormGroup>
           </Col>
-          <Col>
+          <Col md={4}>
             <FormGroup
               label={<T id={'expiration_date'} />}
               inline={true}
@@ -164,56 +166,58 @@ function EstimateFormHeader({
             </FormGroup>
           </Col>
         </Row>
-      </div>
 
-      {/*- Estimate -*/}
-      <FormGroup
-        label={<T id={'estimate'} />}
-        inline={true}
-        className={('form-group--estimate-number', Classes.FILL)}
-        labelInfo={<FieldRequiredHint />}
-        intent={
-          errors.estimate_number && touched.estimate_number && Intent.DANGER
-        }
-        helperText={
-          <ErrorMessage name="estimate_number" {...{ errors, touched }} />
-        }
-      >
-        <InputGroup
+        {/*- Estimate -*/}
+        <FormGroup
+          label={<T id={'estimate'} />}
+          inline={true}
+          className={('form-group--estimate-number', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
           intent={
             errors.estimate_number && touched.estimate_number && Intent.DANGER
           }
-          minimal={true}
-          rightElement={
-            <InputPrependButton
-              buttonProps={{
-                onClick: handleEstimateNumberChange,
-                icon: <Icon icon={'settings-18'} />,
-              }}
-              tooltip={true}
-              tooltipProps={{
-                content: 'Setting your auto-generated estimate number',
-                position: Position.BOTTOM_LEFT,
-              }}
-            />
+          helperText={
+            <ErrorMessage name="estimate_number" {...{ errors, touched }} />
           }
-          {...getFieldProps('estimate_number')}
-        />
-      </FormGroup>
+        >
+          <InputGroup
+            intent={
+              errors.estimate_number && touched.estimate_number && Intent.DANGER
+            }
+            minimal={true}
+            rightElement={
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleEstimateNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated estimate number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            }
+            {...getFieldProps('estimate_number')}
+          />
+        </FormGroup>
 
-      <FormGroup
-        label={<T id={'reference'} />}
-        inline={true}
-        className={classNames('form-group--reference', Classes.FILL)}
-        intent={errors.reference && touched.reference && Intent.DANGER}
-        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-      >
-        <InputGroup
+        <FormGroup
+          label={<T id={'reference'} />}
+          inline={true}
+          className={classNames('form-group--reference', Classes.FILL)}
           intent={errors.reference && touched.reference && Intent.DANGER}
-          minimal={true}
-          {...getFieldProps('reference')}
-        />
-      </FormGroup>
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={errors.reference && touched.reference && Intent.DANGER}
+            minimal={true}
+            {...getFieldProps('reference')}
+          />
+        </FormGroup>
+      </div>
     </div>
   );
 }