From 8bf64c68e0da527a77552076c5dfbb06eacfd373 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 3 Feb 2022 00:27:42 +0200
Subject: [PATCH] feat(warehouseTransfer): add crud warehouse transfer.

---
 src/common/tables.js                          |  1 +
 .../WarehouseTransferDetailDrawerProvider.js  |  4 +-
 .../WarehouseTransferForm.js                  |  4 +-
 .../WarehouseTransferFormPage.js              |  7 +-
 .../WarehouseTransferFormProvider.js          | 14 +++-
 .../WarehouseTransfersActionsBar.js           | 62 ++++++++++++++--
 .../WarehouseTransfersDataTable.js            | 70 +++++++++++++------
 .../WarehouseTransfersEmptyStatus.js          |  2 +-
 .../WarehouseTransfersList.js                 | 40 +++++++++--
 .../WarehouseTransfersListProvider.js         | 58 ++++++++++++++-
 .../WarehouseTransfersViewTabs.js             | 28 ++++++--
 .../WarehouseTransfersLanding/components.js   | 31 ++++----
 .../withWarehouseTransfers.js                 | 19 +++++
 .../withWarehouseTransfersActions.js          | 13 ++++
 src/hooks/query/warehouses.js                 | 33 +++++++--
 src/routes/dashboard.js                       |  7 +-
 .../warehouseTransfer.actions.js              | 14 ++++
 .../warehouseTransfer.reducer.js              | 34 +++++++++
 .../warehouseTransfer.selector.js             | 33 +++++++++
 .../warehouseTransfer.type.js                 |  4 ++
 src/store/reducers.js                         |  2 +
 src/store/types.js                            |  4 +-
 22 files changed, 407 insertions(+), 77 deletions(-)
 create mode 100644 src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.js
 create mode 100644 src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.js
 create mode 100644 src/store/WarehouseTransfer/warehouseTransfer.actions.js
 create mode 100644 src/store/WarehouseTransfer/warehouseTransfer.reducer.js
 create mode 100644 src/store/WarehouseTransfer/warehouseTransfer.selector.js
 create mode 100644 src/store/WarehouseTransfer/warehouseTransfer.type.js

