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

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.component.tsx

@@ -0,0 +1,72 @@
+import { ComboBox, SelectSkeleton } from '@carbon/react';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockBatchDTO } from '../../../core/api/types/stockItem/StockBatchDTO';
+import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+import { formatForDatePicker } from '../../../constants';
+
+interface BatchNoSelectorProps {
+  stockItemUuid: string;
+  initialValue?: string;
+  onValueChange?: (value: string) => void;
+  error?: string;
+}
+
+const BatchNoSelector: React.FC<BatchNoSelectorProps> = ({ stockItemUuid, error, initialValue, onValueChange }) => {
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNumbers(stockItemUuid);
+  const { t } = useTranslation();
+
+  const { items, setStockItemUuid, isLoading: isLoadingBatchinfo } = useStockItemBatchInformationHook();
+
+  useEffect(() => {
+    setStockItemUuid(stockItemUuid);
+  }, [stockItemUuid, setStockItemUuid]);
+
+  const stockItemBatchesInfo = useMemo(() => {
+    return stockItemBatchNos?.map((item) => {
+      const matchingBatch = items?.find((batch) => batch.batchNumber === item.batchNo);
+      if (matchingBatch) {
+        return {
+          ...item,
+          quantity: matchingBatch.quantity ?? '',
+        };
+      }
+      return item;
+    });
+  }, [stockItemBatchNos, items]);
+
+  const filteredBatches = useMemo(() => {
+    return stockItemBatchesInfo?.filter((s) => s.quantity !== undefined && s.quantity !== 0);
+  }, [stockItemBatchesInfo]);
+  const initialSelectedItem = useMemo(
+    () => filteredBatches?.find((s) => s.uuid === initialValue),
+    [filteredBatches, initialValue],
+  );
+
+  if (isLoading || isLoadingBatchinfo) return <SelectSkeleton role="progressbar" />;
+
+  return (
+    <ComboBox
+      style={{ flexGrow: '1' }}
+      titleText={t('batchNo', 'Batch')}
+      name={'stockBatchUuid'}
+      id={'stockBatchUuid'}
+      items={filteredBatches || []}
+      onChange={(data: { selectedItem?: StockBatchDTO }) => {
+        onValueChange(data.selectedItem?.uuid);
+      }}
+      selectedItem={initialSelectedItem}
+      itemToString={(s: StockBatchDTO) =>
+        s?.batchNo
+          ? `${s?.batchNo} | Qty: ${s?.quantity ?? 'Unknown'} | Expiry: ${formatForDatePicker(s.expiration)}`
+          : ''
+      }
+      placeholder={t('filter', "'Filter") + '...'}
+      invalid={error}
+      invalidText={error}
+    />
+  );
+};
+
+export default BatchNoSelector;

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { StockItemInventory } from '../../../core/api/types/stockItem/StockItemInventory';
+import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+import BatchNoSelector from './batch-no-selector.component';
+import { formatForDatePicker } from '../../../constants';
+
+jest.mock('../hooks/useStockItemBatchNumbers');
+jest.mock('../../../stock-items/add-stock-item/batch-information/batch-information.resource');
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const mockUseStockItemBatchNumbers = useStockItemBatchNumbers as jest.Mock;
+const mockUseStockItemBatchInformationHook = useStockItemBatchInformationHook as jest.Mock;
+
+describe('BatchNoSelector', () => {
+  const mockOnValueChange = jest.fn();
+  const mockStockItemUuid = 'test-uuid';
+  const mockExpiration = new Date();
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseStockItemBatchNumbers.mockReturnValue({
+      isLoading: false,
+      stockItemBatchNos: [
+        { uuid: '1', batchNo: 'BATCH-001', quantity: 10, expiration: mockExpiration },
+        { uuid: '2', batchNo: 'BATCH-002', quantity: 20, expiration: mockExpiration },
+      ],
+    });
+    mockUseStockItemBatchInformationHook.mockReturnValue({
+      items: [
+        { batchNumber: 'BATCH-001', quantity: 10 },
+        { batchNumber: 'BATCH-002', quantity: 20 },
+      ] as StockItemInventory[],
+      setStockItemUuid: jest.fn(),
+    });
+  });
+
+  it('should render loading skeleton when isLoading is true', () => {
+    mockUseStockItemBatchNumbers.mockReturnValue({ isLoading: true, stockItemBatchNos: [] });
+    mockUseStockItemBatchInformationHook.mockReturnValue({ isLoading: true, items: [], setStockItemUuid: jest.fn() });
+    render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render combobox with batch numbers', async () => {
+    render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByText('batchNo')).toBeInTheDocument();
+  });
+
+  it('should handle batch selection', async () => {
+    render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    await userEvent.type(combobox, 'BATCH-001');
+    const option = screen.getByText(`BATCH-001 | Qty: 10 | Expiry: ${formatForDatePicker(mockExpiration)}`);
+    await userEvent.click(option);
+    expect(mockOnValueChange).toHaveBeenCalledWith('1');
+  });
+
+  it('should display error message when error prop is provided', () => {
+    const errorMessage = 'This is an error';
+    render(
+      <BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} error={errorMessage} />,
+    );
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('should filter out batches with zero or undefined quantity', async () => {
+    mockUseStockItemBatchNumbers.mockReturnValue({
+      isLoading: false,
+      stockItemBatchNos: [
+        { uuid: '1', batchNo: 'BATCH-001', quantity: 10 },
+        { uuid: '2', batchNo: 'BATCH-002', quantity: 0 },
+        { uuid: '3', batchNo: 'BATCH-003', quantity: undefined },
+      ],
+    });
+
+    render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+
+    expect(screen.queryByText('BATCH-002')).not.toBeInTheDocument();
+    expect(screen.queryByText('BATCH-003')).not.toBeInTheDocument();
+  });
+});

package/src/stock-operations/{add-stock-operation/stock-item-search/stock-item-search.scss → stock-operations-forms/input-components/input-components-styles.scss}

@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/type';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 // Patient List Table
@@ -25,7 +25,7 @@
 .stockItemSearchContainer {
   position: relative;
   flex-direction: column;
-  margin-bottom: spacing.$spacing-01;
+  margin-bottom: layout.$spacing-01;
 }
 
 .searchResults {

package/src/stock-operations/stock-operations-forms/input-components/qty-uim-selector.test.tsx

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import QtyUomSelector from './quantity-uom-selector.component';
+
+jest.mock('../../../stock-items/stock-items.resource');
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const mockUseStockItem = useStockItem as jest.Mock;
+
+describe('QtyUOMSelector', () => {
+  const mockOnValueChange = jest.fn();
+  const mockStockItemUuid = 'test-uuid';
+  const mockitem = {
+    uuid: '33225466-93c8-4720-b110-4f445f3764c6',
+    drugUuid: '1776AFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF',
+    drugName: 'Ibuprofen Injection solution  5mg/mL ',
+    conceptUuid: '77897AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    conceptName: 'IBUPROFEN',
+    hasExpiration: true,
+    preferredVendorUuid: 'b7e481ef-06e7-46ba-8a7c-ab077aa3355f',
+    preferredVendorName: 'Kenya Medical Supplies Authority',
+    purchasePrice: 100.0,
+    purchasePriceUoMUuid: '65dc9ec7-0663-4cf0-a35c-6a2d2cf99eee',
+    purchasePriceUoMName: 'Box',
+    purchasePriceUoMFactor: 10.0,
+    dispensingUnitName: 'Tablet',
+    dispensingUnitUuid: '1513AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dispensingUnitPackagingUoMUuid: '65dc9ec7-0663-4cf0-a35c-6a2d2cf99eee',
+    dispensingUnitPackagingUoMName: 'Box',
+    dispensingUnitPackagingUoMFactor: 10.0,
+    defaultStockOperationsUoMUuid: null,
+    defaultStockOperationsUoMName: null,
+    defaultStockOperationsUoMFactor: null,
+    categoryUuid: '183f9497-b72e-4ebe-ae17-5dcf110ff3b6',
+    categoryName: 'Other Lymph Node Comments',
+    commonName: 'Ibuprofen 5 MG/ML Injectable Solution',
+    acronym: null,
+    reorderLevel: null,
+    reorderLevelUoMUuid: null,
+    reorderLevelUoMName: null,
+    reorderLevelUoMFactor: null,
+    dateCreated: '2024-09-03T09:46:47.000+0300',
+    creatorGivenName: 'Mark',
+    creatorFamilyName: 'Miller',
+    voided: false,
+    expiryNotice: 180,
+    permission: {
+      canView: true,
+      canEdit: true,
+    },
+    packagingUnits: [
+      {
+        uuid: '8023ef7d-56da-442f-bc74-319f000840b4',
+        factor: 1.0,
+        packagingUomUuid: '162382AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        packagingUomName: 'Vial',
+        stockItemUuid: '33225466-93c8-4720-b110-4f445f3764c6',
+        isDefaultStockOperationsUoM: false,
+        isDispensingUnit: false,
+        links: [
+          {
+            rel: 'full',
+            uri: 'http://hie.kenyahmis.org/openmrs/ws/rest/v1/stockmanagement/stockitempackaginguom/8023ef7d-56da-442f-bc74-319f000840b4?v=full',
+            resourceAlias: 'stockitempackaginguom',
+          },
+        ],
+        resourceVersion: '1.8',
+      },
+      {
+        uuid: '65dc9ec7-0663-4cf0-a35c-6a2d2cf99eee',
+        factor: 10.0,
+        packagingUomUuid: '162396AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        packagingUomName: 'Box',
+        stockItemUuid: '33225466-93c8-4720-b110-4f445f3764c6',
+        isDefaultStockOperationsUoM: false,
+        isDispensingUnit: true,
+        links: [
+          {
+            rel: 'full',
+            uri: 'http://hie.kenyahmis.org/openmrs/ws/rest/v1/stockmanagement/stockitempackaginguom/65dc9ec7-0663-4cf0-a35c-6a2d2cf99eee?v=full',
+            resourceAlias: 'stockitempackaginguom',
+          },
+        ],
+        resourceVersion: '1.8',
+      },
+    ],
+    references: [],
+    links: [
+      {
+        rel: 'self',
+        uri: 'http://hie.kenyahmis.org/openmrs/ws/rest/v1/stockmanagement/stockitem/33225466-93c8-4720-b110-4f445f3764c6',
+        resourceAlias: 'stockitem',
+      },
+    ],
+    resourceVersion: '1.8',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseStockItem.mockReturnValue({
+      isLoading: false,
+      item: mockitem,
+    });
+  });
+  it('should render Skeleton when loading stock item', () => {
+    mockUseStockItem.mockReturnValue({ isLoading: true });
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+  it('should render Inline notification error when error ocuured while fetching item', () => {
+    const errorMessage = 'error loading stock item';
+    mockUseStockItem.mockReturnValue({ isLoading: false, error: new Error(errorMessage) });
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+  it('should render Inline notification error when error ocuured while fetching item', () => {
+    const errorMessage = 'error loading stock item';
+    mockUseStockItem.mockReturnValue({ isLoading: false, error: new Error(errorMessage) });
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should display error message when error prop is provided', () => {
+    const errorMessage = 'This is an error';
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} error={errorMessage} />);
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+  it('should display error message when error prop is provided', () => {
+    const errorMessage = 'This is an error';
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} error={errorMessage} />);
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('should render packing uom options', async () => {
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    mockitem.packagingUnits.forEach(({ factor, packagingUomName }) => {
+      expect(screen.getByText(`${packagingUomName} - ${factor}`)).toBeInTheDocument();
+    });
+  });
+  it('should packing uom selection', async () => {
+    const itemToSelect = mockitem.packagingUnits[1];
+    render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    const option = screen.getByText(`${itemToSelect.packagingUomName} - ${itemToSelect.factor}`);
+    await userEvent.click(option);
+    expect(mockOnValueChange).toHaveBeenCalledWith(itemToSelect.uuid);
+  });
+});

package/src/stock-operations/stock-operations-forms/input-components/quantity-uom-selector.component.tsx

@@ -0,0 +1,53 @@
+import { ComboBox, InlineNotification, SkeletonText } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+
+interface QtyUomSelectorProps {
+  stockItemUuid: string;
+  intiallvalue?: string;
+  onValueChange?: (value: string) => void;
+  error?: string;
+}
+
+const QtyUomSelector: React.FC<QtyUomSelectorProps> = ({ stockItemUuid, error, intiallvalue, onValueChange }) => {
+  const { t } = useTranslation();
+  const { isLoading, error: stockItemError, item } = useStockItem(stockItemUuid);
+  const initialSelectedItem = useMemo<StockItemPackagingUOMDTO | null>(
+    () => (item?.packagingUnits ?? []).find((u) => u.uuid === intiallvalue),
+    [item?.packagingUnits, intiallvalue],
+  );
+
+  if (isLoading) return <SkeletonText role="progressbar" />;
+
+  if (stockItemError)
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('packagingUomError', 'Error loading Stock item')}
+        subtitle={stockItemError?.message}
+      />
+    );
+
+  return (
+    <ComboBox
+      titleText={t('quantityUom', 'Qty UoM')}
+      name={'stockItemPackagingUOMUuid'}
+      id={'stockItemPackagingUOMUuid'}
+      items={item?.packagingUnits ?? []}
+      onChange={(data: { selectedItem?: StockItemPackagingUOMDTO }) => {
+        onValueChange?.(data.selectedItem?.uuid);
+      }}
+      initialSelectedItem={initialSelectedItem}
+      itemToString={(s: StockItemPackagingUOMDTO) =>
+        s.packagingUomName ? `${s?.packagingUomName} - ${s?.factor} ` : ''
+      }
+      placeholder={t('filter', 'Filter') + '...'}
+      invalid={error}
+      invalidText={error}
+    />
+  );
+};
+
+export default QtyUomSelector;

package/src/stock-operations/stock-operations-forms/input-components/stock-item-search.component.tsx

@@ -0,0 +1,79 @@
+import { ClickableTile, Search } from '@carbon/react';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
+import { useFilterableStockItems } from '../hooks/useFilterableStockItems';
+import styles from './input-components-styles.scss';
+import { ConfigObject } from '../../../config-schema';
+
+type StockItemSearchProps = {
+  onSelectedItem?: (stockItem: StockItemDTO) => void;
+};
+
+const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) => {
+  const { t } = useTranslation();
+  const { isLoading, stockItemsList, setSearchString } = useFilterableStockItems({});
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
+  const getDrugName = useCallback(
+    (item: StockItemDTO) => {
+      if (useItemCommonNameAsDisplay) return;
+      const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+      return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+    },
+    [useItemCommonNameAsDisplay, t],
+  );
+
+  const getCommonName = useCallback(
+    (item: StockItemDTO) => {
+      if (!useItemCommonNameAsDisplay) return;
+      const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+      return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+    },
+    [useItemCommonNameAsDisplay, t],
+  );
+  useEffect(() => {
+    if (debouncedSearchTerm?.length !== 0) {
+      setSearchString(debouncedSearchTerm);
+    }
+  }, [debouncedSearchTerm, setSearchString]);
+
+  const handleOnSearchResultClick = (stockItem: StockItemDTO) => {
+    onSelectedItem?.(stockItem);
+    setSearchTerm('');
+  };
+
+  return (
+    <div className={styles.stockItemSearchContainer}>
+      <div style={{ display: 'flex' }}>
+        <Search
+          size="lg"
+          placeholder={t('findItems', 'Find your items')}
+          labelText={t('search', 'Search')}
+          closeButtonLabelText={t('clearSearch', 'Clear search input')}
+          value={searchTerm}
+          id="search-stock-operation-item"
+          name="search-stock-operation-item"
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+      </div>
+      {searchTerm && stockItemsList?.length > 0 && (
+        <div className={styles.searchResults}>
+          {stockItemsList?.slice(0, 5).map((stockItem) => {
+            const commonName = getCommonName(stockItem);
+            const drugName = getDrugName(stockItem);
+            return (
+              <ClickableTile onClick={() => handleOnSearchResultClick(stockItem)} key={stockItem?.uuid}>
+                {useItemCommonNameAsDisplay ? commonName : drugName}
+              </ClickableTile>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StockItemSearch;

package/src/stock-operations/stock-operations-forms/input-components/stock-operation-reason-selector.component.tsx

@@ -0,0 +1,59 @@
+import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject } from '../../../config-schema';
+import { Concept } from '../../../core/api/types/concept/Concept';
+import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
+
+const StockOperationReasonSelector = () => {
+  const { stockAdjustmentReasonUUID } = useConfig<ConfigObject>();
+  const form = useFormContext<{ reasonUuid: string }>();
+  const {
+    isLoading,
+    error,
+    items: { answers: reasons },
+  } = useConcept(stockAdjustmentReasonUUID);
+  const { t } = useTranslation();
+  if (isLoading) return <SelectSkeleton role="progressbar" />;
+
+  if (error)
+    return (
+      <InlineNotification
+        lowContrast
+        kind="error"
+        title={t('reasonError', 'Error loading reasons concepts')}
+        subtitle={error?.message}
+      />
+    );
+
+  return (
+    <Controller
+      control={form.control}
+      name={'reasonUuid'}
+      render={({ field, fieldState: { error } }) => (
+        <ComboBox
+          readOnly={field.disabled}
+          titleText={t('reason', 'Reason')}
+          placeholder={t('chooseAReason', 'Choose a reason')}
+          name={'reasonUuid'}
+          id={'reasonUuid'}
+          size={'xl'}
+          items={reasons}
+          initialSelectedItem={reasons?.find((p) => p.uuid === field.value)}
+          selectedItem={reasons.find((p) => p.uuid === field.value)}
+          itemToString={(item?: Concept) => (item && item?.display ? `${item?.display}` : '')}
+          onChange={(data: { selectedItem?: Concept }) => {
+            field.onChange(data?.selectedItem?.uuid);
+          }}
+          ref={field.ref}
+          invalid={error?.message}
+          invalidText={error?.message}
+        />
+      )}
+    />
+  );
+};
+
+export default StockOperationReasonSelector;