feature/ allocate landed cost.

client/src/common/allocateLandedCostType.js

@@ -0,0 +1,6 @@
+import intl from 'react-intl-universal';
+
+export default [
+  { name: intl.get('bills'), value: 'bills' },
+  { name: intl.get('expenses'), value: 'expenses' },
+]

client/src/components/DialogsContainer.js

@@ -13,6 +13,7 @@ import KeyboardShortcutsDialog from 'containers/Dialogs/keyboardShortcutsDialog'
 import ContactDuplicateDialog from 'containers/Dialogs/ContactDuplicateDialog';
 import QuickPaymentReceiveFormDialog from 'containers/Dialogs/QuickPaymentReceiveFormDialog';
 import QuickPaymentMadeFormDialog from 'containers/Dialogs/QuickPaymentMadeFormDialog';
+import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialog';
 
 /**
  * Dialogs container.
@@ -32,6 +33,7 @@ export default function DialogsContainer() {
       <ContactDuplicateDialog dialogName={'contact-duplicate'} />
       <QuickPaymentReceiveFormDialog dialogName={'quick-payment-receive'} />
       <QuickPaymentMadeFormDialog dialogName={'quick-payment-made'} />
+      <AllocateLandedCostDialog dialogName={'allocate-landed-cost'} />
     </div>
   );
 }

client/src/components/index.js

@@ -56,6 +56,7 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
+import { MoneyFieldCell } from './DataTableCells';
 
 const Hint = FieldHint;
 
@@ -123,4 +124,5 @@ export {
   Postbox,
   AccountsSuggestField,
   MaterialProgressBar,
+  MoneyFieldCell,
 };

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AllocateLandedCostDialogProvider } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostForm from './AllocateLandedCostForm';
+
+/**
+ * Allocate landed cost dialog content.
+ */
+export default function AllocateLandedCostDialogContent({
+  // #ownProps
+  dialogName,
+  bill,
+}) {
+  return (
+    <AllocateLandedCostDialogProvider billId={bill} dialogName={dialogName}>
+      <AllocateLandedCostForm />
+    </AllocateLandedCostDialogProvider>
+  );
+}

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useBill } from 'hooks/query';
+
+import { pick } from 'lodash';
+
+const AllocateLandedCostDialogContext = React.createContext();
+
+/**
+ * Allocate landed cost provider.
+ */
+function AllocateLandedCostDialogProvider({ billId, dialogName, ...props }) {
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // provider payload.
+  const provider = {
+    bill: {
+      ...pick(bill, ['entries']),
+    },
+    dialogName,
+  };
+  return (
+    <DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
+      <AllocateLandedCostDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useAllocateLandedConstDialogContext = () =>
+  React.useContext(AllocateLandedCostDialogContext);
+
+export {
+  AllocateLandedCostDialogProvider,
+  useAllocateLandedConstDialogContext,
+};

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DataTable, MoneyFieldCell, DataTableEditable } from 'components';
+import { compose, updateTableRow } from 'utils';
+
+/**
+ * Allocate landed cost entries table.
+ */
+export default function AllocateLandedCostEntriesTable({
+  onUpdateData,
+  entries,
+}) {
+  // allocate landed cost entries table columns.
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item_id',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableRow(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  const LL = [
+    {
+      item_id: 'ITEM',
+      quantity: '30000',
+      rate: '100000',
+      amount: '400',
+    },
+  ];
+
+  return <DataTableEditable columns={columns} data={LL} />;
+}

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import { useFormikContext } from 'formik';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function AllocateLandedCostFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useAllocateLandedConstDialogContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostFloatingActions);

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Formik } from 'formik';
+import moment from 'moment';
+
+import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
+
+import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  transaction_type: 'bills',
+  transaction_date: moment(new Date()).format('YYYY-MM-DD'),
+  transaction_id: '',
+  transaction_entry_id: '',
+  amount: '',
+  allocation_method: 'quantity',
+  entries: {
+    entry_id: '',
+    cost: '',
+  },
+};
+
+/**
+ * Allocate landed cost form.
+ */
+function AllocateLandedCostForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { bill, dialogName } = useAllocateLandedConstDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    ...bill,
+  };
+
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {};
+
+  return (
+    <Formik
+      validationSchema={AllocateLandedCostFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <AllocateLandedCostFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostForm);

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js

@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  transaction_type: Yup.string().label(intl.get('transaction_type')),
+  transaction_date: Yup.date().label(intl.get('transaction_date')),
+  transaction_id: Yup.string().label(intl.get('transaction_number')),
+  transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
+  amount: Yup.number().label(intl.get('amount')),
+  allocation_method: Yup.string().trim(),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      entry_id: Yup.number().nullable(),
+      cost: Yup.number().nullable(),
+    }),
+  ),
+});
+
+export const AllocateLandedCostFormSchema = Schema;

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import AllocateLandedCostEntriesTable from './AllocateLandedCostEntriesTable';
+
+export default function AllocateLandedCostFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({
+          form: { setFieldValue, values },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <AllocateLandedCostEntriesTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Form } from 'formik';
+import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
+import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
+/**
+ * Allocate landed cost form content.
+ */
+export default function AllocateLandedCostFormContent() {
+  return (
+    <Form>
+      <AllocateLandedCostFormFields />
+      <AllocateLandedCostFloatingActions />
+    </Form>
+  );
+}

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  RadioGroup,
+  Radio,
+  InputGroup,
+  Position,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  handleStringChange,
+} from 'utils';
+import { FieldRequiredHint, ListSelect } from 'components';
+import { CLASSES } from 'common/classes';
+import allocateLandedCostType from 'common/allocateLandedCostType';
+import AccountsSuggestField from 'components/AccountsSuggestField';
+import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
+
+/**
+ * Allocate landed cost form fields.
+ */
+export default function AllocateLandedCostFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------Transaction type -----------*/}
+      <FastField name={'transaction_type'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            helperText={<ErrorMessage name="transaction_type" />}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
+          >
+            <ListSelect
+              items={allocateLandedCostType}
+              onItemSelect={(type) => {
+                setFieldValue('transaction_type', type.value);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              textProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------Transaction date -----------*/}
+      <FastField name={'transaction_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'transaction_date'} />}
+            // labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transaction_date" />}
+            minimal={true}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_date')}
+            inline={true}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('transaction_date', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Transaction  -----------*/}
+      <FastField name={'transaction_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'transaction_id'} />}
+            // labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transaction_id" />}
+            className={'form-group--transaction_id'}
+            inline={true}
+          >
+            <AccountsSuggestField
+              accounts={[]}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('transaction_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_transaction'),
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Transaction line  -----------*/}
+      <FastField name={'transaction_entry_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'transaction_line'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transaction_entry_id" />}
+            className={'form-group--transaction_entry_id'}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Amount -----------*/}
+      <FastField name={'amount'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Allocation method -----------*/}
+      <FastField name={'allocation_method'}>
+        {({ form, field: { value }, meta: { touched, error } }) => (
+          <FormGroup
+            medium={true}
+            label={<T id={'allocation_method'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--allocation_method'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="allocation_method" />}
+            inline={true}
+          >
+            <RadioGroup
+              onChange={handleStringChange((_value) => {
+                form.setFieldValue('allocation_method', _value);
+              })}
+              selectedValue={value}
+              inline={true}
+            >
+              <Radio label={<T id={'quantity'} />} value="quantity" />
+              <Radio label={<T id={'valuation'} />} value="valuation" />
+            </RadioGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Allocate Landed cost Table -----------*/}
+      <AllocateLandedCostFormBody />
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const AllocateLandedCostDialogContent = lazy(() =>
+  import('./AllocateLandedCostDialogContent'),
+);
+
+/**
+ * Allocate landed cost dialog.
+ */
+function AllocateLandedCostDialog({
+  dialogName,
+  payload = { billId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'allocate_landed_coast'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--allocate-landed-cost-form"
+    >
+      <DialogSuspense>
+        <AllocateLandedCostDialogContent
+          bill={payload.billId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(AllocateLandedCostDialog);

client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -34,13 +34,8 @@ function BillsDataTable({
   openDialog,
 }) {
   // Bills list context.
-  const {
+  const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
-    bills,
+    useBillsListContext();
-    pagination,
-    isBillsLoading,
-    isBillsFetching,
-    isEmptyStatus,
-  } = useBillsListContext();
 
   const history = useHistory();
 
@@ -78,6 +73,11 @@ function BillsDataTable({
     openDialog('quick-payment-made', { billId: id });
   };
 
+  // handle allocate landed cost.
+  const handleAllocateLandedCost = ({ id }) => {
+    openDialog('allocate-landed-cost', { billId: id });
+  };
+
   if (isEmptyStatus) {
     return <BillsEmptyStatus />;
   }
@@ -105,6 +105,7 @@ function BillsDataTable({
         onEdit: handleEditBill,
         onOpen: handleOpenBill,
         onQuick: handleQuickPaymentMade,
+        onAllocateLandedCost: handleAllocateLandedCost,
       }}
     />
   );

client/src/containers/Purchases/Bills/BillsLanding/components.js

@@ -20,7 +20,7 @@ import moment from 'moment';
  * Actions menu.
  */
 export function ActionsMenu({
-  payload: { onEdit, onOpen, onDelete, onQuick },
+  payload: { onEdit, onOpen, onDelete, onQuick, onAllocateLandedCost },
   row: { original },
 }) {
   return (
@@ -50,7 +50,11 @@ export function ActionsMenu({
           onClick={safeCallback(onQuick, original)}
         />
       </If>
-
+      <MenuItem
+        // icon={<Icon icon="quick-payment-16" iconSize={16} />}
+        text={intl.get('allocate_landed_coast')}
+        onClick={safeCallback(onAllocateLandedCost, original)}
+      />
       <MenuItem
         text={intl.get('delete_bill')}
         intent={Intent.DANGER}

client/src/lang/en/index.json

@@ -1124,5 +1124,14 @@
   "refresh_the_page_if_redirect_not_worked": "Refresh the page if redirect not worked.",
   "payment_has_been_done_successfully": "Payment has been done successfully.",
   "manual_journal_number": "Manual journal {number}",
-"conditions_and_terms":"Conditions and terms"
+  "conditions_and_terms": "Conditions and terms",
+  "allocate_landed_coast": "Allocate landed cost",
+  "transaction_date":"Transaction date",
+  "transaction_type":"Transaction type",
+  "transaction_id":"Transaction #",
+  "transaction_number":"Transaction number",
+  "transaction_line":"Transaction line",
+  "allocation_method":"Allocation method",
+  "valuation":"Valuation",
+  "select_transaction":"Select transaction account"
 }

client/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss

@@ -0,0 +1,42 @@
+// Allocate Landed Cost Form.
+.dialog--allocate-landed-cost-form {
+  width: 700px;
+
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 300px;
+      }
+
+      &:not(.dialog--loading) .bp3-dialog-body {
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  .bigcapital-datatable {
+    .table {
+      max-height: 300px;
+      border: 1px solid #d1dee2;
+      min-width: auto;
+
+      .tbody,
+      .tbody-inner {
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding: 0.4rem;
+          margin-left: -1px;
+          border-left: 1px solid #ececec;
+        }
+      }
+    }
+  }
+}