@openmrs/esm-stock-management-app 3.0.1-pre.805 → 3.0.1-pre.826

package/src/core/api/types/concept/ConceptName.ts

@@ -1,5 +1,5 @@
-import { BaseOpenmrsObject } from '../BaseOpenmrsObject';
-import { Concept } from './Concept';
+import { type BaseOpenmrsObject } from '../BaseOpenmrsObject';
+import { type Concept } from './Concept';
 
 export interface ConceptName extends BaseOpenmrsObject {
   conceptNameId: number;

package/src/core/api/types/concept/Drug.ts

@@ -1,5 +1,5 @@
-import { BaseOpenmrsMetadata } from '../BaseOpenmrsMetadata';
-import { Concept } from './Concept';
+import { type BaseOpenmrsMetadata } from '../BaseOpenmrsMetadata';
+import { type Concept } from './Concept';
 
 export interface Drug extends BaseOpenmrsMetadata {
   drugId: number;

package/src/core/api/types/identity/Patient.ts

@@ -1,3 +1,3 @@
-import { Person } from './Person';
+import { type Person } from './Person';
 
 export type Patient = Person;

package/src/core/api/types/identity/Privilege.ts

@@ -1,4 +1,4 @@
-import { BaseOpenmrsMetadata } from '../BaseOpenmrsMetadata';
+import { type BaseOpenmrsMetadata } from '../BaseOpenmrsMetadata';
 
 export interface Privilege extends BaseOpenmrsMetadata {
   privilege: string;

package/src/core/api/types/identity/Session.ts

@@ -1,6 +1,6 @@
-import { SessionLocation } from '@openmrs/esm-framework';
-import { PrivilegeScope } from './PriviledgeScope';
-import { User } from './User';
+import { type SessionLocation } from '@openmrs/esm-framework';
+import { type PrivilegeScope } from './PriviledgeScope';
+import { type User } from './User';
 
 export interface GetSessionResponse {
   sessionId: string;

package/src/core/api/types/identity/User.ts

@@ -1,5 +1,5 @@
-import { Person } from './Person';
-import { Role } from './Role';
+import { type Person } from './Person';
+import { type Role } from './Role';
 
 export interface SessionPriviledge {
   uuid: string;

package/src/core/api/types/identity/UserRoleScope.ts

@@ -1,6 +1,6 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { UserRoleScopeLocation } from './UserRoleScopeLocation';
-import { UserRoleScopeOperationType } from './UserRoleScopeOperationType';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type UserRoleScopeLocation } from './UserRoleScopeLocation';
+import { type UserRoleScopeOperationType } from './UserRoleScopeOperationType';
 
 export interface UserRoleScope extends BaseOpenmrsData {
   userUuid?: string;

package/src/core/api/types/identity/UserRoleScopeLocation.ts

@@ -1,4 +1,4 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
 
 export interface UserRoleScopeLocation extends BaseOpenmrsData {
   locationUuid: string;

package/src/core/api/types/identity/UserRoleScopeOperationType.ts

@@ -1,4 +1,4 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
 
 export interface UserRoleScopeOperationType extends BaseOpenmrsData {
   operationTypeUuid: string;

package/src/core/api/types/stockItem/StockBatch.ts

@@ -1,5 +1,5 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { StockItem } from './StockItem';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type StockItem } from './StockItem';
 
 export interface StockBatch extends BaseOpenmrsData {
   batchNo: string;

package/src/core/api/types/stockItem/StockItem.ts

@@ -1,9 +1,9 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { Concept } from '../concept/Concept';
-import { Drug } from '../concept/Drug';
-import { RecordPermission } from '../RecordPermission';
-import { StockBatch } from './StockBatch';
-import { StockItemPackagingUOM, StockItemPackagingUOMDTO } from './StockItemPackagingUOM';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type Concept } from '../concept/Concept';
+import { type Drug } from '../concept/Drug';
+import { type RecordPermission } from '../RecordPermission';
+import { type StockBatch } from './StockBatch';
+import { type StockItemPackagingUOM, type StockItemPackagingUOMDTO } from './StockItemPackagingUOM';
 
 export interface StockItem extends BaseOpenmrsData {
   concept: Concept;

package/src/core/api/types/stockItem/StockItemPackagingUOM.ts

@@ -1,6 +1,6 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { Concept } from '../concept/Concept';
-import { StockItem } from './StockItem';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type Concept } from '../concept/Concept';
+import { type StockItem } from './StockItem';
 
 export interface StockItemPackagingUOM extends BaseOpenmrsData {
   factor: number;

package/src/core/api/types/stockItem/StockItemReference.ts

@@ -1,6 +1,6 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { StockSource } from '../stockOperation/StockSource';
-import { StockItem } from './StockItem';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type StockSource } from '../stockOperation/StockSource';
+import { type StockItem } from './StockItem';
 
 export interface StockItemReference extends BaseOpenmrsData {
   referenceCode: string;

package/src/core/api/types/stockItem/StockItemTransaction.ts

@@ -1,4 +1,4 @@
-import { StockOperationStatus } from '../stockOperation/StockOperationStatus';
+import { type StockOperationStatus } from '../stockOperation/StockOperationStatus';
 
 export interface StockItemTransactionDTO {
   uuid: string;

package/src/core/api/types/stockItem/StockRule.ts

@@ -1,4 +1,4 @@
-import { RecordPermission } from '../RecordPermission';
+import { type RecordPermission } from '../RecordPermission';
 
 export interface StockRule {
   id?: string;

package/src/core/api/types/stockOperation/StockOperation.ts

@@ -1,11 +1,11 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { Patient } from '../identity/Patient';
-import { OpenMRSLocation } from '../Location';
-import { User } from '../identity/User';
-import { StockOperationItem } from './StockOperationItem';
-import { StockOperationStatus } from './StockOperationStatus';
-import { StockOperationType } from './StockOperationType';
-import { Concept } from '../concept/Concept';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type Patient } from '../identity/Patient';
+import { type OpenMRSLocation } from '../Location';
+import { type User } from '../identity/User';
+import { type StockOperationItem } from './StockOperationItem';
+import { type StockOperationStatus } from './StockOperationStatus';
+import { type StockOperationType } from './StockOperationType';
+import { type Concept } from '../concept/Concept';
 
 export interface StockOperation extends BaseOpenmrsData {
   cancelReason: string;

package/src/core/api/types/stockOperation/StockOperationDTO.ts

@@ -1,6 +1,6 @@
-import { RecordPermission } from '../RecordPermission';
-import { StockOperationItemDTO } from './StockOperationItemDTO';
-import { StockOperationStatus } from './StockOperationStatus';
+import { type RecordPermission } from '../RecordPermission';
+import { type StockOperationItemDTO } from './StockOperationItemDTO';
+import { type StockOperationStatus } from './StockOperationStatus';
 
 export interface StockOperationDTO {
   uuid: string | null | undefined;

package/src/core/api/types/stockOperation/StockOperationItem.ts

@@ -1,8 +1,8 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { StockBatch } from '../stockItem/StockBatch';
-import { StockItem } from '../stockItem/StockItem';
-import { StockItemPackagingUOM } from '../stockItem/StockItemPackagingUOM';
-import { StockOperation } from './StockOperation';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type StockBatch } from '../stockItem/StockBatch';
+import { type StockItem } from '../stockItem/StockItem';
+import { type StockItemPackagingUOM } from '../stockItem/StockItemPackagingUOM';
+import { type StockOperation } from './StockOperation';
 
 export interface StockOperationItem extends BaseOpenmrsData {
   quantity: number;

package/src/core/api/types/stockOperation/StockOperationItemDTO.ts

@@ -1,5 +1,5 @@
-import { RecordPermission } from '../RecordPermission';
-import { StockItemPackagingUOMDTO } from '../stockItem/StockItemPackagingUOM';
+import { type RecordPermission } from '../RecordPermission';
+import { type StockItemPackagingUOMDTO } from '../stockItem/StockItemPackagingUOM';
 
 export interface StockOperationItemDTO {
   itemIndex?: number;

package/src/core/api/types/stockOperation/StockOperationType.ts

@@ -1,5 +1,5 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { LocationType } from './LocationType';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type LocationType } from './LocationType';
 
 export interface StockOperationType extends BaseOpenmrsData {
   name: string;

package/src/core/api/types/stockOperation/StockSource.ts

@@ -1,5 +1,5 @@
-import { BaseOpenmrsData } from '../BaseOpenmrsData';
-import { Concept } from '../concept/Concept';
+import { type BaseOpenmrsData } from '../BaseOpenmrsData';
+import { type Concept } from '../concept/Concept';
 
 export interface StockSource extends BaseOpenmrsData {
   name: string;

package/src/core/components/carbon/controlled-combo-box/controlled-combo-box.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { ComboBox } from '@carbon/react';
 
 interface ControlledComboBoxProps<T> {

package/src/core/components/carbon/controlled-dropdown/controlled-dropdown.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
-import { DropdownProps, OnChangeData } from '@carbon/react/lib/components/Dropdown/Dropdown';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
+import { type DropdownProps, type OnChangeData } from '@carbon/react/lib/components/Dropdown/Dropdown';
 import { TextInput } from '@carbon/react';
 
 interface ControlledDropdownProps<T, K> extends DropdownProps<K> {

package/src/core/components/carbon/controlled-number-input/controlled-number-input.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
-import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
+import { type NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import { NumberInput } from '@carbon/react';
-import { StockItemPackagingUOMDTO } from '../../../api/types/stockItem/StockItemPackagingUOM';
+import { type StockItemPackagingUOMDTO } from '../../../api/types/stockItem/StockItemPackagingUOM';
 
 interface ControlledNumberInputProps<T> extends NumberInputProps {
   row?: StockItemPackagingUOMDTO;

package/src/core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
-import { Control, Controller, FieldValues } from 'react-hook-form';
+import { type RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { RadioButtonGroup, RadioButton } from '@carbon/react';
-import { RadioOption } from '../../../../stock-items/add-stock-item/stock-item-details/stock-item-details.resource';
+import { type RadioOption } from '../../../../stock-items/add-stock-item/stock-item-details/stock-item-details.resource';
 
 interface ControlledRadioButtonGroupProps<T> extends RadioButtonGroupProps {
   controllerName: string;

package/src/core/components/carbon/controlled-text-area/controlled-text-area.component.tsx

@@ -1,6 +1,6 @@
-import React, { ChangeEvent } from 'react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
-import { TextAreaProps } from '@carbon/react/lib/components/TextArea/TextArea';
+import React, { type ChangeEvent } from 'react';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
+import { type TextAreaProps } from '@carbon/react/lib/components/TextArea/TextArea';
 import { TextArea } from '@carbon/react';
 
 interface ControlledTextAreaProps<T> extends TextAreaProps {

package/src/core/components/carbon/controlled-text-input/controlled-text-input.component.tsx

@@ -1,7 +1,7 @@
-import React, { ChangeEvent } from 'react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
+import React, { type ChangeEvent } from 'react';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { TextInput } from '@carbon/react';
-import { TextInputProps } from '@carbon/react/lib/components/TextInput/TextInput';
+import { type TextInputProps } from '@carbon/react/lib/components/TextInput/TextInput';
 
 interface ControlledTextInputProps<T> extends TextInputProps {
   controllerName: string;

package/src/core/components/carbon/types.ts

@@ -1,4 +1,4 @@
-import { Control, FieldValues } from 'react-hook-form';
+import { type Control, type FieldValues } from 'react-hook-form';
 
 export interface Controlled<T> {
   controllerName: string;

package/src/core/components/side-nav/side-nav.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SideNavItem } from './types';
+import { type SideNavItem } from './types';
 import { SideNav, SideNavItems, SideNavLink } from '@carbon/react';
 import styles from './side-nav.scss';
 import { navigate } from '@openmrs/esm-framework';

package/src/core/components/table/table.component.tsx

@@ -20,7 +20,7 @@ import {
 } from '@carbon/react';
 import { DocumentDownload } from '@carbon/react/icons';
 import { isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
-import { DataTableRenderProps } from './types';
+import { type DataTableRenderProps } from './types';
 import styles from './table.scss';
 
 type FilterProps = {

package/src/core/components/table/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface DataTableRenderProps {
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;

package/src/core/components/tabs/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface TabItem {
   name: string;

package/src/core/components/tabs/vertical-tabs.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabItem } from './types';
+import { type TabItem } from './types';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import styles from './vertical-tabs.scss';
 

package/src/core/print/PrintTemplate.ts

@@ -1,6 +1,6 @@
 import { PrintCss } from './PrintStyles';
 import { PRINT_LOGO } from '../../constants';
-import { GetPrintLogo, PrintLogoData } from '../utils/imageUtils';
+import { GetPrintLogo, type PrintLogoData } from '../utils/imageUtils';
 import { getConfig } from '@openmrs/esm-framework';
 
 export const GetPrintTemplate = (

package/src/core/utils/utils.ts

@@ -1,4 +1,4 @@
-import { User } from '../api/types/identity/User';
+import { type User } from '../api/types/identity/User';
 
 export const initialStockOperationValue = () => {
   return {

package/src/index.ts

@@ -131,6 +131,14 @@ export const stockOperationFormWorkspace = getAsyncLifecycle(
   () => import('./stock-operations/stock-operations-forms/stock-operation-form.component'),
   options,
 );
+export const stockItemFormWorkspace = getAsyncLifecycle(
+  () => import('./stock-items/add-stock-item/add-stock-item.component'),
+  options,
+);
+export const stockItemRulesFormWorkspace = getAsyncLifecycle(
+  () => import('./stock-items/add-stock-item/stock-item-rules/add-stock-rules.component'),
+  options,
+);
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

package/src/routes.json

@@ -216,6 +216,20 @@
       "type": "form",
       "canMaximize": true,
       "width": "extra-wide"
+    },
+    {
+      "name": "stock-item-rules-form-workspace",
+      "component": "stockItemRulesFormWorkspace",
+      "title": "Stock Item Rules",
+      "type": "form"
+    },
+    {
+      "name": "stock-item-form-workspace",
+      "component": "stockItemFormWorkspace",
+      "title": "Stock Items",
+      "type": "form",
+      "canMaximize": true,
+      "width": "extra-wide"
     }
   ],
   "pages": [

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

@@ -1,9 +1,9 @@
 import useSWR from 'swr';
-import { ResourceFilterCriteria, toQueryParams } from '../core/api/api';
-import { BatchJob, BatchJobType } from '../core/api/types/BatchJob';
-import { PageableResult } from '../core/api/types/PageableResult';
+import { type ResourceFilterCriteria, toQueryParams } from '../core/api/api';
+import { type BatchJob, type BatchJobType } from '../core/api/types/BatchJob';
+import { type PageableResult } from '../core/api/types/PageableResult';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { ReportType } from '../stock-reports/ReportType';
+import { type ReportType } from '../stock-reports/ReportType';
 
 export interface BatchJobFilter extends ResourceFilterCriteria {
   batchJobType?: BatchJobType | null | undefined;

package/src/stock-home/stock-home-inventory-expiry.resource.tsx

@@ -1,7 +1,7 @@
 import { ResourceRepresentation } from '../core/api/api';
 import { useEffect, useMemo, useState } from 'react';
 import {
-  StockBatchFilter,
+  type StockBatchFilter,
   StockItemInventoryFilter,
   useStockBatches,
   useStockItemInventory,

package/src/stock-home/stock-home-inventory-items.resource.tsx

@@ -1,4 +1,4 @@
-import { StockItemFilter, useStockItems } from '../stock-items/stock-items.resource';
+import { type StockItemFilter, useStockItems } from '../stock-items/stock-items.resource';
 import { useEffect, useState } from 'react';
 import { ResourceRepresentation } from '../core/api/api';
 export function useStockInventoryItems(v?: ResourceRepresentation) {

package/src/stock-home/stock-home-issuing.resource.tsx

@@ -1,4 +1,4 @@
-import { StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
+import { type StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
 
 export function useStockIssuing(filter: StockOperationFilter) {
   const { items, isLoading, error } = useStockOperations(filter);

package/src/stock-home/stock-home-metrics.tsx

@@ -6,7 +6,7 @@ import styles from './stock-home.scss';
 import MetricsCard from '../core/components/card/metrics-card-component';
 import useStockList from './useStockList';
 
-import { StockOperationFilter } from '../stock-operations/stock-operations.resource';
+import { type StockOperationFilter } from '../stock-operations/stock-operations.resource';
 import { useDisposalList } from './useDisposalList';
 import { ResourceRepresentation } from '../core/api/api';
 import { useStockInventoryItems } from './stock-home-inventory-items.resource';

package/src/stock-home/stock-home-receiving.resource.tsx

@@ -1,4 +1,4 @@
-import { StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
+import { type StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
 
 export function useStockReceiving(filter: StockOperationFilter) {
   const { items, isLoading, error } = useStockOperations(filter);

package/src/stock-home/useDisposalList.tsx

@@ -1,4 +1,4 @@
-import { StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
+import { type StockOperationFilter, useStockOperations } from '../stock-operations/stock-operations.resource';
 
 export function useDisposalList(filter: StockOperationFilter) {
   const { items, isLoading, error } = useStockOperations(filter);

package/src/stock-items/add-stock-item/add-stock-action-button.component.tsx

@@ -1,14 +1,13 @@
 import { Button } from '@carbon/react';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { initialValues } from './add-stock-item.resource';
-import { launchAddOrEditDialog } from '../stock-item.utils';
+import { launchAddOrStockItemWorkspace } from '../stock-item.utils';
 
 const AddStockItemActionButton: React.FC = () => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchAddOrEditDialog(t, initialValues, false);
+    launchAddOrStockItemWorkspace(t);
   }, [t]);
 
   return (

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

@@ -1,26 +1,25 @@
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import StockItemDetails from './stock-item-details/stock-item-details.component';
-import StockItemRules from './stock-item-rules/stock-item-rules.component';
-import { TabItem } from '../../core/components/tabs/types';
-import PackagingUnits from './packaging-units/packaging-units.component';
-import Transactions from './transactions/transactions.component';
+import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
+import { type TabItem } from '../../core/components/tabs/types';
+import StockOperationStepper from '../../stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component';
 import BatchInformation from './batch-information/batch-information.component';
+import PackagingUnits from './packaging-units/packaging-units.component';
 import StockQuantities from './quantities/quantities.component';
-import VerticalTabs from '../../core/components/tabs/vertical-tabs.component';
-import { StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { SaveStockItem } from '../types';
+import StockItemDetails from './stock-item-details/stock-item-details.component';
 import StockReferences from './stock-item-references/stock-item-references.component';
+import StockItemRules from './stock-item-rules/stock-item-rules.component';
+import Transactions from './transactions/transactions.component';
 
-interface AddStockItemProps {
-  isEditing?: boolean;
-  model?: StockItemDTO;
-  onSave?: SaveStockItem;
+interface AddStockItemProps extends Partial<DefaultWorkspaceProps> {
+  stockItem?: StockItemDTO;
 }
 
-const AddEditStockItem: React.FC<AddStockItemProps> = ({ isEditing, model, onSave }) => {
+const AddEditStockItem: React.FC<AddStockItemProps> = ({ stockItem, closeWorkspace }) => {
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState(0);
+  const isEditing = Boolean(stockItem);
   const handleTabChange = (index: number) => {
     setSelectedTab(index);
   };
@@ -28,42 +27,52 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({ isEditing, model, onSav
     {
       name: t('stockItemDetails', 'Stock Item Details'),
       component: (
-        <StockItemDetails handleTabChange={handleTabChange} model={model} onSave={onSave} isEditing={isEditing} />
+        <StockItemDetails handleTabChange={handleTabChange} stockItem={stockItem} onCloseWorkspace={closeWorkspace} />
       ),
     },
     {
       name: t('packagingUnits', 'Packaging Units'),
-      component: <PackagingUnits isEditing handleTabChange={handleTabChange} stockItemUuid={model.uuid} />,
+      component: <PackagingUnits isEditing handleTabChange={handleTabChange} stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },
     {
       name: t('transactions', 'Transactions'),
-      component: <Transactions stockItemUuid={model.uuid} />,
+      component: <Transactions stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },
     {
       name: t('batchInformation', 'Batch Information'),
-      component: <BatchInformation stockItemUuid={model.uuid} />,
+      component: <BatchInformation stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },
     {
       name: t('quantities', 'Quantities'),
-      component: <StockQuantities stockItemUuid={model.uuid} />,
+      component: <StockQuantities stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },
     {
       name: t('stockRules', 'Rules'),
-      component: <StockItemRules stockItemUuid={model.uuid} />,
+      component: <StockItemRules stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },
     {
       name: t('references', 'References'),
-      component: <StockReferences stockItemUuid={model.uuid} isEditing={isEditing} />,
+      component: <StockReferences stockItemUuid={stockItem?.uuid} isEditing={isEditing} />,
       disabled: !isEditing,
     },
   ];
 
-  return <VerticalTabs onChange={handleTabChange} tabs={tabs} selectedIndex={selectedTab} />;
+  return (
+    <StockOperationStepper
+      steps={tabs.map((tab, index) => ({
+        title: tab.name,
+        component: tab.component,
+        disabled: tab.disabled,
+      }))}
+      selectedIndex={selectedTab}
+      onChange={handleTabChange}
+    />
+  );
 };
 
 export default AddEditStockItem;

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

@@ -1,4 +1,4 @@
-import { StockItemDTO } from '../../core/api/types/stockItem/StockItem';
+import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
 
 export const initialValues: StockItemDTO = {
   uuid: undefined,

package/src/stock-items/add-stock-item/add-stock-item.scss

@@ -1,5 +1,24 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
 .formContainer {
-  max-height: calc(100vh - 100px);
-  overflow: scroll;
-  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }