re-structure to monorepo.

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import WarehouseTransferFormEntriesTable from './WarehouseTransferFormEntriesTable';
+import {
+  entriesFieldShouldUpdate,
+  defaultWarehouseTransferEntry,
+  useWatchItemsCostSetCostEntries
+} from './utils';
+
+/**
+ * Warehouse transafer editor field.
+ */
+export default function WarehouseTransferEditorField() {
+  const { items } = useWarehouseTransferFormContext();
+
+  // Watches inventory items cost and sets cost to form entries.
+  useWatchItemsCostSetCostEntries();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <WarehouseTransferFormEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            defaultEntry={defaultWarehouseTransferEntry}
+            errors={error}
+            sourceWarehouseId={values.from_warehouse_id}
+            destinationWarehouseId={values.to_warehouse_id}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx

@@ -0,0 +1,175 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { If, Icon, FormattedMessage as T } from '@/components';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { CLASSES } from '@/constants/classes';
+
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+
+/**
+ * Warehouse transfer floating actions bar.
+ */
+export default function WarehouseTransferFloatingActions() {
+  // History context.
+  const history = useHistory();
+
+  // Formik form context.
+  const { isSubmitting, submitForm, resetForm } = useFormikContext();
+
+  // Warehouse tansfer form context.
+  const { warehouseTransfer, setSubmitPayload } =
+    useWarehouseTransferFormContext();
+
+  // Handle submit initiate button click.
+  const handleSubmitInitiateBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, initiate: true, deliver: false });
+    submitForm();
+  };
+
+  // Handle submit transferred button click.
+  const handleSubmitTransferredBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, initiate: true, deliver: true });
+    submitForm();
+  };
+
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, initiate: false, deliver: false });
+    submitForm();
+  };
+  // Handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({
+      redirect: false,
+      initiate: false,
+      deliver: false,
+      resetForm: true,
+    });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: false, initiate: false });
+    submitForm();
+  };
+
+  // Handle clear button click.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save Intitate & transferred ----------- */}
+      <If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitInitiateBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={
+                    <T id={'warehouse_transfer.save_mark_as_transferred'} />
+                  }
+                  onClick={handleSubmitTransferredBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            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
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      <If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          onClick={handleSubmitTransferredBtnClick}
+          style={{ minWidth: '100px' }}
+          text={<T id={'save'} />}
+        />
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.schema.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  transaction_number: Yup.string()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('transaction_number')),
+  from_warehouse_id: Yup.number().required().label(intl.get('from_warehouse')),
+  to_warehouse_id: Yup.number().required().label(intl.get('from_warehouse')),
+  reason: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('reason')),
+  transfer_initiated: Yup.boolean(),
+  transfer_delivered: Yup.boolean(),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      item_id: Yup.number().nullable(),
+      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+      quantity: Yup.number().min(1).max(DATATYPES_LENGTH.INT_10),
+    }),
+  ),
+});
+
+export const CreateWarehouseFormSchema = Schema;
+export const EditWarehouseFormSchema = Schema;

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.tsx

