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

client/src/containers/Items/ItemsDataTable.js

@@ -12,7 +12,14 @@ import {
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { Icon, DataTable, Money, LoadingIndicator, Choose } from 'components';
+import {
+  Icon,
+  DataTable,
+  Money,
+  LoadingIndicator,
+  Choose,
+  If,
+} from 'components';
 import ItemsEmptyStatus from './ItemsEmptyStatus';
 import { useIsValuePassed } from 'hooks';
 import { CLASSES } from 'common/classes';
@@ -36,6 +43,8 @@ function ItemsDataTable({
   // props
   onEditItem,
   onDeleteItem,
+  onInactiveItem,
+  onActivateItem,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -83,6 +92,20 @@ function ItemsDataTable({
           text={formatMessage({ id: 'edit_item' })}
           onClick={handleEditItem(item)}
         />
+        <If condition={item.active}>
+          <MenuItem
+            text={formatMessage({ id: 'inactivate_item' })}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={() => onInactiveItem(item)}
+          />
+        </If>
+        <If condition={!item.active}>
+          <MenuItem
+            text={formatMessage({ id: 'activate_item' })}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={() => onActivateItem(item)}
+          />
+        </If>
         <MenuItem
           text={formatMessage({ id: 'delete_item' })}
           icon={<Icon icon="trash-16" iconSize={16} />}
@@ -91,7 +114,13 @@ function ItemsDataTable({
         />
       </Menu>
     ),
-    [handleEditItem, handleDeleteItem, formatMessage],
+    [
+      handleEditItem,
+      handleDeleteItem,
+      onInactiveItem,
+      onActivateItem,
+      formatMessage,
+    ],
   );
 
   const handleRowContextMenu = useCallback(
@@ -148,11 +177,11 @@ function ItemsDataTable({
       {
         Header: formatMessage({ id: 'cost_price' }),
         accessor: (row) =>
-        !isBlank(row.sell_price) ? (
+          !isBlank(row.sell_price) ? (
-          <Money amount={row.cost_price} currency={'USD'} />
+            <Money amount={row.cost_price} currency={'USD'} />
-        ) : (
+          ) : (
-          ''
+            ''
-        ),
+          ),
         className: 'cost-price',
         width: 150,
       },
@@ -196,6 +225,12 @@ function ItemsDataTable({
     [onSelectedRowsChange],
   );
 
+  const rowClassNames = (row) => {
+    return {
+      inactive: !row.original.active,
+    };
+  };
+
   const showEmptyStatus = [
     itemsCurrentPage.length === 0,
     itemsCurrentViewId === -1,
@@ -221,6 +256,7 @@ function ItemsDataTable({
               rowContextMenu={handleRowContextMenu}
               expandable={false}
               sticky={true}
+              rowClassNames={rowClassNames}
               pagination={true}
               pagesCount={itemsPagination.pagesCount}
               autoResetSortBy={false}

client/src/containers/Items/ItemsList.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 import { Intent, Alert } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -38,10 +38,14 @@ function ItemsList({
   // #withItemsActions
   requestDeleteItem,
   requestFetchItems,
+  requestInactiveItem,
+  requestActivateItem,
   addItemsTableQueries,
   requestDeleteBulkItems,
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
+  const [inactiveItem, setInactiveItem] = useState(false);
+  const [activateItem, setActivateItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const [bulkDelete, setBulkDelete] = useState(false);
 
@@ -65,9 +69,8 @@ function ItemsList({
   );
 
   // Handle fetching the items table based on the given query.
-  const fetchItems = useQuery(
+  const fetchItems = useQuery(['items-table', itemsTableQuery], (key, _query) =>
-    ['items-table', itemsTableQuery],
+    requestFetchItems({ ..._query }),
-    (key, _query) => requestFetchItems({ ..._query }),
   );
 
   // Handle click delete item.
@@ -92,33 +95,36 @@ function ItemsList({
 
   // handle confirm delete item.
   const handleConfirmDeleteItem = useCallback(() => {
-    requestDeleteItem(deleteItem.id).then(() => {
+    requestDeleteItem(deleteItem.id)
-      AppToaster.show({
+      .then(() => {
-        message: formatMessage({
-          id: 'the_item_has_been_successfully_deleted',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeleteItem(false);
-    }).catch(({ errors }) => {
-      if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
         AppToaster.show({
           message: formatMessage({
-            id: 'the_item_has_associated_transactions',
+            id: 'the_item_has_been_successfully_deleted',
           }),
-          intent: Intent.DANGER,
+          intent: Intent.SUCCESS,
         });
-      }
+        setDeleteItem(false);
-      setDeleteItem(false);
+      })
-    });
+      .catch(({ errors }) => {
+        if (
+          errors.find(
+            (error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
+          )
+        ) {
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_item_has_associated_transactions',
+            }),
+            intent: Intent.DANGER,
+          });
+        }
+        setDeleteItem(false);
+      });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
-  const handleFetchData = useCallback(
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
-    ({ pageIndex, pageSize, sortBy }) => {
+    addItemsTableQueries,
-     
+  ]);
-    },
-    [addItemsTableQueries],
-  );
 
   // Handle filter change to re-fetch the items.
   const handleFilterChanged = useCallback(
@@ -174,6 +180,62 @@ function ItemsList({
     setBulkDelete(false);
   }, []);
 
+  // Handle cancel/confirm item inactive.
+  const handleInactiveItem = useCallback((item) => {
+    setInactiveItem(item);
+  }, []);
+
+  // Handle cancel inactive item alert.
+  const handleCancelInactiveItem = useCallback(() => {
+    setInactiveItem(false);
+  }, []);
+
+  // Handle confirm item Inactive.
+  const handleConfirmItemInactive = useCallback(() => {
+    requestInactiveItem(inactiveItem.id)
+      .then(() => {
+        setInactiveItem(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_successfully_inactivated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        setInactiveItem(false);
+      });
+  }, [inactiveItem, requestInactiveItem, formatMessage]);
+
+  // Handle activate item click.
+  const handleActivateItem = useCallback((item) => {
+    setActivateItem(item);
+  });
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = useCallback(() => {
+    setActivateItem(false);
+  });
+
+  // Handle activate item confirm.
+  const handleConfirmItemActivate = useCallback(() => {
+    requestActivateItem(activateItem.id)
+      .then(() => {
+        setActivateItem(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_successfully_activated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        setActivateItem(false);
+      });
+  }, [activateItem, requestActivateItem, formatMessage]);
+
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
@@ -196,6 +258,8 @@ function ItemsList({
             <ItemsDataTable
               onDeleteItem={handleDeleteItem}
               onEditItem={handleEditItem}
+              onInactiveItem={handleInactiveItem}
+              onActivateItem={handleActivateItem}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
             <Alert
@@ -231,6 +295,30 @@ function ItemsList({
                 />
               </p>
             </Alert>
+            <Alert
+              cancelButtonText={<T id={'cancel'} />}
+              confirmButtonText={<T id={'inactivate'} />}
+              intent={Intent.WARNING}
+              isOpen={inactiveItem}
+              onCancel={handleCancelInactiveItem}
+              onConfirm={handleConfirmItemInactive}
+            >
+              <p>
+                <T id={'are_sure_to_inactive_this_item'} />
+              </p>
+            </Alert>
+            <Alert
+              cancelButtonText={<T id={'cancel'} />}
+              confirmButtonText={<T id={'activate'} />}
+              intent={Intent.WARNING}
+              isOpen={activateItem}
+              onCancel={handleCancelActivateItem}
+              onConfirm={handleConfirmItemActivate}
+            >
+              <p>
+                <T id={'are_sure_to_activate_this_item'} />
+              </p>
+            </Alert>
           </Route>
         </Switch>
       </DashboardPageContent>

client/src/containers/Items/withItemsActions.js

@@ -6,6 +6,8 @@ import {
   submitItem,
   editItem,
   deleteBulkItems,
+  activateItem,
+  inactiveItem,
 } from 'store/items/items.actions';
 import t from 'store/types';
 
@@ -16,6 +18,8 @@ export const mapDispatchToProps = (dispatch) => ({
   requestDeleteBulkItems: (ids) => dispatch(deleteBulkItems({ ids })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
   requestEditItem: (id, form) => dispatch(editItem({ id, form })),
+  requestInactiveItem: (id) => dispatch(inactiveItem({ id })),
+  requestActivateItem: (id) => dispatch(activateItem({ id })),
   addBulkActionItem: (id) =>
     dispatch({
       type: t.ITEM_BULK_ACTION_ADD,

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

@@ -185,26 +185,19 @@ function BillsDataTable({
         width: 140,
         className: 'amount',
       },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-      },
       {
         id: 'status',
         Header: formatMessage({ id: 'status' }),
         accessor: (row) => (
           <Choose>
             <Choose.When condition={row.is_open}>
-              <Tag minimal={true}>
+              <Tag minimal={true} intent={Intent.SUCCESS}>
                 <T id={'opened'} />
               </Tag>
             </Choose.When>
 
             <Choose.Otherwise>
-              <Tag minimal={true} intent={Intent.WARNING}>
+              <Tag minimal={true}>
                 <T id={'draft'} />
               </Tag>
             </Choose.Otherwise>
@@ -213,6 +206,13 @@ function BillsDataTable({
         width: 140,
         className: 'status',
       },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
       {
         id: 'actions',
         Header: '',

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

@@ -25,38 +25,38 @@ export default function EstimateFloatingActions({
   onCancelClick,
   onClearClick,
   estimateId,
-  estimatePublished,
+  isDelivered,
 }) {
   const { resetForm, submitForm } = useFormikContext();
 
-  const handleSubmitPublishBtnClick = (event) => {
+  const handleSubmitDeliverBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: true,
+      deliver: true,
     });
   };
 
-  const handleSubmitPublishAndNewBtnClick = (event) => {
+  const handleSubmitDeliverAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      deliver: true,
       resetForm: true,
     });
   };
 
-  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+  const handleSubmitDeliverContinueEditingBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      deliver: true,
     });
   };
 
   const handleSubmitDraftBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: false,
+      deliver: false,
     });
   };
 
@@ -64,7 +64,7 @@ export default function EstimateFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      deliver: false,
       resetForm: true,
     });
   };
@@ -73,7 +73,7 @@ export default function EstimateFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      deliver: false,
     });
   };
 
@@ -88,26 +88,26 @@ export default function EstimateFloatingActions({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Publish ----------- */}
+      {/* ----------- Save And Deliver ----------- */}
-      <If condition={!estimateId || !estimatePublished}>
+      <If condition={!estimateId || !isDelivered}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitDeliverBtnClick}
-            text={<T id={'save_publish'} />}
+            text={<T id={'save_and_deliver'} />}
           />
           <Popover
             content={
               <Menu>
                 <MenuItem
                   text={<T id={'publish_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitDeliverAndNewBtnClick}
                 />
                 <MenuItem
                   text={<T id={'publish_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                  onClick={handleSubmitDeliverContinueEditingBtnClick}
                 />
               </Menu>
             }
@@ -156,13 +156,13 @@ export default function EstimateFloatingActions({
         </ButtonGroup>
       </If>
       {/* ----------- Save and New ----------- */}
-      <If condition={estimateId && estimatePublished}>
+      <If condition={estimateId && isDelivered}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitDeliverBtnClick}
             text={<T id={'save'} />}
           />
           <Popover
@@ -170,7 +170,7 @@ export default function EstimateFloatingActions({
               <Menu>
                 <MenuItem
                   text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitDeliverAndNewBtnClick}
                 />
               </Menu>
             }

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

@@ -54,6 +54,7 @@ const defaultInitialValues = {
   estimate_date: moment(new Date()).format('YYYY-MM-DD'),
   expiration_date: moment(new Date()).format('YYYY-MM-DD'),
   estimate_number: '',
+  delivered: '',
   reference: '',
   note: '',
   terms_conditions: '',
@@ -181,6 +182,7 @@ const EstimateForm = ({
     }
     const form = {
       ...values,
+      delivered: submitPayload.deliver,
       // Exclude all entries properties that out of request schema.
       entries: entries.map((entry) => ({
         ...pick(entry, Object.keys(defaultEstimate)),
@@ -256,7 +258,7 @@ const EstimateForm = ({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting ,values }) => (
           <Form>
             <EstimateFormHeader
               onEstimateNumberChanged={handleEstimateNumberChange}
@@ -269,7 +271,7 @@ const EstimateForm = ({
               estimateId={estimateId}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
-              estimatePublished={true}
+              isDelivered={values.delivered}
             />
           </Form>
         )}

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

@@ -27,6 +27,7 @@ const Schema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .label(formatMessage({ id: 'note' })),
+  delivered: Yup.boolean().required(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 
 import AppToaster from 'components/AppToaster';
@@ -35,11 +35,18 @@ function EstimateList({
   //#withEistimateActions
   requestFetchEstimatesTable,
   requestDeleteEstimate,
+  requestDeliverdEstimate,
+  requestApproveEstimate,
+  requestRejectEstimate,
   addEstimatesTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
   const [deleteEstimate, setDeleteEstimate] = useState(false);
+  const [deliverEstimate, setDeliverEstimate] = useState(false);
+  const [approveEstimate, setApproveEstimate] = useState(false);
+  const [rejectEstimate, setRejectEstimate] = useState(false);
+
   const [selectedRows, setSelectedRows] = useState([]);
 
   // const fetchResourceViews = useQuery(
@@ -86,6 +93,88 @@ function EstimateList({
     });
   }, [deleteEstimate, requestDeleteEstimate, formatMessage]);
 
+  // Handle cancel/confirm estimate deliver.
+  const handleDeliverEstimate = useCallback((estimate) => {
+    setDeliverEstimate(estimate);
+  }, []);
+
+  // Handle cancel deliver estimate alert.
+  const handleCancelDeliverEstimate = useCallback(() => {
+    setDeliverEstimate(false);
+  }, []);
+
+  // Handle confirm estimate deliver.
+  const handleConfirmEstimateDeliver = useCallback(() => {
+    requestDeliverdEstimate(deliverEstimate.id)
+      .then(() => {
+        setDeliverEstimate(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_successfully_delivered',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {
+        // setDeliverEstimate(false);
+      });
+  }, [deliverEstimate, requestDeliverdEstimate, formatMessage]);
+
+  // Handle cancel/confirm estimate approve.
+  const handleApproveEstimate = useCallback((estimate) => {
+    setApproveEstimate(estimate);
+  }, []);
+
+  // Handle cancel approve estimate alert.
+  const handleCancelApproveEstimate = useCallback(() => {
+    setApproveEstimate(false);
+  }, []);
+
+  // Handle confirm estimate approve.
+  const handleConfirmEstimateApprove = useCallback(() => {
+    requestApproveEstimate(approveEstimate.id)
+      .then(() => {
+        setApproveEstimate(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_successfully_approved',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {
+        // setApproveEstimate(false);
+      });
+  }, [approveEstimate, requestApproveEstimate, formatMessage]);
+
+  // Handle cancel/confirm estimate reject.
+  const handleRejectEstimate = useCallback((estimate) => {
+    setRejectEstimate(estimate);
+  }, []);
+
+  // Handle cancel reject estimate alert.
+  const handleCancelRejectEstimate = useCallback(() => {
+    setRejectEstimate(false);
+  }, []);
+
+  // Handle confirm estimate reject.
+  const handleConfirmEstimateReject = useCallback(() => {
+    requestRejectEstimate(rejectEstimate.id)
+      .then(() => {
+        setRejectEstimate(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_successfully_rejected',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {});
+  }, [rejectEstimate, requestRejectEstimate, formatMessage]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchEstimate]);
 
@@ -127,6 +216,9 @@ function EstimateList({
             <EstimatesDataTable
               onDeleteEstimate={handleDeleteEstimate}
               onEditEstimate={handleEditEstimate}
+              onDeliverEstimate={handleDeliverEstimate}
+              onApproveEstimate={handleApproveEstimate}
+              onRejectEstimate={handleRejectEstimate}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -145,6 +237,42 @@ function EstimateList({
             <T id={'once_delete_this_estimate_you_will_able_to_restore_it'} />
           </p>
         </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'deliver'} />}
+          intent={Intent.WARNING}
+          isOpen={deliverEstimate}
+          onCancel={handleCancelDeliverEstimate}
+          onConfirm={handleConfirmEstimateDeliver}
+        >
+          <p>
+            <T id={'are_sure_to_deliver_this_estimate'} />
+          </p>
+        </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'approve'} />}
+          intent={Intent.WARNING}
+          isOpen={approveEstimate}
+          onCancel={handleCancelApproveEstimate}
+          onConfirm={handleConfirmEstimateApprove}
+        >
+          <p>
+            <T id={'are_sure_to_approve_this_estimate'} />
+          </p>
+        </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'reject'} />}
+          intent={Intent.WARNING}
+          isOpen={rejectEstimate}
+          onCancel={handleCancelRejectEstimate}
+          onConfirm={handleConfirmEstimateReject}
+        >
+          <p>
+            <T id={'are_sure_to_approve_this_estimate'} />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );

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

@@ -7,6 +7,7 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -17,9 +18,9 @@ import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
 import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Money, Choose, Icon } from 'components';
+import { DataTable, Money, Choose, Icon, If } from 'components';
 import EstimatesEmptyStatus from './EstimatesEmptyStatus';
-
+import { statusAccessor } from './components';
 import withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
 
@@ -38,6 +39,9 @@ function EstimatesDataTable({
   // #ownProps
   onEditEstimate,
   onDeleteEstimate,
+  onDeliverEstimate,
+  onApproveEstimate,
+  onRejectEstimate,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -70,6 +74,40 @@ function EstimatesDataTable({
           text={formatMessage({ id: 'edit_estimate' })}
           onClick={handleEditEstimate(estimate)}
         />
+        <If condition={!estimate.is_delivered}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_delivered' })}
+            onClick={() => onDeliverEstimate(estimate)}
+          />
+        </If>
+        <Choose>
+          <Choose.When
+            condition={estimate.is_delivered && estimate.is_approved}
+          >
+            <MenuItem
+              text={formatMessage({ id: 'mark_as_rejected' })}
+              onClick={() => onRejectEstimate(estimate)}
+            />
+          </Choose.When>
+          <Choose.When
+            condition={estimate.is_delivered && estimate.is_rejected}
+          >
+            <MenuItem
+              text={formatMessage({ id: 'mark_as_approved' })}
+              onClick={() => onApproveEstimate(estimate)}
+            />
+          </Choose.When>
+          <Choose.When condition={estimate.is_delivered}>
+            <MenuItem
+              text={formatMessage({ id: 'mark_as_approved' })}
+              onClick={() => onApproveEstimate(estimate)}
+            />
+            <MenuItem
+              text={formatMessage({ id: 'mark_as_rejected' })}
+              onClick={() => onRejectEstimate(estimate)}
+            />
+          </Choose.When>
+        </Choose>
         <MenuItem
           text={formatMessage({ id: 'delete_estimate' })}
           intent={Intent.DANGER}
@@ -114,7 +152,8 @@ function EstimatesDataTable({
       {
         id: 'estimate_number',
         Header: formatMessage({ id: 'estimate_number' }),
-        accessor: (row) => (row.estimate_number ? `#${row.estimate_number}` : null),
+        accessor: (row) =>
+          row.estimate_number ? `#${row.estimate_number}` : null,
         width: 140,
         className: 'estimate_number',
       },
@@ -126,6 +165,15 @@ function EstimatesDataTable({
         width: 140,
         className: 'amount',
       },
+
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: (row) => statusAccessor(row),
+        width: 140,
+        className: 'status',
+      },
+
       {
         id: 'reference',
         Header: formatMessage({ id: 'reference_no' }),
@@ -133,6 +181,7 @@ function EstimatesDataTable({
         width: 140,
         className: 'reference',
       },
+
       {
         id: 'actions',
         Header: '',
@@ -183,7 +232,7 @@ function EstimatesDataTable({
   const showEmptyStatus = [
     estimatesCurrentPage.length === 0,
     estimatesCurrentViewId === -1,
-  ].every(d => d === true);
+  ].every((d) => d === true);
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Intent, Tag } from '@blueprintjs/core';
+import { Choose, If } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+export const statusAccessor = (row) => (
+  <Choose>
+    <Choose.When condition={row.is_delivered && row.is_approved}>
+      <Tag minimal={true} intent={Intent.SUCCESS}>
+        <T id={'approved'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_delivered && row.is_rejected}>
+      <Tag minimal={true} intent={Intent.DANGER}>
+        <T id={'rejected'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When
+      condition={row.is_delivered && !row.is_rejected && !row.is_approved}
+    >
+      <Tag minimal={true} intent={Intent.SUCCESS}>
+        <T id={'delivered'} />
+      </Tag>
+    </Choose.When>
+    <Choose.Otherwise>
+      <Tag minimal={true}>
+        <T id={'draft'} />
+      </Tag>
+    </Choose.Otherwise>
+  </Choose>
+);

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

@@ -5,6 +5,9 @@ import {
   deleteEstimate,
   fetchEstimate,
   fetchEstimatesTable,
+  deliverEstimate,
+  approveEstimate,
+  rejectEstimate
 } from 'store/Estimate/estimates.actions';
 import t from 'store/types';
 
@@ -15,6 +18,9 @@ const mapDipatchToProps = (dispatch) => ({
   requestFetchEstimatesTable: (query = {}) =>
     dispatch(fetchEstimatesTable({ query: { ...query } })),
   requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
+  requestDeliverdEstimate: (id) => dispatch(deliverEstimate({ id })),
+  requestApproveEstimate: (id) => dispatch(approveEstimate({ id })),
+  requestRejectEstimate: (id) => dispatch(rejectEstimate({ id })),
 
   changeEstimateView: (id) =>
     dispatch({

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

@@ -32,7 +32,7 @@ export default function InvoiceFloatingActions({
   const handleSubmitDeliverBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      delivered: true,
+      deliver: true,
     });
   };
 
@@ -40,7 +40,7 @@ export default function InvoiceFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      delivered: true,
+      deliver: true,
       resetForm: true,
     });
   };
@@ -49,14 +49,14 @@ export default function InvoiceFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      delivered: true,
+      deliver: true,
     });
   };
 
   const handleSubmitDraftBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      delivered: false,
+      deliver: false,
     });
   };
 
@@ -64,7 +64,7 @@ export default function InvoiceFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      delivered: false,
+      deliver: false,
       resetForm: true,
     });
   };
@@ -73,7 +73,7 @@ export default function InvoiceFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      delivered: false,
+      deliver: false,
     });
   };
 

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

@@ -145,13 +145,6 @@ function InvoicesDataTable({
         width: 140,
         className: 'balance',
       },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-      },
       {
         id: 'status',
         Header: formatMessage({ id: 'status' }),
@@ -159,6 +152,13 @@ function InvoicesDataTable({
         width: 140,
         className: 'status',
       },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
       {
         id: 'actions',
         Header: '',

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

@@ -159,7 +159,7 @@ function ReceiptsDataTable({
         accessor: (row) => (
           <Choose>
             <Choose.When condition={row.is_closed}>
-              <Tag minimal={true}>
+              <Tag minimal={true} intent={Intent.SUCCESS}>
                 <T id={'closed'} />
               </Tag>
             </Choose.When>

client/src/lang/en/index.js

@@ -902,4 +902,33 @@ export default {
   open: 'Open',
   are_sure_to_open_this_bill: 'Are you sure you want to open this bill?',
   opened: 'Opened',
-};
+  the_estimate_has_been_successfully_delivered:
+    'The estimate has been successfully delivered.',
+  the_estimate_has_been_successfully_approved:
+    'The estimate has been successfully approved.',
+  the_estimate_has_been_successfully_rejected:
+    'The estimate has been successfully rejected.',
+  are_sure_to_deliver_this_estimate:
+    'Are you sure you want to deliver this estimate?',
+  approve: 'Approve',
+  are_sure_to_approve_this_estimate:
+    'Are you sure you want to approve this estimate?',
+  reject: 'Reject',
+  are_sure_to_reject_this_estimate:
+    'Are you sure you want to reject this estimate?',
+  mark_as_approved: 'Mark as approved',
+  mark_as_rejected: 'Mark as rejected',
+  delivered: 'Delivered',
+  rejected: 'Rejected',
+  approved: 'Approved',
+  the_item_has_been_successfully_inactivated:
+    'The item has been successfully inactivated.',
+  the_item_has_been_successfully_activated:
+    'The item has been successfully activated.',
+  are_sure_to_inactive_this_item:
+    'Are you sure you want to inactive this item? You will be able to activate it later',
+  are_sure_to_activate_this_item:
+    'Are you sure you want to activate this item? You will be able to inactivate it later',
+    inactivate_item: 'Inactivate Item',
+    activate_item: 'Activate Item',
+  };

client/src/store/Estimate/estimates.actions.js

@@ -75,7 +75,7 @@ export const fetchEstimate = ({ id }) => {
 
 export const fetchEstimatesTable = ({ query = {} }) => {
   return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
+    new Promise((resolve, reject) => {
       const pageQuery = getState().salesEstimates.tableQuery;
       dispatch({
         type: t.ESTIMATES_TABLE_LOADING,
@@ -117,7 +117,17 @@ export const fetchEstimatesTable = ({ query = {} }) => {
           resolve(response);
         })
         .catch((error) => {
-          rejcet(error);
+          reject(error);
         });
     });
 };
+
+export const deliverEstimate = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/estimates/${id}/deliver`);
+};
+export const approveEstimate = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/estimates/${id}/approve`);
+};
+export const rejectEstimate = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/estimates/${id}/reject`);
+};

client/src/store/items/items.actions.js

@@ -105,3 +105,11 @@ export const deleteBulkItems = ({ ids }) => {
         });
     });
 };
+
+export const activateItem = ({ id }) => {
+  return (dispatch) => ApiService.post(`items/${id}/activate`);
+};
+
+export const inactiveItem = ({ id }) => {
+  return (dispatch) => ApiService.post(`items/${id}/inactivate`);
+};

client/src/style/pages/items.scss

@@ -1,12 +1,11 @@
-
+.page-form--item {
-.page-form--item{
   $self: '.page-form';
   padding: 20px;
 
-  #{$self}__header{
+  #{$self}__header {
     padding: 0;
   }
-  #{$self}__primary-section{
+  #{$self}__primary-section {
     overflow: hidden;
     padding-top: 5px;
     margin-bottom: 20px;
@@ -15,88 +14,87 @@
     max-width: 1000px;
   }
 
-  #{$self}__body{
+  #{$self}__body {
-    .bp3-form-group{
+    .bp3-form-group {
       max-width: 500px;
       margin-bottom: 14px;
 
-      &.bp3-inline{
+      &.bp3-inline {
-  
+        .bp3-label {
-        .bp3-label{
           min-width: 140px;
         }
       }
-      .bp3-form-content{
+      .bp3-form-content {
         width: 100%;
       }
     }
 
-    h3{
+    h3 {
       font-weight: 500;
       font-size: 14px;
       margin-bottom: 1.4rem;
     }
 
-    .bp3-control{
+    .bp3-control {
-      
+      h3 {
-      h3{
         display: inline;
         margin-bottom: 0;
       }
     }
 
     .form-group--sellable,
-    .form-group--purchasable{
+    .form-group--purchasable {
       margin-bottom: 1rem;
     }
   }
 
-  #{$self}__section{
+  #{$self}__section {
     max-width: 850px;
     margin-bottom: 1rem;
 
-    .bp3-form-group{
+    .bp3-form-group {
       max-width: 400px;
     }
 
-    &--selling-cost{
+    &--selling-cost {
       border-bottom: 1px solid #eaeaea;
       margin-bottom: 1.25rem;
       padding-bottom: 0.25rem;
     }
   }
 
-  #{$self}__floating-actions{
+  #{$self}__floating-actions {
     margin-left: -40px;
     margin-right: -40px;
 
-    .form-group--active{
+    .form-group--active {
       display: inline-block;
       margin: 0;
       margin-left: 40px;
     }
   }
 
-  .bp3-tooltip-indicator{
+  .bp3-tooltip-indicator {
     border-bottom: 1px dashed #d0d0d0;
   }
 }
 
-
+.dashboard__insider--items-list {
-
+  .bigcapital-datatable {
-.dashboard__insider--items-list{
+    .table {
-
+      .tbody {
-
+        .item_type.td {
-  .bigcapital-datatable{
+          .bp3-tag {
-
-    .table{
-      .tbody{
-        .item_type.td{
-
-          .bp3-tag{
             font-size: 13px;
           }
         }
+        .tr.inactive .td {
+          color: #646b82;
+
+          &.normal .#{$ns}-icon {
+            color: #9eaab6;
+          }
+        }
       }
     }
   }