@openmrs/esm-stock-management-app 1.0.1-pre.785 → 1.0.1-pre.790

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

@@ -0,0 +1,111 @@
+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';
+import { ArrowLeft } from '@carbon/react/icons';
+
+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>
+        <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 className={styles.btnSet}>
+          {typeof onPrevious === 'function' && (
+            <Button kind="secondary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+              {/* {t('previous', 'Previous')} */}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReceivedItems;

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

@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect } from 'react';
-import { useStockItem } from '../../../stock-items/stock-items.resource';
-import { useTranslation } from 'react-i18next';
-import { showSnackbar } from '@openmrs/esm-framework';
 import { InlineLoading } from '@carbon/react';
-import { StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
+import { ConfigurableLink, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject } from '../../../config-schema';
 import { URL_STOCK_ITEM } from '../../../constants';
-import { Link } from 'react-router-dom';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
 
 type StockOperationItemCellProps = {
   stockItemUuid: string;
@@ -14,7 +13,19 @@ type StockOperationItemCellProps = {
 const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockItemUuid }) => {
   const { isLoading, error, item } = useStockItem(stockItemUuid);
   const { t } = useTranslation();
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
+
+  const commonName = useMemo(() => {
+    if (!useItemCommonNameAsDisplay) return;
+    const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+    return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
 
+  const drugName = useMemo(() => {
+    if (useItemCommonNameAsDisplay) return;
+    const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+    return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
   useEffect(() => {
     if (error) {
       showSnackbar({
@@ -29,9 +40,9 @@ const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockIt
   if (error) return <>--</>;
 
   return (
-    <Link target={'_blank'} to={URL_STOCK_ITEM(stockItemUuid)}>
-      {(item as StockItemDTO)?.commonName || 'No name available'}
-    </Link>
+    <ConfigurableLink target={'_blank'} to={window.spaBase + URL_STOCK_ITEM(stockItemUuid)}>
+      {useItemCommonNameAsDisplay ? commonName : drugName}
+    </ConfigurableLink>
   );
 };
 

package/src/stock-operations/stock-operations-forms/steps/stock-operation-items-form-step.component.tsx

@@ -9,8 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { Edit, TrashCan } from '@carbon/react/icons';
-import { isDesktop, launchWorkspace } from '@openmrs/esm-framework';
+import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import React, { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +19,6 @@ import { getStockOperationUniqueId } from '../../stock-operation.utils';
 import { BaseStockOperationItemFormData, StockOperationItemDtoSchema } from '../../validation-schema';
 import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
 import StockItemSearch from '../input-components/stock-item-search.component';
-import { StockItemFormProps } from '../stock-item-form/stock-item-form.workspace';
 import QuantityUomCell from './quantity-uom-cell.component';
 import StockAvailability from './stock-availability-cell.component';
 import StockOperationItemBatchNoCell from './stock-operation-item-batch-no-cell.component';
@@ -33,12 +31,14 @@ type StockOperationItemsFormStepProps = {
   stockOperationType: StockOperationType;
   onNext?: () => void;
   onPrevious?: () => void;
+  onLaunchItemsForm?: (stockOperationItem?: BaseStockOperationItemFormData) => void;
 };
 const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> = ({
   stockOperationType,
   stockOperation,
   onNext,
   onPrevious,
+  onLaunchItemsForm,
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
@@ -103,29 +103,6 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
     ];
   }, [operationTypePermision, t]);
 
-  const handleLaunchStockItem = useCallback(
-    (stockOperationItem?: BaseStockOperationItemFormData) => {
-      launchWorkspace('stock-operation-stock-items-form', {
-        workspaceTitle: t('stockItem', 'StockItem'),
-        ...({
-          stockOperationType,
-          stockOperationItem,
-          onSave: (data) => {
-            const items = (form.getValues('stockOperationItems') ?? []) as Array<BaseStockOperationItemFormData>;
-            const index = items.findIndex((i) => i.uuid === data.uuid);
-            if (index === -1) {
-              items.push(data);
-            } else {
-              items[index] = data;
-            }
-            form.setValue('stockOperationItems', items as any);
-          },
-        } as StockItemFormProps),
-      });
-    },
-    [stockOperationType, t, form],
-  );
-
   const handleDeleteStockOperationItem = useCallback(
     (item: BaseStockOperationItemFormData) => {
       form.setValue('stockOperationItems', observableOperationItems.filter((i) => i.uuid !== item.uuid) as any);
@@ -183,7 +160,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               kind="ghost"
               renderIcon={Edit}
               onClick={() => {
-                handleLaunchStockItem(item);
+                onLaunchItemsForm?.(item);
               }}
             />
             <Button
@@ -194,14 +171,14 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               kind="ghost"
               renderIcon={TrashCan}
               onClick={() => {
-                handleDeleteStockOperationItem(item);
+                onLaunchItemsForm?.(item);
               }}
             />
           </>
         ),
       };
     });
-  }, [observableOperationItems, handleLaunchStockItem, handleDeleteStockOperationItem, stockOperationType]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType]);
 
   const headerTitle = t('stockoperationItems', 'Stock operation items');
 
@@ -210,22 +187,10 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
       <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>
-            )}
-            {typeof onNext === 'function' && (
-              <Button kind="primary" onClick={onNext}>
-                {t('next', 'Next')}
-              </Button>
-            )}
-          </div>
         </div>
         <StockItemSearch
           onSelectedItem={(stockItem) =>
-            handleLaunchStockItem({
+            onLaunchItemsForm({
               uuid: `new-item-${getStockOperationUniqueId()}`,
               stockItemUuid: stockItem.uuid,
               hasExpiration: stockItem.hasExpiration,
@@ -233,7 +198,6 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
             })
           }
         />
-
         <DataTable
           rows={tableRows ?? []}
           headers={headers}
@@ -245,13 +209,12 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
-                    {headers.map((header: any) => (
+                    {headers.map((header) => (
                       <TableHeader
                         {...getHeaderProps({
                           header,
                           isSortable: false,
                         })}
-                        className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
                         style={header?.styles}
                         key={`${header.key}`}
                       >
@@ -272,7 +235,19 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               </Table>
             </TableContainer>
           )}
-        ></DataTable>
+        />
+        <div className={styles.btnSet}>
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext} renderIcon={ArrowRight}>
+              {t('next', 'Next')}
+            </Button>
+          )}
+          {typeof onPrevious === 'function' && (
+            <Button kind="secondary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+              {/* {t('previous', 'Previous')} */}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/stock-operations/stock-operations-forms/steps/stock-operation-items-form-step.scc.scss

@@ -3,23 +3,6 @@
 @use '@carbon/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
-.tableContainer {
-  :global(.cds--data-table-content) {
-    height: calc(100vh - 150px);
-  }
-}
-
-.tableHeader {
-  width: 3% !important;
-}
-
-.tableBody {
-  display: flex;
-  flex-direction: row;
-  width: 3% !important;
-  gap: 8px;
-}
-
 .dataTable {
   width: 100%;
 }
@@ -57,8 +40,11 @@
 }
 
 .btnSet {
+  width: 100%;
+  flex: 1;
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   gap: layout.$spacing-03;
   align-items: center;
+  margin-top: layout.$spacing-03;
 }

package/src/stock-operations/stock-operations-forms/steps/stock-operation-submission-form-step.component.tsx

@@ -1,5 +1,5 @@
 import { Button, Column, InlineLoading, RadioButton, RadioButtonGroup, Stack } from '@carbon/react';
-import { Departure, ListChecked, Save, SendFilled } from '@carbon/react/icons';
+import { ArrowLeft, ArrowRight, Departure, ListChecked, Save, SendFilled } from '@carbon/react/icons';
 import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -20,11 +20,15 @@ type StockOperationSubmissionFormStepProps = {
   onPrevious?: () => void;
   stockOperation?: StockOperationDTO;
   stockOperationType: StockOperationType;
+  onNext?: () => void;
+  dismissWorkspace?: () => void;
 };
 const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
   onPrevious,
   stockOperationType,
   stockOperation,
+  onNext,
+  dismissWorkspace,
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
@@ -93,6 +97,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           : createStockOperation(payload as any));
         result = resp.data; // Store the response data
         handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
+        dismissWorkspace?.();
         showSnackbar({
           isLowContrast: true,
           title: stockOperation
@@ -115,7 +120,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
       }
     })(); // Call handleSubmit to trigger validation and submission
     return result; // Return the result after handleSubmit completes
-  }, [form, stockOperation, t, approvalRequired, isStockIssueOperation]);
+  }, [form, stockOperation, t, approvalRequired, isStockIssueOperation, dismissWorkspace]);
 
   const handleComplete = useCallback(() => {
     handleSave().then((operation) => {
@@ -141,13 +146,6 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             ? t('submitAndDispatch', 'Submit/Dispatch')
             : t('submitAndComplete', 'Submit/Complete')}
         </h4>
-        <div className={styles.btnSet}>
-          {typeof onPrevious === 'function' && (
-            <Button kind="secondary" onClick={onPrevious}>
-              Previous
-            </Button>
-          )}
-        </div>
       </div>
 
       <Column>
@@ -156,7 +154,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           legendText={t('doesThisTransactionRequireApproval', 'Does the transaction require approval ?')}
           onChange={handleRadioButtonChange}
           readOnly={!editable}
-          valueSelected={approvalRequired === true}
+          valueSelected={approvalRequired === true ? true : approvalRequired === false ? false : null}
         >
           <RadioButton value={true} id="rbgApprovelRequired-true" labelText={t('yes', 'Yes')} />
           <RadioButton value={false} id="rbgApprovelRequired-false" labelText={t('no', 'No')} />
@@ -169,6 +167,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
               {!operationTypePermision.requiresDispatchAcknowledgement && !approvalRequired && (
                 <Button
                   name="complete"
+                  data-testid="complete-button"
                   type="button"
                   style={{ margin: '4px' }}
                   className="submitButton"
@@ -184,6 +183,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
                   name="dispatch"
                   type="button"
                   style={{ margin: '4px' }}
+                  data-testid="dipatch-button"
                   className="submitButton"
                   kind="primary"
                   onClick={handleDispatch}
@@ -229,6 +229,18 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           </Button>
         </Column>
       )}
+      <div className={styles.btnSet}>
+        {typeof onNext === 'function' && (
+          <Button kind="tertiary" onClick={onNext} renderIcon={ArrowRight}>
+            {t('next', 'Next')}
+          </Button>
+        )}
+        {typeof onPrevious === 'function' && (
+          <Button kind="tertiary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+            {/* {t('previous', 'Previous')} */}
+          </Button>
+        )}
+      </div>
     </Stack>
   );
 };

package/src/stock-operations/stock-operations-forms/stock-issue-form-initializer-with-related-requisition-operation.component.tsx

@@ -1,10 +1,12 @@
-import { showSnackbar } from '@openmrs/esm-framework';
+import { parseDate, showSnackbar } from '@openmrs/esm-framework';
 import React, { useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { OperationType, StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { useStockOperation } from '../stock-operations.resource';
+import { useStockOperationAndItems } from '../stock-operations.resource';
 import { getStockOperationItemFormSchema, StockOperationItemDtoSchema } from '../validation-schema';
+import { pick } from '../../core/utils/utils';
+import { Loading } from '@carbon/react';
 
 type StockIssueFormInitializerWithRelatedRequisitionOperationProps = {
   stockRequisitionUuid: string;
@@ -16,11 +18,12 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
 > = ({ stockRequisitionUuid, stockOperationType }) => {
   const form = useFormContext<StockOperationItemDtoSchema>();
   const { t } = useTranslation();
-  const { error, items: stockOperation, isLoading } = useStockOperation(stockRequisitionUuid);
+  const { error, items: stockOperation, isLoading } = useStockOperationAndItems(stockRequisitionUuid);
   const { setValue } = form;
   const stockOperationItemFormSchema = useMemo(() => {
     return getStockOperationItemFormSchema(OperationType.STOCK_ISSUE_OPERATION_TYPE);
   }, []);
+
   const items = form.watch('stockOperationItems');
   // initialize form values with requisition values for Stock issue operation type
   useEffect(() => {
@@ -30,6 +33,17 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
       setValue('destinationUuid', stockOperation.destinationUuid);
       setValue('requisitionStockOperationUuid', stockRequisitionUuid);
       setValue('operationTypeUuid', stockOperationType.uuid);
+      setValue('responsiblePersonUuid', stockOperation.responsiblePersonUuid);
+      setValue('responsiblePersonOther', stockOperation.responsiblePersonOther);
+      setValue(
+        'stockOperationItems',
+        (stockOperation?.stockOperationItems?.map((item) =>
+          pick(
+            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
+            stockOperationItemFormSchema.keyof().options,
+          ),
+        ) ?? []) as any,
+      );
     }
   }, [stockOperation, stockOperationItemFormSchema, setValue, items, stockOperationType, stockRequisitionUuid]);
 
@@ -49,6 +63,9 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
       });
     }
   }, [stockRequisitionUuid, error, t]);
+
+  if (isLoading) return <Loading active description="Loading" />;
+
   return <React.Fragment />;
 };
 