@@ -0,0 +1,159 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik, Form } from 'formik';
+import { isEmpty } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+
+import {
+  CreateWarehouseFormSchema,
+  EditWarehouseFormSchema,
+} from './WarehouseTransferForm.schema';
+
+import WarehouseTransferFormHeader from './WarehouseTransferFormHeader';
+import WarehouseTransferEditorField from './WarehouseTransferEditorField';
+import WarehouseTransferFormFooter from './WarehouseTransferFormFooter';
+import WarehouseTransferFloatingActions from './WarehouseTransferFloatingActions';
+import WarehouseTransferFormDialog from './WarehouseTransferFormDialog';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { AppToaster } from '@/components';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
+import { WarehouseTransferObserveItemsCost } from './components';
+import {
+  defaultWarehouseTransfer,
+  transformValueToRequest,
+  transformErrors,
+  transformToEditForm,
+} from './utils';
+
+function WarehouseTransferForm({
+  // #withSettings
+  warehouseTransferNextNumber,
+  warehouseTransferNumberPrefix,
+  warehouseTransferIncrementMode,
+}) {
+  const history = useHistory();
+
+  const {
+    isNewMode,
+    warehouseTransfer,
+    createWarehouseTransferMutate,
+    editWarehouseTransferMutate,
+    submitPayload,
+  } = useWarehouseTransferFormContext();
+
+  // WarehouseTransfer number.
+  const warehouseTransferNumber = transactionNumber(
+    warehouseTransferNumberPrefix,
+    warehouseTransferNextNumber,
+  );
+
+  // Form initial values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(!isEmpty(warehouseTransfer)
+        ? { ...transformToEditForm(warehouseTransfer) }
+        : {
+            ...defaultWarehouseTransfer,
+            ...(warehouseTransferIncrementMode && {
+              transaction_number: warehouseTransferNumber,
+            }),
+            entries: orderingLinesIndexes(defaultWarehouseTransfer.entries),
+          }),
+    }),
+    [],
+  );
+
+  // Handles form submit.
+  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
+    setSubmitting(true);
+    // Transformes the values of the form to request.
+    const form = {
+      ...transformValueToRequest(values),
+      transfer_initiated: submitPayload.initiate,
+      transfer_delivered: submitPayload.deliver,
+    };
+
+    // Handle the request success.
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'warehouse_transfer.success_message'
+            : 'warehouse_transfer.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/warehouses-transfers');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
+    };
+
+    if (isNewMode) {
+      createWarehouseTransferMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editWarehouseTransferMutate([warehouseTransfer.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_WAREHOUSE_TRANSFER,
+      )}
+    >
+      <Formik
+        validationSchema={
+          isNewMode ? CreateWarehouseFormSchema : EditWarehouseFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <WarehouseTransferFormHeader />
+          <WarehouseTransferEditorField />
+          <WarehouseTransferFormFooter />
+          <WarehouseTransferFormDialog />
+          <WarehouseTransferFloatingActions />
+          <WarehouseTransferObserveItemsCost />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferNextNumber: warehouseTransferSettings?.nextNumber,
+    warehouseTransferNumberPrefix: warehouseTransferSettings?.numberPrefix,
+    warehouseTransferIncrementMode: warehouseTransferSettings?.autoIncrement,
+  })),
+)(WarehouseTransferForm);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormDialog.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik'; 
+import WarehouseTransferNumberDialog from '@/containers/Dialogs/WarehouseTransferNumberDialog';
+
+/**
+ * Warehouse transfer form dialog.
+ */
+export default function WarehouseTransferFormDialog() {
+  // Update the form once the credit number form submit confirm.
+  const handleWarehouseNumberFormConfirm = ({ incrementNumber, manually }) => {
+    setFieldValue('transaction_number', incrementNumber || '');
+    setFieldValue('transaction_no_manually', manually);
+  };
+
+  const { setFieldValue } = useFormikContext();
+  return (
+    <React.Fragment>
+      <WarehouseTransferNumberDialog
+        dialogName={'warehouse-transfer-no-form'}
+        onConfirm={handleWarehouseNumberFormConfirm}
+      />
+    </React.Fragment>
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormEntriesTable.tsx

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DataTableEditable } from '@/components';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { useWarehouseTransferTableColumns } from '../utils';
+import { useFetchItemWarehouseQuantity } from './hooks';
+import { useDeepCompareEffect } from '@/hooks/utils';
+
+import { saveInvoke } from '@/utils';
+import { mutateTableCell, mutateTableRow, deleteTableRow } from './utils';
+
+/**
+ * Warehouse transfer form entries table.
+ */
+export default function WarehouseTransferFormEntriesTable({
+  // #ownProps
+  items,
+  entries,
+  defaultEntry,
+  onUpdateData,
+  errors,
+
+  destinationWarehouseId,
+  sourceWarehouseId,
+}) {
+  // Fetch the table row.
+  const { newRowMeta, setTableRow, resetTableRow, cellsLoading } =
+    useFetchItemWarehouseQuantity();
+
+  // Warehouse transfer provider context.
+  const { isItemsCostFetching } = useWarehouseTransferFormContext();
+
+  // Retrieve the warehouse transfer table columns.
+  const columns = useWarehouseTransferTableColumns();
+
+  // Observes the new row meta to call `onUpdateData` callback.
+  useDeepCompareEffect(() => {
+    if (newRowMeta) {
+      const newRow = {
+        item_id: newRowMeta.itemId,
+        warehouses: newRowMeta.warehouses,
+        description: '',
+        quantity: '',
+      };
+      const newRows = mutateTableRow(newRowMeta.rowIndex, newRow, entries);
+
+      saveInvoke(onUpdateData, newRows);
+      resetTableRow();
+    }
+  }, [newRowMeta]);
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, itemId) => {
+      if (columnId === 'item_id') {
+        setTableRow({
+          rowIndex,
+          columnId,
+          itemId,
+          sourceWarehouseId,
+          destinationWarehouseId,
+        });
+      }
+      const editCell = mutateTableCell(rowIndex, columnId, defaultEntry);
+      const newRows = editCell(itemId, entries);
+
+      saveInvoke(onUpdateData, newRows);
+    },
+    [
+      entries,
+      defaultEntry,
+      onUpdateData,
+      destinationWarehouseId,
+      sourceWarehouseId,
+      setTableRow,
+    ],
+  );
+  // Handles click remove datatable row.
+  const handleRemoveRow = React.useCallback(
+    (rowIndex) => {
+      const newRows = deleteTableRow(rowIndex, defaultEntry, entries);
+      saveInvoke(onUpdateData, newRows);
+    },
+    [entries, defaultEntry, onUpdateData],
+  );
+
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={entries}
+      cellsLoading={!!cellsLoading}
+      cellsLoadingCoords={cellsLoading}
+      progressBarLoading={isItemsCostFetching || cellsLoading}
+      payload={{
+        items,
+        errors: errors || [],
+        updateData: handleUpdateData,
+        removeRow: handleRemoveRow,
+        autoFocus: ['item_id', 0],
+
+        sourceWarehouseId,
+        destinationWarehouseId,
+      }}
+    />
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from '@/constants/classes';
+import { Paper, Row, Col } from '@/components';
+import { WarehouseTransferFormFooterLeft } from './WarehouseTransferFormFooterLeft';
+
+export default function WarehouseTransferFormFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <WarehousesTransferFooterPaper>
+        <Row>
+          <Col md={8}>
+            <WarehouseTransferFormFooterLeft />
+          </Col>
+        </Row>
+      </WarehousesTransferFooterPaper>
+    </div>
+  );
+}
+
+const WarehousesTransferFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
+
+export function WarehouseTransferFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Terms and conditions --------- */}
+      <TermsConditsFormGroup
+        label={<T id={'warehouse_transfer.form.reason.label'} />}
+        name={'reason'}
+      >
+        <FEditableText
+          name={'reason'}
+          placeholder={intl.get('warehouse_transfer.form.reason.placeholder')}
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeader.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+
+import WarehouseTransferFormHeaderFields from './WarehouseTransferFormHeaderFields';
+
+/**
+ * Warehose transfer form header section.
+ */
+function WarehouseTransferFormHeader() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <WarehouseTransferFormHeaderFields />
+    </div>
+  );
+}
+
+export default WarehouseTransferFormHeader;

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx

@@ -0,0 +1,198 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from '@/components';
+import { momentFormatter, compose, tansformDateValue } from '@/utils';
+import classNames from 'classnames';
+
+import { CLASSES } from '@/constants/classes';
+import {
+  AccountsSelectList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from '@/components';
+import { inputIntent, handleDateChange } from '@/utils';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { useObserveTransferNoSettings } from './utils';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Warehouse transfer form header fields.
+ */
+function WarehouseTransferFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  warehouseTransferAutoIncrement,
+  warehouseTransferNextNumber,
+  warehouseTransferNumberPrefix,
+}) {
+  const { warehouses } = useWarehouseTransferFormContext();
+
+  // Handle warehouse transfer number changing.
+  const handleTransferNumberChange = () => {
+    openDialog('warehouse-transfer-no-form');
+  };
+
+  // Handle transfer no. field blur.
+  const handleTransferNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && warehouseTransferAutoIncrement) {
+      openDialog('warehouse-transfer-no-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs transfer number settings with form.
+  useObserveTransferNoSettings(
+    warehouseTransferNumberPrefix,
+    warehouseTransferNextNumber,
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Date ----------- */}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Transfer number ----------- */}
+      <Field name={'transaction_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.transfer_no'} />}
+            // labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames('form-group--transfer-no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transfer_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleTransferNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleTransferNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T
+                      id={
+                        'warehouse_transfer.setting_your_auto_generated_transfer_no'
+                      }
+                    />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </Field>
+      {/* ----------- Form Warehouse ----------- */}
+      <FastField name={'from_warehouse_id'} accounts={warehouses}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.from_warehouse'} />}
+            className={classNames(
+              'form-group--warehouse-transfer',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'from_warehouse_id'} />}
+          >
+            <AccountsSelectList
+              accounts={warehouses}
+              onAccountSelected={(account) => {
+                form.setFieldValue('from_warehouse_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_warehouse_transfer'} />}
+              selectedAccountId={value}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- To Warehouse ----------- */}
+      <FastField name={'to_warehouse_id'} accounts={warehouses}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.to_warehouse'} />}
+            className={classNames(
+              'form-group--warehouse-transfer',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'to_warehouse_id'} />}
+          >
+            <AccountsSelectList
+              accounts={warehouses}
+              onAccountSelected={(account) => {
+                form.setFieldValue('to_warehouse_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_warehouse_transfer'} />}
+              selectedAccountId={value}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferAutoIncrement: warehouseTransferSettings?.autoIncrement,
+    warehouseTransferNextNumber: warehouseTransferSettings?.nextNumber,
+    warehouseTransferNumberPrefix: warehouseTransferSettings?.numberPrefix,
+  })),
+)(WarehouseTransferFormHeaderFields);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import '@/style/pages/WarehouseTransfers/PageForm.scss';
+import WarehouseTransferForm from './WarehouseTransferForm';
+import { WarehouseTransferFormProvider } from './WarehouseTransferFormProvider';
+
+/**
+ * WarehouseTransfer form page.
+ */
+export default function WarehouseTransferFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
+  return (
+    <WarehouseTransferFormProvider warehouseTransferId={idAsInteger}>
+      <WarehouseTransferForm />
+    </WarehouseTransferFormProvider>
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+import { DashboardInsider } from '@/components';
+import {
+  useItems,
+  useWarehouses,
+  useWarehouseTransfer,
+  useCreateWarehouseTransfer,
+  useEditWarehouseTransfer,
+  useItemInventoryCost,
+} from '@/hooks/query';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { ITEMS_FILTER_ROLES_QUERY } from './utils';
+
+const WarehouseFormContext = createContext();
+
+/**
+ * Warehouse transfer form provider.
+ */
+function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+
+  // Handle fetch Items data table or list
+  const {
+    data: { items },
+    isFetching: isItemsFetching,
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+    stringified_filter_roles: ITEMS_FILTER_ROLES_QUERY,
+  });
+
+  // Handle fetch warehouse transfer detail.
+  const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
+    useWarehouseTransfer(warehouseTransferId, {
+      enabled: !!warehouseTransferId,
+    });
+  // Fetch warehouses list.
+  const {
+    data: warehouses,
+    isFetching: isWarehouesFetching,
+    isLoading: isWarehouesLoading,
+  } = useWarehouses({}, { enabled: isWarehouseFeatureCan });
+
+  // Inventory items cost query.
+  const [itemCostQuery, setItemCostQuery] = React.useState(null);
+
+  // Detarmines whether the inventory items cost query is enabled.
+  const isItemsCostQueryEnabled =
+    !isEmpty(itemCostQuery?.date) && !isEmpty(itemCostQuery?.itemsIds);
+
+  // Retrieves the inventory item cost.
+  const {
+    data: inventoryItemsCost,
+    isLoading: isItemsCostLoading,
+    isFetching: isItemsCostFetching,
+    isSuccess: isItemsCostSuccess,
+  } = useItemInventoryCost(
+    {
+      date: itemCostQuery?.date,
+      items_ids: itemCostQuery?.itemsIds,
+    },
+    {
+      enabled: isItemsCostQueryEnabled,
+    },
+  );
+  // Create and edit warehouse mutations.
+  const { mutateAsync: createWarehouseTransferMutate } =
+    useCreateWarehouseTransfer();
+  const { mutateAsync: editWarehouseTransferMutate } =
+    useEditWarehouseTransfer();
+
+  // Detarmines whether the form in new mode.
+  const isNewMode = !warehouseTransferId;
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = React.useState();
+
+  // Provider payload.
+  const provider = {
+    items,
+    warehouses,
+    warehouseTransfer,
+
+    isItemsFetching,
+    isWarehouesFetching,
+
+    isNewMode,
+    submitPayload,
+    setSubmitPayload,
+    createWarehouseTransferMutate,
+    editWarehouseTransferMutate,
+
+    inventoryItemsCost,
+    isItemsCostLoading,
+    isItemsCostFetching,
+    isItemsCostSuccess,
+    itemCostQuery,
+    setItemCostQuery,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isItemsLoading || isWarehouesLoading || isWarehouseTransferLoading
+      }
+      name={'warehouse-transfer-form'}
+    >
+      <WarehouseFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useWarehouseTransferFormContext = () =>
+  React.useContext(WarehouseFormContext);
+
+export { WarehouseTransferFormProvider, useWarehouseTransferFormContext };

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/components.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { chain } from 'lodash';
+import { FormikObserver } from '@/components';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+
+export function WarehouseTransferObserveItemsCost() {
+  const { setItemCostQuery } = useWarehouseTransferFormContext();
+
+  // Handle the form change.
+  const handleFormChange = (values) => {
+    const { date } = values;
+    const itemsIds = chain(values.entries)
+      .filter((e) => e.item_id)
+      .map((e) => e.item_id)
+      .uniq()
+      .value();
+
+    setItemCostQuery({ date, itemsIds });
+  };
+  return <FormikObserver onChange={handleFormChange} />;
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/hooks.ts

@@ -0,0 +1,94 @@
+// @ts-nocheck
+import React from 'react';
+import { useItem } from '@/hooks/query';
+
+interface IItemMeta {
+  rowIndex: number;
+  columnId: string;
+  itemId: number;
+
+  sourceWarehouseId: number;
+  distentionWarehouseId: number;
+}
+
+type CellLoading = any;
+
+interface IWarehouseMeta {
+  warehouseId: number;
+  warehouseQuantity: number;
+  warehouseQuantityFormatted: string;
+}
+interface IRow {
+  rowIndex: number;
+  columnId: number;
+  itemId: number;
+
+  warehouses: IWarehouseMeta[];
+}
+
+/**
+ * Fetches the item warehouse quantity.
+ * @returns
+ */
+export const useFetchItemWarehouseQuantity = () => {
+  // Holds the table row meta of the given row index.
+  const [tableRow, setTableRow] = React.useState<IItemMeta | null>(null);
+
+  // Table cells loading coords.
+  const [cellsLoading, setCellsLoading] = React.useState<CellLoading | null>(
+    null,
+  );
+  // Fetches the item warehouse locations.
+  const {
+    data: item,
+    isLoading: isItemLoading,
+    isSuccess: isItemSuccess,
+  } = useItem(tableRow?.itemId, {
+    enabled: !!(tableRow && tableRow.itemId),
+  });
+
+  // Effects with row cells loading state.
+  React.useEffect(() => {
+    setCellsLoading(null);
+
+    if (isItemLoading && tableRow) {
+      setCellsLoading([
+        [tableRow.rowIndex, 'quantity'],
+        [tableRow.rowIndex, 'source_warehouse'],
+        [tableRow.rowIndex, 'destination_warehouse'],
+      ]);
+    }
+  }, [isItemLoading, tableRow]);
+
+  // New table row meta.
+  const newRowMeta = React.useMemo(() => {
+    return isItemSuccess
+      ? {
+          ...tableRow,
+          warehouses: transformWarehousesQuantity(item),
+        }
+      : null;
+  }, [isItemSuccess, item, tableRow]);
+
+  // Reset the table row.
+  const resetTableRow = React.useCallback(() => {
+    setTableRow(null);
+    setCellsLoading(null);
+  }, []);
+
+  return {
+    setTableRow,
+    resetTableRow,
+
+    cellsLoading,
+    newRowMeta,
+  };
+};
+
+const transformWarehousesQuantity = (item) => {
+  return item.item_warehouses.map((warehouse) => ({
+    warehouseId: warehouse.warehouse_id,
+    quantityOnHand: warehouse.quantity_on_hand,
+    quantityOnHandFormatted: warehouse.quantity_on_hand_formatted,
+  }));
+};

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/utils.tsx

@@ -0,0 +1,218 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
+import { keyBy, omit } from 'lodash';
+import { useFormikContext } from 'formik';
+
+import { useWatch } from '@/hooks/utils';
+import { AppToaster } from '@/components';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import {
+  compose,
+  transformToForm,
+  repeatValue,
+  transactionNumber,
+  defaultFastFieldShouldUpdate,
+  updateTableRow,
+  updateMinEntriesLines,
+  updateRemoveLineByIndex,
+  orderingLinesIndexes,
+  updateAutoAddNewLine,
+  updateTableCell,
+} from '@/utils';
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from '@/containers/Entries/utils';
+
+export const MIN_LINES_NUMBER = 1;
+
+// Default warehouse transfer entry.
+export const defaultWarehouseTransferEntry = {
+  index: 0,
+  item_id: '',
+  source_warehouse: '',
+  destination_warehouse: '',
+  description: '',
+  quantity: '',
+};
+
+// Default warehouse transfer entry.
+export const defaultWarehouseTransfer = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  transaction_number: '',
+  from_warehouse_id: '',
+  to_warehouse_id: '',
+  reason: '',
+  transfer_initiated: '',
+  transfer_delivered: '',
+  entries: [...repeatValue(defaultWarehouseTransferEntry, MIN_LINES_NUMBER)],
+};
+
+export const ITEMS_FILTER_ROLES_QUERY = JSON.stringify([
+  { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+]);
+
+/**
+ * Transform warehouse transfer to initial values in edit mode.
+ */
+export function transformToEditForm(warehouse) {
+  const initialEntries = [
+    ...warehouse.entries.map((warehouse) => ({
+      ...transformToForm(warehouse, defaultWarehouseTransferEntry),
+    })),
+    ...repeatValue(
+      defaultWarehouseTransferEntry,
+      Math.max(MIN_LINES_NUMBER - warehouse.entries.length, 0),
+    ),
+  ];
+  const entries = compose(
+    ensureEntriesHaveEmptyLine(defaultWarehouseTransferEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(warehouse, defaultWarehouseTransfer),
+    entries,
+  };
+}
+
+/**
+ * Syncs transfer no. settings with form.
+ */
+export const useObserveTransferNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const transferNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('transaction_number', transferNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
+
+/**
+ * Detarmines warehouse entries field when should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    newProps.formik.values.from_warehouse_id !==
+      oldProps.formik.values.from_warehouse_id ||
+    newProps.formik.values.to_warehouse_id !==
+      oldProps.formik.values.to_warehouse_id ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Transformes the form values to request body values.
+ */
+export function transformValueToRequest(values) {
+  const entries = values.entries.filter(
+    (item) => item.item_id && item.quantity,
+  );
+  return {
+    ...values,
+    entries: entries.map((entry) => ({
+      ...omit(entry, [
+        'warehouses',
+        'destination_warehouse',
+        'source_warehouse',
+        'cost',
+      ]),
+    })),
+  };
+}
+
+/**
+ * Transformes the response errors types.
+ */
+export const transformErrors = (errors, { setErrors }) => {
+  if (
+    errors.some(({ type }) => type === 'WAREHOUSES_TRANSFER_SHOULD_NOT_BE_SAME')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'warehouse_transfer.error.could_not_transfer_item_from_source_to_destination',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+/**
+ * Mutates table cell.
+ * @param {*} rowIndex
+ * @param {*} columnId
+ * @param {*} defaultEntry
+ * @param {*} value
+ * @param {*} entries
+ * @returns
+ */
+export const mutateTableCell = R.curry(
+  (rowIndex, columnId, defaultEntry, value, entries) => {
+    return compose(
+      // Update auto-adding new line.
+      updateAutoAddNewLine(defaultEntry, ['item_id']),
+      // Update the row value of the given row index and column id.
+      updateTableCell(rowIndex, columnId, value),
+    )(entries);
+  },
+);
+
+/**
+ * Compose table rows when insert a new row to table rows.
+ */
+export const mutateTableRow = R.curry((rowIndex, newRow, rows) => {
+  return compose(orderingLinesIndexes, updateTableRow(rowIndex, newRow))(rows);
+});
+
+/**
+ * Deletes the table row from the given rows.
+ */
+export const deleteTableRow = R.curry((rowIndex, defaultEntry, rows) => {
+  return compose(
+    // Ensure minimum lines count.
+    updateMinEntriesLines(MIN_LINES_NUMBER, defaultEntry),
+    // Remove the line by the given index.
+    updateRemoveLineByIndex(rowIndex),
+  )(rows);
+});
+
+/**
+ * Watches the inventory items cost and sets the cost to form entries.
+ */
+export function useWatchItemsCostSetCostEntries() {
+  const { isItemsCostSuccess, inventoryItemsCost } =
+    useWarehouseTransferFormContext();
+
+  const {
+    setFieldValue,
+    values: { entries },
+  } = useFormikContext();
+
+  // Transformes items cost map by item id.
+  const itemsCostByItemId = React.useMemo(
+    () => keyBy(inventoryItemsCost, 'item_id'),
+    [inventoryItemsCost],
+  );
+
+  // Observes the inventory items cost and set form entries with cost.
+  useWatch(() => {
+    if (!isItemsCostSuccess) return;
+
+    const newEntries = entries.map((entry) => {
+      const costEntry = itemsCostByItemId[entry.item_id];
+
+      return entry.item_id
+        ? {
+            ...entry,
+            cost: costEntry?.average,
+          }
+        : entry;
+    });
+    setFieldValue('entries', newEntries);
+  }, inventoryItemsCost);
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.tsx

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionViewsList,
+  DashboardActionsBar,
+} from '@/components';
+
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse Transfers actions bar.
+ */
+function WarehouseTransfersActionsBar({
+  // #withWarehouseTransfers
+  warehouseTransferFilterRoles,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
+  // #withSettings
+  warehouseTransferTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // credit note list context.
+  const { WarehouseTransferView, fields, refresh } =
+    useWarehouseTranfersListContext();
+
+  // Handle new warehouse transfer button click.
+  const handleClickNewWarehouseTransfer = () => {
+    history.push('/warehouses-transfers/new');
+  };
+
+  // Handle click a refresh warehouse transfers
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle views tab change.
+  const handleTabChange = (view) => {
+    setWarehouseTransferTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('warehouseTransfers', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'warehouse_transfer'}
+          views={WarehouseTransferView}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'warehouse_transfer.action.new_warehouse_transfer'} />}
+          onClick={handleClickNewWarehouseTransfer}
+        />
+        <NavbarDivider />
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: warehouseTransferFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setWarehouseTransferTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={warehouseTransferFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={warehouseTransferTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withSettingsActions,
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferFilterRoles: warehouseTransferTableState.filterRoles,
+  })),
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersActionsBar);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.tsx

@@ -0,0 +1,155 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  DataTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  DashboardContentTable,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { useWarehouseTransfersTableColumns, ActionsMenu } from './components';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import WarehouseTransfersEmptyStatus from './WarehouseTransfersEmptyStatus';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse transfers datatable.
+ */
+function WarehouseTransfersDataTable({
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  warehouseTransferTableSize,
+}) {
+  const history = useHistory();
+
+  // Warehouse transfers list context.
+  const {
+    warehousesTransfers,
+    pagination,
+    isEmptyStatus,
+    isWarehouseTransfersLoading,
+    isWarehouseTransfersFetching,
+  } = useWarehouseTranfersListContext();
+
+  // Invoices table columns.
+  const columns = useWarehouseTransfersTableColumns();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.WAREHOUSE_TRANSFERS);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setWarehouseTransferTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setWarehouseTransferTableState],
+  );
+
+  // Display invoice empty status instead of the table.
+  if (isEmptyStatus) {
+    return <WarehouseTransfersEmptyStatus />;
+  }
+
+  // Handle view detail.
+  const handleViewDetailWarehouseTransfer = ({ id }) => {
+    openDrawer('warehouse-transfer-detail-drawer', { warehouseTransferId: id });
+  };
+
+  // Handle edit warehouse transfer.
+  const handleEditWarehouseTransfer = ({ id }) => {
+    history.push(`/warehouses-transfers/${id}/edit`);
+  };
+
+  // Handle delete warehouse transfer.
+  const handleDeleteWarehouseTransfer = ({ id }) => {
+    openAlert('warehouse-transfer-delete', { warehouseTransferId: id });
+  };
+
+  // Handle initiate warehouse transfer.
+  const handleInitateWarehouseTransfer = ({ id }) => {
+    openAlert('warehouse-transfer-initate', { warehouseTransferId: id });
+  };
+  // Handle transferred warehouse transfer.
+  const handleTransferredWarehouseTransfer = ({ id }) => {
+    openAlert('transferred-warehouse-transfer', { warehouseTransferId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('warehouse-transfer-detail-drawer', {
+      warehouseTransferId: cell.row.original.id,
+    });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={warehousesTransfers}
+        loading={isWarehouseTransfersLoading}
+        headerLoading={isWarehouseTransfersLoading}
+        progressBarLoading={isWarehouseTransfersFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={warehouseTransferTableSize}
+        payload={{
+          onViewDetails: handleViewDetailWarehouseTransfer,
+          onDelete: handleDeleteWarehouseTransfer,
+          onEdit: handleEditWarehouseTransfer,
+          onInitate: handleInitateWarehouseTransfer,
+          onTransfer: handleTransferredWarehouseTransfer,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+export default compose(
+  withDashboardActions,
+  withWarehouseTransfersActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersDataTable);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Button, Intent } from '@blueprintjs/core';
+import { EmptyStatus, FormattedMessage as T } from '@/components';
+
+export default function WarehouseTransfersEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'warehouse_transfer.empty_status.title'} />}
+      description={
+        <p>
+          <T id={'warehouse_transfer.empty_status.description'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/warehouses-transfers/new');
+            }}
+          >
+            <T id={'warehouse_transfer.action.new_warehouse_transfer'} />
+          </Button>
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DashboardPageContent } from '@/components';
+import WarehouseTransfersActionsBar from './WarehouseTransfersActionsBar';
+import WarehouseTransfersViewTabs from './WarehouseTransfersViewTabs';
+import WarehouseTransfersDataTable from './WarehouseTransfersDataTable';
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+
+import { WarehouseTransfersListProvider } from './WarehouseTransfersListProvider';
+import { transformTableStateToQuery, compose } from '@/utils';
+
+function WarehouseTransfersList({
+  // #withWarehouseTransfers
+  warehouseTransferTableState,
+  warehouseTransferTableStateChanged,
+
+  // #withWarehouseTransfersActions
+  resetWarehouseTransferTableState,
+}) {
+  // Resets the warehouse transfer table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetWarehouseTransferTableState();
+    },
+    [resetWarehouseTransferTableState],
+  );
+
+  return (
+    <WarehouseTransfersListProvider
+      query={transformTableStateToQuery(warehouseTransferTableState)}
+      tableStateChanged={warehouseTransferTableStateChanged}
+    >
+      <WarehouseTransfersActionsBar />
+      <DashboardPageContent>
+        <WarehouseTransfersViewTabs />
+        <WarehouseTransfersDataTable />
+      </DashboardPageContent>
+    </WarehouseTransfersListProvider>
+  );
+}
+
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(
+    ({ warehouseTransferTableState, warehouseTransferTableStateChanged }) => ({
+      warehouseTransferTableState,
+      warehouseTransferTableStateChanged,
+    }),
+  ),
+)(WarehouseTransfersList);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useWarehousesTransfers,
+  useRefreshWarehouseTransfers,
+} from '@/hooks/query';
+
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const WarehouseTransfersListContext = React.createContext();
+
+/**
+ * WarehouseTransfer data provider
+ */
+function WarehouseTransfersListProvider({
+  query,
+  tableStateChanged,
+  ...props
+}) {
+  // warehouse transfers refresh action.
+  const { refresh } = useRefreshWarehouseTransfers();
+
+  // Fetch warehouse transfers list according to the given custom view id.
+  const {
+    data: { warehousesTransfers, pagination, filterMeta },
+    isFetching: isWarehouseTransfersFetching,
+    isLoading: isWarehouseTransfersLoading,
+  } = useWarehousesTransfers(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(warehousesTransfers) &&
+    !tableStateChanged &&
+    !isWarehouseTransfersLoading;
+
+  // Fetch create notes resource views and fields.
+  const { data: WarehouseTransferView, isLoading: isViewsLoading } =
+    useResourceViews('warehouse_transfer');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('warehouse_transfer');
+
+  // Provider payload.
+  const provider = {
+    warehousesTransfers,
+    pagination,
+
+    WarehouseTransferView,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isWarehouseTransfersLoading,
+    isWarehouseTransfersFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'warehouse-transfers-list'}
+    >
+      <WarehouseTransfersListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useWarehouseTranfersListContext = () =>
+  React.useContext(WarehouseTransfersListContext);
+
+export { WarehouseTransfersListProvider, useWarehouseTranfersListContext };

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { DashboardViewsTabs } from '@/components';
+
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import { compose, transfromViewsToTabs } from '@/utils';
+
+/**
+ * Warehouse transfer view tabs.
+ */
+function WarehouseTransfersViewTabs({
+  // #withWarehouseTransfers
+  warehouseTransferCurrentView,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+}) {
+  const { WarehouseTransferView } = useWarehouseTranfersListContext();
+
+  const tabs = transfromViewsToTabs(WarehouseTransferView);
+
+  // Handles click a new view tab.
+  const handleClickNewView = () => {};
+
+  // Handles the active tab chaing.
+  const handleTabsChange = (viewSlug) => {
+    setWarehouseTransferTableState({ viewSlug });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={warehouseTransferCurrentView}
+          resourceName={'warehouse_transfer'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferCurrentView: warehouseTransferTableState?.viewSlug,
+  })),
+)(WarehouseTransfersViewTabs);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Choose,
+  If,
+  Icon,
+} from '@/components';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onViewDetails, onInitate, onTransfer },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('warehouse_transfer.action.edit_warehouse_transfer')}
+        onClick={safeCallback(onEdit, original)}
+      />
+
+      <If condition={!original.is_transferred && !original.is_initiated}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('warehouse_transfer.action.initiate_transfer')}
+          onClick={safeCallback(onInitate, original)}
+        />
+      </If>
+      <If condition={original.is_initiated && !original.is_transferred}>
+        <MenuItem
+          icon={<Icon icon="send" iconSize={16} />}
+          text={intl.get('warehouse_transfer.action.mark_as_transferred')}
+          onClick={safeCallback(onTransfer, original)}
+        />
+      </If>
+
+      <MenuDivider />
+      <MenuItem
+        text={intl.get('warehouse_transfer.action.delete_warehouse_transfer')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(warehouse) {
+  return (
+    <Choose>
+      <Choose.When
+        condition={warehouse.is_initiated && !warehouse.is_transferred}
+      >
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
+          <T id={'warehouse_transfer.label.transfer_initiated'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When
+        condition={warehouse.is_initiated && warehouse.is_transferred}
+      >
+        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+          <T id={'warehouse_transfer.label.transferred'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true} intent={Intent.NONE} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Retrieve warehouse transfer table columns.
+ */
+export function useWarehouseTransfersTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'transaction_number',
+        Header: intl.get('warehouse_transfer.column.transfer_no'),
+        accessor: 'transaction_number',
+        width: 100,
+        className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'from_warehouse',
+        Header: intl.get('warehouse_transfer.column.from_warehouse'),
+        accessor: 'from_warehouse.name',
+        width: 140,
+        className: 'from_warehouse',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'to_warehouse',
+        Header: intl.get('warehouse_transfer.column.to_warehouse'),
+        accessor: 'to_warehouse.name',
+        width: 140,
+        className: 'to_warehouse',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getWarehouseTransfersTableStateFactory,
+  isWarehouseTransferTableStateChangedFactory,
+} from '@/store/WarehouseTransfer/warehouseTransfer.selector';
+
+export default (mapState) => {
+  const getWarehouseTransferTableState = getWarehouseTransfersTableStateFactory();
+  const isWarehouseTransferTableChanged = isWarehouseTransferTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      warehouseTransferTableState: getWarehouseTransferTableState(state, props),
+      warehouseTransferTableStateChanged: isWarehouseTransferTableChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setWarehouseTransferTableState,
+  resetWarehouseTransferTableState,
+} from '@/store/WarehouseTransfer/warehouseTransfer.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setWarehouseTransferTableState: (queries) =>
+    dispatch(setWarehouseTransferTableState(queries)),
+  resetWarehouseTransferTableState: () => dispatch(resetWarehouseTransferTableState()),
+});
+
+export default connect(null, mapDipatchToProps);

packages/webapp/src/containers/WarehouseTransfers/WarehousesTransfersAlerts.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+
+const WarehouseTransferDeleteAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/WarehousesTransfer/WarehouseTransferDeleteAlert'
+    ),
+);
+const WarehouseTransferInitiateAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/WarehousesTransfer/WarehouseTransferInitiateAlert'
+    ),
+);
+const TransferredWarehouseTransferAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/WarehousesTransfer/TransferredWarehouseTransferAlert'
+    ),
+);
+
+/**
+ * Warehouses alerts.
+ */
+export default [
+  {
+    name: 'warehouse-transfer-delete',
+    component: WarehouseTransferDeleteAlert,
+  },
+  {
+    name: 'warehouse-transfer-initate',
+    component: WarehouseTransferInitiateAlert,
+  },
+  {
+    name: 'transferred-warehouse-transfer',
+    component: TransferredWarehouseTransferAlert,
+  },
+];

