re-structure to monorepo.

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetail.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
+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``;

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailActionsBar.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+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, Icon, FormattedMessage as T } 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();
+
+  const { warehouseTransferId } = useWarehouseDetailDrawerContext();
+
+  // Handle edit warehosue transfer.
+  const handleEditWarehosueTransfer = () => {
+    history.push(`/warehouses-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);

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerContent.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useWarehouseTransfer } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+
+const WarehouseTransferDetailDrawerContext = React.createContext();
+
+/**
+ * Warehouse transfer detail drawer provider.
+ */
+function WarehouseTransferDetailDrawerProvider({
+  warehouseTransferId,
+  ...props
+}) {
+  // Handle fetch warehouse transfer detail.
+  const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
+    useWarehouseTransfer(warehouseTransferId, {
+      enabled: !!warehouseTransferId,
+    });
+
+  const provider = {
+    warehouseTransfer,
+    warehouseTransferId,
+  };
+
+  return (
+    <DrawerLoading loading={isWarehouseTransferLoading}>
+      <DrawerHeaderContent
+        name="warehouse-transfer-detail-drawer"
+        title={intl.get('warehouse_transfer.drawer.title', {
+          number: warehouseTransfer.transaction_number
+            ? `(${warehouseTransfer.transaction_number})`
+            : null,
+        })}
+      />
+      <WarehouseTransferDetailDrawerContext.Provider
+        value={provider}
+        {...props}
+      />
+    </DrawerLoading>
+  );
+}
+
+const useWarehouseDetailDrawerContext = () =>
+  React.useContext(WarehouseTransferDetailDrawerContext);
+
+export {
+  WarehouseTransferDetailDrawerProvider,
+  useWarehouseDetailDrawerContext,
+};

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailHeader.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { defaultTo } from 'lodash';
+
+import {
+  FormatDate,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from '@/components';
+import { WarehouseTransferDetailsStatus } from './utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
+
+/**
+ * Warehouse transfer details drawer header.
+ */
+export default function WarehouseTransferDetailHeader() {
+  const { warehouseTransfer } = useWarehouseDetailDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <StatusDetailItem>
+            <WarehouseTransferDetailsStatus
+              warehouseTransfer={warehouseTransfer}
+            />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('date')}>
+              <FormatDate value={warehouseTransfer.formatted_date} />
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get(
+                'warehouse_transfer.drawer.label.transfer_number',
+              )}
+              children={defaultTo(warehouseTransfer.transaction_number, '-')}
+            />
+            <DetailItem
+              label={intl.get('warehouse_transfer.drawer.label.from_warehouse')}
+              children={warehouseTransfer.from_warehouse.name}
+            />
+            <DetailItem
+              label={intl.get('warehouse_transfer.drawer.label.to_warehouse')}
+              children={warehouseTransfer.to_warehouse.name}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailPanel.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailTable.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+
+import { TableStyle } from '@/constants';
+import { CommercialDocEntriesTable } from '@/components';
+import { useWarehouseTransferReadOnlyEntriesColumns } from './utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
+
+/**
+ * Warehouse transfer detail table.
+ * @returns {React.JSX}
+ */
+export default function WarehouseTransferDetailTable() {
+  // Warehouse transfer entries table columns.
+  const columns = useWarehouseTransferReadOnlyEntriesColumns();
+
+  const {
+    warehouseTransfer: { entries },
+  } = useWarehouseDetailDrawerContext();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/index.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/utils.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Tag } from '@blueprintjs/core';
+import { getColumnWidth } from '@/utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
+
+import {
+  FormattedMessage as T,
+  FormatNumberCell,
+  TextOverviewTooltipCell,
+  Choose,
+} from '@/components';
+
+/**
+ * Retrieves the readonly warehouse transfer entries columns.
+ */
+export const useWarehouseTransferReadOnlyEntriesColumns = () => {
+  const {
+    warehouseTransfer: { entries },
+  } = useWarehouseDetailDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('warehouse_transfer.column.item_name'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 100,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('warehouse_transfer.column.description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('warehouse_transfer.column.transfer_quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Warehouses transfer details status.
+ * @returns {React.JSX}
+ */
+export function WarehouseTransferDetailsStatus({ warehouseTransfer }) {
+  return (
+    <Choose>
+      <Choose.When
+        condition={
+          warehouseTransfer.is_initiated && warehouseTransfer.is_transferred
+        }
+      >
+        <Tag minimal={false} intent={Intent.SUCCESS} round={true}>
+          <T id={'warehouse_transfer.label.transferred'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When
+        condition={
+          warehouseTransfer.is_initiated && !warehouseTransfer.is_transferred
+        }
+      >
+        <Tag minimal={false} intent={Intent.WARNING} round={true}>
+          <T id={'warehouse_transfer.label.transfer_initiated'} />
+        </Tag>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag minimal={false} intent={Intent.NONE} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}