feat(warehouseTransfer): add warehouseTransfer.

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetail.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import WarehouseTransferDetailPanel from './WarehouseTransferDetailPanel';
+import WarehouseTransferDetailActionsBar from './WarehouseTransferDetailActionsBar';
+
+/**
+ * Warehouse transfer view detail.
+ * @returns {React.JSX}
+ */
+export default function WarehouseTransferDetail() {
+  return (
+    <WarehouseTransferRoot>
+      <WarehouseTransferDetailActionsBar />
+      <WarehouseTransferDetailsTabs />
+    </WarehouseTransferRoot>
+  );
+}
+
+/**
+ * Warehouse transfer details tabs.
+ * @returns {React.JSX}
+ */
+function WarehouseTransferDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<WarehouseTransferDetailPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const WarehouseTransferRoot = styled.div``;

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailActionsBar.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
+import {
+  DrawerActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  If,
+} from 'components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Warehouse transfer detail actions bar.
+ */
+function WarehouseTransferDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Handle edit warehosue transfer.
+  const handleEditWarehosueTransfer = () => {
+    // history.push(`/warehouse-transfers/${warehouseTransferId}/edit`);
+    closeDrawer('warehouse-transfer-detail-drawer');
+  };
+
+  // Handle delete warehouse transfer.
+  const handleDeletetWarehosueTransfer = () => {
+    // openAlert('warehouse-transfer-delete', { warehouseTransferId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'warehouse_transfer.action.edit_warehouse_transfer'} />}
+          onClick={handleEditWarehosueTransfer}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeletetWarehosueTransfer}
+        />
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(WarehouseTransferDetailActionsBar);

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerContent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import WarehouseTransferDetail from './WarehouseTransferDetail';
+import { WarehouseTransferDetailDrawerProvider } from './WarehouseTransferDetailDrawerProvider';
+
+/**
+ * Warehouse transfer detail drawer content.
+ */
+export default function WarehouseTransferDetailDrawerContent({
+  // #ownProp
+  warehouseTransferId,
+}) {
+  return (
+    <WarehouseTransferDetailDrawerProvider
+      warehouseTransferId={warehouseTransferId}
+    >
+      <DrawerBody>
+        <WarehouseTransferDetail />
+      </DrawerBody>
+    </WarehouseTransferDetailDrawerProvider>
+  );
+}

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+// import {} from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const WarehouseTransferDetailDrawerContext = React.createContext();
+
+/**
+ * Warehouse transfer detail drawer provider.
+ */
+function WarehouseTransferDetailDrawerProvider({
+  warehouseTransferId,
+  ...props
+}) {
+  const provider = {
+    warehouseTransferId,
+  };
+
+  return (
+    <DrawerLoading
+    // loading={}
+    >
+      <DrawerHeaderContent
+        name="warehouse-transfer-detail-drawer"
+        title={intl.get('warehouse_transfer.drawer.title', {
+          number: 'W-10',
+        })}
+      />
+      <WarehouseTransferDetailDrawerContext.Provider
+        value={provider}
+        {...props}
+      />
+    </DrawerLoading>
+  );
+}
+
+const useWarehouseDetailDrawerContext = () =>
+  React.useContext(WarehouseTransferDetailDrawerContext);
+
+export {
+  WarehouseTransferDetailDrawerProvider,
+  useWarehouseDetailDrawerContext,
+};

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailHeader.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
+
+/**
+ * Warehouse transfer details drawer header
+ */
+export default function WarehouseTransferDetailHeader() {
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">'$10'</span>
+          </AmountItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem label={intl.get('date')}>
+          {/* <FormatDate value={} /> */}
+        </DetailItem>
+
+        <DetailItem
+          label={intl.get('warehouse_transfer.drawer.label.transfer_number')}
+          // children={}
+        />
+        <DetailItem
+          label={intl.get('warehouse_transfer.drawer.label.from_warehouse')}
+          // children={}
+        />
+        <DetailItem
+          label={intl.get('warehouse_transfer.drawer.label.to_warehouse')}
+          // children={}
+        />
+        <DetailItem
+          label={intl.get('reason')}
+          // children={defaultTo(, '-')}
+        />
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailPanel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CommercialDocBox } from 'components';
+
+import WarehouseTransferDetailHeader from './WarehouseTransferDetailHeader';
+import WarehouseTransferDetailTable from './WarehouseTransferDetailTable';
+
+/**
+ * Warehouse transfer details panel.
+ */
+export default function WarehouseTransferDetailPanel() {
+  return (
+    <CommercialDocBox>
+      <WarehouseTransferDetailHeader />
+      <WarehouseTransferDetailTable />
+    </CommercialDocBox>
+  );
+}

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailTable.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CommercialDocEntriesTable } from 'components';
+import { TableStyle } from '../../../common';
+import { useWarehouseTransferReadOnlyEntriesColumns } from './utils';
+
+/**
+ * Warehouse transfer detail table.
+ * @returns {React.JSX}
+ */
+export default function WarehouseTransferDetailTable() {
+  // Warehouse transfer entries table columns.
+  const columns = useWarehouseTransferReadOnlyEntriesColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={[]}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

src/containers/Drawers/WarehouseTransferDetailDrawer/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const WarehouseTransferDetailDrawerContent = React.lazy(() =>
+  import('./WarehouseTransferDetailDrawerContent'),
+);
+
+/**
+ * Warehouse transfer detail drawer.
+ */
+function WarehouseTransferDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { warehouseTransferId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <WarehouseTransferDetailDrawerContent
+          warehouseTransferId={warehouseTransferId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(WarehouseTransferDetailDrawer);

src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import {
+  Icon,
+  FormattedMessage as T,
+  FormatNumberCell,
+  Choose,
+} from '../../../components';
+
+export const useWarehouseTransferReadOnlyEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('warehouse_transfer.column.item_name'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('warehouse_transfer.column.transfer_quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );