re-structure to monorepo.

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.tsx

@@ -0,0 +1,49 @@
+// @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 InventoryAdjustmentDetailTab from './InventoryAdjustmentDetailTab';
+import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
+import InventoryAdjustmentDetailGLEntriesPanel from './InventoryAdjustmentDetailGLEntriesPanel';
+
+/**
+ * Inventory adjustment detail
+ * @returns {React.JSX}
+ */
+export default function InventoryAdjustmentDetail() {
+  return (
+    <InventoryAdjustmentDetailsRoot>
+      <InventoryAdjustmentDetailActionsBar />
+      <InventoryAdjustmentDetailTabs />
+    </InventoryAdjustmentDetailsRoot>
+  );
+}
+
+/**
+ * Invenoty adjusment details tabs.
+ * @returns {React.JSX}
+ */
+function InventoryAdjustmentDetailTabs() {
+  return (
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<InventoryAdjustmentDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<InventoryAdjustmentDetailGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const InventoryAdjustmentDetailsRoot = styled.div``;

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import {
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+  Can,
+} from '@/components';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+
+/**
+ * Inventory adjustment detail actions bar.
+ */
+function InventoryAdjustmentDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { inventoryId } = useInventoryAdjustmentDrawerContext();
+
+  // Handle delete inventory adjustment.
+  const handleDeleteInventoryAdjustment = () => {
+    openAlert('inventory-adjustment-delete', { inventoryId });
+  };
+
+  return (
+    <Can
+      I={InventoryAdjustmentAction.Delete}
+      a={AbilitySubject.InventoryAdjustment}
+    >
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInventoryAdjustment}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(InventoryAdjustmentDetailActionsBar);

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import { useTransactionsByReference } from '@/hooks/query';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Inentory adjustmet detail GL entries panel.
+ * @returns {React.JSX}
+ */
+export default function InventoryAdjustmentDetailGLEntriesPanel() {
+  const { inventoryId } = useInventoryAdjustmentDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: inventoryId,
+      reference_type: 'inventoryAdjustment',
+    },
+    { enabled: !!inventoryId },
+  );
+
+  return (
+    <InventoryAdjustmentGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InventoryAdjustmentGLEntriesRoot>
+  );
+}
+
+const InventoryAdjustmentGLEntriesRoot = styled(Card)``;

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { defaultTo } from 'lodash';
+import { DetailsMenu, DetailItem, FormatDate } from '@/components';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import InventoryAdjustmentDrawerCls from '@/style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+
+/**
+ * Inventory detail header.
+ */
+export default function InventoryAdjustmentDetailHeader() {
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
+
+  return (
+    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem label={intl.get('date')}>
+          <FormatDate value={inventoryAdjustment.date} />
+        </DetailItem>
+
+        <DetailItem label={intl.get('type')}>
+          {inventoryAdjustment.formatted_type}
+        </DetailItem>
+
+        <DetailItem label={intl.get('adjustment_account')}>
+          {inventoryAdjustment.adjustment_account.name}
+        </DetailItem>
+
+        <DetailItem name={'reference'} label={intl.get('reference_no')}>
+          {defaultTo(inventoryAdjustment.reference_no, '-')}
+        </DetailItem>
+
+        <DetailItem label={intl.get('published_at')}>
+          <FormatDate value={inventoryAdjustment.published_at} />
+        </DetailItem>
+
+        <DetailItem label={intl.get('reason')}>
+          {defaultTo(inventoryAdjustment.reason, '—')}
+        </DetailItem>
+
+        <DetailItem label={intl.get('created_at')}>
+          <FormatDate value={inventoryAdjustment.created_at} />
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { CommercialDocBox } from '@/components';
+
+import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
+import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
+
+export default function InventoryAdjustmentDetailTab() {
+  return (
+    <CommercialDocBox>
+      <InventoryAdjustmentDetailHeader />
+      <InventoryAdjustmentDetailTable />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+import { useInventoryAdjustmentEntriesColumns } from './utils';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+/**
+ * Inventory adjustment detail entries table.
+ */
+export default function InventoryAdjustmentDetailTable() {
+  // Inventory adjustment entries columns.
+  const columns = useInventoryAdjustmentEntriesColumns();
+
+  // Inventory adjustment details drawer context.
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={inventoryAdjustment.entries}
+      className={'table-constrant'}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DrawerBody } from '@/components';
+import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerProvider';
+import InventoryAdjustmentDetail from './InventoryAdjustmentDetail';
+
+/**
+ * Inventory adjustment drawer content.
+ */
+export default function InventoryAdjustmentDrawerContent({ inventoryId }) {
+  return (
+    <InventoryAdjustmentDrawerProvider inventoryId={inventoryId}>
+      <DrawerBody>
+        <InventoryAdjustmentDetail />
+      </DrawerBody>
+    </InventoryAdjustmentDrawerProvider>
+  );
+}

packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { useInventoryAdjustment } from '@/hooks/query';
+
+const InventoryAdjustmentDrawerContext = React.createContext();
+
+/**
+ * Inventory adjustment drawer provider.
+ */
+function InventoryAdjustmentDrawerProvider({ inventoryId, ...props }) {
+  // Handle fetch inventory adjustment .
+  const { data: inventoryAdjustment, isLoading: isAdjustmentsLoading } =
+    useInventoryAdjustment(inventoryId, {
+      enabled: !!inventoryId,
+    });
+
+  //provider.
+  const provider = {
+    inventoryAdjustment,
+    inventoryId,
+  };
+
+  return (
+    <DrawerLoading loading={isAdjustmentsLoading}>
+      <DrawerHeaderContent
+        name="inventory-adjustment-drawer"
+        title={intl.get('inventory_adjustment.details_drawer.title')}
+      />
+      <InventoryAdjustmentDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useInventoryAdjustmentDrawerContext = () =>
+  React.useContext(InventoryAdjustmentDrawerContext);
+
+export {
+  InventoryAdjustmentDrawerProvider,
+  useInventoryAdjustmentDrawerContext,
+};

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

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

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

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { getColumnWidth } from '@/utils';
+import { TextOverviewTooltipCell } from '@/components';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+export const useInventoryAdjustmentEntriesColumns = () => {
+  // Inventory adjustment details drawer context.
+  const {
+    inventoryAdjustment: { entries },
+  } = useInventoryAdjustmentDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('inventory_adjustment.column.product'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 100,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: getColumnWidth(entries, 'cost', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('value'),
+        accessor: 'value',
+        width: getColumnWidth(entries, 'value', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};