@openmrs/esm-stock-management-app 1.0.1-pre.783 → 1.0.1-pre.788

package/src/stock-operations/stock-operations-forms/step3.test.tsx

@@ -0,0 +1,223 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import { showSnackbar, useConfig, ErrorState, launchWorkspace } from '@openmrs/esm-framework';
+import { useStockOperationTypes, useUser } from '../../stock-lookups/stock-lookups.resource';
+import { getStockOperationLinks, useStockOperation } from '../stock-operations.resource';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { useStockOperations } from '../stock-operations.resource';
+import { closeOverlay } from '../../core/components/overlay/hook';
+import StockOperationForm from './stock-operation-form.component';
+import useParties from './hooks/useParties';
+import userEvent from '@testing-library/user-event';
+import { StockItemDTO } from '../../core/api/types/stockItem/StockItem';
+import { useStockItem, useStockItems } from '../../stock-items/stock-items.resource';
+import { initialStockOperationValue } from '../../core/utils/utils';
+import { useForm, useFormContext, Controller, FormProvider } from 'react-hook-form';
+import { BaseStockOperationItemFormData, StockOperationItemFormData } from '../validation-schema';
+import { useStockItemBatchInformationHook } from '../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import { useFilterableStockItems } from './hooks/useFilterableStockItems';
+import { formatForDatePicker } from '../../constants';
+import React from 'react';
+import { receiptOperationTypeMock, returnOperationTypeMock, stockIssueOperationtypeMock } from '../../../__mocks__';
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn().mockReturnValue({ t: (key) => key }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ActionMenu: jest.fn(() => null),
+  showSnackbar: jest.fn(),
+  useDebounce: jest.fn((x) => x),
+  getGlobalStore: jest.fn(() => ({
+    getState: jest.fn(),
+    subscribe: jest.fn(),
+    setState: jest.fn(),
+  })),
+  parseDate: jest.fn((date) => new Date(date)),
+  showNotification: jest.fn(),
+  usePagination: jest.fn(() => ({ currentPage: 1, setPage: jest.fn() })),
+  useSession: jest.fn(() => ({ user: { display: 'Test User' } })),
+  useConfig: jest.fn(),
+  ErrorState: jest.fn(({ error }: { error: any }) => <div>{error}</div>),
+  launchWorkspace: jest.fn(),
+}));
+
+jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
+  useStockOperationTypes: jest.fn(),
+  useUsers: jest.fn().mockReturnValue({ items: { results: [] }, isLoading: false }),
+  useUser: jest.fn().mockReturnValue({ data: { display: 'Test User' }, isLoading: false, error: null }),
+}));
+
+jest.mock('../stock-operations.resource', () => ({
+  operationStatusColor: jest.fn(() => 'some-color'),
+  getStockOperationLinks: jest.fn(),
+  useStockOperations: jest.fn().mockReturnValue({
+    items: { results: [] },
+    isLoading: false,
+    error: null,
+  }),
+  useStockOperation: jest.fn().mockReturnValue({
+    items: undefined,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+jest.mock('../../core/components/overlay/hook', () => ({
+  closeOverlay: jest.fn(),
+}));
+
+jest.mock('../../stock-items/stock-items.resource', () => ({
+  useStockItem: jest.fn(),
+  useStockItems: jest.fn().mockReturnValue({
+    isLoading: false,
+    error: null,
+    items: {},
+  }),
+}));
+jest.mock('./hooks/useFilterableStockItems', () => ({
+  useFilterableStockItems: jest.fn().mockReturnValue({
+    stockItemsList: [],
+    setLimit: jest.fn(),
+    setRepresentation: jest.fn(),
+    setSearchString: jest.fn(),
+    isLoading: false,
+  }),
+}));
+jest.mock('./hooks/useParties', () => jest.fn());
+jest.mock('react-hook-form', () => ({
+  useForm: jest.fn().mockReturnValue({
+    watch: jest.fn(),
+    formState: {
+      errors: {},
+    },
+    resetField: jest.fn(),
+    getValues: jest.fn(),
+    setValue: jest.fn(),
+    handleSubmit: jest.fn(),
+  }),
+  useFormContext: jest.fn().mockReturnValue({
+    watch: jest.fn(),
+    formState: {
+      errors: {},
+    },
+    resetField: jest.fn(),
+    getValues: jest.fn(),
+    setValue: jest.fn(),
+    handleSubmit: jest.fn(),
+  }),
+  Controller: ({ render }) => render({ field: {}, fieldState: {} }),
+  FormProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+jest.mock('../../stock-items/add-stock-item/batch-information/batch-information.resource', () => ({
+  useStockItemBatchInformationHook: jest.fn().mockReturnValue({
+    items: [],
+    totalCount: 0,
+    currentPage: 1,
+    currentPageSize: 10,
+    setCurrentPage: jest.fn(),
+    setPageSize: jest.fn(),
+    pageSizes: [],
+    isLoading: false,
+    error: undefined,
+    setSearchString: jest.fn(),
+    setStockItemUuid: jest.fn(),
+    setLocationUuid: jest.fn(),
+    setPartyUuid: jest.fn(),
+    setStockBatchUuid: jest.fn(),
+  }),
+}));
+
+describe('Stock Operation form step 3 (stock submision)', () => {
+  beforeEach(() => {
+    const mockStockOperationTypes = { results: [] };
+    (useStockOperationTypes as jest.Mock).mockReturnValue(mockStockOperationTypes);
+    (useStockOperations as jest.Mock).mockReturnValue({ items: { results: [] }, isLoading: false, error: null });
+    (useConfig as jest.Mock).mockReturnValue({ autoPopulateResponsiblePerson: true });
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+  });
+
+  it('should have previous btn and not next btn', async () => {
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    expect(screen.queryByRole('button', { name: /Next/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+  });
+
+  it('should render require approval radio button and save button', async () => {
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    // Shouls have save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+    expect(screen.getAllByRole('radio', { name: /yes|no/i })).toHaveLength(2);
+  });
+  it('should render submitForReview button when require aprroval radion button is checked yes', async () => {
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    const yesRadioButton = screen.getByRole('radio', { name: /yes/i });
+    expect(yesRadioButton).toBeInTheDocument();
+    // Submit for review shouldnt be in doc
+    expect(screen.queryByRole('button', { name: /submitForReview/i })).not.toBeInTheDocument();
+    await userEvent.click(yesRadioButton);
+    // On require aprooval should now show
+    expect(screen.getByRole('button', { name: /submitForReview/i })).toBeInTheDocument();
+  });
+  it('should render complete button when require aprroval radion button is checked no', async () => {
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    const noRadioButton = screen.getByRole('radio', { name: /no/i });
+    expect(noRadioButton).toBeInTheDocument();
+    await userEvent.click(noRadioButton);
+    // On require aprooval should now show complete btn
+    expect(screen.getByRole('button', { name: /complete/i })).toBeInTheDocument();
+  });
+  it('should render dispatch btn for stock return operation and dont require aproval', async () => {
+    render(<StockOperationForm stockOperationType={returnOperationTypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    const noRadioButton = screen.getByRole('radio', { name: /no/i });
+    expect(noRadioButton).toBeInTheDocument();
+    await userEvent.click(noRadioButton);
+    // On require aprooval should now show complete btn
+    expect(screen.getByRole('button', { name: /dispatch/i })).toBeInTheDocument();
+  });
+  it('should render dispatch btn for stock issue operation and dont require aproval', async () => {
+    render(<StockOperationForm stockOperationType={stockIssueOperationtypeMock as any} />);
+    // MOVE TO STEP 2
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    // MOVE TO STEP3
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+
+    const noRadioButton = screen.getByRole('radio', { name: /no/i });
+    expect(noRadioButton).toBeInTheDocument();
+    await userEvent.click(noRadioButton);
+    // On require aprooval should now show complete btn
+    expect(screen.getByRole('button', { name: /dispatch/i })).toBeInTheDocument();
+  });
+});

package/src/stock-operations/stock-operations-forms/steps/base-operation-details-form-step.tsx

@@ -0,0 +1,241 @@
+import { Button, Column, ComboBox, DatePicker, DatePickerInput, InlineLoading, Stack, TextArea } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import React, { ChangeEvent, FC, useEffect, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, MAIN_STORE_LOCATION_TAG } from '../../../constants';
+import { Party } from '../../../core/api/types/Party';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { OperationType, StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { StockOperationItemDtoSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import useParties from '../hooks/useParties';
+import StockOperationReasonSelector from '../input-components/stock-operation-reason-selector.component';
+import UsersSelector from '../input-components/users-selector.component';
+import styles from '../stock-operation-form.scss';
+import { TextInput } from '@carbon/react';
+
+type BaseOperationDetailsFormStepProps = {
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+  onNext?: () => void;
+};
+
+const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
+  stockOperation,
+  stockOperationType,
+  onNext,
+}) => {
+  const { t } = useTranslation();
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const {
+    destinationParties,
+    sourceParties,
+    isLoading: isPartiesLoading,
+    error: patiesError,
+    sourceTags,
+    destinationTags,
+  } = useParties(stockOperationType);
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const isStockIssueOperation = useMemo(
+    () => OperationType.STOCK_ISSUE_OPERATION_TYPE === stockOperationType.operationType,
+    [stockOperationType],
+  );
+  // initialize location fields
+  useEffect(() => {
+    // Prefill default locaton with current location if is a new operation
+    if (!stockOperation) {
+      if (stockOperationType?.hasSource) {
+        const shouldLockSource = sourceTags.length === 1 && sourceTags[0] === MAIN_STORE_LOCATION_TAG;
+        if (shouldLockSource && sourceParties?.length) {
+          const party = sourceParties[0];
+          form.setValue('sourceUuid', party.uuid);
+        }
+      }
+
+      if (stockOperationType?.hasDestination) {
+        const shouldLockDestination = destinationTags.length === 1 && destinationTags[0] === MAIN_STORE_LOCATION_TAG;
+        if (shouldLockDestination && destinationParties?.length) {
+          const party = destinationParties[0];
+          form.setValue('destinationUuid', party.uuid);
+        }
+      }
+    }
+  }, [sourceParties, destinationParties, stockOperation, stockOperationType, form, destinationTags, sourceTags]);
+
+  if (isPartiesLoading)
+    return (
+      <InlineLoading
+        status="active"
+        role="progressbar"
+        iconDescription="Loading"
+        description={t('loadingData', 'Loading data...')}
+      />
+    );
+
+  if (patiesError)
+    return (
+      <ErrorState error={patiesError} headerTitle={t('partieserror', 'Error launching base operation details form')} />
+    );
+
+  return (
+    <Stack gap={4} className={styles.grid}>
+      <div className={styles.heading}>
+        <h4>{`${stockOperationType.name} ${t('details', 'Details')}`}</h4>
+        <div className={styles.btnSet}>
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext} role="button">
+              {t('next', 'Next')}
+            </Button>
+          )}
+        </div>
+      </div>
+      <Column>
+        <Controller
+          control={form.control}
+          name="operationDate"
+          render={({ field, fieldState: { error } }) => (
+            <DatePicker
+              readOnly={field.disabled}
+              id={`operationDate`}
+              datePickerType="single"
+              locale="en"
+              className={styles.datePickerInput}
+              {...field}
+              value={field.value}
+              dateFormat={DATE_PICKER_CONTROL_FORMAT}
+              onChange={([newDate]) => {
+                field.onChange(newDate);
+              }}
+            >
+              <DatePickerInput
+                autoComplete="off"
+                id={`operationDate-input`}
+                name="operationDate-input"
+                placeholder={DATE_PICKER_FORMAT}
+                labelText={t('operationDate', 'Operation Date')}
+                invalid={error?.message}
+                invalidText={error?.message}
+                size="xl"
+              />
+            </DatePicker>
+          )}
+        />
+      </Column>
+      {stockOperation?.operationNumber && (
+        <TextInput
+          id="operationNoLbl"
+          value={stockOperation?.operationNumber}
+          readOnly={true}
+          labelText={t('operationNumber', 'Operation Number')}
+        />
+      )}
+      <Column>
+        <Controller
+          control={form.control}
+          name="sourceUuid"
+          render={({ field, fieldState: { error } }) => (
+            <ComboBox
+              titleText={
+                isStockIssueOperation
+                  ? t('destination', 'destination')
+                  : stockOperationType?.hasDestination || stockOperation?.destinationUuid
+                  ? t('from', 'From')
+                  : t('location', 'Location')
+              }
+              readOnly={field.disabled}
+              name={'sourceUuid'}
+              id={'sourceUuid'}
+              size={'xl'}
+              items={sourceParties}
+              onChange={(data: { selectedItem: Party }) => {
+                field.onChange(data.selectedItem?.uuid);
+              }}
+              initialSelectedItem={sourceParties.find((p) => p.uuid === field.value)}
+              selectedItem={sourceParties.find((p) => p.uuid === field.value)}
+              itemToString={(item?: Party) => (item && item?.name ? `${item?.name}` : '')}
+              shouldFilterItem={() => true}
+              placeholder={
+                stockOperationType.hasDestination || stockOperation?.destinationUuid
+                  ? t('chooseASource', 'Choose a source')
+                  : t('chooseALocation', 'Choose a location')
+              }
+              ref={field.ref}
+              invalid={error?.message}
+              invalidText={error?.message}
+            />
+          )}
+        />
+      </Column>
+      {(stockOperationType.hasDestination || stockOperation?.destinationUuid) && (
+        <Column>
+          <Controller
+            control={form.control}
+            name="destinationUuid"
+            render={({ field, fieldState: { error } }) => (
+              <ComboBox
+                readOnly={field.disabled}
+                titleText={
+                  isStockIssueOperation
+                    ? t('source', 'Source')
+                    : stockOperationType?.hasSource || stockOperation?.atLocationUuid
+                    ? t('to', 'To')
+                    : t('location', 'Location')
+                }
+                name={'destinationUuid'}
+                id={'destinationUuid'}
+                size={'xl'}
+                items={destinationParties}
+                onChange={(data: { selectedItem: Party }) => {
+                  field.onChange(data.selectedItem?.uuid);
+                }}
+                initialSelectedItem={destinationParties.find((p) => p.uuid === field.value)}
+                selectedItem={destinationParties.find((p) => p.uuid === field.value)}
+                itemToString={(item?: Party) => (item && item?.name ? `${item?.name}` : '')}
+                shouldFilterItem={() => true}
+                placeholder={
+                  stockOperationType?.hasSource || stockOperation?.atLocationUuid
+                    ? t('chooseADestination', 'Choose a destination')
+                    : t('location', 'Location')
+                }
+                ref={field.ref}
+                invalid={error?.message}
+                invalidText={error?.message}
+              />
+            )}
+          />
+        </Column>
+      )}
+      <UsersSelector />
+      {operationTypePermision.requiresStockAdjustmentReason && (
+        <Column>
+          <StockOperationReasonSelector />
+        </Column>
+      )}
+      <Column>
+        <Controller
+          control={form.control}
+          name="remarks"
+          render={({ field, fieldState: { error } }) => (
+            <TextArea
+              {...field}
+              readOnly={field.disabled}
+              disabled={false}
+              maxCount={250}
+              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                field.onChange(e.target.value);
+              }}
+              placeholder={t('enterRemarks', 'Enter remarks') + ' ...'}
+              id={'remarks'}
+              labelText={t('remarks', 'Remarks')}
+              invalid={error?.message}
+              invalidText={error?.message}
+            />
+          )}
+        />
+      </Column>
+    </Stack>
+  );
+};
+
+export default BaseOperationDetailsFormStep;

package/src/stock-operations/stock-operations-forms/steps/quantity-uom-cell.component.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo } from 'react';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type QuantityUomCellProps = {
+  stockItemPackagingUOMUuid: string;
+  stockItemUuid: string;
+};
+
+const QuantityUomCell: React.FC<QuantityUomCellProps> = ({ stockItemPackagingUOMUuid, stockItemUuid }) => {
+  const { isLoading, error, item } = useStockItem(stockItemUuid);
+  const { t } = useTranslation();
+  const uomName = useMemo(() => {
+    return item?.packagingUnits?.find((unit) => unit.uuid === stockItemPackagingUOMUuid)?.packagingUomName;
+  }, [item, stockItemPackagingUOMUuid]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('packagingUomError', 'Error loading stockItemPackagingUOM name'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+  return <>{uomName}</>;
+};
+
+export default QuantityUomCell;

package/src/stock-operations/stock-operations-forms/steps/received-items.component.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableCell,
+  DataTableSkeleton,
+  Button,
+} from '@carbon/react';
+import styles from './stock-operation-items-form-step.scc.scss';
+
+const formatDate = (date: Date | string | null) => {
+  if (!date) return ' ';
+  const d = new Date(date);
+  const day = String(d.getDate()).padStart(2, '0');
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const year = d.getFullYear();
+  return `${month}/${day}/${year}`;
+};
+
+interface ReceivedItemsProps {
+  stockOperation?: StockOperationDTO;
+  onPrevious?: () => void;
+}
+
+const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPrevious }) => {
+  const { t } = useTranslation();
+
+  const headers = [
+    { key: 'item', header: t('item', 'Item') },
+    { key: 'requested', header: t('requested', 'Requested') },
+    { key: 'batch', header: t('batch', 'Batch No') },
+    { key: 'expiry', header: t('expiry', 'Expiry Date') },
+    { key: 'qtySent', header: t('quantitySent', 'Quantity Sent') },
+    { key: 'qtyReceived', header: t('quantityReceived', 'Quantity Received') },
+    {
+      key: 'qtyUoM',
+      header: t('quantityUoM', 'Quantity Unit of Measurement(UoM)'),
+    },
+  ];
+
+  const rows =
+    stockOperation?.stockOperationItems?.map((item) => ({
+      id: item.uuid,
+      item: item.stockItemName,
+      requested: item.quantityRequested || ' ',
+      batch: item.batchNo,
+      expiry: formatDate(item.expiration),
+      qtySent: item.quantity || ' ',
+      qtyReceived: item.quantityReceived || ' ',
+      qtyUoM: item.quantityReceivedPackagingUOMName,
+    })) || [];
+
+  if (!stockOperation) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  const headerTitle = t('receivedItems', 'Received Items');
+
+  return (
+    <div style={{ margin: '10px' }}>
+      <div className={styles.tableContainer}>
+        <div className={styles.heading}>
+          <h4>{headerTitle}</h4>
+          <div className={styles.btnSet}>
+            {typeof onPrevious === 'function' && (
+              <Button kind="secondary" onClick={onPrevious}>
+                {t('previous', 'Previous')}
+              </Button>
+            )}
+          </div>
+        </div>
+        <DataTable rows={rows} headers={headers}>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default ReceivedItems;

package/src/stock-operations/stock-operations-forms/steps/stock-availability-cell.component.tsx

@@ -0,0 +1,51 @@
+import { InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import styles from './stock-operation-items-form-step.scc.scss';
+const StockAvailability: React.FC<{ stockItemUuid: string }> = ({ stockItemUuid }) => {
+  const { items, isLoading, error } = useStockItemBatchInformationHook({
+    stockItemUuid: stockItemUuid,
+    includeBatchNo: true,
+  });
+  const { t } = useTranslation();
+
+  const totalQuantity = useMemo(() => {
+    if (!items?.length) return 0;
+    return items.reduce((total, batch) => {
+      return total + (Number(batch.quantity) || 0);
+    }, 0);
+  }, [items]);
+  const commonUOM = useMemo(() => {
+    if (!items?.length) return '';
+    return items[0]?.quantityUoM || '';
+  }, [items]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockAvailabilityError', 'Error loading stock availability'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+
+  return (
+    <div className={styles.availability}>
+      {totalQuantity > 0 ? (
+        <span>
+          Available: {totalQuantity.toLocaleString()} {commonUOM}
+        </span>
+      ) : (
+        <span className={styles.outOfStock}>Out of Stock</span>
+      )}
+    </div>
+  );
+};
+
+export default StockAvailability;