packages/webapp/src/containers/WarehouseTransfers/utils.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { find, get } from 'lodash';
+import { Button, Menu, MenuItem } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
+import { Align, CellType } from '@/constants';
+import {
+  MoneyFieldCell,
+  Icon,
+  ItemsListCell,
+  InputGroupCell,
+} from '@/components';
+
+/**
+ * Actions cell renderer component.
+ */
+export function ActionsCellRenderer({
+  row: { index },
+  payload: { removeRow },
+}) {
+  const onRemoveRole = () => {
+    removeRow(index);
+  };
+
+  const exampleMenu = (
+    <Menu>
+      <MenuItem
+        onClick={onRemoveRole}
+        text={intl.get('warehouse_transfer.entries.remove_row')}
+      />
+    </Menu>
+  );
+
+  return (
+    <Popover2 content={exampleMenu} placement="left-start">
+      <Button
+        icon={<Icon icon={'more-13'} iconSize={13} />}
+        iconSize={14}
+        className="m12"
+        minimal={true}
+      />
+    </Popover2>
+  );
+}
+ActionsCellRenderer.cellType = CellType.Button;
+
+function SourceWarehouseAccessorCell({ row: { original }, payload }) {
+  // Ignore display zero if the item not selected yet.
+  if (!original.item_id) return '';
+
+  const warehouse = find(
+    original.warehouses,
+    (w) => w.warehouseId === payload.sourceWarehouseId,
+  );
+  return get(warehouse, 'quantityOnHandFormatted', '0');
+}
+
+function DistentionWarehouseAccessorCell({ row: { original }, payload }) {
+  // Ignore display zero if the item not selected yet.
+  if (!original.item_id) return '';
+
+  const warehouse = find(
+    original.warehouses,
+    (w) => w.warehouseId === payload.destinationWarehouseId,
+  );
+  return get(warehouse, 'quantityOnHandFormatted', '0');
+}
+
+/**
+ * Retrieves warehouse transfer table columns.
+ * @returns
+ */
+export const useWarehouseTransferTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'item_id',
+        Header: intl.get('warehouse_transfer.column.item_name'),
+        accessor: 'item_id',
+        Cell: ItemsListCell,
+        disableSortBy: true,
+        width: 130,
+        className: 'item',
+        fieldProps: { allowCreate: true },
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: InputGroupCell,
+        disableSortBy: true,
+        className: 'description',
+        width: 120,
+      },
+      {
+        id: 'source_warehouse',
+        Header: intl.get('warehouse_transfer.column.source_warehouse'),
+        accessor: 'source_warehouse',
+        disableSortBy: true,
+        Cell: SourceWarehouseAccessorCell,
+        align: Align.Right,
+        width: 100,
+      },
+      {
+        id: 'destination_warehouse',
+        Header: intl.get('warehouse_transfer.column.destination_warehouse'),
+        accessor: 'destination_warehouse',
+        Cell: DistentionWarehouseAccessorCell,
+        disableSortBy: true,
+        align: Align.Right,
+        width: 100,
+      },
+      {
+        Header: intl.get('warehouse_transfer.column.transfer_quantity'),
+        accessor: 'quantity',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        align: Align.Right,
+        width: 100,
+      },
+      {
+        Header: intl.get('warehouse_transfer.column.cost_price'),
+        accessor: 'cost',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        align: Align.Right,
+        width: 80,
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+        align: Align.Center,
+      },
+    ],
+    [],
+  );
+};