@openmrs/esm-stock-management-app 3.0.1-pre.818 → 3.0.1-pre.827

package/src/stock-items/add-stock-item/transactions/transactions.component.tsx

@@ -29,6 +29,7 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
     setStockItemUuid,
     setLocationUuid,
     binCardHeaders,
+    inventory,
   } = useStockItemsTransactions(stockItemFilter);
 
   useEffect(() => {
@@ -38,82 +39,87 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
   const { control } = useForm({});
 
   const tableRows = useMemo(() => {
-    return items?.map((stockItemTransaction) => ({
-      ...stockItemTransaction,
-      id: stockItemTransaction?.uuid,
-      key: `key-${stockItemTransaction?.uuid}`,
-      uuid: `${stockItemTransaction?.uuid}`,
-      date: formatDisplayDate(stockItemTransaction?.dateCreated),
-      location:
-        stockItemTransaction.operationSourcePartyName && stockItemTransaction.operationDestinationPartyName ? (
-          stockItemTransaction.operationSourcePartyName === stockItemTransaction?.partyName ? (
-            stockItemTransaction.quantity > 0 ? (
-              <>
-                <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
-                <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
-              </>
-            ) : (
-              <>
-                <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
-                <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
-              </>
-            )
-          ) : stockItemTransaction.operationDestinationPartyName === stockItemTransaction?.partyName ? (
-            stockItemTransaction.quantity > 0 ? (
-              <>
-                <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
-                <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
-              </>
+    return items?.map((stockItemTransaction) => {
+      const balance = inventory?.total ?? '';
+
+      return {
+        ...stockItemTransaction,
+        id: stockItemTransaction?.uuid,
+        key: `key-${stockItemTransaction?.uuid}`,
+        uuid: `${stockItemTransaction?.uuid}`,
+        date: formatDisplayDate(stockItemTransaction?.dateCreated),
+        location:
+          stockItemTransaction.operationSourcePartyName && stockItemTransaction.operationDestinationPartyName ? (
+            stockItemTransaction.operationSourcePartyName === stockItemTransaction?.partyName ? (
+              stockItemTransaction.quantity > 0 ? (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
+                </>
+              ) : (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
+                </>
+              )
+            ) : stockItemTransaction.operationDestinationPartyName === stockItemTransaction?.partyName ? (
+              stockItemTransaction.quantity > 0 ? (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
+                </>
+              ) : (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
+                </>
+              )
             ) : (
-              <>
-                <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
-                <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
-              </>
+              stockItemTransaction?.partyName
             )
           ) : (
             stockItemTransaction?.partyName
-          )
-        ) : (
-          stockItemTransaction?.partyName
-        ),
-      transaction: stockItemTransaction?.isPatientTransaction
-        ? 'Patient Dispense'
-        : stockItemTransaction.stockOperationTypeName,
-      quantity: `${stockItemTransaction?.quantity?.toLocaleString()} ${stockItemTransaction?.packagingUomName ?? ''}`,
-      batch: stockItemTransaction.stockBatchNo
-        ? `${stockItemTransaction.stockBatchNo}${
-            stockItemTransaction.expiration ? ` (${formatDisplayDate(stockItemTransaction.expiration)})` : ''
-          }`
-        : '',
-      reference: (
-        <StockOperationReference
-          operationUuid={stockItemTransaction?.stockOperationUuid}
-          operationNumber={stockItemTransaction?.stockOperationNumber}
-        />
-      ),
-      status: stockItemTransaction?.stockOperationStatus ?? '',
-      in:
-        stockItemTransaction?.quantity >= 0
-          ? `${stockItemTransaction?.quantity?.toLocaleString()} ${stockItemTransaction?.packagingUomName ?? ''} of ${
-              stockItemTransaction.packagingUomFactor
+          ),
+        transaction: stockItemTransaction?.isPatientTransaction
+          ? 'Patient Dispense'
+          : stockItemTransaction.stockOperationTypeName,
+        quantity: `${stockItemTransaction?.quantity?.toLocaleString()} ${stockItemTransaction?.packagingUomName ?? ''}`,
+        batch: stockItemTransaction.stockBatchNo
+          ? `${stockItemTransaction.stockBatchNo}${
+              stockItemTransaction.expiration ? ` (${formatDisplayDate(stockItemTransaction.expiration)})` : ''
             }`
           : '',
-      out:
-        stockItemTransaction?.quantity < 0
-          ? `${(-1 * stockItemTransaction?.quantity)?.toLocaleString()} ${
-              stockItemTransaction?.packagingUomName ?? ''
-            } of ${stockItemTransaction.packagingUomFactor}`
-          : '',
-      totalin:
-        stockItemTransaction?.quantity >= 0
-          ? `${stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
-          : '',
-      totalout:
-        stockItemTransaction?.quantity < 0
-          ? `${-1 * stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
-          : '',
-    }));
-  }, [items]);
+        reference: (
+          <StockOperationReference
+            operationUuid={stockItemTransaction?.stockOperationUuid}
+            operationNumber={stockItemTransaction?.stockOperationNumber}
+          />
+        ),
+        status: stockItemTransaction?.stockOperationStatus ?? '',
+        in:
+          stockItemTransaction?.quantity >= 0
+            ? `${stockItemTransaction?.quantity?.toLocaleString()} ${stockItemTransaction?.packagingUomName ?? ''} of ${
+                stockItemTransaction.packagingUomFactor
+              }`
+            : '',
+        out:
+          stockItemTransaction?.quantity < 0
+            ? `${(-1 * stockItemTransaction?.quantity)?.toLocaleString()} ${
+                stockItemTransaction?.packagingUomName ?? ''
+              } of ${stockItemTransaction.packagingUomFactor}`
+            : '',
+        totalin:
+          stockItemTransaction?.quantity >= 0
+            ? `${stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
+            : '',
+        totalout:
+          stockItemTransaction?.quantity < 0
+            ? `${-1 * stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
+            : '',
+        balance: `${balance} ${stockItemTransaction?.packagingUomName ?? ''}`,
+      };
+    });
+  }, [items, inventory]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
@@ -123,7 +129,12 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
     <DataList
       children={() => (
         <>
-          <TransactionsPrintAction columns={binCardHeaders} data={tableRows} itemUuid={stockItemUuid} />
+          <TransactionsPrintAction
+            columns={binCardHeaders}
+            data={tableRows}
+            itemUuid={stockItemUuid}
+            filter={stockItemFilter}
+          />
           <TransactionsLocationsFilter
             onLocationIdChange={(q) => {
               setLocationUuid(q);

package/src/stock-items/add-stock-item/transactions/transactions.resource.tsx

@@ -1,6 +1,6 @@
 import { ResourceRepresentation } from '../../../core/api/api';
 import { useEffect, useMemo, useState } from 'react';
-import { type StockItemInventoryFilter, useStockItemTransactions } from '../../stock-items.resource';
+import { StockItemInventoryFilter, useStockItemInventory, useStockItemTransactions } from '../../stock-items.resource';
 
 export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({
@@ -37,6 +37,7 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
   }, [searchString, currentPage, currentPageSize, stockItemUuid, partyUuid, locationUuid, stockBatchUuid]);
 
   const { items, isLoading, error } = useStockItemTransactions(stockItemFilter);
+  const { items: inventory } = useStockItemInventory(stockItemFilter);
 
   const tableHeaders = useMemo(
     () => [
@@ -102,6 +103,10 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
         key: 'batch',
         header: 'Batch',
       },
+      {
+        key: 'balance',
+        header: 'Balance',
+      },
       {
         key: 'reference',
         header: 'Reference',
@@ -131,5 +136,6 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
     setPartyUuid,
     setStockBatchUuid,
     binCardHeaders,
+    inventory: inventory,
   };
 }

package/src/stock-items/edit-stock-item/edit-stock-item-action-menu.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { launchAddOrEditDialog } from '../stock-item.utils';
+import { launchAddOrStockItemWorkspace } from '../stock-item.utils';
 
 interface EditStockItemActionsMenuProps {
   data: StockItemDTO;
@@ -17,7 +17,7 @@ const EditStockItemActionsMenu: React.FC<EditStockItemActionsMenuProps> = ({ dat
       size="md"
       onClick={() => {
         data.isDrug = !!data.drugUuid;
-        launchAddOrEditDialog(t, data, true);
+        launchAddOrStockItemWorkspace(t, data);
       }}
       iconDescription={t('editStockItem', 'Edit Stock Item')}
     >

package/src/stock-items/stock-item.utils.tsx

@@ -1,57 +1,14 @@
-import React from 'react';
-import { closeOverlay, launchOverlay } from '../core/components/overlay/hook';
-import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
+import { launchWorkspace } from '@openmrs/esm-framework';
 import { type TFunction } from 'react-i18next';
-import AddEditStockItem from './add-stock-item/add-stock-item.component';
-import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
-import { createStockItem, updateStockItem } from './stock-items.resource';
-
-export const addOrEditStockItem = async (t: TFunction, stockItem: StockItemDTO, isEditing = false) => {
-  try {
-    const response: FetchResponse<StockItemDTO> = await (isEditing ? updateStockItem : createStockItem)(stockItem);
-
-    if (response?.data) {
-      showSnackbar({
-        isLowContrast: true,
-        title: isEditing ? `${t('editStockItem', 'Edit Stock Item')}` : `${t('addStockItem', 'Add Stock Item')}`,
-        kind: 'success',
-        subtitle: isEditing
-          ? `${t('stockItemEdited', 'Stock Item Edited Successfully')}`
-          : `${t('stockItemAdded', 'Stock Item Added Successfully')}`,
-      });
-
-      if (!isEditing) {
-        closeOverlay();
-
-        // launch edit dialog
-        const item = response.data;
-        item.isDrug = !!item.drugUuid;
-        launchAddOrEditDialog(t, item, true);
-      }
-    }
-  } catch (error) {
-    showSnackbar({
-      title: isEditing
-        ? t('errorEditingStockItem', 'Error editing a stock Item')
-        : t('errorAddingStockItem', 'Error adding a stock Item'),
-      kind: 'error',
-      isLowContrast: true,
-      subtitle: error?.responseBody?.error?.message,
-    });
-  }
-};
+import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
 
-export const launchAddOrEditDialog = (t: TFunction, stockItem: StockItemDTO, isEditing = false) => {
-  launchOverlay(
-    isEditing
+export const launchAddOrStockItemWorkspace = (t: TFunction, stockItem?: StockItemDTO) => {
+  launchWorkspace('stock-item-form-workspace', {
+    workspaceTitle: stockItem
       ? `${t('editItem', 'Edit {{name}}', {
           name: stockItem?.drugName || stockItem.conceptName || '',
         })} ${stockItem.isDrug ? '(Drug)' : '(Non Drug)'}`
       : t('addItem', 'Add stock item'),
-    <AddEditStockItem
-      model={stockItem}
-      onSave={(stockItem) => addOrEditStockItem(t, stockItem, isEditing)}
-      isEditing={isEditing}
-    />,
-  );
+    stockItem,
+  });
 };

package/src/stock-items/stock-items-table.component.tsx

@@ -27,7 +27,7 @@ import { useTranslation } from 'react-i18next';
 import { ResourceRepresentation } from '../core/api/api';
 import AddStockItemActionButton from './add-stock-item/add-stock-action-button.component';
 import FilterStockItems from './components/filter-stock-items/filter-stock-items.component';
-import { launchAddOrEditDialog } from './stock-item.utils';
+import { launchAddOrStockItemWorkspace } from './stock-item.utils';
 import { useStockItemsPages } from './stock-items-table.resource';
 import styles from './stock-items-table.scss';
 import AddStockItemsBulktImportActionButton from './add-bulk-stock-item/add-stock-items-bulk-import-action-button.component';
@@ -144,7 +144,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
             size="md"
             onClick={() => {
               stockItem.isDrug = !!stockItem.drugUuid;
-              launchAddOrEditDialog(t, stockItem, true);
+              launchAddOrStockItemWorkspace(t, stockItem);
             }}
             iconDescription={t('editStockItem', 'Edit Stock Item')}
             renderIcon={(props) => <Edit size={16} {...props} />}

package/src/stock-items/stock-items-table.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import StockItemsTableComponent from './stock-items-table.component';
 import { useStockItemsPages } from './stock-items-table.resource';
 import { handleMutate } from '../utils';
-import { launchAddOrEditDialog } from './stock-item.utils';
+import { launchAddOrStockItemWorkspace } from './stock-item.utils';
 
 jest.mock('./stock-items-table.resource', () => ({
   useStockItemsPages: jest.fn(),
@@ -15,7 +15,7 @@ jest.mock('../utils', () => ({
 }));
 
 jest.mock('./stock-item.utils', () => ({
-  launchAddOrEditDialog: jest.fn(),
+  launchAddOrStockItemWorkspace: jest.fn(),
 }));
 
 jest.mock('react-i18next', () => ({
@@ -27,16 +27,18 @@ jest.mock('react-i18next', () => ({
 describe('StockItemsTableComponent', () => {
   const mockUseStockItemsPages = {
     isLoading: false,
-    items: Array(25).fill(null).map((_, index) => ({
-      uuid: `item-${index}`,
-      commonName: `Test Item ${index}`,
-      drugUuid: index % 2 === 0 ? `drug-${index}` : null,
-      conceptName: `Concept ${index}`,
-      dispensingUnitName: `Unit ${index}`,
-      defaultStockOperationsUoMName: `UoM ${index}`,
-      reorderLevel: index * 10,
-      reorderLevelUoMName: 'Units',
-    })),
+    items: Array(25)
+      .fill(null)
+      .map((_, index) => ({
+        uuid: `item-${index}`,
+        commonName: `Test Item ${index}`,
+        drugUuid: index % 2 === 0 ? `drug-${index}` : null,
+        conceptName: `Concept ${index}`,
+        dispensingUnitName: `Unit ${index}`,
+        defaultStockOperationsUoMName: `UoM ${index}`,
+        reorderLevel: index * 10,
+        reorderLevelUoMName: 'Units',
+      })),
     totalCount: 25,
     currentPageSize: 10,
     setPageSize: jest.fn(),
@@ -57,13 +59,13 @@ describe('StockItemsTableComponent', () => {
     render(<StockItemsTableComponent />);
     expect(screen.getByText('panelDescription')).toBeInTheDocument();
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
-    
+
     const user = userEvent.setup();
     const menuButton = screen.getByTestId('stock-items-menu');
     await user.click(menuButton);
-  
+
     await screen.findByText('Refresh');
-    
+
     expect(screen.getByText('type')).toBeInTheDocument();
     expect(screen.getByText('genericName')).toBeInTheDocument();
     expect(screen.getByText('commonName')).toBeInTheDocument();
@@ -87,9 +89,12 @@ describe('StockItemsTableComponent', () => {
     const user = userEvent.setup();
     const searchInput = screen.getByRole('searchbox');
     await user.type(searchInput, 'test search');
-    await waitFor(() => {
-      expect(mockUseStockItemsPages.setSearchString).toHaveBeenCalledWith('test search');
-    }, { timeout: 2000 });
+    await waitFor(
+      () => {
+        expect(mockUseStockItemsPages.setSearchString).toHaveBeenCalledWith('test search');
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('updates pagination when page or page size changes', async () => {
@@ -106,12 +111,12 @@ describe('StockItemsTableComponent', () => {
 
   it('triggers handleRefresh when refresh button is clicked', async () => {
     render(<StockItemsTableComponent />);
-    
+
     const user = userEvent.setup();
     const menuButton = screen.getByTestId('stock-items-menu');
     expect(menuButton).toBeInTheDocument();
     await user.click(menuButton);
-  
+
     const refreshButton = await screen.findByText('Refresh');
     expect(refreshButton).toBeInTheDocument();
     await user.click(refreshButton);
@@ -125,10 +130,10 @@ describe('StockItemsTableComponent', () => {
     const user = userEvent.setup();
     const editButtons = screen.getAllByLabelText('Edit Stock Item');
     await user.click(editButtons[0]);
-    expect(launchAddOrEditDialog).toHaveBeenCalledWith(
+
+    expect(launchAddOrStockItemWorkspace).toHaveBeenCalledWith(
       expect.any(Function),
       expect.objectContaining({ uuid: 'item-0' }),
-      true
     );
   });
-});
+});

package/src/stock-items/stock-items.resource.ts

@@ -10,6 +10,8 @@ import { type StockItemReference, type StockItemReferenceDTO } from '../core/api
 import { type StockItemTransactionDTO } from '../core/api/types/stockItem/StockItemTransaction';
 import { type StockRule } from '../core/api/types/stockItem/StockRule';
 import { type StockOperationItemCost } from '../core/api/types/stockOperation/StockOperationItemCost';
+import { z } from 'zod';
+import { stockItemDetailsSchema, type StockItemFormData } from './validationSchema';
 
 export interface StockItemFilter extends ResourceFilterCriteria {
   isDrug?: string | null | undefined;
@@ -227,11 +229,11 @@ export function deleteStockItemPackagingUnit(id: string) {
 }
 
 // createStockItem
-export function createStockItem(item: StockItemDTO) {
+export function createStockItem(item: StockItemFormData) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockitem`;
   const abortController = new AbortController();
   delete item.isDrug;
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockItemDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -242,12 +244,12 @@ export function createStockItem(item: StockItemDTO) {
 }
 
 // updateStockItem
-export function updateStockItem(item: StockItemDTO) {
-  const apiUrl = `${restBaseUrl}/stockmanagement/stockitem/${item.uuid}`;
+export function updateStockItem(stockItemUuid: string, item: StockItemFormData) {
+  const apiUrl = `${restBaseUrl}/stockmanagement/stockitem/${stockItemUuid}`;
   const abortController = new AbortController();
   delete item.isDrug;
   delete item.dateCreated;
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockItemDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component.tsx

@@ -35,6 +35,7 @@ const StockOperationStepper: React.FC<StockOperationStepperProps> = ({
               className={`${styles.stepperItem} ${active ? styles.stepperItemActive : ''}`}
               key={index}
               onClick={!disabled ? () => onChange?.(index) : undefined}
+              aria-disabled={disabled}
             >
               <p className={styles.title}>{title}</p>
             </li>