diff --git a/src/common/tables.js b/src/common/tables.js
index 59d6ca127..59c50dff7 100644
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -16,6 +16,7 @@ export const TABLES = {
   CASHFLOW_Transactions: 'cashflow_transactions',
   CREDIT_NOTES: 'credit_notes',
   VENDOR_CREDITS: 'vendor_credits',
+  WAREHOUSE_TRANSFERS:'warehouse_transfers'
 };
 
 export const TABLE_SIZE = {
diff --git a/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js b/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js
index 371131568..b470c954f 100644
--- a/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js
+++ b/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js
@@ -9,10 +9,10 @@ const WarehouseTransferDetailDrawerContext = React.createContext();
  * Warehouse transfer detail drawer provider.
  */
 function WarehouseTransferDetailDrawerProvider({
-  warehouseTransferId = 5,
+  warehouseTransferId,
   ...props
 }) {
-  // Handle fetch invoice detail.
+  // Handle fetch warehouse transfer detail.
   const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
     useWarehouseTransfer(warehouseTransferId, {
       enabled: !!warehouseTransferId,
diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js
index 1d172e6c4..760a8e306 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js
@@ -53,8 +53,8 @@ function WarehouseTransferForm({
   // Form initial values.
   const initialValues = React.useMemo(
     () => ({
-      ...(!isEmpty(null)
-        ? { ...transformToEditForm(null) }
+      ...(!isEmpty(warehouseTransfer)
+        ? { ...transformToEditForm(warehouseTransfer) }
         : {
             ...defaultWarehouseTransfer,
             entries: orderingLinesIndexes(defaultWarehouseTransfer.entries),
diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.js
index b9862488c..e7a622010 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
-import '../../../style/pages/WarehouseTransfers/PageForm.scss'
+import '../../../style/pages/WarehouseTransfers/PageForm.scss';
 import WarehouseTransferForm from './WarehouseTransferForm';
 import { WarehouseTransferFormProvider } from './WarehouseTransferFormProvider';
 
@@ -8,8 +9,10 @@ import { WarehouseTransferFormProvider } from './WarehouseTransferFormProvider';
  * WarehouseTransfer form page.
  */
 export default function WarehouseTransferFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
   return (
-    <WarehouseTransferFormProvider warehouseTransferId={null}>
+    <WarehouseTransferFormProvider warehouseTransferId={idAsInteger}>
       <WarehouseTransferForm />
     </WarehouseTransferFormProvider>
   );
diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js
index 5c57d645e..1570ad160 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js
@@ -3,6 +3,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useItems,
   useWarehouses,
+  useWarehouseTransfer,
   useCreateWarehouseTransfer,
   useEditWarehouseTransfer,
 } from 'hooks/query';
@@ -24,6 +25,12 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     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,
@@ -47,7 +54,7 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
   const provider = {
     items,
     warehouses,
-    warehouseTransfer: [],
+    warehouseTransfer,
 
     isItemsFetching,
     isWarehouesFetching,
@@ -58,9 +65,12 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     createWarehouseTransferMutate,
     editWarehouseTransferMutate,
   };
+
   return (
     <DashboardInsider
-      loading={isItemsLoading || isWarehouesLoading}
+      loading={
+        isItemsLoading || isWarehouesLoading || isWarehouseTransferLoading
+      }
       name={'warehouse-transfer-form'}
     >
       <WarehouseFormContext.Provider value={provider} {...props} />
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js
index 048a7151f..c0ad7a97e 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js
@@ -18,6 +18,11 @@ import {
 } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import withSettings from '../../Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
@@ -26,11 +31,24 @@ 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');
@@ -38,14 +56,19 @@ function WarehouseTransfersActionsBar({
 
   // Handle click a refresh warehouse transfers
   const handleRefreshBtnClick = () => {
-    // refresh();
+    refresh();
   };
 
   // Handle views tab change.
-  const handleTabChange = (view) => {};
+  const handleTabChange = (view) => {
+    setWarehouseTransferTableState({ viewSlug: view ? view.slug : null });
+  };
 
   // Handle table row size change.
-  const handleTableRowSizeChange = (size) => {};
+  const handleTableRowSizeChange = (size) => {
+    addSetting('warehouseTransfer', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,6 +86,22 @@ function WarehouseTransfersActionsBar({
           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'} />}
@@ -80,8 +119,8 @@ function WarehouseTransfersActionsBar({
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
-        // initialValue={warehouseTransfersTableSize}
-        // onChange={handleTableRowSizeChange}
+          initialValue={warehouseTransferTableSize}
+          onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
       </NavbarGroup>
@@ -89,11 +128,20 @@ function WarehouseTransfersActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}
-          // onClick={handleRefreshBtnClick}
+          onClick={handleRefreshBtnClick}
         />
       </NavbarGroup>
     </DashboardActionsBar>
   );
 }
 
-export default compose(withSettingsActions)(WarehouseTransfersActionsBar);
+export default compose(
+  withSettingsActions,
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferFilterRoles: warehouseTransferTableState.filterRoles,
+  })),
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersActionsBar);
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js
index f707d70a3..a6dd9c907 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js
@@ -11,6 +11,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -25,6 +26,9 @@ import { compose } from 'utils';
  * Warehouse transfers datatable.
  */
 function WarehouseTransfersDataTable({
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
   // #withAlertsActions
   openAlert,
 
@@ -33,15 +37,45 @@ function WarehouseTransfersDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  warehouseTransferTableSize,
 }) {
   const history = useHistory();
 
   // Warehouse transfers list context.
-  const { isEmptyStatus } = useWarehouseTranfersListContext();
+  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 });
@@ -64,41 +98,31 @@ function WarehouseTransfersDataTable({
     });
   };
 
-  // Local storage memorizing columns widths.
-  const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths(TABLES.WAREHOUSETRANSFERS);
-
-  // Handles fetch data once the table state change.
-  const handleDataTableFetchData = React.useCallback(
-    ({ pageSize, pageIndex, sortBy }) => {},
-    [],
-  );
-
-  // Display invoice empty status instead of the table.
-  if (isEmptyStatus) {
-    return <WarehouseTransfersEmptyStatus />;
-  }
-
   return (
     <DashboardContentTable>
       <DataTable
         columns={columns}
-        data={[]}
-        // loading={}
-        // headerLoading={}
-        // progressBarLoading={}
+        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={invoicesTableSize}
+        size={warehouseTransferTableSize}
         payload={{
           onViewDetails: handleViewDetailWarehouseTransfer,
           onDelete: handleDeleteWarehouseTransfer,
@@ -110,7 +134,11 @@ function WarehouseTransfersDataTable({
 }
 export default compose(
   withDashboardActions,
+  withWarehouseTransfersActions,
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
 )(WarehouseTransfersDataTable);
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js
index 2672f4be0..9cb76ad5a 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js
@@ -17,7 +17,7 @@ export default function WarehouseTransfersEmptyStatus() {
             intent={Intent.PRIMARY}
             large={true}
             onClick={() => {
-              history.push('/warehouse-transfers/new');
+              history.push('/warehouses-transfers/new');
             }}
           >
             <T id={'warehouse_transfer.action.new_warehouse_transfer'} />
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js
index 8f5eeb3a4..525316331 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js
@@ -3,16 +3,36 @@ import React from 'react';
 // style..
 import { DashboardPageContent } from 'components';
 import WarehouseTransfersActionsBar from './WarehouseTransfersActionsBar';
-
 import WarehouseTransfersViewTabs from './WarehouseTransfersViewTabs';
 import WarehouseTransfersDataTable from './WarehouseTransfersDataTable';
 
-import { WarehouseTransfersListProvider } from './WarehouseTransfersListProvider';
-import { compose } from 'utils';
+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],
+  );
 
-function WarehouseTransfersList({}) {
   return (
-    <WarehouseTransfersListProvider>
+    <WarehouseTransfersListProvider
+      query={transformTableStateToQuery(warehouseTransferTableState)}
+      tableStateChanged={warehouseTransferTableStateChanged}
+    >
       <WarehouseTransfersActionsBar />
       <DashboardPageContent>
         <WarehouseTransfersViewTabs />
@@ -22,4 +42,12 @@ function WarehouseTransfersList({}) {
   );
 }
 
-export default WarehouseTransfersList;
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(
+    ({ warehouseTransferTableState, warehouseTransferTableStateChanged }) => ({
+      warehouseTransferTableState,
+      warehouseTransferTableStateChanged,
+    }),
+  ),
+)(WarehouseTransfersList);
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js
index 24714d977..017341b6c 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js
@@ -2,22 +2,74 @@ import React from 'react';
 import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useWarehousesTransfers,
+  useRefreshWarehouseTransfers,
+} from 'hooks/query';
+
+import { getFieldsFromResourceMeta } from 'utils';
 
 const WarehouseTransfersListContext = React.createContext();
 
 /**
  * WarehouseTransfer data provider
  */
-function WarehouseTransfersListProvider({ ...props }) {
+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 = false;
+  const isEmptyStatus =
+    isEmpty(warehousesTransfers) && !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 name={'warehouse-transfers-list'}>
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'warehouse-transfers-list'}
+    >
       <WarehouseTransfersListContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js
index 8be06aa31..f0b75af98 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js
@@ -1,23 +1,34 @@
 import React from 'react';
-import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import { DashboardViewsTabs } from 'components';
 
-import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
 
-import { compose } from 'utils';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Warehouse transfer view tabs.
  */
-function WarehouseTransfersViewTabs() {
+function WarehouseTransfersViewTabs({
+  // #withWarehouseTransfers
+  warehouseTransferCurrentView,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+}) {
+  const { WarehouseTransferView } = useWarehouseTranfersListContext();
+
   // Handles click a new view tab.
   const handleClickNewView = () => {};
 
   // Handles the active tab chaing.
-  const handleTabsChange = (customView) => {};
+  const handleTabsChange = (viewSlug) => {
+    setWarehouseTransferTableState({ viewSlug });
+  };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
@@ -34,4 +45,9 @@ function WarehouseTransfersViewTabs() {
   );
 }
 
-export default WarehouseTransfersViewTabs;
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferCurrentView: warehouseTransferTableState?.viewSlug,
+  })),
+)(WarehouseTransfersViewTabs);
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js
index 0a4eb0dab..b7b9ee167 100644
--- a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js
@@ -58,7 +58,7 @@ export function useWarehouseTransfersTableColumns() {
       {
         id: 'date',
         Header: intl.get('date'),
-        accessor: 'date',
+        accessor: 'formatted_date',
         Cell: FormatDateCell,
         width: 120,
         className: 'date',
@@ -66,36 +66,29 @@ export function useWarehouseTransfersTableColumns() {
         textOverview: true,
       },
       {
-        id: 'transfer_no',
+        id: 'transaction_number',
         Header: intl.get('warehouse_transfer.column.transfer_no'),
-        accessor: 'transfer_no',
-        width: 120,
-        className: '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',
-        width: 150,
+        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',
-        width: 150,
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'reason',
-        Header: intl.get('reason'),
-        accessor: 'reason',
-        className: 'reason',
-        width: 120,
+        accessor: 'to_warehouse.name',
+        width: 140,
+        className: 'to_warehouse',
         clickable: true,
         textOverview: true,
       },
@@ -103,7 +96,7 @@ export function useWarehouseTransfersTableColumns() {
         id: 'status',
         Header: intl.get('status'),
         // accessor: (row) => statusAccessor(row),
-        width: 160,
+        width: 140,
         className: 'status',
         clickable: true,
       },
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.js
new file mode 100644
index 000000000..0f1173f68
--- /dev/null
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.js
@@ -0,0 +1,19 @@
+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);
+};
diff --git a/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.js b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.js
new file mode 100644
index 000000000..8e0bba3d5
--- /dev/null
+++ b/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.js
@@ -0,0 +1,13 @@
+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);
\ No newline at end of file
diff --git a/src/hooks/query/warehouses.js b/src/hooks/query/warehouses.js
index 27e052c2f..a095ab87e 100644
--- a/src/hooks/query/warehouses.js
+++ b/src/hooks/query/warehouses.js
@@ -1,4 +1,5 @@
 import { useQueryClient, useMutation } from 'react-query';
+import { transformPagination } from 'utils';
 import { useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';
 import t from './types';
@@ -129,7 +130,7 @@ export function useEditWarehouseTransfer(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    ([id, values]) => apiRequest.post(`warehouses/transfers${id}`, values),
+    ([id, values]) => apiRequest.post(`warehouses/transfers/${id}`, values),
     {
       onSuccess: (res, [id, values]) => {
         // Invalidate specific sale invoice.
@@ -162,6 +163,12 @@ export function useDeleteWarehouseTransfer(props) {
   });
 }
 
+const transformWarehousesTransfer = (res) => ({
+  warehousesTransfers: res.data.data,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter,
+});
+
 /**
  * Retrieve Warehoues list.
  */
@@ -170,8 +177,16 @@ export function useWarehousesTransfers(query, props) {
     [t.WAREHOUSE_TRANSFERS, query],
     { method: 'get', url: 'warehouses/transfers', params: query },
     {
-      select: (res) => res.data,
-      defaultData: [],
+      select: transformWarehousesTransfer,
+      defaultData: {
+        warehousesTransfers: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
       ...props,
     },
   );
@@ -186,9 +201,19 @@ export function useWarehouseTransfer(id, props, requestProps) {
     [t.WAREHOUSE_TRANSFER, id],
     { method: 'get', url: `warehouses/transfers/${id}`, ...requestProps },
     {
-      select: (res) => res.data.warehouse_transfer,
+      select: (res) => res.data.data,
       defaultData: {},
       ...props,
     },
   );
 }
+
+export function useRefreshWarehouseTransfers() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.WAREHOUSE_TRANSFERS);
+    },
+  };
+}
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index 3afc57e2b..8877b2396 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -117,10 +117,15 @@ export const getDashboardRoutes = () => [
     defaultSearchResource: RESOURCES_TYPES.ITEM,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+
   // Warehouse Transfer.
   {
     path: `/warehouses-transfers/:id/edit`,
-    component: lazy(() => import('containers/Items/ItemFormPage')),
+    component: lazy(() =>
+      import(
+        '../containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage'
+      ),
+    ),
     name: 'warehouse-transfer-edit',
     pageTitle: intl.get('warehouse_transfer.label.edit_warehouse_transfer'),
     backLink: true,
diff --git a/src/store/WarehouseTransfer/warehouseTransfer.actions.js b/src/store/WarehouseTransfer/warehouseTransfer.actions.js
new file mode 100644
index 000000000..5fa8af202
--- /dev/null
+++ b/src/store/WarehouseTransfer/warehouseTransfer.actions.js
@@ -0,0 +1,14 @@
+import t from 'store/types';
+
+export const setWarehouseTransferTableState = (queries) => {
+  return {
+    type: t.WAREHOUSE_TRANSFERS_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const resetWarehouseTransferTableState = () => {
+  return {
+    type: t.WAREHOUSE_TRANSFERS_TABLE_STATE_RESET,
+  };
+};
diff --git a/src/store/WarehouseTransfer/warehouseTransfer.reducer.js b/src/store/WarehouseTransfer/warehouseTransfer.reducer.js
new file mode 100644
index 000000000..193549eda
--- /dev/null
+++ b/src/store/WarehouseTransfer/warehouseTransfer.reducer.js
@@ -0,0 +1,34 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { persistReducer, purgeStoredState } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { createTableStateReducers } from 'store/tableState.reducer';
+import t from 'store/types';
+
+export const defaultTableQuery = {
+  pageSize: 20,
+  pageIndex: 0,
+  filterRoles: [],
+  viewSlug: null,
+};
+
+const initialState = {
+  tableState: defaultTableQuery,
+};
+
+const STORAGE_KEY = 'bigcapital:warehouse_transfers';
+
+const CONFIG = {
+  key: STORAGE_KEY,
+  whitelist: [],
+  storage,
+};
+
+const reducerInstance = createReducer(initialState, {
+  ...createTableStateReducers('WAREHOUSE_TRANSFERS', defaultTableQuery),
+
+  [t.RESET]: () => {
+    purgeStoredState(CONFIG);
+  },
+});
+
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/WarehouseTransfer/warehouseTransfer.selector.js b/src/store/WarehouseTransfer/warehouseTransfer.selector.js
new file mode 100644
index 000000000..ccea3c4df
--- /dev/null
+++ b/src/store/WarehouseTransfer/warehouseTransfer.selector.js
@@ -0,0 +1,33 @@
+import { isEqual } from 'lodash';
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './warehouseTransfer.reducer';
+
+const warehouseTransfersTableStateSelector = (state) =>
+  state.warehouseTransfers.tableState;
+
+/**
+ * Retrieve warehouse transfers table state.
+ */
+export const getWarehouseTransfersTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    warehouseTransfersTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
+
+/**
+ * Retrieve warehouse transfers table state.
+ */
+export const isWarehouseTransferTableStateChangedFactory = () =>
+  createDeepEqualSelector(
+    warehouseTransfersTableStateSelector,
+    (tableState) => {
+      return !isEqual(tableState, defaultTableQuery);
+    },
+  );
diff --git a/src/store/WarehouseTransfer/warehouseTransfer.type.js b/src/store/WarehouseTransfer/warehouseTransfer.type.js
new file mode 100644
index 000000000..280b1cc02
--- /dev/null
+++ b/src/store/WarehouseTransfer/warehouseTransfer.type.js
@@ -0,0 +1,4 @@
+export default {
+  WAREHOUSE_TRANSFERS_TABLE_STATE_SET: 'WAREHOUSE_TRANSFERS/TABLE_STATE_SET',
+  WAREHOUSE_TRANSFERS_TABLE_STATE_RESET: 'WAREHOUSE_TRANSFERS/TABLE_STATE_RESET',
+};
diff --git a/src/store/reducers.js b/src/store/reducers.js
index ad28a32e6..0223270ad 100644
--- a/src/store/reducers.js
+++ b/src/store/reducers.js
@@ -34,6 +34,7 @@ import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.red
 import plans from './plans/plans.reducer';
 import creditNotes from './CreditNote/creditNote.reducer';
 import vendorCredit from './VendorCredit/VendorCredit.reducer';
+import warehouseTransfers from './WarehouseTransfer/warehouseTransfer.reducer';
 
 const appReducer = combineReducers({
   authentication,
@@ -68,6 +69,7 @@ const appReducer = combineReducers({
   plans,
   creditNotes,
   vendorCredit,
+  warehouseTransfers,
 });
 
 // Reset the state of a redux store
diff --git a/src/store/types.js b/src/store/types.js
index 3e509142f..079344984 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -30,6 +30,7 @@ import subscription from './subscription/subscription.types';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.type';
 import creditNote from './CreditNote/creditNote.type';
 import vendorCredit from './VendorCredit/vendorCredit.type';
+import WarehouseTransfer from './WarehouseTransfer/warehouseTransfer.type';
 import plans from './plans/plans.types';
 
 export default {
@@ -65,5 +66,6 @@ export default {
   ...inventoryAdjustments,
   ...plans,
   ...creditNote,
-  ...vendorCredit
+  ...vendorCredit,
+  ...WarehouseTransfer,
 };