feat: inventory adjustment detail.

client/src/common/drawers.js

@@ -1,5 +1,3 @@
-
-
 export const DRAWERS = {
   ESTIMATE_DRAWER: 'estimate-drawer',
   MANUAL_JOURNAL_DRAWER: 'journal-drawer',
@@ -8,5 +6,6 @@ export const DRAWERS = {
   PAYMENT_RECEIVE_DRAWER: 'payment-receive-drawer',
   ACCOUNT_DRAWER: 'account-drawer',
   JOURNAL_DRAWER: 'journal-drawer',
-  EXPENSE_DRAWER: 'expense-drawer'
+  EXPENSE_DRAWER: 'expense-drawer',
+  INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
 };

client/src/components/DrawersContainer.js

@@ -14,6 +14,7 @@ import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer'
 import EstimateDetailDrawer from '../containers/Drawers/EstimateDetailDrawer';
 import ItemDetailDrawer from '../containers/Drawers/ItemDetailDrawer';
 import ContactDetailDrawer from '../containers/Drawers/ContactDetailDrawer';
+import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -34,6 +35,9 @@ export default function DrawersContainer() {
       <PaymentMadeDetailDrawer name={'payment-made-detail-drawer'} />
       <ItemDetailDrawer name={'item-detail-drawer'} />
       <ContactDetailDrawer name={'contact-detail-drawer'} />
+      <InventoryAdjustmentDetailDrawer
+        name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
+      />
     </div>
   );
 }

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,
+      },
+    ],
+    [],
+  );

client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js

@@ -4,6 +4,7 @@ import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
 import intl from 'react-intl-universal';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
 
 import { useInventoryAdjustmentsContext } from './InventoryAdjustmentsProvider';
@@ -23,6 +24,9 @@ function InventoryAdjustmentDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #ownProps
   tableProps,
 }) {
@@ -43,6 +47,10 @@ function InventoryAdjustmentDataTable({
   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();
@@ -78,6 +86,7 @@ function InventoryAdjustmentDataTable({
       payload={{
         onDelete: handleDeleteAdjustment,
         onPublish: handlePublishInventoryAdjustment,
+        onViewDetails: handleViewDetailInventoryAdjustment,
       }}
       ContextMenu={ActionsMenu}
       noResults={intl.get('there_is_no_inventory_adjustments_transactions_yet')}
@@ -89,6 +98,7 @@ function InventoryAdjustmentDataTable({
 export default compose(
   withAlertsActions,
   withInventoryAdjustmentActions,
+  withDrawerActions,
   withInventoryAdjustments(({ inventoryAdjustmentTableState }) => ({
     inventoryAdjustmentTableState,
   })),

client/src/containers/InventoryAdjustments/components.js

@@ -93,13 +93,14 @@ export const ItemTypeAccessor = (row) => {
 
 export const ActionsMenu = ({
   row: { original },
-  payload: { onDelete, onPublish },
+  payload: { onDelete, onPublish, onViewDetails },
 }) => {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <If condition={!original.is_published}>

client/src/hooks/query/inventoryAdjustments.js

@@ -7,6 +7,7 @@ import t from './types';
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate inventory adjustments.
   queryClient.invalidateQueries(t.INVENTORY_ADJUSTMENTS);
+  queryClient.invalidateQueries(t.INVENTORY_ADJUSTMENT);
 
   // Invalidate items.
   queryClient.invalidateQueries(t.ITEMS);
@@ -105,3 +106,19 @@ export function usePublishInventoryAdjustment(props) {
     },
   );
 }
+
+/**
+ * Retrieve the inventory adjustment details.
+ * @param {number} id - inventory adjustment id.
+ */
+export function useInventoryAdjustment(id, props, requestProps) {
+  return useRequestQuery(
+    [t.INVENTORY_ADJUSTMENT, id],
+    { method: 'get', url: `inventory_adjustments/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

client/src/lang/en/index.json

@@ -1217,5 +1217,6 @@
   "payment_receive.details.payment_number": "Payment #",
   "estimate.details.estimate_number": "Estimate #",
   "receipt.details.receipt_number": "Receipt #",
-  "bill.details.bill_number": "Bill #"
+  "bill.details.bill_number": "Bill #",
+  "inventory_adjustment_details":"Inventory adjustment details"
 }

client/src/style/components/Drawers/InventoryAdjustmentDrawer.module.scss

@@ -0,0 +1,22 @@
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      .thead,
+      .tbody {
+        .quantity,
+        .cost,
+        .value {
+          text-align: right;
+        }
+      }
+    }
+  }
+}