Merge remote-tracking branch 'origin/master'

client/src/components/ContactSelecetList.js

@@ -1,41 +1,46 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { FormattedMessage as T } from 'react-intl';
-import { ListSelect } from 'components';
+import { MenuItem, Button } from '@blueprintjs/core';
-import { MenuItem } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
 export default function ContactSelecetList({
   contactsList,
+  initialContactId,
   selectedContactId,
+  selectedContactType,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
   popoverFill = false,
-  ...restProps
+  disabled = false,
 }) {
-  const [selecetedContact, setSelectedContact] = useState(null);
+  const contacts = useMemo(
-
+    () =>
-  // Filter Contact List
+      contactsList.map((contact) => ({
-  const FilterContacts = (query, contact, index, exactMatch) => {
+        ...contact,
-    const normalizedTitle = contact.display_name.toLowerCase();
+        _id: `${contact.id}_${contact.contact_type}`,
-    const normalizedQuery = query.toLowerCase();
+      })),
-    if (exactMatch) {
+    [contactsList],
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-        0
   );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
     }
-  };
+  }, [selectedContactId, contacts, setSelectedContact]);
- 
-  const onContactSelect = useCallback(
-    (contact) => {
-      setSelectedContact({ ...contact });
-      onContactSelected && onContactSelected(contact);
-    },
-    [setSelectedContact, onContactSelected],
-  );
 
   const handleContactRenderer = useCallback(
     (contact, { handleClick }) => (
@@ -48,21 +53,48 @@ export default function ContactSelecetList({
     [],
   );
 
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  // Filter Contact List
+  const filterContacts = (query, contact, index, exactMatch) => {
+    const normalizedTitle = contact.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
       return (
-    <ListSelect
+        `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-      items={contactsList}
+        0
-      selectedItemProp={'id'}
+      );
-      selectedItem={selectedContactId}
+    }
-      labelProp={'display_name'}
+  };
-      defaultText={defaultSelectText}
+
-      onItemSelect={onContactSelect}
+  return (
-      itemPredicate={FilterContacts}
+    <Select
+      items={contacts}
+      noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={handleContactRenderer}
+      itemPredicate={filterContacts}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={onContactSelect}
       popoverProps={{ minimal: true, usePortal: !popoverFill }}
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
-      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
       />
+    </Select>
   );
 }

client/src/components/ContactsListField.js

@@ -1,57 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import ListSelect from 'components/ListSelect';
-import { FormattedMessage as T } from 'react-intl';
-
-export default function ContactsListField({
-  contacts,
-  onContactSelected,
-  selectedContactId,
-  selectedContactType,
-  defautlSelectText = <T id={'select_contact'} />,
-  popoverFill = false,
-}) {
-  // Contact item of select accounts field.
-  const contactRenderer = useCallback(
-    (item, { handleClick, modifiers, query }) => (
-      <MenuItem text={item.display_name} key={item.id} onClick={handleClick} />
-    ),
-    [],
-  );
-
-  const onContactSelect = useCallback(
-    (contact) => {
-      onContactSelected && onContactSelected(contact);
-    },
-    [onContactSelected],
-  );
-
-  const items = useMemo(
-    () =>
-      contacts.map((contact) => ({
-        ...contact,
-        _id: `${contact.id}_${contact.contact_type}`,
-      })),
-    [contacts],
-  );
-
-  return (
-    <ListSelect
-      items={items}
-      noResults={<MenuItem disabled={true} text="No results." />}
-      itemRenderer={contactRenderer}
-      filterable={true}
-      onItemSelect={onContactSelect}
-      labelProp={'display_name'}
-      selectedItem={`${selectedContactId}_${selectedContactType}`}
-      selectedItemProp={'_id'}
-      defaultText={defautlSelectText}
-      popoverProps={{ minimal: true, usePortal: !popoverFill }}
-      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
-    />
-  );
-}

client/src/components/CurrencySelectList.js

@@ -1,16 +1,17 @@
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
-import { ListSelect } from 'components';
+import { MenuItem, Button } from '@blueprintjs/core';
-import { MenuItem } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
 
 export default function CurrencySelectList({
   currenciesList,
   selectedCurrencyCode,
   defaultSelectText = <T id={'select_currency_code'} />,
   onCurrencySelected,
-  className,
+  popoverFill = false,
-  ...restProps
+  disabled = false,
 }) {
   const [selectedCurrency, setSelectedCurrency] = useState(null);
 
@@ -45,19 +46,37 @@ export default function CurrencySelectList({
     );
   }, []);
 
+  useEffect(() => {
+    if (typeof selectedCurrencyCode !== 'undefined') {
+      const currency = selectedCurrencyCode
+        ? currenciesList.find((a) => a.currency_code === selectedCurrencyCode)
+        : null;
+      setSelectedCurrency(currency);
+    }
+  }, [selectedCurrencyCode, currenciesList, setSelectedCurrency]);
+
   return (
-    <ListSelect
+    <Select
       items={currenciesList}
-      selectedItemProp={'currency_code'}
-      selectedItem={selectedCurrencyCode}
-      labelProp={'currency_code'}
-      defaultText={defaultSelectText}
-      onItemSelect={onCurrencySelect}
-      itemPredicate={filterCurrencies}
       itemRenderer={currencyCodeRenderer}
-      popoverProps={{ minimal: true }}
+      itemPredicate={filterCurrencies}
-      className={classNames('form-group--select-list', className)}
+      onItemSelect={onCurrencySelect}
-      {...restProps}
+      filterable={true}
+      popoverProps={{
+        minimal: true,
+        usePortal: !popoverFill,
+        inline: popoverFill,
+      }}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selectedCurrency ? selectedCurrency.currency_code : defaultSelectText
+        }
       />
+    </Select>
   );
 }

client/src/components/DataTableCells/ContactsListFieldCell.js

@@ -1,20 +1,23 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { FormGroup, Intent, Classes } from "@blueprintjs/core";
+import { FormGroup, Intent, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import ContactsListField from 'components/ContactsListField';
+import { ContactSelecetList } from 'components';
 
 export default function ContactsListCellRenderer({
   column: { id },
   row: { index, original },
   cell: { value },
-  payload: { contacts, updateData, errors }
+  payload: { contacts, updateData, errors },
 }) {
-  const handleContactSelected = useCallback((contact) => {
+  const handleContactSelected = useCallback(
+    (contact) => {
       updateData(index, {
         contact_id: contact.id,
         contact_type: contact.contact_type,
       });
-  }, [updateData, index, id]);
+    },
+    [updateData, index, id],
+  );
 
   const error = errors?.[index]?.[id];
 
@@ -27,8 +30,8 @@ export default function ContactsListCellRenderer({
         Classes.FILL,
       )}
     >
-      <ContactsListField
+      <ContactSelecetList
-        contacts={contacts}
+        contactsList={contacts}
         onContactSelected={handleContactSelected}
         selectedContactId={original?.contact_id}
         selectedContactType={original?.contact_type}

client/src/containers/Accounting/MakeJournalEntriesFooter.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { saveInvoke } from 'utils';
+import { If, Icon } from 'components';
+
+/**
+ * Make Journal floating actions bar.
+ */
+export default function MakeJournalEntriesFooter({
+  isSubmitting,
+  onSubmitClick,
+  onCancelClick,
+  manualJournalId,
+  onSubmitForm,
+  onResetForm,
+  manualJournalPublished,
+}) {
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    onResetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!manualJournalId || !manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'publish_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={manualJournalId && manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -17,6 +17,11 @@ import MakeJournalEntriesField from './MakeJournalEntriesField';
 import MakeJournalNumberWatcher from './MakeJournalNumberWatcher';
 import MakeJournalFormFooter from './MakeJournalFormFooter';
 
+import {
+  CreateMakeJournalFormSchema,
+  EditMakeJournalFormSchema,
+} from './MakeJournalEntriesForm.schema';
+
 import withJournalsActions from 'containers/Accounting/withJournalsActions';
 import withManualJournalDetail from 'containers/Accounting/withManualJournalDetail';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
@@ -83,8 +88,8 @@ function MakeJournalEntriesForm({
   onFormSubmit,
   onCancelForm,
 }) {
+  const isNewMode = !manualJournalId;
   const { formatMessage } = useIntl();
-  const isNewMode = manualJournalId;
 
   const journalNumber = isNewMode
     ? `${journalNumberPrefix}-${journalNextNumber}`

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

@@ -4,7 +4,7 @@ import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   journal_number: Yup.string()
-    .required()
+    // .required()
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
     .label(formatMessage({ id: 'journal_number_' })),
@@ -17,8 +17,9 @@ const Schema = Yup.object().shape({
     .required()
     .label(formatMessage({ id: 'date' })),
   currency_code: Yup.string().max(3),
-  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+  reference: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
   description: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+  status: Yup.boolean(),
   entries: Yup.array().of(
     Yup.object().shape({
       credit: Yup.number().decimalScale(13).nullable(),

client/src/containers/Accounting/ManualJournalsEmptyStatus.js

@@ -21,7 +21,7 @@ export default function ManualJournalsEmptyStatus() {
             intent={Intent.PRIMARY}
             large={true}
             onClick={() => {
-              history.push('/invoices/new');
+              history.push('/make-journal-entry');
             }}
           >
             Make journal

client/src/containers/Customers/CustomerFinancialPanel.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
+import moment from 'moment';
 import {
   MoneyInputGroup,
   InputPrependText,
@@ -27,7 +28,6 @@ function CustomerFinancialPanel({
 
   customerId,
 }) {
-
   return (
     <div className={'tab-panel--financial'}>
       <Row>
@@ -44,6 +44,12 @@ function CustomerFinancialPanel({
               >
                 <DateInput
                   {...momentFormatter('YYYY/MM/DD')}
+                  onChange={(date) => {
+                    form.setFieldValue(
+                      'opening_balance_at',
+                      moment(date).format('YYYY-MM-DD'),
+                    );
+                  }}
                   value={tansformDateValue(value)}
                   popoverProps={{ position: Position.BOTTOM, minimal: true }}
                   disabled={customerId}
@@ -55,7 +61,7 @@ function CustomerFinancialPanel({
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
             {({
-              form: { values },
+              form,
               field,
               field: { value },
               meta: { error, touched },
@@ -70,12 +76,14 @@ function CustomerFinancialPanel({
                 inline={true}
               >
                 <ControlGroup>
-                  <InputPrependText text={values.currency_code} />
+                  <InputPrependText text={form.values.currency_code} />
                   <MoneyInputGroup
                     value={value}
                     inputGroupProps={{ fill: true }}
                     disabled={customerId}
-                    {...field}
+                    onChange={(balance) => {
+                      form.setFieldValue('opening_balance', balance);
+                    }}
                   />
                 </ControlGroup>
               </FormGroup>

client/src/containers/Customers/CustomerFloatingActions.js

@@ -78,6 +78,7 @@ export default function CustomerFloatingActions({
             rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
           />
         </Popover>
+      </ButtonGroup>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -91,7 +92,6 @@ export default function CustomerFloatingActions({
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

client/src/containers/Customers/CustomerFormAfterPrimarySection.js

@@ -61,7 +61,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             label={<T id={'website'} />}
             inline={true}
           >
-            <InputGroup {...field} />
+            <InputGroup placeholder={'http://'} {...field} />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Customers/CustomerTable.js

@@ -137,7 +137,9 @@ const CustomerTable = ({
       {
         id: 'receivable_balance',
         Header: formatMessage({ id: 'receivable_balance' }),
-        accessor: (r) => <Money amount={r.closing_balance} currency={'USD'} />,
+        accessor: (r) => (
+          <Money amount={r.closing_balance} currency={r.currency_code} />
+        ),
         className: 'receivable_balance',
         width: 100,
       },
@@ -189,7 +191,6 @@ const CustomerTable = ({
     customersCurrentViewId === -1,
     customers.length === 0,
   ].every((condition) => condition === true);
-
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
       <LoadingIndicator loading={customersLoading && !isLoadedBefore}>

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -62,7 +62,7 @@ export default function ItemCategoryForm({
           {({ field, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'category_name'} />}
-              labelInfo={FieldRequiredHint}
+              labelInfo={<FieldRequiredHint />}
               className={'form-group--category-name'}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="name" />}

client/src/containers/Expenses/ExpenseDataTable.js

@@ -124,7 +124,7 @@ function ExpensesDataTable({
           text={formatMessage({ id: 'view_details' })}
         />
         <MenuDivider />
-        <If condition={!expense.published}>
+        <If condition={!expense.is_published}>
           <MenuItem
             icon={<Icon icon={'arrow-to-top'} size={16} />}
             text={formatMessage({ id: 'publish_expense' })}
@@ -209,7 +209,7 @@ function ExpensesDataTable({
         id: 'publish',
         Header: formatMessage({ id: 'publish' }),
         accessor: (r) => {
-          return r.published ? (
+          return !!r.is_published ? (
             <Tag minimal={true}>
               <T id={'published'} />
             </Tag>

client/src/containers/Expenses/ExpenseFloatingActions.js

@@ -14,7 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { saveInvoke } from 'utils';
-import { Icon } from 'components';
+import { Icon, If } from 'components';
 
 /**
  * Expense form floating actions.
@@ -25,11 +25,18 @@ export default function ExpenseFloatingFooter({
   onCancelClick,
   onDraftClick,
   onClearClick,
-  onSubmitAndNewClick,
   onSubmitForm,
   onResetForm,
   expense,
+  expensePublished,
 }) {
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
   const handleSubmitPublishAndNewBtnClick = (event) => {
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
@@ -47,6 +54,13 @@ export default function ExpenseFloatingFooter({
     });
   };
 
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
   const handleSubmitDraftAndNewBtnClick = (event) => {
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
@@ -60,31 +74,30 @@ export default function ExpenseFloatingFooter({
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      publish: false,
     });
   };
 
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    onResetForm();
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <ButtonGroup>
       {/* ----------- Save And Publish ----------- */}
+      <If condition={!expense || !expensePublished}>
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-          onClick={(event) => {
+            onClick={handleSubmitPublishBtnClick}
-            saveInvoke(onSubmitClick, event, {
+            text={<T id={'save_publish'} />}
-              redirect: true,
-              publish: true,
-            });
-          }}
-          text={
-            expense && expense.id ? (
-              <T id={'edit'} />
-            ) : (
-              <T id={'save_publish'} />
-            )
-          }
           />
           <Popover
             content={
@@ -108,18 +121,14 @@ export default function ExpenseFloatingFooter({
               rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
             />
           </Popover>
-
+        </ButtonGroup>
         {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
             className={'ml1'}
             type="submit"
-          onClick={(event) => {
+            onClick={handleSubmitDraftBtnClick}
-            saveInvoke(onSubmitClick, event, {
-              redirect: true,
-              publish: false,
-            });
-          }}
             text={<T id={'save_as_draft'} />}
           />
           <Popover
@@ -139,28 +148,55 @@ export default function ExpenseFloatingFooter({
             interactionKind={PopoverInteractionKind.CLICK}
             position={Position.BOTTOM_LEFT}
           >
-          <Button rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
           </Popover>
-
+        </ButtonGroup>
-        {/* ----------- Clear ----------- */}
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={expense && expensePublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
-          onClick={(event) => {
+        onClick={handleClearBtnClick}
-            onResetForm();
+        text={expense ? <T id={'reset'} /> : <T id={'clear'} />}
-            saveInvoke(onClearClick, event);
-          }}
-          text={expense && expense.id ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel ----------- */}
       <Button
         className={'ml1'}
-          onClick={(event) => {
+        onClick={handleCancelBtnClick}
-            saveInvoke(onCancelClick, event);
-          }}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

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

@@ -22,7 +22,7 @@ const Schema = Yup.object().shape({
     .max(DATATYPES_LENGTH.TEXT)
     .nullable()
     .label(formatMessage({ id: 'description' })),
-  publish: Yup.boolean().label(formatMessage({ id: 'publish' })),
+  is_published: Yup.boolean(),
   categories: Yup.array().of(
     Yup.object().shape({
       index: Yup.number().min(1).max(DATATYPES_LENGTH.INT_10).nullable(),

client/src/containers/Items/ItemForm.schema.js

@@ -17,14 +17,14 @@ const Schema = Yup.object().shape({
     .max(DATATYPES_LENGTH.STRING)
     .label(formatMessage({ id: 'item_type_' })),
   code: Yup.string().trim().min(0).max(DATATYPES_LENGTH.STRING),
-  cost_price: Yup.number().when(['purchasable'], {
+  cost_price: Yup.number().min(0).when(['purchasable'], {
     is: true,
     then: Yup.number()
       .required()
       .label(formatMessage({ id: 'cost_price_' })),
     otherwise: Yup.number().nullable(true),
   }),
-  sell_price: Yup.number().when(['sellable'], {
+  sell_price: Yup.number().min(0).when(['sellable'], {
     is: true,
     then: Yup.number()
       .required()

client/src/containers/Purchases/Bill/BillFloatingActions.js

@@ -1,62 +1,201 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
 import { saveInvoke } from 'utils';
+import { If, Icon } from 'components';
 
+/**
+ * Bill floating actions bar.
+ */
 export default function BillFloatingActions({
   isSubmitting,
   onSubmitClick,
-  onSubmitAndNewClick,
   onCancelClick,
   onClearClick,
   billId,
+  billPublished,
 }) {
-  return (
+  const { resetForm, submitForm } = useFormikContext();
-    <div className={'form__floating-footer'}>
+  const handleSubmitPublishBtnClick = (event) => {
-      <Button
+    saveInvoke(onSubmitClick, event, {
-        disabled={isSubmitting}
+      redirect: true,
-        loading={isSubmitting}
+      publish: true,
-        intent={Intent.PRIMARY}
+    });
-        type="submit"
+  };
-        onClick={(event) => {
-          saveInvoke(onSubmitClick, event);
-        }}
-      >
-        {billId ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
 
-      <Button
+  const handleSubmitPublishAndNewBtnClick = (event) => {
-        disabled={isSubmitting}
+    submitForm();
-        loading={isSubmitting}
+    saveInvoke(onSubmitClick, event, {
-        intent={Intent.PRIMARY}
+      redirect: false,
-        className={'ml1'}
+      publish: true,
-        type="submit"
+      resetForm: true,
-        onClick={(event) => {
+    });
-          saveInvoke(onSubmitAndNewClick, event);
+  };
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
 
-      <Button
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
-        className={'ml1'}
+    submitForm();
-        disabled={isSubmitting}
+    saveInvoke(onSubmitClick, event, {
-        onClick={(event) => {
+      redirect: false,
-          saveInvoke(onClearClick, event);
+      publish: true,
-        }}
+    });
-      >
+  };
-        <T id={'clear'} />
-      </Button>
 
-      <Button
+  const handleSubmitDraftBtnClick = (event) => {
-        className={'ml1'}
+    saveInvoke(onSubmitClick, event, {
-        type="submit"
+      redirect: true,
-        onClick={(event) => {
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
     saveInvoke(onCancelClick, event);
-        }}
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!billId || !billPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'publish_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
           >
-        <T id={'close'} />
+            <Button
-      </Button>
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={billId && billPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={billId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }

client/src/containers/Purchases/Bill/BillForm.js

@@ -46,6 +46,9 @@ const defaultInitialValues = {
   entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)],
 };
 
+/**
+ * Bill form.
+ */
 function BillForm({
   //#WithMedia
   requestSubmitMedia,
@@ -75,12 +78,12 @@ function BillForm({
   const isNewMode = !billId;
 
   useEffect(() => {
-    if (bill && bill.id) {
+    if (!isNewMode) {
       changePageTitle(formatMessage({ id: 'edit_bill' }));
     } else {
       changePageTitle(formatMessage({ id: 'new_bill' }));
     }
-  }, [changePageTitle, bill, formatMessage]);
+  }, [changePageTitle, isNewMode, formatMessage]);
 
   // Initial values in create and edit mode.
   const initialValues = useMemo(
@@ -146,8 +149,8 @@ function BillForm({
         message: formatMessage(
           {
             id: isNewMode
-              ? 'the_bill_has_been_successfully_created'
+              ? 'the_bill_has_been_successfully_created' :
-              : 'the_bill_has_been_successfully_edited',
+              'the_bill_has_been_successfully_edited',
           },
           { number: values.bill_number },
         ),
@@ -155,11 +158,13 @@ function BillForm({
       });
       setSubmitting(false);
 
-      resetForm();
       changePageSubtitle('');
 
       if (submitPayload.redirect) {
-        history.go('/bills');
+        history.push('/bills');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
       }
     };
     // Handle the request error.
@@ -167,7 +172,7 @@ function BillForm({
       handleErrors(errors, { setErrors });
       setSubmitting(false);
     };
-    if (isNewMode) {
+    if (bill && bill.id) {
       requestEditBill(bill.id, form).then(onSuccess).catch(onError);
     } else {
       requestSubmitBill(form).then(onSuccess).catch(onError);
@@ -190,9 +195,12 @@ function BillForm({
     [changePageSubtitle],
   );
 
-  const handleSubmitClick = useCallback(() => {
+  const handleSubmitClick = useCallback(
-    setSubmitPayload({ redirect: true });
+    (event, payload) => {
-  }, [setSubmitPayload]);
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
 
   const handleCancelClick = useCallback(() => {
     history.goBack();
@@ -209,7 +217,7 @@ function BillForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting, values }) => (
+        {({ isSubmitting }) => (
           <Form>
             <BillFormHeader onBillNumberChanged={handleBillNumberChanged} />
             <BillFormBody defaultBill={defaultBill} />
@@ -220,8 +228,9 @@ function BillForm({
             <BillFloatingActions
               isSubmitting={isSubmitting}
               billId={billId}
+              billPublished={true}
               onSubmitClick={handleSubmitClick}
-              onCancelForm={handleCancelClick}
+              onCancelClick={handleCancelClick}
             />
           </Form>
         )}

client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js

@@ -1,9 +1,19 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-
 import { CLASSES } from 'common/classes';
+import { saveInvoke } from 'utils';
+import { Icon } from 'components';
 
 /**
  * Payment made floating actions bar.
@@ -13,56 +23,85 @@ export default function PaymentMadeFloatingActions({
   onSubmitClick,
   onCancelClick,
   onClearBtnClick,
+  onSubmitForm,
+  paymentMadeId,
 }) {
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+    });
+  };
+
   const handleClearBtnClick = (event) => {
     onClearBtnClick && onClearBtnClick(event);
   };
 
-  const handleSubmitClick = (event) => {
+  const handleCancelBtnClick = (event) => {
-    onSubmitClick && onSubmitClick(event, { redirect: true });
-  };
-
-  const handleCancelClick = (event) => {
     onCancelClick && onCancelClick(event);
+    saveInvoke(onCancelClick, event);
   };
 
+  const handleSubmitAndNewClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+    });
+  };
+
+  const handleSubmitContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
         <Button
           disabled={isSubmitting}
           intent={Intent.PRIMARY}
           type="submit"
-        onClick={handleSubmitClick}
+          onClick={handleSubmitBtnClick}
+          text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
         >
-        <T id={'save_send'} />
-      </Button>
-
           <Button
-        disabled={isSubmitting}
             intent={Intent.PRIMARY}
-        className={'ml1'}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-        name={'save'}
+          />
-        type="submit"
+        </Popover>
-        onClick={handleSubmitClick}
+      </ButtonGroup>
-      >
+      {/* ----------- Clear & Reset----------- */}
-        <T id={'save'} />
-      </Button>
-
       <Button
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-      >
+        text={paymentMadeId ? <T id={'reset'} /> : <T id={'clear'} />}
-        <T id={'clear'} />
+      />
-      </Button>
+      {/* ----------- Cancel  ----------- */}
-
       <Button
         className={'ml1'}
-        type="submit"
+        onClick={handleCancelBtnClick}
-        onClick={handleCancelClick}
+        text={<T id={'cancel'} />}
-      >
+      />
-        <T id={'close'} />
-      </Button>
     </div>
   );
 }

client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js

@@ -81,6 +81,7 @@ function PaymentMadeForm({
   const [clearLinesAlert, setClearLinesAlert] = useState(false);
   const [clearFormAlert, setClearFormAlert] = useState(false);
   const [fullAmount, setFullAmount] = useState(null);
+  const [submitPayload, setSubmitPayload] = useState({});
 
   const [localPaymentEntries, setLocalPaymentEntries] = useState(
     paymentMadeEntries,
@@ -155,8 +156,13 @@ function PaymentMadeForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
+      // resetForm();
       changePageSubtitle('');
+
+      if (submitPayload.redirect) {
+        history.push('/payment-mades');
+      }
+
     };
 
     const onError = (errors) => {
@@ -187,6 +193,7 @@ function PaymentMadeForm({
     values,
     handleSubmit,
     isSubmitting,
+    submitForm,
   } = useFormik({
     validationSchema,
     initialValues,
@@ -300,6 +307,14 @@ function PaymentMadeForm({
     [values.entries],
   );
 
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
+
+
   return (
     <div
       className={classNames(
@@ -379,8 +394,11 @@ function PaymentMadeForm({
 
         <PaymentMadeFloatingActions
           isSubmitting={isSubmitting}
+          paymentMadeId={paymentMadeId}
+          onSubmitClick={handleSubmitClick}
           onCancelClick={handleCancelClick}
           onClearBtnClick={handleClearBtnClick}
+          onSubmitForm={submitForm}
         />
 
         {/* <Dragzone

client/src/containers/Purchases/PaymentMades/PaymentMadeList.js

@@ -87,7 +87,7 @@ function PaymentMadeList({
   }, [deletePaymentMade, requestDeletePaymentMade, formatMessage]);
 
   const handleEditPaymentMade = useCallback((payment) => {
-    history.push(`/payment-made/${payment.id}/edit`);
+    history.push(`/payment-mades/${payment.id}/edit`);
   });
 
   // Calculates the selected rows count.

client/src/containers/Purchases/PaymentMades/PaymentMadesEmptyStatus.js

@@ -21,7 +21,7 @@ export default function PaymentMadesEmptyStatus() {
             intent={Intent.PRIMARY}
             large={true}
             onClick={() => {
-              history.push('/payment-made/new');
+              history.push('/payment-mades/new');
             }}
           >
             New bill payment

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

@@ -14,7 +14,7 @@ import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { saveInvoke } from 'utils';
-import { Icon } from 'components';
+import { If, Icon } from 'components';
 
 /**
  * Estimate floating actions bar.
@@ -25,12 +25,55 @@ export default function EstimateFloatingActions({
   onCancelClick,
   onClearClick,
   estimateId,
+  estimatePublished,
 }) {
   const { resetForm, submitForm } = useFormikContext();
 
-  const handleSubmitBtnClick = (event) => {
+  const handleSubmitPublishBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
+      publish: true
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
     });
   };
 
@@ -43,30 +86,28 @@ export default function EstimateFloatingActions({
     resetForm();
   };
 
-  const handleSubmitAndNewClick = (event) => {
-    submitForm();
-    saveInvoke(onSubmitClick, event, {
-      redirect: false,
-    });
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!estimateId || !estimatePublished}>
         <ButtonGroup>
-        {/* ----------- Save and New ----------- */}
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-          onClick={handleSubmitBtnClick}
+            onClick={handleSubmitPublishBtnClick}
-          text={estimateId ? <T id={'edit'} /> : <T id={'save'} />}
+            text={<T id={'save_publish'} />}
           />
           <Popover
             content={
               <Menu>
                 <MenuItem
-                text={<T id={'save_and_new'} />}
+                  text={<T id={'publish_and_new'} />}
-                onClick={handleSubmitAndNewClick}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
                 />
               </Menu>
             }
@@ -79,6 +120,70 @@ export default function EstimateFloatingActions({
               rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
             />
           </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={estimateId && estimatePublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -92,7 +197,6 @@ export default function EstimateFloatingActions({
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

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

@@ -105,7 +105,7 @@ const EstimateForm = ({
   useEffect(() => {
     const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
 
-    if (isNewMode) {
+    if (!isNewMode) {
       changePageTitle(formatMessage({ id: 'edit_estimate' }));
     } else {
       changePageTitle(formatMessage({ id: 'new_estimate' }));
@@ -199,11 +199,13 @@ const EstimateForm = ({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
 
       if (submitPayload.redirect) {
         history.push('/estimates');
       }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
     };
 
     const onError = (errors) => {
@@ -267,8 +269,8 @@ const EstimateForm = ({
               estimateId={estimateId}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
+              estimatePublished={true}
             />
-      
           </Form>
         )}
       </Formik>

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

@@ -14,7 +14,6 @@ const Schema = Yup.object().shape({
     .required()
     .label(formatMessage({ id: 'expiration_date_' })),
   estimate_number: Yup.string()
-    .nullable()
     .max(DATATYPES_LENGTH.STRING)
     .label(formatMessage({ id: 'estimate_number_' })),
   reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),

client/src/containers/Sales/Invoice/InvoiceFloatingActions.js

@@ -14,8 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { saveInvoke } from 'utils';
-import { Icon } from 'components';
+import { If, Icon } from 'components';
-
 
 /**
  * Invoice floating actions bar.
@@ -26,76 +25,78 @@ export default function InvoiceFloatingActions({
   onCancelClick,
   onClearClick,
   invoice,
+  invoicePublished,
 }) {
   const { resetForm, submitForm } = useFormikContext();
 
-  const handleSubmitPublishAndNewBtnClick = useCallback(
+  const handleSubmitPublishBtnClick = (event) => {
-    (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
       publish: true,
       resetForm: true,
     });
-    },
+  };
-    [submitForm],
-  );
 
-  const handleSubmitPublishContinueEditingBtnClick = useCallback(
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
-    (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
       publish: true,
     });
-    },
+  };
-    [submitForm],
-  );
 
-  const handleSubmitDraftAndNewBtnClick = useCallback(
+  const handleSubmitDraftBtnClick = (event) => {
-    (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
       publish: false,
       resetForm: true,
     });
-    },
+  };
-    [submitForm],
-  );
 
-  const handleSubmitDraftContinueEditingBtnClick = useCallback(
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-        publish: true,
+      publish: false,
     });
-    },
+  };
-    [submitForm],
+
-  );
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <ButtonGroup>
       {/* ----------- Save And Publish ----------- */}
+      <If condition={!invoice || !invoicePublished}>
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-          onClick={(event) => {
+            onClick={handleSubmitPublishBtnClick}
-            saveInvoke(onSubmitClick, event, {
+            text={<T id={'save_publish'} />}
-              redirect: true,
-              publish: true,
-            });
-          }}
-          text={
-            invoice && invoice.id ? (
-              <T id={'edit'} />
-            ) : (
-              <T id={'save_publish'} />
-            )
-          }
           />
           <Popover
             content={
@@ -119,18 +120,14 @@ export default function InvoiceFloatingActions({
               rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
             />
           </Popover>
-
+        </ButtonGroup>
         {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
             className={'ml1'}
             type="submit"
-          onClick={(event) => {
+            onClick={handleSubmitDraftBtnClick}
-            saveInvoke(onSubmitClick, event, {
-              redirect: true,
-              publish: false,
-            });
-          }}
             text={<T id={'save_as_draft'} />}
           />
           <Popover
@@ -150,27 +147,56 @@ export default function InvoiceFloatingActions({
             interactionKind={PopoverInteractionKind.CLICK}
             position={Position.BOTTOM_LEFT}
           >
-          <Button rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
           </Popover>
-        {/* ----------- Clear ----------- */}
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={invoice && invoicePublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+
+      {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
-          onClick={(event) => {
+        onClick={handleClearBtnClick}
-            resetForm();
+        text={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
-            saveInvoke(onClearClick, event);
-          }}
-          text={invoice && invoice.id ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel ----------- */}
       <Button
         className={'ml1'}
-          onClick={(event) => {
+        onClick={handleCancelBtnClick}
-            saveInvoke(onCancelClick, event);
-          }}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

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

@@ -186,7 +186,6 @@ function InvoiceForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
 
       if (submitPayload.redirect) {
         history.push('/invoices');
@@ -260,9 +259,10 @@ function InvoiceForm({
             <InvoiceFormFooter />
             <InvoiceFloatingActions
               isSubmitting={isSubmitting}
-              invoice={invoice}
+              invoice={invoiceId}
               onCancelClick={handleCancelClick}
               onSubmitClick={handleSubmitClick}
+              invoicePublished={true}
             />
           </Form>
         )}

client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js

@@ -46,19 +46,28 @@ export default function PaymentReceiveFormFloatingActions({
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
     });
   };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <ButtonGroup>
       {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
         <Button
           disabled={isSubmitting}
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
-          text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save_and_send'} />}
+          text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
           content={
@@ -67,6 +76,10 @@ export default function PaymentReceiveFormFloatingActions({
                 text={<T id={'save_and_new'} />}
                 onClick={handleSubmitAndNewClick}
               />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitContinueEditingBtnClick}
+              />
             </Menu>
           }
           minimal={true}
@@ -78,6 +91,7 @@ export default function PaymentReceiveFormFloatingActions({
             rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
           />
         </Popover>
+      </ButtonGroup>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -91,7 +105,6 @@ export default function PaymentReceiveFormFloatingActions({
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

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

@@ -190,11 +190,13 @@ function PaymentReceiveForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
 
       if (submitPayload.redirect) {
         history.push('/payment-receives');
       }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
     };
     // Handle request response errors.
     const onError = (errors) => {

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

@@ -201,11 +201,13 @@ function ReceiptForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
 
       if (submitPayload.redirect) {
         history.push('/receipts');
       }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
     };
 
     // Handle the request error.
@@ -268,6 +270,7 @@ function ReceiptForm({
             <ReceiptFormFloatingActions
               isSubmitting={isSubmitting}
               receiptId={receiptId}
+              receiptPublished={true}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
             />

client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js

@@ -14,7 +14,7 @@ import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { saveInvoke } from 'utils';
-import { Icon } from 'components';
+import { If, Icon } from 'components';
 
 /**
  * Receipt floating actions bar.
@@ -22,21 +22,60 @@ import { Icon } from 'components';
 export default function ReceiptFormFloatingActions({
   isSubmitting,
   receiptId,
+  receiptPublished,
   onSubmitClick,
   onCancelClick,
   onClearClick,
 }) {
   const { resetForm, submitForm } = useFormikContext();
 
-  const handleSubmitAndNewClick = useCallback(
+  const handleSubmitPublishBtnClick = (event) => {
-    (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
+      publish: true,
+      resetForm: true,
     });
-    },
+  };
-    [submitForm],
+
-  );
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+    });
+  };
 
   const handleCancelBtnClick = (event) => {
     saveInvoke(onCancelClick, event);
@@ -49,25 +88,26 @@ export default function ReceiptFormFloatingActions({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!receiptId || !receiptPublished}>
         <ButtonGroup>
-        {/* ----------- Save and New ----------- */}
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-          onClick={(event) => {
+            onClick={handleSubmitPublishBtnClick}
-            saveInvoke(onSubmitClick, event, {
+            text={<T id={'save_publish'} />}
-              redirect: true,
-            });
-          }}
-          text={receiptId ? <T id={'edit'} /> : <T id={'save'} />}
           />
           <Popover
             content={
               <Menu>
                 <MenuItem
-                text={<T id={'save_and_new'} />}
+                  text={<T id={'publish_and_new'} />}
-                onClick={handleSubmitAndNewClick}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
                 />
               </Menu>
             }
@@ -80,6 +120,69 @@ export default function ReceiptFormFloatingActions({
               rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
             />
           </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={receiptId && receiptPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -93,7 +196,6 @@ export default function ReceiptFormFloatingActions({
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

client/src/containers/Vendors/VendorFinanicalPanelTab.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
+import moment from 'moment';
 import {
   MoneyInputGroup,
   InputPrependText,
@@ -47,6 +48,12 @@ function VendorFinanicalPanelTab({
               >
                 <DateInput
                   {...momentFormatter('YYYY/MM/DD')}
+                  onChange={(date) => {
+                    form.setFieldValue(
+                      'opening_balance_at',
+                      moment(date).format('YYYY-MM-DD'),
+                    );
+                  }}
                   value={tansformDateValue(value)}
                   popoverProps={{ position: Position.BOTTOM, minimal: true }}
                   disabled={vendorId}
@@ -56,12 +63,7 @@ function VendorFinanicalPanelTab({
           </FastField>
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
-            {({
+            {({ form, field, field: { value }, meta: { error, touched } }) => (
-              form: { values },
-              field,
-              field: { value },
-              meta: { error, touched },
-            }) => (
               <FormGroup
                 label={<T id={'opening_balance'} />}
                 className={classNames(
@@ -72,14 +74,15 @@ function VendorFinanicalPanelTab({
                 inline={true}
               >
                 <ControlGroup>
-                  <InputPrependText text={values.currency_code } />
+                  <InputPrependText text={form.values.currency_code} />
                   <MoneyInputGroup
                     value={value}
-                    onChange={field.onChange}
-                    prefix={'$'}
                     inputGroupProps={{
                       fill: true,
-                      ...field,
+                      // ...field,
+                    }}
+                    onChange={(balance) => {
+                      form.setFieldValue('opening_balance', balance);
                     }}
                     disabled={vendorId}
                   />

client/src/containers/Vendors/VendorFloatingActions.js

@@ -79,6 +79,7 @@ export default function VendorFloatingActions({
             rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
           />
         </Popover>
+      </ButtonGroup>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -92,7 +93,6 @@ export default function VendorFloatingActions({
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-      </ButtonGroup>
     </div>
   );
 }

client/src/containers/Vendors/VendorFormAfterPrimarySection.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 
-
 /**
  * Vendor form  after primary section.
  */
@@ -66,7 +65,7 @@ function VendorFormAfterPrimarySection() {
             label={<T id={'website'} />}
             inline={true}
           >
-            <InputGroup {...field} />
+            <InputGroup placeholder={'http://'} {...field} />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Vendors/VendorsTable.js

@@ -32,6 +32,7 @@ function VendorsTable({
   vendorsPageination,
   vendorTableQuery,
   vendorItems,
+  vendorsCurrentViewId,
 
   // #withVendorsActions
   addVendorsTableQueries,
@@ -135,7 +136,9 @@ function VendorsTable({
       {
         id: 'receivable_balance',
         Header: formatMessage({ id: 'receivable_balance' }),
-        accessor: (r) => <Money amount={r.closing_balance} currency={'USD'} />,
+        accessor: (r) => (
+          <Money amount={r.closing_balance} currency={r.currency_code} />
+        ),
         className: 'receivable_balance',
         width: 100,
       },
@@ -182,6 +185,10 @@ function VendorsTable({
       onEditVendor,
       onDeleteVendor,
     });
+  const showEmptyStatus = [
+    vendorsCurrentViewId === -1,
+    vendorItems.length === 0,
+  ].every((condition) => condition === true);
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -190,7 +197,7 @@ function VendorsTable({
         mount={false}
       >
         <Choose>
-          <Choose.When condition={true}>
+          <Choose.When condition={showEmptyStatus}>
             <VendorsEmptyStatus />
           </Choose.When>
 
@@ -228,11 +235,13 @@ export default compose(
       vendorsLoading,
       vendorTableQuery,
       vendorsPageination,
+      vendorsCurrentViewId,
     }) => ({
       vendorItems,
       vendorsLoading,
       vendorsPageination,
       vendorTableQuery,
+      vendorsCurrentViewId,
     }),
   ),
   withVendorsActions,

client/src/containers/Vendors/withVendors.js

@@ -5,11 +5,13 @@ import {
   getVendorCurrentPageFactory,
   getVendorsTableQuery,
   getVendorsPaginationMetaFactory,
+  getVendorsCurrentViewIdFactory,
 } from 'store/vendors/vendors.selectors';
 
 export default (mapState) => {
   const getVendorsItems = getVendorCurrentPageFactory();
   const getVendorsPaginationMeta = getVendorsPaginationMetaFactory();
+  const getVendorsCurrentViewId = getVendorsCurrentViewIdFactory();
   const mapStateToProps = (state, props) => {
     const query = getVendorsTableQuery(state, props);
 
@@ -20,6 +22,7 @@ export default (mapState) => {
       vendorTableQuery: query,
       vendorsPageination: getVendorsPaginationMeta(state, props, query),
       vendorsLoading: state.vendors.loading,
+      vendorsCurrentViewId: getVendorsCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/store/vendors/vendors.selectors.js

@@ -10,6 +10,8 @@ const vendorByIdSelector = (state, props) =>
   state.vendors.items[props.vendorId];
 const vendorsItemsSelector = (state) => state.vendors.items;
 
+const vendorsCurrentViewIdSelector = (state) => state.vendors.currentViewId;
+
 const vendorsPaginationSelector = (state, props) => {
   const viewId = state.vendors.currentViewId;
   return state.vendors.views?.[viewId];
@@ -57,3 +59,8 @@ export const getVendorByIdFactory = () =>
   createSelector(vendorByIdSelector, (vendor) => {
     return vendor;
   });
+
+  export const getVendorsCurrentViewIdFactory = () =>
+  createSelector(vendorsCurrentViewIdSelector, (currentViewId) => {
+    return currentViewId;
+  });

server/src/models/Expense.js

@@ -1,28 +1,28 @@
-import { Model } from 'objection';
+import { Model } from "objection";
-import TenantModel from 'models/TenantModel';
+import TenantModel from "models/TenantModel";
-import { viewRolesBuilder } from 'lib/ViewRolesBuilder';
+import { viewRolesBuilder } from "lib/ViewRolesBuilder";
-import Media from './Media';
+import Media from "./Media";
 
 export default class Expense extends TenantModel {
   /**
    * Table name
    */
   static get tableName() {
-    return 'expenses_transactions';
+    return "expenses_transactions";
   }
 
   /**
    * Account transaction reference type.
    */
   static get referenceType() {
-    return 'Expense';
+    return "Expense";
   }
 
   /**
    * Model timestamps.
    */
   get timestamps() {
-    return ['createdAt', 'updatedAt'];
+    return ["createdAt", "updatedAt"];
   }
 
   /**
@@ -35,10 +35,17 @@ export default class Expense extends TenantModel {
   /**
    *
    */
-  static get media () {
+  static get media() {
     return true;
   }
   
+  static get virtualAttributes() {
+    return ["isPublished"];
+  }
+  isPublished() {
+    return Boolean(this.publishedAt);
+  }
+
   /**
    * Model modifiers.
    */
@@ -46,28 +53,28 @@ export default class Expense extends TenantModel {
     return {
       filterByDateRange(query, startDate, endDate) {
         if (startDate) {
-          query.where('date', '>=', startDate);
+          query.where("date", ">=", startDate);
         }
         if (endDate) {
-          query.where('date', '<=', endDate);
+          query.where("date", "<=", endDate);
         }
       },
       filterByAmountRange(query, from, to) {
         if (from) {
-          query.where('amount', '>=', from);
+          query.where("amount", ">=", from);
         }
         if (to) {
-          query.where('amount', '<=', to);
+          query.where("amount", "<=", to);
         }
       },
       filterByExpenseAccount(query, accountId) {
         if (accountId) {
-          query.where('expense_account_id', accountId);
+          query.where("expense_account_id", accountId);
         }
       },
       filterByPaymentAccount(query, accountId) {
         if (accountId) {
-          query.where('payment_account_id', accountId);
+          query.where("payment_account_id", accountId);
         }
       },
       viewRolesBuilder(query, conditionals, expression) {
@@ -80,41 +87,41 @@ export default class Expense extends TenantModel {
    * Relationship mapping.
    */
   static get relationMappings() {
-    const Account = require('models/Account');
+    const Account = require("models/Account");
-    const ExpenseCategory = require('models/ExpenseCategory');
+    const ExpenseCategory = require("models/ExpenseCategory");
-    const Media = require('models/Media');
+    const Media = require("models/Media");
 
     return {
       paymentAccount: {
         relation: Model.BelongsToOneRelation,
         modelClass: Account.default,
         join: {
-          from: 'expenses_transactions.paymentAccountId',
+          from: "expenses_transactions.paymentAccountId",
-          to: 'accounts.id',
+          to: "accounts.id",
         },
       },
       categories: {
         relation: Model.HasManyRelation,
         modelClass: ExpenseCategory.default,
         join: {
-          from: 'expenses_transactions.id',
+          from: "expenses_transactions.id",
-          to: 'expense_transaction_categories.expenseId',
+          to: "expense_transaction_categories.expenseId",
         },
       },
       media: {
         relation: Model.ManyToManyRelation,
         modelClass: Media.default,
         join: {
-          from: 'expenses_transactions.id',
+          from: "expenses_transactions.id",
           through: {
-            from: 'media_links.model_id',
+            from: "media_links.model_id",
-            to: 'media_links.media_id',
+            to: "media_links.media_id",
           },
-          to: 'media.id',
+          to: "media.id",
         },
         filter(query) {
-          query.where('model_name', 'Expense');
+          query.where("model_name", "Expense");
-        }
+        },
       },
     };
   }
@@ -125,51 +132,50 @@ export default class Expense extends TenantModel {
   static get fields() {
     return {
       payment_date: {
-        label: 'Payment date',
+        label: "Payment date",
-        column: 'payment_date',
+        column: "payment_date",
-        columnType: 'date',
+        columnType: "date",
       },
       payment_account: {
-        label: 'Payment account',
+        label: "Payment account",
-        column: 'payment_account_id',
+        column: "payment_account_id",
-        relation: 'accounts.id',
+        relation: "accounts.id",
-        optionsResource: 'account',
+        optionsResource: "account",
       },
       amount: {
-        label: 'Amount',
+        label: "Amount",
-        column: 'total_amount',
+        column: "total_amount",
-        columnType: 'number'
+        columnType: "number",
       },
       currency_code: {
-        label: 'Currency',
+        label: "Currency",
-        column: 'currency_code',
+        column: "currency_code",
-        optionsResource: 'currency',
+        optionsResource: "currency",
       },
       reference_no: {
-        label: 'Reference No.',
+        label: "Reference No.",
-        column: 'reference_no',
+        column: "reference_no",
-        columnType: 'string',
+        columnType: "string",
       },
       description: {
-        label: 'Description',
+        label: "Description",
-        column: 'description',
+        column: "description",
-        columnType: 'string',
+        columnType: "string",
       },
       published: {
-        label: 'Published',
+        label: "Published",
-        column: 'published',
+        column: "published",
-
       },
       user: {
-        label: 'User',
+        label: "User",
-        column: 'user_id',
+        column: "user_id",
-        relation: 'users.id',
+        relation: "users.id",
-        relationColumn: 'users.id',
+        relationColumn: "users.id",
       },
       created_at: {
-        label: 'Created at',
+        label: "Created at",
-        column: 'created_at',
+        column: "created_at",
-        columnType: 'date',
+        columnType: "date",
       },
     };
   }