feat: inventory adjustment detail.

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
+import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
+import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
+
+import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+
+/**
+ * Inventory adjustment detail
+ */
+export default function InventoryAdjustmentDetail() {
+  return (
+    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
+      <InventoryAdjustmentDetailActionsBar />
+      <Card>
+        <InventoryAdjustmentDetailHeader />
+        <InventoryAdjustmentDetailTable />
+      </Card>
+    </div>
+  );
+}

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Inventory adjustment detail actions bar.
+ */
+function InventoryAdjustmentDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { inventoryId } = useInventoryAdjustmentDrawerContext();
+
+  // Handle delete inventory adjustment.
+  const handleDeleteInventoryAdjustment = () => {
+    openAlert('inventory-adjustment-delete', {
+      inventoryId,
+    });
+    closeDrawer('inventory-adjustment-drawer');
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteInventoryAdjustment}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDrawerActions,
+  withAlertsActions,
+)(InventoryAdjustmentDetailActionsBar);

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import moment from 'moment';
+
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { DetailsMenu, DetailItem } from 'components';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+
+/**
+ * Inventory detail header.
+ */
+export default function InventoryAdjustmentDetailHeader() {
+  const {
+    inventoryAdjustment: {
+      date,
+      type,
+      adjustment_account,
+      inventory_direction,
+      description,
+      reference_no,
+      reason,
+      published_at,
+      created_at,
+    },
+  } = useInventoryAdjustmentDrawerContext();
+
+  return (
+    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('date')}>
+          {moment(date).format('YYYY MMM DD')}
+        </DetailItem>
+        <DetailItem label={intl.get('type')}>{type}</DetailItem>
+        <DetailItem label={intl.get('adjustment_account')}>
+          {adjustment_account.name}
+        </DetailItem>
+        <DetailItem name={'reference'} label={intl.get('reference_no')}>
+          {defaultTo(reference_no, '-')}
+        </DetailItem>
+        <DetailItem label={intl.get('published_at')}>
+          {moment(published_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={intl.get('reason')}>
+          {defaultTo(reason, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('description')}>
+          {defaultTo(description, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('created_at')}>
+          {moment(created_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+
+import { useInventoryAdjustmentEntriesColumns } from './utils';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+
+/**
+ * Inventory adjustment detail entries table.
+ */
+export default function InventoryAdjustmentDetailTable() {
+  const columns = useInventoryAdjustmentEntriesColumns();
+
+  const {
+    inventoryAdjustment: { entries },
+  } = useInventoryAdjustmentDrawerContext();
+
+  return (
+    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js

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

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DashboardInsider } 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 (
+    <DashboardInsider loading={isAdjustmentsLoading}>
+      <DrawerHeaderContent
+        name="inventory-adjustment-drawer"
+        title={intl.get('inventory_adjustment_details')}
+      />
+
+      <InventoryAdjustmentDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInventoryAdjustmentDrawerContext = () =>
+  React.useContext(InventoryAdjustmentDrawerContext);
+
+export {
+  InventoryAdjustmentDrawerProvider,
+  useInventoryAdjustmentDrawerContext,
+};

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js

@@ -0,0 +1,35 @@
+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);

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+export const useInventoryAdjustmentEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        width: 100,
+        className: 'quantity',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: 100,
+        className: 'cost',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('value'),
+        accessor: 'value',
+        width: 100,
+        className: 'value',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );