re-structure to monorepo.

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentList.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/InventoryAdjustments/List.scss';
+
+import { DashboardContentTable, DashboardPageContent } from '@/components';
+
+import { InventoryAdjustmentsProvider } from './InventoryAdjustmentsProvider';
+import InventoryAdjustmentTable from './InventoryAdjustmentTable';
+
+import withInventoryAdjustments from './withInventoryAdjustments';
+
+import { compose, transformTableStateToQuery } from '@/utils';
+
+/**
+ * Inventory Adjustment List.
+ */
+function InventoryAdjustmentList({
+  // #withInventoryAdjustments
+  inventoryAdjustmentTableState,
+}) {
+  return (
+    <InventoryAdjustmentsProvider
+      query={transformTableStateToQuery(inventoryAdjustmentTableState)}
+    >
+      <DashboardPageContent>
+        <DashboardContentTable>
+          <InventoryAdjustmentTable />
+        </DashboardContentTable>
+      </DashboardPageContent>
+    </InventoryAdjustmentsProvider>
+  );
+}
+
+export default compose(
+  withInventoryAdjustments(({ inventoryAdjustmentTableState }) => ({
+    inventoryAdjustmentTableState,
+  })),
+)(InventoryAdjustmentList);

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentTable.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable } from '@/components';
+import { TABLES } from '@/constants/tables';
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
+import { useInventoryAdjustmentsContext } from './InventoryAdjustmentsProvider';
+
+import withInventoryAdjustments from './withInventoryAdjustments';
+import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Inventory adjustments datatable.
+ */
+function InventoryAdjustmentDataTable({
+  // #withInventoryAdjustmentsActions
+  setInventoryAdjustmentTableState,
+
+  // #withInventoryAdjustments
+  inventoryAdjustmentTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  tableProps,
+}) {
+  const {
+    isAdjustmentsLoading,
+    isAdjustmentsFetching,
+
+    inventoryAdjustments,
+    pagination,
+  } = useInventoryAdjustmentsContext();
+
+  // Handle delete inventory adjustment transaction.
+  const handleDeleteAdjustment = ({ id }) => {
+    openAlert('inventory-adjustment-delete', { inventoryId: id });
+  };
+
+  // Handle the inventory adjustment publish action.
+  const handlePublishInventoryAdjustment = ({ id }) => {
+    openAlert('inventory-adjustment-publish', { inventoryId: id });
+  };
+  // Handle view detail inventory adjustment.
+  const handleViewDetailInventoryAdjustment = ({ id }) => {
+    openDrawer('inventory-adjustment-drawer', { inventoryId: id });
+  };
+
+  // Inventory adjustments columns.
+  const columns = useInventoryAdjustmentsColumns();
+
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.INVENTORY_ADJUSTMENTS);
+
+  // Handle the table fetch data once states changing.
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setInventoryAdjustmentTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setInventoryAdjustmentTableState],
+  );
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('inventory-adjustment-drawer', {
+      inventoryId: cell.row.original.id,
+    });
+  };
+  return (
+    <DataTable
+      columns={columns}
+      data={inventoryAdjustments}
+      loading={isAdjustmentsLoading}
+      headerLoading={isAdjustmentsLoading}
+      progressBarLoading={isAdjustmentsFetching}
+      noInitialFetch={true}
+      onFetchData={handleDataTableFetchData}
+      manualSortBy={true}
+      selectionColumn={true}
+      pagination={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      onCellClick={handleCellClick}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      payload={{
+        onDelete: handleDeleteAdjustment,
+        onPublish: handlePublishInventoryAdjustment,
+        onViewDetails: handleViewDetailInventoryAdjustment,
+      }}
+      ContextMenu={ActionsMenu}
+      noResults={intl.get('there_is_no_inventory_adjustments_transactions_yet')}
+      {...tableProps}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withInventoryAdjustmentActions,
+  withDrawerActions,
+  withInventoryAdjustments(({ inventoryAdjustmentTableState }) => ({
+    inventoryAdjustmentTableState,
+  })),
+)(InventoryAdjustmentDataTable);

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentsAlerts.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+
+const InventoryAdjustmentDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Items/InventoryAdjustmentDeleteAlert'),
+);
+
+const InventoryAdjustmentPublishAlert = React.lazy(
+  () => import('@/containers/Alerts/Items/InventoryAdjustmentPublishAlert'),
+);
+
+export default [
+  {
+    name: 'inventory-adjustment-delete',
+    component: InventoryAdjustmentDeleteAlert,
+  },
+  {
+    name: 'inventory-adjustment-publish',
+    component: InventoryAdjustmentPublishAlert,
+  },
+];

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentsProvider.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { DashboardInsider } from '@/components/Dashboard';
+import { useInventoryAdjustments } from '@/hooks/query';
+
+const InventoryAdjustmentsContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function InventoryAdjustmentsProvider({ query, ...props }) {
+  // Handles the inventory adjustments fethcing of the given query.
+  const {
+    isLoading: isAdjustmentsLoading,
+    isFetching: isAdjustmentsFetching,
+    data: { transactions: inventoryAdjustments, pagination },
+  } = useInventoryAdjustments(query, { keepPreviousData: true });
+
+  // Provider payload.
+  const provider = {
+    inventoryAdjustments,
+    isAdjustmentsLoading,
+    isAdjustmentsFetching,
+    pagination,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isAdjustmentsLoading}
+      name={'inventory_adjustments'}
+    >
+      <InventoryAdjustmentsContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInventoryAdjustmentsContext = () =>
+  React.useContext(InventoryAdjustmentsContext);
+
+export { InventoryAdjustmentsProvider, useInventoryAdjustmentsContext };

packages/webapp/src/containers/InventoryAdjustments/components.tsx

@@ -0,0 +1,206 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import {
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Intent,
+  Tag,
+  Position,
+  Button,
+  Popover,
+} from '@blueprintjs/core';
+
+import { isNumber } from 'lodash';
+import { Icon, Money, If, FormattedMessage as T, Can } from '@/components';
+import { isBlank, safeCallback } from '@/utils';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';
+
+/**
+ * Publish accessor
+ */
+export const PublishAccessor = (r) => {
+  return r.is_published ? (
+    <Tag minimal={true} round={true}>
+      <T id={'published'} />
+    </Tag>
+  ) : (
+    <Tag minimal={true} intent={Intent.WARNING} round={true}>
+      <T id={'draft'} />
+    </Tag>
+  );
+};
+
+/**
+ * Type column accessor.
+ */
+export const TypeAccessor = (row) => {
+  return row.formatted_type ? (
+    <Tag minimal={true} round={true} intent={Intent.NONE}>
+      {row.formatted_type}
+    </Tag>
+  ) : (
+    ''
+  );
+};
+
+/**
+ * Item type accessor.
+ */
+export const ItemCodeAccessor = (row) =>
+  row.type ? (
+    <Tag minimal={true} round={true} intent={Intent.NONE}>
+      {intl.get(row.type)}
+    </Tag>
+  ) : (
+    ''
+  );
+
+/**
+ * Quantity on hand cell.
+ */
+export const QuantityOnHandCell = ({ cell: { value } }) => {
+  return isNumber(value) ? (
+    <span className={'quantity_on_hand'}>{value}</span>
+  ) : null;
+};
+
+/**
+ * Cost price cell.
+ */
+export const CostPriceCell = ({ cell: { value } }) => {
+  return !isBlank(value) ? <Money amount={value} currency={'USD'} /> : null;
+};
+
+/**
+ * Sell price cell.
+ */
+export const SellPriceCell = ({ cell: { value } }) => {
+  return !isBlank(value) ? <Money amount={value} currency={'USD'} /> : null;
+};
+
+/**
+ * Item type accessor.
+ */
+export const ItemTypeAccessor = (row) => {
+  return row.type ? (
+    <Tag minimal={true} round={true} intent={Intent.NONE}>
+      {intl.get(row.type)}
+    </Tag>
+  ) : null;
+};
+
+export const ActionsMenu = ({
+  row: { original },
+  payload: { onDelete, onPublish, onViewDetails },
+}) => {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+
+      <Can
+        I={InventoryAdjustmentAction.Create}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_adjustment')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can
+        I={InventoryAdjustmentAction.Delete}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <MenuItem
+          text={intl.get('delete_adjustment')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+};
+
+export const ActionsCell = (props) => {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+};
+
+/**
+ * Retrieve inventory adjustments columns.
+ */
+export const useInventoryAdjustmentsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: (r) => moment(r.date).format('YYYY MMM DD'),
+        width: 115,
+        className: 'date',
+        clickable: true,
+      },
+      {
+        id: 'type',
+        Header: intl.get('type'),
+        accessor: TypeAccessor,
+        className: 'type',
+        width: 100,
+        clickable: true,
+      },
+      {
+        id: 'reason',
+        Header: intl.get('reason'),
+        accessor: 'reason',
+        className: 'reason',
+        width: 115,
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        className: 'reference_no',
+        width: 100,
+        clickable: true,
+      },
+      {
+        id: 'published_at',
+        Header: intl.get('status'),
+        accessor: PublishAccessor,
+        width: 95,
+        className: 'publish',
+        clickable: true,
+      },
+      {
+        id: 'created_at',
+        Header: intl.get('created_at'),
+        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
+        width: 125,
+        className: 'created_at',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+};

packages/webapp/src/containers/InventoryAdjustments/withInventoryAdjustmentActions.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { setInventoryAdjustmentsTableState } from '@/store/inventoryAdjustments/inventoryAdjustment.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setInventoryAdjustmentTableState: (queries) =>
+    dispatch(setInventoryAdjustmentsTableState(queries)),
+});
+
+export default connect(null, mapDispatchToProps);

packages/webapp/src/containers/InventoryAdjustments/withInventoryAdjustments.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { getInventroyAdjsTableStateFactory } from '@/store/inventoryAdjustments/inventoryAdjustment.selector';
+
+export default (mapState) => {
+  const getInventoryAdjustmentTableState = getInventroyAdjsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      inventoryAdjustmentTableState: getInventoryAdjustmentTableState(
+        state,
+        props,
+      ),
+      inventoryAdjustmentsSelectedRows: state.inventoryAdjustments.selectedRows,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};