Merge branch 'master' of https://github.com/abouolia/Bigcapital

client/src/components/Dashboard/Dashboard.js

@@ -51,6 +51,6 @@ function Dashboard({
       <DrawersContainer />
     </DashboardLoadingIndicator>
   );
-}
+} 
 
 export default compose(withSettingsActions)(Dashboard);

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,7 +1,6 @@
-import React, { useEffect, Suspense } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import routes from 'routes/dashboard';
-
 import DashboardPage from './DashboardPage';
 
 /**
@@ -18,6 +17,7 @@ export default function DashboardContentRoute() {
             path={`${route.path}`}
           >
             <DashboardPage
+              name={route.name}
               Component={route.component}
               pageTitle={route.pageTitle}
               backLink={route.backLink}

client/src/components/Dashboard/DashboardFooter.js

@@ -6,14 +6,14 @@ import { For } from 'components';
 function FooterLinkItem({ title, link }) {
   return (
     <div class="">
-      <a href={link} target="_blank">
+      <a href={link} target="_blank" rel="noopener noreferrer">
         {title}
       </a>
     </div>
   );
 }
 
-export default function DashboardFooter({}) {
+export default function DashboardFooter() {
   return (
     <div class="dashboard__footer">
       <div class="footer-links">

client/src/components/Dashboard/DashboardPage.js

@@ -11,6 +11,7 @@ function DashboardPage({
   backLink,
   sidebarShrink,
   Component,
+  name,
 
   // #withDashboardActions
   changePageTitle,
@@ -44,6 +45,15 @@ function DashboardPage({
     };
   }, [resetSidebarPreviousExpand, sidebarShrink, setSidebarShrink]);
 
+  useEffect(() => {
+    const className = `page-${name}`;
+    name && document.body.classList.add(className);
+    
+    return () => {
+      name && document.body.classList.remove(className);
+    };
+  }, [name]);
+
   return (
     <div className={CLASSES.DASHBOARD_PAGE}>
       <Suspense fallback={''}>

client/src/components/DataTableCells/ItemsListCell.js

@@ -40,6 +40,7 @@ export default function ItemsListCell({
         purchasable={filterPurchasable}
         inputProps={{
           inputRef: (ref) => (fieldRef.current = ref),
+          placeholder: 'Enter an item...'
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/DataTableCells/PercentFieldCell.js

@@ -29,6 +29,7 @@ const PercentFieldCell = ({
   return (
     <FormGroup intent={error ? Intent.DANGER : null}>
       <MoneyInputGroup
+        prefix={'%'}
         value={value}
         onChange={handleChange}
         onBlurValue={handleBlurChange}

client/src/components/Datatable/TableCell.js

@@ -1,22 +1,50 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { If } from 'components';
-import { ConditionalWrapper } from 'utils';
+import { Skeleton } from 'components';
 import TableContext from './TableContext';
+import { isCellLoading } from './utils';
 
 /**
- * Tabl cell.
+ * Table cell.
  */
 export default function TableCell({
   cell,
-  row: { depth, getToggleRowExpandedProps, isExpanded },
+  row: { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded },
   index,
 }) {
   const {
-    props: { expandToggleColumn, expandColumnSpace, expandable },
+    props: {
+      expandToggleColumn,
+      expandColumnSpace,
+      expandable,
+      cellsLoading,
+      cellsLoadingCoords,
+    },
   } = useContext(TableContext);
 
   const isExpandColumn = expandToggleColumn === index;
+  const { skeletonWidthMax = 100, skeletonWidthMin = 40 } = {};
+
+  // Detarmines whether the current cell is loading.
+  const cellLoading = isCellLoading(
+    cellsLoading,
+    cellsLoadingCoords,
+    rowIndex,
+    cell.column.id,
+  );
+
+  if (cellLoading) {
+    return (
+      <div
+        {...cell.getCellProps({
+          className: classNames(cell.column.className, 'td'),
+        })}
+      >
+        <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />
+      </div>
+    );
+  }
 
   return (
     <div
@@ -27,9 +55,12 @@ export default function TableCell({
       })}
     >
       <div
-        className={classNames({
+        className={classNames(
-          'text-overview': cell.column.textOverview,
+          {
-        }, 'cell-inner')}
+            'text-overview': cell.column.textOverview,
+          },
+          'cell-inner',
+        )}
         style={{
           'padding-left':
             isExpandColumn && expandable

client/src/components/Datatable/TableFooter.js

@@ -6,9 +6,13 @@ import TableContext from './TableContext';
  */
 export default function TableFooter() {
   const {
+    props: { footer },
     table: { footerGroups },
   } = useContext(TableContext);
 
+  // Can't contiunue if the footer is disabled.
+  if (!footer) { return null; }
+  
   return (
     <div class="tfooter">
       {footerGroups.map((group) => (

client/src/components/Datatable/utils.js

@@ -0,0 +1,10 @@
+export const isCellLoading = (loading, cellsCoords, rowIndex, columnId) => {
+  if (!loading) {
+    return false;
+  }
+  return !cellsCoords
+    ? true
+    : cellsCoords.some(
+        (cellCoord) => cellCoord[0] === rowIndex && cellCoord[1] === columnId,
+      );
+};

client/src/components/Postbox.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Collapse } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+/**
+ * Postbox.
+ */
+export default function Postbox({
+  defaultOpen = true,
+  toggable = true,
+  title,
+  children,
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  // Handle the title click.
+  const handleTitleClick = () => {
+    if (toggable) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <div
+      class={classNames('postbox', {
+        'is-toggable': toggable,
+      })}
+    >
+      <div class="postbox__header" onClick={handleTitleClick}>
+        <h5 class="postbox__title">{title}</h5>
+
+        <span class="postbox__toggle-indicator"></span>
+      </div>
+      <div class="postbox__content">
+        <Collapse isOpen={isOpen}>
+          <div class="postbox__content-inner">{children}</div>
+        </Collapse>
+      </div>
+    </div>
+  );
+}

client/src/components/index.js

@@ -51,6 +51,7 @@ import DashboardPageContent from './Dashboard/DashboardPageContent';
 import DashboardInsider from './Dashboard/DashboardInsider';
 import Drawer from './Drawer/Drawer';
 import DrawerSuspense from './Drawer/DrawerSuspense';
+import Postbox from './Postbox';
 
 const Hint = FieldHint;
 
@@ -109,4 +110,5 @@ export {
   DashboardInsider,
   Drawer,
   DrawerSuspense,
+  Postbox
 };

client/src/config/sidebarMenu.js

@@ -5,7 +5,8 @@ export default [
   {
     text: <T id={'homepage'} />,
     disabled: false,
-    href: '/homepage',
+    href: '/',
+    matchExact: true,
   },
   {
     text: 'Sales & inventory',

client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import 'style/pages/ManualJournal/List.scss';
+
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import { ManualJournalsListProvider } from './ManualJournalsListProvider';
@@ -9,11 +11,8 @@ import ManualJournalsDataTable from './ManualJournalsDataTable';
 import ManualJournalsActionsBar from './ManualJournalActionsBar';
 
 import withManualJournals from './withManualJournals';
-
 import { transformTableStateToQuery, compose } from 'utils';
 
-import 'style/pages/ManualJournal/List.scss';
-
 /**
  * Manual journals table.
  */

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js

@@ -169,6 +169,7 @@ function MakeJournalEntriesForm({
           <MakeJournalFormFooter />
           <MakeJournalFormFloatingActions />
 
+          {/* --------- Dialogs --------- */}
           <MakeJournalFormDialogs />
         </Form>
       </Formik>

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js

@@ -1,12 +1,27 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
 import MakeJournalEntriesHeaderFields from "./MakeJournalEntriesHeaderFields";
+import { PageFormBigNumber } from 'components';
+import { safeSumBy } from 'utils';
 
 export default function MakeJournalEntriesHeader() {
+  const { values: { entries } } = useFormikContext();
+  const totalCredit = safeSumBy(entries, 'credit');
+  const totalDebit = safeSumBy(entries, 'debit');
+
+  const total = Math.max(totalCredit, totalDebit);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <MakeJournalEntriesHeaderFields />
+
+      <PageFormBigNumber
+        label={'Due Amount'}
+        amount={total}
+        currencyCode={'USD'}
+      />
     </div>
   )
 }

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesPage.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
+import 'style/pages/ManualJournal/MakeJournal.scss';
+
 import MakeJournalEntriesForm from './MakeJournalEntriesForm';
 import { MakeJournalProvider } from './MakeJournalProvider';
 
-import 'style/pages/ManualJournal/MakeJournal.scss';
-
 /**
  * Make journal entries page.
  */

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js

@@ -9,9 +9,7 @@ import { updateDataReducer } from './utils';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { useJournalTableEntriesColumns } from './components';
 
-import JournalDeleteEntriesAlert from 'containers/Alerts/ManualJournals/JournalDeleteEntriesAlert';
 import { compose } from 'redux';
-import { repeatValue } from 'utils';
 
 /**
  * Make journal entries table component.
@@ -32,13 +30,7 @@ function MakeJournalEntriesTable({
 
   // Memorized data table columns.
   const columns = useJournalTableEntriesColumns();
-
+ 
-  // Handles click new line.
-  const onClickNewRow = () => {
-    const newRows = [...entries, defaultEntry];
-    saveInvoke(onChange, newRows);
-  };
-
   // Handles update datatable data.
   const handleUpdateData = (rowIndex, columnId, value) => {
     const newRows = updateDataReducer(entries, rowIndex, columnId, value);
@@ -50,61 +42,28 @@ function MakeJournalEntriesTable({
     const newRows = removeRowsByIndex(entries, rowIndex);
     saveInvoke(onChange, newRows);
   };
-
+ 
-  // Handle clear all lines action.
+ 
-  const handleClickClearAllLines = () => {
-    openAlert('make-journal-delete-all-entries');
-  };
-
-  // Handle clear all lines alaert confirm.
-  const handleCofirmClearEntriesAlert = () => {
-    const newRows = repeatValue(defaultEntry, initialLinesNumber);
-    saveInvoke(onChange, newRows);
-  };
-
   return (
-    <>
-      <DataTableEditable
-        columns={columns}
-        data={entries}
-        sticky={true}
-        totalRow={true}
-        payload={{
-          accounts,
-          errors: error,
-          updateData: handleUpdateData,
-          removeRow: handleRemoveRow,
-          contacts: customers.map((customer) => ({
-            ...customer,
-            contact_type: 'customer',
-          })),
-          autoFocus: ['account_id', 0],
-        }}
-        actions={
-          <>
-            <Button
-              small={true}
-              className={'button--secondary button--new-line'}
-              onClick={onClickNewRow}
-            >
-              <T id={'new_lines'} />
-            </Button>
 
-            <Button
+    <DataTableEditable
-              small={true}
+      columns={columns}
-              className={'button--secondary button--clear-lines ml1'}
+      data={entries}
-              onClick={handleClickClearAllLines}
+      sticky={true}
-            >
+      totalRow={true}
-              <T id={'clear_all_lines'} />
+      footer={true}
-            </Button>
+      payload={{
-          </>
+        accounts,
-        }
+        errors: error,
-      />
+        updateData: handleUpdateData,
-      <JournalDeleteEntriesAlert
+        removeRow: handleRemoveRow,
-        name={'make-journal-delete-all-entries'}
+        contacts: customers.map((customer) => ({
-        onConfirm={handleCofirmClearEntriesAlert}
+          ...customer,
-      />
+          contact_type: 'customer',
-    </>
+        })),
+        autoFocus: ['account_id', 0],
+      }}
+    /> 
   );
 }
 

client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js

@@ -4,39 +4,41 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { ErrorMessage, Row, Col } from 'components';
+import { Postbox, ErrorMessage, Row, Col } from 'components';
 import Dragzone from 'components/Dragzone';
 import { inputIntent } from 'utils';
 
 export default function MakeJournalFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
+      <Postbox title={'Journal details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          <FastField name={'description'}>
+          <Col md={8}>
-            {({ field, meta: { error, touched } }) => (
+            <FastField name={'description'}>
-              <FormGroup
+              {({ field, meta: { error, touched } }) => (
-                label={<T id={'description'} />}
+                <FormGroup
-                className={'form-group--description'}
+                  label={<T id={'description'} />}
-                intent={inputIntent({ error, touched })}
+                  className={'form-group--description'}
-                helperText={<ErrorMessage name="description" />}
+                  intent={inputIntent({ error, touched })}
-                fill={true}
+                  helperText={<ErrorMessage name="description" />}
-              >
+                  fill={true}
-                <TextArea fill={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea fill={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
-        </Col>
+            </FastField>
+          </Col>
 
-        <Col md={4}>
+          <Col md={4}>
-          <Dragzone
+            <Dragzone
-            initialFiles={[]}
+              initialFiles={[]}
-            // onDrop={handleDropFiles}
+              // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
+              // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
+              hint={'Attachments: Maxiumum size: 20MB'}
-          />
+            />
-        </Col>
+          </Col>
-      </Row>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js

@@ -29,7 +29,9 @@ function InvoiceNumberDialogContent({
   const { mutateAsync: saveSettings } = useSaveSettings();
 
   const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => ({
+    const { mode, ...autoModeValues } = values;
+
+    const options = optionsMapToArray(autoModeValues).map((option) => ({
       key: option.key,
       ...option,
       group: 'sales_invoices',

client/src/containers/Dialogs/InvoiceNumberDialog/index.js

@@ -14,7 +14,6 @@ function InvoiceNumberDialog({
   isOpen,
   onConfirm,
 }) {
-
   return (
     <Dialog
     title={<T id={'invoice_number_settings'} />}

client/src/containers/Entries/ItemsEntriesTable.js

@@ -1,7 +1,8 @@
-import React, { useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
+import { useItem } from 'hooks/query';
 
 import ItemsEntriesDeleteAlert from 'containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -17,7 +18,15 @@ import {
   removeRowsByIndex,
   compose,
 } from 'utils';
-import { updateItemsEntriesTotal } from './utils';
+import { updateItemsEntriesTotal, ITEM_TYPE } from './utils';
+import { last } from 'lodash';
+
+const updateAutoAddNewLine = (defaultEntry) => (entries) => {
+  const newEntries = [...entries];
+  const lastEntry = last(newEntries);
+
+  return (lastEntry.item_id) ? [...entries, defaultEntry] : [...entries];
+};
 
 /**
  * Items entries table.
@@ -34,11 +43,64 @@ function ItemsEntriesTable({
   errors,
   onUpdateData,
   linesNumber,
+  itemType, // sellable or purchasable
 }) {
   const [rows, setRows] = React.useState(initialEntries);
+  const [rowItem, setRowItem] = React.useState(null);
+  const [cellsLoading, setCellsLoading] = React.useState(null);
+
+  // Fetches the item details.
+  const { data: item, isFetching: isItemFetching } = useItem(
+    rowItem && rowItem.itemId,
+    {
+      enabled: !!rowItem,
+    },
+  );
+
+  // Once the item start loading give the table cells loading state.
+  useEffect(() => {
+    if (rowItem && isItemFetching) {
+      setCellsLoading([
+        [rowItem.rowIndex, 'rate'],
+        [rowItem.rowIndex, 'description'],
+        [rowItem.rowIndex, 'quantity'],
+        [rowItem.rowIndex, 'discount'],
+      ]);
+    } else {
+      setCellsLoading(null);
+    }
+  }, [isItemFetching, setCellsLoading, rowItem]);
+
+  // Once the item selected and fetched set the initial details to the table.
+  useEffect(() => {
+    if (item && rowItem) {
+      const { rowIndex } = rowItem;
+      const price =
+        itemType === ITEM_TYPE.PURCHASABLE
+          ? item.purchase_price
+          : item.sell_price;
+
+      const description =
+        itemType === ITEM_TYPE.PURCHASABLE
+          ? item.purchase_description
+          : item.sell_description;
+
+      // Update the rate, description and quantity data of the row.
+      const newRows = compose(
+        updateItemsEntriesTotal,
+        updateTableRow(rowIndex, 'rate', price),
+        updateTableRow(rowIndex, 'description', description),
+        updateTableRow(rowIndex, 'quantity', 1),
+      )(rows);
+
+      setRows(newRows);
+      setRowItem(null);
+      saveInvoke(onUpdateData, newRows);
+    }
+  }, [item, rowItem, rows, itemType, onUpdateData]);
 
   // Allows to observes `entries` to make table rows outside controlled.
-  React.useEffect(() => {
+  useEffect(() => {
     if (entries && entries !== rows) {
       setRows(entries);
     }
@@ -50,15 +112,19 @@ function ItemsEntriesTable({
   // Handles the editor data update.
   const handleUpdateData = useCallback(
     (rowIndex, columnId, value) => {
+      if (columnId === 'item_id') {
+        setRowItem({ rowIndex, columnId, itemId: value });
+      }
       const newRows = compose(
+        updateAutoAddNewLine(defaultEntry),
         updateItemsEntriesTotal,
         updateTableRow(rowIndex, columnId, value),
-      )(entries);
+      )(rows);
 
       setRows(newRows);
       onUpdateData(newRows);
     },
-    [entries, onUpdateData],
+    [rows, defaultEntry, onUpdateData],
   );
 
   // Handle table rows removing by index.
@@ -80,9 +146,7 @@ function ItemsEntriesTable({
     openAlert('items-entries-clear-lines');
   };
 
-  /**
+  // Handle alert confirm of clear all lines.
-   * Handle alert confirm of clear all lines.
-   */
   const handleClearLinesAlertConfirm = () => {
     const newRows = repeatValue(defaultEntry, linesNumber);
     setRows(newRows);
@@ -94,8 +158,12 @@ function ItemsEntriesTable({
       <DataTableEditable
         className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
         columns={columns}
-        data={entries}
+        data={rows}
         sticky={true}
+        progressBarLoading={isItemFetching}
+        cellsLoading={isItemFetching}
+        cellsLoadingCoords={cellsLoading}
+        footer={true}
         payload={{
           items,
           errors: errors || [],
@@ -103,25 +171,7 @@ function ItemsEntriesTable({
           removeRow: handleRemoveRow,
           autoFocus: ['item_id', 0],
         }}
-        actions={
+         
-          <>
-            <Button
-              small={true}
-              className={'button--secondary button--new-line'}
-              onClick={onClickNewRow}
-            >
-              <T id={'new_lines'} />
-            </Button>
-
-            <Button
-              small={true}
-              className={'button--secondary button--clear-lines ml1'}
-              onClick={handleClickClearAllLines}
-            >
-              <T id={'clear_all_lines'} />
-            </Button>
-          </>
-        }
       />
       <ItemsEntriesDeleteAlert
         name={'items-entries-clear-lines'}

client/src/containers/Entries/components.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Tooltip, Button, Intent, Position } from '@blueprintjs/core';
-import { sumBy } from 'lodash';
 import { Hint, Icon } from 'components';
-import { formattedAmount } from 'utils';
+import { formattedAmount, safeSumBy } from 'utils';
 import {
   InputGroupCell,
   MoneyFieldCell,
@@ -62,7 +61,7 @@ export function ActionsCellRenderer({
  * Quantity total footer cell.
  */
 export function QuantityTotalFooterCell({ rows }) {
-  const quantity = sumBy(rows, r => parseInt(r.original.quantity, 10));
+  const quantity = safeSumBy(rows, 'original.quantity');
   return <span>{ quantity }</span>;
 }
 
@@ -70,7 +69,7 @@ export function QuantityTotalFooterCell({ rows }) {
  * Total footer cell.
  */
 export function TotalFooterCell({ rows }) {
-  const total = sumBy(rows, 'original.total');
+  const total = safeSumBy(rows, 'original.total');
   return <span>{ formattedAmount(total, 'USD') }</span>;
 }
 
@@ -110,9 +109,8 @@ export function useEditableItemsEntriesColumns() {
         Cell: ItemsListCell,
         Footer: ItemFooterCell,
         disableSortBy: true,
-        width: 180,
+        width: 130,
-        // filterPurchasable: filterPurchasableItems,
+        className: 'item',
-        // filterSellable: filterSellableItems,
       },
       {
         Header: formatMessage({ id: 'description' }),
@@ -120,7 +118,7 @@ export function useEditableItemsEntriesColumns() {
         Cell: InputGroupCell,
         disableSortBy: true,
         className: 'description',
-        width: 100,
+        width: 120,
       },
       {
         Header: formatMessage({ id: 'quantity' }),
@@ -128,7 +126,7 @@ export function useEditableItemsEntriesColumns() {
         Cell: NumericInputCell,
         Footer: QuantityTotalFooterCell,
         disableSortBy: true,
-        width: 80,
+        width: 70,
         className: 'quantity',
       },
       {
@@ -136,7 +134,7 @@ export function useEditableItemsEntriesColumns() {
         accessor: 'rate',
         Cell: MoneyFieldCell,
         disableSortBy: true,
-        width: 80,
+        width: 70,
         className: 'rate',
       },
       {
@@ -144,7 +142,7 @@ export function useEditableItemsEntriesColumns() {
         accessor: 'discount',
         Cell: PercentFieldCell,
         disableSortBy: true,
-        width: 80,
+        width: 60,
         className: 'discount',
       },
       {
@@ -153,7 +151,7 @@ export function useEditableItemsEntriesColumns() {
         accessor: 'total',
         Cell: TotalCell,
         disableSortBy: true,
-        width: 120,
+        width: 100,
         className: 'total',
       },
       {

client/src/containers/Entries/utils.js

@@ -23,4 +23,9 @@ export function updateItemsEntriesTotal(rows) {
     ...row,
     total: calcItemEntryTotal(row.discount, row.quantity, row.rate)
   }));
-};
+};
+
+export const ITEM_TYPE = {
+  SELLABLE: 'SELLABLE',
+  PURCHASABLE: 'PURCHASABLE',
+};

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -118,8 +118,8 @@ function ExpenseForm({
     };
 
     // Handle request error
-    const handleError = (error) => {
+    const handleError = ({ response: { data: { errors } } }) => {
-      transformErrors(error, { setErrors });
+      transformErrors(errors, { setErrors });
       setSubmitting(false);
     };
     if (isNewMode) {

client/src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.js

@@ -15,7 +15,7 @@ import { transformUpdatedRows, compose, saveInvoke, repeatValue } from 'utils';
  * Expenses form entries.
  */
 function ExpenseFormEntriesTable({
-  // #withAlertActions 
+  // #withAlertActions
   openAlert,
 
   // #ownPorps
@@ -57,65 +57,21 @@ function ExpenseFormEntriesTable({
     [entries, onChange],
   );
 
-  // Invoke when click on add new line button.
-  const onClickNewRow = () => {
-    const newRows = [...entries, defaultEntry];
-    saveInvoke(onChange, newRows);
-  };
-
-  // Invoke when click on clear all lines button.
-  const handleClickClearAllLines = () => {
-    openAlert('expense-delete-entries');
-  };
-
-  // handle confirm clear all entries alert.
-  const handleConfirmClearEntriesAlert = () => {
-    const newRows = repeatValue(defaultEntry, 3);
-    saveInvoke(onChange, newRows);
-  };
-
   return (
-    <>
+    <DataTableEditable
-      <DataTableEditable
+      columns={columns}
-        columns={columns}
+      data={entries}
-        data={entries}
+      sticky={true}
-        sticky={true}
+      payload={{
-        payload={{
+        accounts: accounts,
-          accounts: accounts,
+        errors: error,
-          errors: error,
+        updateData: handleUpdateData,
-          updateData: handleUpdateData,
+        removeRow: handleRemoveRow,
-          removeRow: handleRemoveRow,
+        autoFocus: ['expense_account_id', 0],
-          autoFocus: ['expense_account_id', 0],
+      }}
-        }}
+      footer={true}
-        actions={
+    />
-          <>
-            <Button
-              small={true}
-              className={'button--secondary button--new-line'}
-              onClick={onClickNewRow}
-            >
-              <T id={'new_lines'} />
-            </Button>
-
-            <Button
-              small={true}
-              className={'button--secondary button--clear-lines ml1'}
-              onClick={handleClickClearAllLines}
-            >
-              <T id={'clear_all_lines'} />
-            </Button>
-          </>
-        }
-        totalRow={true}
-      />
-      <ExpenseDeleteEntriesAlert
-        name={'expense-delete-entries'}
-        onConfirm={handleConfirmClearEntriesAlert}
-      />
-    </>
   );
 }
 
-export default compose(
+export default compose(withAlertActions)(ExpenseFormEntriesTable);
-  withAlertActions
-)(ExpenseFormEntriesTable);

client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js

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

client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
   momentFormatter,
@@ -10,16 +11,13 @@ import {
   inputIntent,
   handleDateChange,
 } from 'utils';
-import classNames from 'classnames';
 import {
   CurrencySelectList,
   ContactSelecetList,
-  ErrorMessage,
   AccountsSelectList,
   FieldRequiredHint,
   Hint,
 } from 'components';
-
 import { ACCOUNT_PARENT_TYPE } from 'common/accountTypes';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 

client/src/containers/Expenses/ExpenseForm/ExpenseFormPage.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
+import 'style/pages/Expense/PageForm.scss';
+
 import ExpenseForm from './ExpenseForm';
 import { ExpenseFormPageProvider } from './ExpenseFormPageProvider';
 
-import 'style/pages/Expense/PageForm.scss';
-
 /**
  * Expense page form.
  */

client/src/containers/Items/ItemForm.js

@@ -39,6 +39,8 @@ const defaultInitialValues = {
   category_id: '',
   sellable: 1,
   purchasable: true,
+  sell_description: '',
+  purchase_description: '',
 };
 
 /**

client/src/containers/JournalNumber/ReferenceNumberForm.js

@@ -1,15 +1,11 @@
-import React, { useMemo  } from 'react';
+import React, { useMemo } from 'react';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
+import { Formik, Form } from 'formik';
-import { Row, Col, ErrorMessage } from 'components';
 import { FormattedMessage as T } from 'react-intl';
-import {
+import { Button, Classes } from '@blueprintjs/core';
-  Button,
+import { Intent } from '@blueprintjs/core';
-  Classes,
+import { saveInvoke } from 'utils';
-  FormGroup,
+import ReferenceNumberFormContent from './ReferenceNumberFormContent';
-  InputGroup,
-  Intent,
-} from '@blueprintjs/core';
 
 /**
  * Reference number form.
@@ -21,6 +17,7 @@ export default function ReferenceNumberForm({
   initialNumber,
 }) {
   const validationSchema = Yup.object().shape({
+    // mode: Yup.string(),
     number_prefix: Yup.string(),
     next_number: Yup.number(),
   });
@@ -33,85 +30,44 @@ export default function ReferenceNumberForm({
     [initialPrefix, initialNumber],
   );
 
-  const {
+  const handleSubmit = (values) => {
-    errors,
+    debugger;
-    touched,
+    saveInvoke(onSubmit, values);
-    handleSubmit,
+  };
-    isSubmitting,
-    getFieldProps,
-  } = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...initialValues,
-    },
-    validationSchema,
-    onSubmit: (values, { setSubmitting, setErrors }) => {
-      onSubmit(values, { setSubmitting, setErrors });
-    },
-  });
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <div className={Classes.DIALOG_BODY}>
-          <p className="paragraph">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
-            tincidunt porta quam,
-          </p>
-          <Row>
-            {/* ------------- Prefix ------------- */}
-            <Col xs={6}>
-              <FormGroup
-                label={<T id={'prefix'} />}
-                className={'form-group--'}
-                intent={errors.number_prefix && touched.number_prefix && Intent.DANGER}
-                helperText={
-                  <ErrorMessage name={'prefix'} {...{ errors, touched }} />
-                }
-              >
-                <InputGroup
-                  intent={errors.number_prefix && touched.number_prefix && Intent.DANGER}
-                  {...getFieldProps('number_prefix')}
-                />
-              </FormGroup>
-            </Col>
 
-            {/* ------------- Next number ------------- */}
+  return (
-            <Col xs={6}>
+    <Formik
-              <FormGroup
+      initialValues={initialValues}
-                label={<T id={'next_number'} />}
+      validationSchema={validationSchema}
-                className={'form-group--'}
+      onSubmit={handleSubmit}
-                intent={
+    >
-                  errors.next_number && touched.next_number && Intent.DANGER
+      {({ isSubmitting }) => (
-                }
+        <Form>
-                helperText={
+          <div className={Classes.DIALOG_BODY}>
-                  <ErrorMessage name={'next_number'} {...{ errors, touched }} />
+            <p className="paragraph">
-                }
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
-              >
+              tincidunt porta quam,
-                <InputGroup
+            </p>
-                  intent={
+
-                    errors.next_number && touched.next_number && Intent.DANGER
+            <ReferenceNumberFormContent />
-                  }
-                  {...getFieldProps('next_number')}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
-        </div>
-        <div className={Classes.DIALOG_FOOTER}>
-          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={onClose}>
-              <T id={'cancel'} />
-            </Button>
-            <Button
-              intent={Intent.PRIMARY}
-              type="submit"
-              disabled={isSubmitting}
-            >
-              <T id={'submit'} />
-            </Button>
           </div>
-        </div>
+
-      </form>
+          <div className={Classes.DIALOG_FOOTER}>
-    </div>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={onClose}>
+                <T id={'cancel'} />
+              </Button>
+              <Button
+                intent={Intent.PRIMARY}
+                type="submit"
+                disabled={isSubmitting}
+              >
+                <T id={'submit'} />
+              </Button>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
   );
-}
+}

client/src/containers/JournalNumber/ReferenceNumberFormContent.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FastField } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { FormGroup, InputGroup, Radio } from '@blueprintjs/core';
+import { Row, Col, ErrorMessage } from 'components';
+import { inputIntent } from 'utils';
+
+/**
+ * Reference number form content.
+ */
+export default function ReferenceNumberFormContent() {
+  return (
+    <>
+      <FastField name={'mode'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <Radio
+            label="Auto-incrementing invoice number."
+            value="auto-increment"
+            {...field}
+          />
+        )}
+      </FastField>
+
+      <Row>
+        {/* ------------- Prefix ------------- */}
+        <Col xs={6}>
+          <FastField name={'prefix'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'prefix'} />}
+                className={'form-group--'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'prefix'} />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        {/* ------------- Next number ------------- */}
+        <Col xs={6}>
+          <FastField name={'next_number'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'next_number'} />}
+                className={'form-group--'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'next_number'} />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <FastField name={'mode'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <Radio label="Manual entring for this transaction." value="manual" {...field} />
+        )}
+      </FastField>
+    </>
+  );
+}

client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js

@@ -3,7 +3,7 @@ import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { FastField } from 'formik';
 import classNames from 'classnames';
-import { Row, Col } from 'components';
+import { Postbox, Row, Col } from 'components';
 import { CLASSES } from 'common/classes';
 import Dragzone from 'components/Dragzone';
 import { inputIntent } from 'utils';
@@ -12,30 +12,32 @@ import { inputIntent } from 'utils';
 export default function BillFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
+      <Postbox title={'Bill details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          <FastField name={'note'}>
+          <Col md={8}>
-            {({ field, meta: { error, touched } }) => (
+            <FastField name={'note'}>
-              <FormGroup
+              {({ field, meta: { error, touched } }) => (
-                label={<T id={'note'} />}
+                <FormGroup
-                className={'form-group--note'}
+                  label={<T id={'note'} />}
-                intent={inputIntent({ error, touched })}
+                  className={'form-group--note'}
-              >
+                  intent={inputIntent({ error, touched })}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
-        </Col>
+            </FastField>
+          </Col>
 
-        <Col md={4}>
+          <Col md={4}>
-          <Dragzone
+            <Dragzone
-            initialFiles={[]}
+              initialFiles={[]}
-            // onDrop={onDropFiles}
+              // onDrop={onDropFiles}
-            // onDeleteFile={onDropFiles}
+              // onDeleteFile={onDropFiles}
-            hint={'Attachments: Maxiumum size: 20MB'}
+              hint={'Attachments: Maxiumum size: 20MB'}
-          />
+            />
-        </Col>
+          </Col>
-      </Row>
+        </Row>
+      </Postbox>
     </div>
   );
 }

client/src/containers/Purchases/Bills/BillForm/utils.js

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

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js

@@ -20,23 +20,23 @@ function PaymentMadeEntriesTable({
   entries,
 
   // #withAlertsActions
-  openAlert
+  openAlert,
 }) {
-  const {
+  const { paymentVendorId, isDueBillsFetching } = usePaymentMadeFormContext();
-    paymentVendorId,
-    isDueBillsFetching,
-  } = usePaymentMadeFormContext();
 
   const columns = usePaymentMadeEntriesTableColumns();
- 
-  // Handle update data.
-  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
-    const newRows = compose(
-      updateTableRow(rowIndex, columnId, value),
-    )(entries);
 
-    onUpdateData(newRows);
+  // Handle update data.
-  }, [onUpdateData, entries]);
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableRow(rowIndex, columnId, value))(
+        entries,
+      );
+
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
 
   // Detarmines the right no results message before selecting vendor and aftering
   // selecting vendor id.
@@ -44,15 +44,6 @@ function PaymentMadeEntriesTable({
     ? 'There is no payable bills for this vendor that can be applied for this payment'
     : 'Please select a vendor to display all open bills for it.';
 
-  // Handle clear all lines action.
-  const handleClearAllLines = () => {
-    const fullAmount = safeSumBy(entries, 'payment_amount');
-
-    if (fullAmount > 0) {
-      openAlert('clear-all-lines-payment-made');
-    }
-  }
-
   return (
     <CloudLoadingIndicator isLoading={isDueBillsFetching}>
       <DataTableEditable
@@ -66,21 +57,10 @@ function PaymentMadeEntriesTable({
           updateData: handleUpdateData,
         }}
         noResults={noResultsMessage}
-        actions={
+        footer={true}
-          <Button
-            small={true}
-            className={'button--secondary button--clear-lines'}
-            onClick={handleClearAllLines}
-          >
-            <T id={'clear_all_lines'} />
-          </Button>
-        }
-        totalRow={true}
       />
     </CloudLoadingIndicator>
   );
 }
 
-export default compose(
+export default compose(withAlertActions)(PaymentMadeEntriesTable);
-  withAlertActions
-)(PaymentMadeEntriesTable);

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.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 { Postbox, Row, Col } from 'components';
 import { CLASSES } from 'common/classes';
 
 /**
@@ -12,21 +12,23 @@ import { CLASSES } from 'common/classes';
 export default function PaymentMadeFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Row>
+      <Postbox title={'Payment made details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          {/* --------- Statement --------- */}
+          <Col md={8}>
-          <FastField name={'customer_name'}>
+            {/* --------- Statement --------- */}
-            {({ form, field, meta: { error, touched } }) => (
+            <FastField name={'customer_name'}>
-              <FormGroup
+              {({ form, field, meta: { error, touched } }) => (
-                label={<T id={'statement'} />}
+                <FormGroup
-                className={'form-group--statement'}
+                  label={<T id={'statement'} />}
-              >
+                  className={'form-group--statement'}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
-        </Col>
+            </FastField>
-      </Row>
+          </Col>
+        </Row>
+      </Postbox>
     </div>
   );
 }

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>
+      <Postbox title={'Estimate details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          {/* --------- Customer Note --------- */}
+          <Col md={8}>
-          <FastField name={'note'}>
+            {/* --------- Customer Note --------- */}
-            {({ form, field, meta: { error, touched } }) => (
+            <FastField name={'note'}>
-              <FormGroup
+              {({ form, field, meta: { error, touched } }) => (
-                label={<T id={'customer_note'} />}
+                <FormGroup
-                className={'form-group--customer_note'}
+                  label={<T id={'customer_note'} />}
-                intent={inputIntent({ error, touched })}
+                  className={'form-group--customer_note'}
-              >
+                  intent={inputIntent({ error, touched })}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
+            </FastField>
 
-          {/* --------- Terms and conditions --------- */}
+            {/* --------- Terms and conditions --------- */}
-          <FastField name={'terms_conditions'}>
+            <FastField name={'terms_conditions'}>
-            {({ field, meta: { error, touched } }) => (
+              {({ field, meta: { error, touched } }) => (
-              <FormGroup
+                <FormGroup
-                label={<T id={'terms_conditions'} />}
+                  label={<T id={'terms_conditions'} />}
-                className={'form-group--terms_conditions'}
+                  className={'form-group--terms_conditions'}
-                intent={inputIntent({ error, touched })}
+                  intent={inputIntent({ error, touched })}
-              >
+                >
-                <TextArea growVertically={true} {...field} />
+                  <TextArea growVertically={true} {...field} />
-              </FormGroup>
+                </FormGroup>
-            )}
+              )}
-          </FastField>
+            </FastField>
-        </Col>
+          </Col>
 
-        <Col md={4}>
+          <Col md={4}>
-          <Dragzone
+            <Dragzone
-            initialFiles={[]}
+              initialFiles={[]}
-            // onDrop={handleDropFiles}
+              // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
+              // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
+              hint={'Attachments: Maxiumum size: 20MB'}
-          />
+            />
-        </Col>
+          </Col>
-      </Row>
+        </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,
+  discount: '',
-  quantity: 1,
+  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' })}
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
-          onClick={() => onDrawer()}
+        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 />
-
+          <InvoiceItemsEntriesEditorField />
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <InvoiceItemsEntriesEditorField />
-          </div>
           <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>
+      <Postbox title={'Invoice details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          {/* --------- Invoice message --------- */}
+          <Col md={8}>
-          <FastField name={'invoice_message'}>
+            {/* --------- Invoice message --------- */}
-            {({ field, meta: { error, touched } }) => (
+            <FastField name={'invoice_message'}>
-              <FormGroup
+              {({ field, meta: { error, touched } }) => (
-                label={<T id={'invoice_message'} />}
+                <FormGroup
-                className={'form-group--invoice_message'}
+                  label={<T id={'invoice_message'} />}
-                intent={inputIntent({ error, touched })}
+                  className={'form-group--invoice_message'}
-              >
+                  intent={inputIntent({ error, touched })}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
+            </FastField>
 
-          {/* --------- Terms and conditions --------- */}
+            {/* --------- Terms and conditions --------- */}
-          <FastField name={'terms_conditions'}>
+            <FastField name={'terms_conditions'}>
-            {({ field, meta: { error, touched } }) => (
+              {({ field, meta: { error, touched } }) => (
-              <FormGroup
+                <FormGroup
-                label={<T id={'terms_conditions'} />}
+                  label={<T id={'terms_conditions'} />}
-                className={'form-group--terms_conditions'}
+                  className={'form-group--terms_conditions'}
-                intent={inputIntent({ error, touched })}
+                  intent={inputIntent({ error, touched })}
-              >
+                >
-                <TextArea growVertically={true} {...field} />
+                  <TextArea growVertically={true} {...field} />
-              </FormGroup>
+                </FormGroup>
-            )}
+              )}
-          </FastField>
+            </FastField>
-        </Col>
+          </Col>
 
-        <Col md={4}>
+          <Col md={4}>
-          <Dragzone
+            <Dragzone
-            initialFiles={[]}
+              initialFiles={[]}
-            // onDrop={handleDropFiles}
+              // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
+              // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
+              hint={'Attachments: Maxiumum size: 20MB'}
-          />
+            />
-        </Col>
+          </Col>
-      </Row>
+        </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'}>
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      {({ form, field: { value }, meta: { error, touched } }) => (
+      <FastField name={'entries'}>
-        <ItemsEntriesTable
+        {({ form, field: { value }, meta: { error, touched } }) => (
-          entries={value}
+          <ItemsEntriesTable
-          onUpdateData={(entries) => {
+            entries={value}
-            form.setFieldValue('entries', entries);
+            onUpdateData={(entries) => {
-          }}
+              form.setFieldValue('entries', entries);
-          items={items}
+            }}
-          errors={error}
+            items={items}
-          linesNumber={4}
+            errors={error}
-        />
+            linesNumber={4}
-      )}
+          />
-    </FastField>
+        )}
+      </FastField>
+    </div>
   );
 }

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

@@ -9,8 +9,8 @@ export const defaultInvoiceEntry = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
+  discount: '',
-  quantity: 1,
+  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>
+      <Postbox title={'Payment receive details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          {/* --------- Statement --------- */}
+          <Col md={8}>
-          <FastField name={'statement'}>
+            {/* --------- Statement --------- */}
-            {({ form, field, meta: { error, touched } }) => (
+            <FastField name={'statement'}>
-              <FormGroup
+              {({ form, field, meta: { error, touched } }) => (
-                label={<T id={'statement'} />}
+                <FormGroup
-                className={'form-group--statement'}
+                  label={<T id={'statement'} />}
-              >
+                  className={'form-group--statement'}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
-        </Col>
+            </FastField>
-      </Row>
+          </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={
+        footer={true}
-          <Button
-            small={true}
-            className={'button--secondary button--clear-lines'}
-            onClick={handleClickClearAllLines}
-          >
-            <T id={'clear_all_lines'} />
-          </Button>
-        }
-        totalRow={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>
+      <Postbox title={'Invoice details'} defaultOpen={false}>
-        <Col md={8}>
+        <Row>
-          {/* --------- Receipt message --------- */}
+          <Col md={8}>
-          <FastField name={'receipt_message'}>
+            {/* --------- Receipt message --------- */}
-            {({ field, meta: { error, touched } }) => (
+            <FastField name={'receipt_message'}>
-              <FormGroup
+              {({ field, meta: { error, touched } }) => (
-                label={<T id={'receipt_message'} />}
+                <FormGroup
-                className={'form-group--receipt_message'}
+                  label={<T id={'receipt_message'} />}
-                intent={inputIntent({ error, touched })}
+                  className={'form-group--receipt_message'}
-              >
+                  intent={inputIntent({ error, touched })}
-                <TextArea growVertically={true} {...field} />
+                >
-              </FormGroup>
+                  <TextArea growVertically={true} {...field} />
-            )}
+                </FormGroup>
-          </FastField>
+              )}
+            </FastField>
 
-          {/* --------- Statement--------- */}
+            {/* --------- Statement--------- */}
-          <FastField name={'statement'}>
+            <FastField name={'statement'}>
-            {({ field, meta: { error, touched } }) => (
+              {({ field, meta: { error, touched } }) => (
-              <FormGroup
+                <FormGroup
-                label={<T id={'statement'} />}
+                  label={<T id={'statement'} />}
-                className={'form-group--statement'}
+                  className={'form-group--statement'}
-                intent={inputIntent({ error, touched })}
+                  intent={inputIntent({ error, touched })}
-              >
+                >
-                <TextArea growVertically={true} {...field} />
+                  <TextArea growVertically={true} {...field} />
-              </FormGroup>
+                </FormGroup>
-            )}
+              )}
-          </FastField>
+            </FastField>
-        </Col>
+          </Col>
 
-        <Col md={4}>
+          <Col md={4}>
-          <Dragzone
+            <Dragzone
-            initialFiles={[]}
+              initialFiles={[]}
-            // onDrop={handleDropFiles}
+              // onDrop={handleDropFiles}
-            // onDeleteFile={handleDeleteFile}
+              // onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
+              hint={'Attachments: Maxiumum size: 20MB'}
-          />
+            />
-        </Col>
+          </Col>
-      </Row>
+        </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' })}
+        icon={<Icon icon={'receipt-24'} iconSize={16} />}
-          onClick={() => onDrawer()}
+        text={formatMessage({ id: 'receipt_paper' })}
-        />
+        onClick={() => onDrawer()}
+      />
       <MenuItem
         text={formatMessage({ id: 'delete_receipt' })}
         intent={Intent.DANGER}

client/src/hooks/query/invoices.js

@@ -13,9 +13,11 @@ export function useCreateInvoice(props) {
   return useMutation((values) => apiRequest.post('sales/invoices', values), {
     onSuccess: (values) => {
       queryClient.invalidateQueries('SALE_INVOICES');
-      queryClient.invalidateQueries(['SETTINGS', 'INVOICES']);
+
       queryClient.invalidateQueries('CUSTOMERS');
       queryClient.invalidateQueries(['CUSTOMER', values.customer_id]);
+
+      queryClient.invalidateQueries(['SETTINGS', 'INVOICES']);
     },
     ...props,
   });

client/src/hooks/query/settings.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useDispatch } from 'react-redux';
 import useApiRequest from '../useRequest';
@@ -22,7 +23,7 @@ function useSettingsQuery(key, query, props) {
   const dispatch = useDispatch();
   const apiRequest = useApiRequest();
 
-  return useQuery(
+  const state = useQuery(
     key,
     () => apiRequest.get('settings', { params: query }),
     {
@@ -33,12 +34,17 @@ function useSettingsQuery(key, query, props) {
           settings: [],
         },
       },
-      onSuccess: (settings) => {
-        dispatch({ type: t.SETTING_SET, options: settings });
-      },
       ...props,
     },
   );
+
+  useEffect(() => {
+    if (typeof state.data !== 'undefined') {
+      dispatch({ type: t.SETTING_SET, options: state.data });
+    }
+  }, [state.data, dispatch]);
+
+  return state.data;
 }
 
 /**

client/src/routes/dashboard.js

@@ -4,13 +4,7 @@ import { formatMessage } from 'services/intl';
 // const BASE_URL = '/dashboard';
 
 export default [
-  // Homepage
+  
-  {
-    path: `/homepage`,
-    component: lazy(() => import('containers/Homepage/Homepage')),
-    breadcrumb: 'Home',
-    pageTitle: 'Homepage',
-  },
   // Accounts.
   {
     path: `/accounts`,
@@ -73,6 +67,7 @@ export default [
   {
     path: `/items/:id/edit`,
     component: lazy(() => import('containers/Items/ItemFormPage')),
+    name: 'item-edit',
     breadcrumb: 'Edit Item',
     pageTitle: formatMessage({ id: 'edit_item' }),
     backLink: true,
@@ -80,6 +75,7 @@ export default [
   {
     path: `/items/new`,
     component: lazy(() => import('containers/Items/ItemFormPage')),
+    name: 'item-new',
     breadcrumb: 'New Item',
     hotkey: 'ctrl+shift+w',
     pageTitle: formatMessage({ id: 'new_item' }),
@@ -233,6 +229,7 @@ export default [
     component: lazy(() =>
       import('containers/Customers/CustomerForm/CustomerFormPage'),
     ),
+    name: 'customer-edit',
     breadcrumb: 'Edit Customer',
     pageTitle: formatMessage({ id: 'edit_customer' }),
     backLink: true,
@@ -242,6 +239,7 @@ export default [
     component: lazy(() =>
       import('containers/Customers/CustomerForm/CustomerFormPage'),
     ),
+    name: 'customer-new',
     breadcrumb: 'New Customer',
     hotkey: 'ctrl+shift+c',
     pageTitle: formatMessage({ id: 'new_customer' }),
@@ -263,6 +261,7 @@ export default [
     component: lazy(() =>
       import('containers/Vendors/VendorForm/VendorFormPage'),
     ),
+    name: 'vendor-edit',
     breadcrumb: 'Edit Vendor',
     pageTitle: formatMessage({ id: 'edit_vendor' }),
     backLink: true,
@@ -272,6 +271,7 @@ export default [
     component: lazy(() =>
       import('containers/Vendors/VendorForm/VendorFormPage'),
     ),
+    name: 'vendor-new',
     breadcrumb: 'New Vendor',
     hotkey: 'ctrl+shift+v',
     pageTitle: formatMessage({ id: 'new_vendor' }),
@@ -293,6 +293,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
     ),
+    name: 'estimate-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_estimate' }),
     backLink: true,
@@ -303,6 +304,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
     ),
+    name: 'estimate-new',
     breadcrumb: 'New Estimate',
     hotkey: 'ctrl+shift+e',
     pageTitle: formatMessage({ id: 'new_estimate' }),
@@ -314,6 +316,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Estimates/EstimatesLanding/EstimatesList'),
     ),
+    name: 'estimates-list',
     breadcrumb: 'Estimates List',
     hotkey: 'shift+e',
     pageTitle: formatMessage({ id: 'estimates_list' }),
@@ -325,6 +328,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
     ),
+    name: 'invoice-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_invoice' }),
     sidebarShrink: true,
@@ -335,6 +339,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
     ),
+    name: 'invoice-new',
     breadcrumb: 'New Invoice',
     hotkey: 'ctrl+shift+i',
     pageTitle: formatMessage({ id: 'new_invoice' }),
@@ -357,6 +362,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
     ),
+    name: 'receipt-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_receipt' }),
     backLink: true,
@@ -367,6 +373,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
     ),
+    name: 'receipt-new',
     breadcrumb: 'New Receipt',
     hotkey: 'ctrl+shift+r',
     pageTitle: formatMessage({ id: 'new_receipt' }),
@@ -391,6 +398,7 @@ export default [
         'containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage'
       ),
     ),
+    name: 'payment-receive-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_payment_receive' }),
     backLink: true,
@@ -403,6 +411,7 @@ export default [
         'containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage'
       ),
     ),
+    name: 'payment-receive-new',
     breadcrumb: 'New Payment Receive',
     pageTitle: formatMessage({ id: 'new_payment_receive' }),
     backLink: true,
@@ -425,6 +434,7 @@ export default [
     component: lazy(() =>
       import('containers/Purchases/Bills/BillForm/BillFormPage'),
     ),
+    name: 'bill-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_bill' }),
     sidebarShrink: true,
@@ -435,6 +445,7 @@ export default [
     component: lazy(() =>
       import('containers/Purchases/Bills/BillForm/BillFormPage'),
     ),
+    name: 'bill-new',
     breadcrumb: 'New Bill',
     hotkey: 'ctrl+shift+b',
     pageTitle: formatMessage({ id: 'new_bill' }),
@@ -465,6 +476,7 @@ export default [
         'containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
       ),
     ),
+    name: 'payment-made-edit',
     breadcrumb: 'Edit',
     pageTitle: formatMessage({ id: 'edit_payment_made' }),
     sidebarShrink: true,
@@ -477,6 +489,7 @@ export default [
         'containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
       ),
     ),
+    name: 'payment-made-new',
     breadcrumb: 'New Payment Made',
     pageTitle: formatMessage({ id: 'new_payment_made' }),
     sidebarShrink: true,
@@ -492,4 +505,11 @@ export default [
     breadcrumb: 'Payment Made List',
     pageTitle: formatMessage({ id: 'payment_made_list' }),
   },
+  // Homepage
+  {
+    path: `/`,
+    component: lazy(() => import('containers/Homepage/Homepage')),
+    breadcrumb: 'Home',
+    pageTitle: 'Homepage',
+  },
 ];

client/src/static/json/icons.js

@@ -396,4 +396,8 @@ export default {
     path: ['M9,5v2h6.59L4,18.59L5.41,20L17,8.41V15h2V5H9'],
     viewBox: '0 0 24 24',
   },
+  'receipt-24': {
+    path: ['M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5zM19 19.09H5V4.91h14v14.18zM6 15h12v2H6zm0-4h12v2H6zm0-4h12v2H6z'],
+    viewBox: '0 0 24 24',
+  }
 };

client/src/style/App.scss

@@ -24,6 +24,7 @@
 @import 'components/Toast';
 @import 'components/PageForm';
 @import 'components/Tooltip';
+@import 'components/Postbox';
 
 // Pages
 @import 'pages/view-form';
@@ -99,4 +100,4 @@ body.hide-scrollbar .Pane2{
 
 .bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
   background-color: #0066ff;
-}
+}

client/src/style/components/BigAmount.scss

@@ -1,5 +1,6 @@
 
 .big-amount{
+  text-align: right;
 
   &__label{
     color: #5d6f90;
@@ -11,7 +12,7 @@
     margin: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: 400;
+    font-weight: 500;
     margin-top: 6px;
     color: #343463;
     line-height: 1;

client/src/style/components/DataTable/DataTableEditable.scss

@@ -1,14 +1,16 @@
 .datatable-editor {
+  
   .bp3-form-group {
     margin-bottom: 0;
   }
   .table {
     border: 1px solid #d2dce2;
     border-left: transparent;
+    background-color: #FFF;
 
     .th,
     .td {
-      border-left: 1px solid #e2e2e2;
+      border-left: 1px dashed #e2e2e2;
 
       &.index {
         text-align: center;
@@ -29,7 +31,8 @@
         background-color: #f0f2f8;
         font-size: 14px;
         font-weight: 500;
-        color: #1c1940;
+        color: #415060;
+        border-bottom: 1px solid #d2dce2;
 
         &.index > div {
           width: 100%;
@@ -39,13 +42,14 @@
 
     .tbody {
       .tr .td {
-        padding: 5px;
+        padding: 4px;
         border-bottom: 0;
-        border-top: 1px dashed #aaa;
+        border-top: 1px solid #d8d8d8;
-        min-height: 42px;
+        min-height: 40px;
 
         &.index {
           background-color: #f0f2f8;
+          color: #718294;
 
           > span {
             margin-top: auto;
@@ -126,6 +130,12 @@
         }
       }
     }
+
+    .tfooter{
+      .td{
+        min-height: 38px;
+      }
+    }
     .th {
       color: #444;
       font-weight: 600;
@@ -142,6 +152,23 @@
         margin: 0;
       }
     }
+
+
+    .tbody,
+    .thead,
+    .tfooter{
+
+      // .total,
+      .quantity,
+      .rate,
+      .discount{
+
+        &,
+        input{
+          text-align: right;
+        }
+      }
+    }
   }
 
   .table {

client/src/style/components/PageForm.scss

@@ -12,7 +12,7 @@
     width: 100%;
     background: #fff;
     padding: 14px 18px;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgb(210, 221, 226);
     box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
 
     .bp3-button-group{
@@ -33,6 +33,14 @@
   &--strip {
     #{$self}__header-fields {
       width: 85%;
+
+      .bp3-form-group{
+        margin-bottom: 16px;
+      }
+
+      > .bp3-form-group:last-of-type{
+        margin-bottom: 0;
+      }
     }
     #{$self}__body,
     #{$self}__footer {
@@ -40,8 +48,8 @@
     }
 
     #{$self}__header {
-      background-color: #fbfbfb;
+      background-color: #FFF;
-      padding: 30px 20px 0;
+      padding: 25px 32px;
       border-bottom: 1px solid #d2dce2;
 
       .bp3-form-group.bp3-inline label.bp3-label {
@@ -50,15 +58,13 @@
     }
 
     #{$self}__body {
-      padding-top: 15px;
+      padding: 18px 32px 0;
-      padding-left: 20px;
-      padding-right: 20px;
     }
 
     #{$self}__footer {
-      margin: 25px 0 0 0;
+      margin: 20px 0 0 0;
-      padding-left: 20px;
+      padding-left: 32px;
-      padding-right: 20px;
+      padding-right: 32px;
 
       label.bp3-label{
         font-weight: 500;

client/src/style/components/Postbox.scss

@@ -0,0 +1,48 @@
+.postbox {
+    border: 1px solid #d2dce2;
+    background: #FFF;
+
+    &__header {
+        border-bottom: 1px solid #d2dde2;
+        height: 38px;
+        padding-left: 18px;
+        align-items: center;
+        display: flex;
+    }
+
+    &__title {
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    &.is-toggable .postbox__header {
+        cursor: pointer;
+    }
+
+    &__toggle-indicator {
+        margin-left: auto;
+        width: 40px;
+        text-align: center;
+        display: flex;
+
+        &:before {
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 4px solid transparent;
+            border-right: 4px solid transparent;
+            border-bottom: 6px solid #8ca0b3;
+            margin: auto;
+        }
+    }
+
+    &__title {}
+
+    &__content {
+
+        &-inner {
+            padding: 20px;
+        }
+    }
+}

client/src/style/objects/Bigcapital.scss

@@ -4,7 +4,7 @@
   }
   .path-1,
   .path-13 {
-    fill: #4f5861;
+    fill: #2d95fd;
   }
 }
 

client/src/style/objects/form.scss

@@ -49,7 +49,7 @@ label.bp3-label {
     background: #e9ecef;
   }
 
-  .bp3-form-group.bp3-intent-danger & {
+  .bp3-form-group.bp3-intent-danger > & {
     box-shadow: 0 0 0 transparent;
     border-color: #db3737;
 

client/src/style/pages/Bills/PageForm.scss

@@ -1,7 +1,17 @@
-.dashboard__insider--bill-form{
+
-  background-color: #FFF;
+body.page-bill-new,
+body.page-bill-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
 }
 
+.dashboard__insider--bill-form{
+  padding-bottom: 64px;
+}
+
+
 .page-form--bill{
   $self: '.page-form';
 

client/src/style/pages/Customers/PageForm.scss

@@ -1,5 +1,18 @@
 @import '../../Base.scss';
 
+
+body.page-customer-new,
+body.page-customer-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
+.dashboard__insider--customer-form{
+  padding-bottom: 64px;
+}
+
 .page-form--customer {
   $self: '.page-form';
   padding: 20px;

client/src/style/pages/Dashboard/Dashboard.scss

@@ -11,7 +11,7 @@ $dashboard-views-bar-height: 45px;
     display: flex;
     justify-content: space-between;
     background-color: #fff;
-    border-bottom: 1px solid #dddee3;
+    border-bottom: 1px solid #c7d5db;
 
     &-right,
     &-left {
@@ -137,7 +137,11 @@ $dashboard-views-bar-height: 45px;
   }
 
   &__actions-bar {
-    border-bottom: 2px solid #eaeaea;
+    border-bottom: 2px solid #e1e2e8;
+
+    .bp3-navbar-divider{
+      border-left-color: rgb(199, 214, 219);
+    }
 
     .#{$ns}-navbar {
       box-shadow: none;
@@ -493,3 +497,5 @@ $dashboard-views-bar-height: 45px;
     }
   }
 }
+
+

client/src/style/pages/Expense/PageForm.scss

@@ -1,8 +1,5 @@
-.dashboard__insider--expense-form{
-  background-color: #fff;
-}
-.dashboard__insider--expenses{
 
+.dashboard__insider--expenses{
 
   .bigcapital-datatable{
 

client/src/style/pages/Items/PageForm.scss

@@ -1,3 +1,16 @@
+
+body.page-item-new,
+body.page-item-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
+.dashboard__insider--item-form{
+  padding-bottom: 64px;
+}
+
 .page-form--item {
   $self: '.page-form';
   padding: 20px;

client/src/style/pages/ManualJournal/List.scss

@@ -9,7 +9,7 @@
           border-bottom: 1px solid #e7e7e7;
 
           > span {
-            font-weight: 500;
+            font-weight: 600;
           }
         }
       }

client/src/style/pages/ManualJournal/MakeJournal.scss

@@ -3,6 +3,12 @@
   $self: '.page-form';  
 
   #{$self}__header{
+    display: flex;
+
+    &-fields {
+      flex: 1 0 0;
+    }
+    
     .bp3-label{
       min-width: 140px;
     }
@@ -28,10 +34,3 @@
     }
   }
 }
-
-.dashboard__insider{
-
-  &--make-journal-page{
-    background: #fff;
-  }
-}

client/src/style/pages/PaymentMade/PageForm.scss

@@ -1,5 +1,14 @@
+
+body.page-payment-made-new,
+body.page-payment-made-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
 .dashboard__insider--payment-made{
-  background-color: #FFF;
+  padding-bottom: 64px;
 }
 
 .page-form--payment-made {

client/src/style/pages/PaymentReceive/PageForm.scss

@@ -1,26 +1,37 @@
 
+body.page-payment-receive-new,
+body.page-payment-receive-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
 .dashboard__insider--payment-receive-form{
-  background-color: #FFF;
+  padding-bottom: 64px;
 }
 
+
 .page-form--payment-receive {
   $self: '.page-form';
 
-  #{$self}__header{
+  #{$self}__header {
-    .bp3-label{
+    .bp3-label {
       min-width: 160px;
     }
-    .bp3-form-content{
+
+    .bp3-form-content {
       width: 100%;
     }
 
-    .bp3-form-group{
+    .bp3-form-group {
       margin-bottom: 18px;
 
-      &.bp3-inline{
+      &.bp3-inline {
-        max-width: 470px; 
+        max-width: 470px;
       }
-      button.receive-full-amount{
+
+      button.receive-full-amount {
         width: auto;
         padding: 0;
         min-height: auto;
@@ -29,28 +40,28 @@
         background-color: transparent;
         color: #0052cc;
 
-        &:hover{
+        &:hover {
           text-decoration: underline;
         }
       }
     }
   }
 
-  #{$self}__primary-section{
+  #{$self}__primary-section {
     display: flex;
     padding-bottom: 2px;
   }
 
-  #{$self}__big-numbers{
+  #{$self}__big-numbers {
     margin-left: auto;
     padding-right: 10px;
   }
 
-  .datatable-editor{
+  .datatable-editor {
-    
+
-    .table .tbody{
+    .table .tbody {
-      .tr.no-results{
+      .tr.no-results {
-        .td{
+        .td {
           font-size: 15px;
           padding: 26px 0;
           color: #5a5a77;
@@ -58,11 +69,30 @@
       }
     }
 
-    .table{
+    .table {
-      .tr{
+
+
+      .th,
+      .td {
+
+        &.invoice_amount,
+        &.amount_due,
+        &.payment_amount {
+
+          &,
+          input {
+            text-align: right;
+          }
+        }
+      }
+
+      .tr {
+
         .td:first-of-type,
-        .th:first-of-type{
+        .th:first-of-type {
-          span, div{
+
+          span,
+          div {
             margin-left: auto;
             margin-right: auto;
           }
@@ -71,12 +101,12 @@
     }
   }
 
-  #{$self}__footer{
+  #{$self}__footer {
-    .form-group--statement{
+    .form-group--statement {
       max-width: 500px;
       width: 100%;
 
-      textarea{
+      textarea {
         width: 100%;
         min-height: 70px;
       }

client/src/style/pages/SaleEstimate/PageForm.scss

@@ -1,5 +1,14 @@
+
+body.page-estimate-new,
+body.page-estimate-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
 .dashboard__insider--estimate-form{
-  background-color: #FFF;
+  padding-bottom: 64px;
 }
 
 .page-form--estimate {

client/src/style/pages/SaleInvoice/PageForm.scss

@@ -1,5 +1,14 @@
-.dashboard__insider--invoice-form {
+
-  background-color: #fff;
+body.page-invoice-new,
+body.page-invoice-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
+.dashboard__insider--invoice-form{
+  padding-bottom: 64px;
 }
 
 .page-form--invoice {
@@ -20,7 +29,7 @@
     }
 
     .bp3-form-group {
-      margin-bottom: 18px;
+      
 
       &.bp3-inline {
         max-width: 440px;

client/src/style/pages/SaleReceipt/PageForm.scss

@@ -1,5 +1,15 @@
+
+
+body.page-receipt-new,
+body.page-receipt-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
 .dashboard__insider--receipt-form{
-  background-color: #fff;
+  padding-bottom: 64px;
 }
 
 .page-form--receipt{

client/src/style/pages/Vendors/PageForm.scss

@@ -1,5 +1,18 @@
 @import '../../Base.scss';
 
+body.page-vendor-new,
+body.page-vendor-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
+.dashboard__insider--vendor-form{
+  padding-bottom: 64px;
+}
+
+
 .page-form--vendor {
   $self: '.page-form';
   padding: 20px;

server/src/api/controllers/Purchases/Bills.ts

@@ -136,8 +136,8 @@ export default class BillsController extends BaseController {
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
       check('entries.*.quantity').exists().isNumeric().toFloat(),
-      check('entries.*.discount').optional().isNumeric().toFloat(),
+      check('entries.*.discount').optional({ nullable: true }).isNumeric().toFloat(),
-      check('entries.*.description').optional().trim().escape(),
+      check('entries.*.description').optional({ nullable: true }).trim().escape(),
     ];
   }
 

server/src/api/controllers/Sales/SalesEstimates.ts

@@ -108,10 +108,10 @@ export default class SalesEstimatesController extends BaseController {
       check('entries').exists().isArray({ min: 1 }),
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
-      check('entries.*.description').optional().trim().escape(),
       check('entries.*.quantity').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
-      check('entries.*.discount').optional().isNumeric().toFloat(),
+      check('entries.*.description').optional({ nullable: true }).trim().escape(),
+      check('entries.*.discount').optional({ nullable: true }).isNumeric().toFloat(),
 
       check('note').optional().trim().escape(),
       check('terms_conditions').optional().trim().escape(),

server/src/api/controllers/Sales/SalesInvoices.ts

@@ -106,8 +106,8 @@ export default class SaleInvoicesController extends BaseController {
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
       check('entries.*.quantity').exists().isNumeric().toFloat(),
-      check('entries.*.discount').optional().isNumeric().toFloat(),
+      check('entries.*.discount').optional({ nullable: true }).isNumeric().toFloat(),
-      check('entries.*.description').optional().trim().escape(),
+      check('entries.*.description').optional({ nullable: true }).trim().escape(),
     ];
   }
 

server/src/api/controllers/Sales/SalesReceipts.ts

@@ -88,14 +88,14 @@ export default class SalesReceiptsController extends BaseController{
       check('closed').default(false).isBoolean().toBoolean(),
 
       check('entries').exists().isArray({ min: 1 }),
-      
+
       check('entries.*.id').optional({ nullable: true }).isNumeric().toInt(),
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
-      check('entries.*.description').optional().trim().escape(),
       check('entries.*.quantity').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toInt(),
-      check('entries.*.discount').optional().isNumeric().toInt(),
+      check('entries.*.discount').optional({ nullable: true }).isNumeric().toInt(),
+      check('entries.*.description').optional({ nullable: true }).trim().escape(),
 
       check('receipt_message').optional().trim().escape(),
       check('statement').optional().trim().escape(),