package/src/stock-operations/stock-operations-forms/stock-item-form/stock-item-form.workspace.tsx

@@ -10,7 +10,7 @@ import {
   TextInput,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { DefaultWorkspaceProps, useConfig } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -24,15 +24,16 @@ import BatchNoSelector from '../input-components/batch-no-selector.component';
 import QtyUomSelector from '../input-components/quantity-uom-selector.component';
 import styles from './stock-item-form.scss';
 import UniqueBatchNoEntryInput from '../input-components/unique-batch-no-entry-input.component';
+import { ConfigObject } from '../../../config-schema';
 
 export interface StockItemFormProps {
   stockOperationType: StockOperationType;
   stockOperationItem: BaseStockOperationItemFormData;
   onSave?: (data: BaseStockOperationItemFormData) => void;
+  onBack?: () => void;
 }
 
-interface Props extends DefaultWorkspaceProps, StockItemFormProps {}
-const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, stockOperationItem, onSave }) => {
+const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stockOperationItem, onSave, onBack }) => {
   const operationType = useMemo(() => {
     return operationFromString(stockOperationType.operationType);
   }, [stockOperationType]);
@@ -40,6 +41,7 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
     return getStockOperationItemFormSchema(operationType);
   }, [operationType]);
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
 
   const fields = formschema.keyof().options;
   const form = useForm<z.infer<typeof formschema>>({
@@ -49,15 +51,25 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
   });
   const { t } = useTranslation();
   const { item } = useStockItem(form.getValues('stockItemUuid'));
+  const commonName = useMemo(() => {
+    if (!useItemCommonNameAsDisplay) return;
+    const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+    return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+
+  const drugName = useMemo(() => {
+    if (useItemCommonNameAsDisplay) return;
+    const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+    return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+
   const onSubmit = (data: z.infer<typeof formschema>) => {
     onSave?.(data);
-    closeWorkspace();
-    // Implementation of adding or updating itsms in items table
   };
   return (
     <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
       <Stack gap={4} className={styles.grid}>
-        {item?.commonName && <p className={styles.title}>{item?.commonName}</p>}
+        <p className={styles.title}>{useItemCommonNameAsDisplay ? commonName : drugName}</p>
 
         {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
           fields.includes('batchNo' as any) && (
@@ -183,7 +195,7 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
       </Stack>
 
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+        <Button className={styles.button} kind="secondary" onClick={onBack}>
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>