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

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

@@ -1,33 +1,30 @@
 import {
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
   Button,
+  ButtonSet,
+  Checkbox,
+  CheckboxGroup,
   Form,
+  FormGroup,
   Select,
-  TextInput,
   SelectItem,
-  FormGroup,
-  Checkbox,
-  CheckboxGroup,
+  TextInput,
 } from '@carbon/react';
-import React, { ChangeEvent, useCallback, useState, useEffect } from 'react';
-import styles from './add-stock-rules.scss';
-import { useRoles, useStockTagLocations } from '../../../stock-lookups/stock-lookups.resource';
-import { createOrUpdateStockRule } from './stock-rules.resource';
-import { StockRule } from '../../../core/api/types/stockItem/StockRule';
-import { showSnackbar } from '@openmrs/esm-framework';
+import { type DefaultWorkspaceProps, showSnackbar } from '@openmrs/esm-framework';
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { closeOverlay } from '../../../core/components/overlay/hook';
 import { ResourceRepresentation } from '../../../core/api/api';
-import { StockItemInventoryFilter, useStockItemPackagingUOMs } from '../../stock-items.resource';
+import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
+import { useRoles, useStockTagLocations } from '../../../stock-lookups/stock-lookups.resource';
+import { type StockItemInventoryFilter, useStockItemPackagingUOMs } from '../../stock-items.resource';
+import styles from './add-stock-rules.scss';
+import { createOrUpdateStockRule } from './stock-rules.resource';
 
-interface AddStockRuleProps {
+interface AddStockRuleProps extends Partial<DefaultWorkspaceProps> {
   model?: StockRule;
   stockItemUuid?: string;
 }
 
-const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUuid }) => {
+const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUuid, closeWorkspace }) => {
   const { t } = useTranslation();
 
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({
@@ -99,7 +96,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
     const selectedQuantityUnit = dispensingUnits?.results.find((x) => x.uuid === evt.target.value);
     setFormModel({
       ...formModel,
-      stockItemPackagingUOMUuid: selectedQuantityUnit.uuid,
+      stockItemPackagingUOMUuid: selectedQuantityUnit?.uuid,
     });
   };
 
@@ -142,7 +139,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
               kind: 'success',
               subtitle: t('stockRuleAddedSuccessfully', 'Stock Rule Added Successfully'),
             });
-            closeOverlay();
+            closeWorkspace?.();
           },
           (error) => {
             showSnackbar({
@@ -155,179 +152,178 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
         )
         .catch();
     },
-    [formModel, model, t, stockItemUuid],
+    [formModel, model, t, stockItemUuid, closeWorkspace],
   );
 
   return (
-    <div>
-      <Form onSubmit={onFormSubmit}>
-        <ModalHeader />
-        <ModalBody>
-          <FormGroup>
-            <section className={styles.section}>
-              <section className={styles.section}>
-                <Select
-                  name="location"
-                  className="select-field"
-                  labelText={t('location', 'Location')}
-                  id="location"
-                  value={formModel?.locationUuid ? formModel.locationUuid : ''}
-                  onChange={onLocationChange}
-                >
-                  <SelectItem disabled hidden value="" text={t('chooseLocation', 'Choose the location')} />
-                  {stockLocations?.map((location) => {
-                    return <SelectItem key={location.id} value={location.id} text={location.name} />;
-                  })}
-                </Select>
-              </section>
-
-              <section className={styles.section}>
-                <TextInput
-                  id="name"
-                  type="text"
-                  labelText={t('name', 'Rule Name')}
-                  size="md"
-                  onChange={onNameChanged}
-                  value={model?.name}
-                  placeholder="e.g Panado Alert"
-                />
-              </section>
-
-              <section className={styles.section}>
-                <Select
-                  name="quantityUnit"
-                  className="select-field"
-                  labelText={t('quantityUnit', 'Quantity Unit')}
-                  id="quantityUnit"
-                  value={formModel?.stockItemPackagingUOMUuid ? formModel.stockItemPackagingUOMUuid : ''}
-                  onChange={onQuantityUnitChange}
-                >
-                  <SelectItem disabled hidden value="" text={t('chooseQuantityUnit', 'Choose the Unit of Quantity')} />
-                  {dispensingUnits?.results.map((stockItemPackagingUOMUuid) => {
-                    return (
-                      <SelectItem
-                        key={stockItemPackagingUOMUuid.uuid}
-                        value={stockItemPackagingUOMUuid.uuid}
-                        text={stockItemPackagingUOMUuid.packagingUomName}
-                      />
-                    );
-                  })}
-                </Select>
-              </section>
-
-              <section className={styles.section}>
-                <TextInput
-                  id="quantity"
-                  type="number"
-                  labelText={t('quantity', 'Quantity Threshold')}
-                  size="md"
-                  onChange={onQuantityChanged}
-                  value={model?.quantity}
-                  placeholder="e.g 30 Boxes"
-                />
-              </section>
-            </section>
-          </FormGroup>
-
-          <FormGroup>
+    <Form onSubmit={onFormSubmit} className={styles.formContainer}>
+      <div>
+        <FormGroup>
+          <section className={styles.section}>
             <section className={styles.section}>
               <Select
-                name="alertRole"
+                name="location"
                 className="select-field"
-                labelText={t('alertRole', 'Alert Role')}
-                id="alertRole"
-                value={formModel?.alertRole ? formModel.alertRole : ''}
-                onChange={onAlertRoleChange}
+                labelText={t('location', 'Location')}
+                id="location"
+                value={formModel?.locationUuid ? formModel.locationUuid : ''}
+                onChange={onLocationChange}
               >
-                <SelectItem disabled hidden value="" text={t('chooseAlertRole', 'Choose an Alert Role')} />
-                {rolesData?.results?.map((alertRole) => {
-                  return <SelectItem key={alertRole.display} value={alertRole.display} text={alertRole.display} />;
+                <SelectItem disabled hidden value="" text={t('chooseLocation', 'Choose the location')} />
+                {stockLocations?.map((location) => {
+                  return <SelectItem key={location.id} value={location.id} text={location.name} />;
                 })}
               </Select>
             </section>
+
+            <section className={styles.section}>
+              <TextInput
+                id="name"
+                type="text"
+                labelText={t('name', 'Rule Name')}
+                size="md"
+                onChange={onNameChanged}
+                value={model?.name}
+                placeholder="e.g Panado Alert"
+              />
+            </section>
+
             <section className={styles.section}>
               <Select
-                name="mailRole"
+                name="quantityUnit"
                 className="select-field"
-                labelText={t('mailRole', 'Mail Role')}
-                id="mailRole"
-                value={formModel?.mailRole ? formModel.mailRole : ''}
-                onChange={onMailRoleChange}
+                labelText={t('quantityUnit', 'Quantity Unit')}
+                id="quantityUnit"
+                value={formModel?.stockItemPackagingUOMUuid ? formModel.stockItemPackagingUOMUuid : ''}
+                onChange={onQuantityUnitChange}
               >
-                <SelectItem disabled hidden value="" text={t('chooseMailRole', 'Choose a Mail Role')} />
-                {rolesData?.results?.map((mailRole) => {
-                  return <SelectItem key={mailRole.display} value={mailRole.display} text={mailRole.display} />;
+                <SelectItem disabled hidden value="" text={t('chooseQuantityUnit', 'Choose the Unit of Quantity')} />
+                {dispensingUnits?.results?.map((stockItemPackagingUOMUuid) => {
+                  return (
+                    <SelectItem
+                      key={stockItemPackagingUOMUuid.uuid}
+                      value={stockItemPackagingUOMUuid.uuid}
+                      text={stockItemPackagingUOMUuid.packagingUomName}
+                    />
+                  );
                 })}
               </Select>
             </section>
+
             <section className={styles.section}>
               <TextInput
-                id="evaluationFrequency"
+                id="quantity"
                 type="number"
-                labelText={t('evaluationFrequency', 'Frequency Check (Minutes)')}
+                labelText={t('quantity', 'Quantity Threshold')}
                 size="md"
-                onChange={onEvaluationFrequencyChanged}
-                value={model?.evaluationFrequency}
-                placeholder="e.g 30 Minutes"
-              />
-              <TextInput
-                id="actionFrequency"
-                type="number"
-                labelText={t('actionFrequency', 'Notification Frequency (Minutes)')}
-                size="md"
-                onChange={onActionFrequencyChanged}
-                value={model?.actionFrequency}
-                placeholder="e.g 3600 Minutes"
+                onChange={onQuantityChanged}
+                value={model?.quantity}
+                placeholder="e.g 30 Boxes"
               />
             </section>
-          </FormGroup>
+          </section>
+        </FormGroup>
+
+        <FormGroup>
+          <section className={styles.section}>
+            <Select
+              name="alertRole"
+              className="select-field"
+              labelText={t('alertRole', 'Alert Role')}
+              id="alertRole"
+              value={formModel?.alertRole ? formModel.alertRole : ''}
+              onChange={onAlertRoleChange}
+            >
+              <SelectItem disabled hidden value="" text={t('chooseAlertRole', 'Choose an Alert Role')} />
+              {rolesData?.results?.map((alertRole) => {
+                return <SelectItem key={alertRole.display} value={alertRole.display} text={alertRole.display} />;
+              })}
+            </Select>
+          </section>
+          <section className={styles.section}>
+            <Select
+              name="mailRole"
+              className="select-field"
+              labelText={t('mailRole', 'Mail Role')}
+              id="mailRole"
+              value={formModel?.mailRole ? formModel.mailRole : ''}
+              onChange={onMailRoleChange}
+            >
+              <SelectItem disabled hidden value="" text={t('chooseMailRole', 'Choose a Mail Role')} />
+              {rolesData?.results?.map((mailRole) => {
+                return <SelectItem key={mailRole.display} value={mailRole.display} text={mailRole.display} />;
+              })}
+            </Select>
+          </section>
+          <section className={styles.section}>
+            <TextInput
+              id="evaluationFrequency"
+              type="number"
+              labelText={t('evaluationFrequency', 'Frequency Check (Minutes)')}
+              size="md"
+              onChange={onEvaluationFrequencyChanged}
+              value={model?.evaluationFrequency}
+              placeholder="e.g 30 Minutes"
+            />
+            <TextInput
+              id="actionFrequency"
+              type="number"
+              labelText={t('actionFrequency', 'Notification Frequency (Minutes)')}
+              size="md"
+              onChange={onActionFrequencyChanged}
+              value={model?.actionFrequency}
+              placeholder="e.g 3600 Minutes"
+            />
+          </section>
+        </FormGroup>
 
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              justifyContent: 'center',
-            }}
-          >
-            <FormGroup className="clear-margin-bottom">
-              <CheckboxGroup className={styles.checkboxGrid}>
-                <Checkbox
-                  onChange={onEnabledChanged}
-                  checked={formModel?.enabled}
-                  labelText={`Enabled ?`}
-                  value={model?.enabled}
-                  id="chk-ruleEnabled"
-                />
-              </CheckboxGroup>
-            </FormGroup>
-            <FormGroup className="clear-margin-bottom">
-              <CheckboxGroup className={styles.checkboxGrid}>
-                <Checkbox
-                  onChange={onAppliesToChildrenChanged}
-                  name="appliesToChildren"
-                  checked={formModel?.enableDescendants}
-                  value={model?.enableDescendants}
-                  labelText={`Applies to child locations?`}
-                  id="chk-ruleAppliesToChildren"
-                />
-              </CheckboxGroup>
-            </FormGroup>
-          </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            justifyContent: 'center',
+          }}
+        >
+          <FormGroup className="clear-margin-bottom">
+            <CheckboxGroup className={styles.checkboxGrid}>
+              <Checkbox
+                onChange={onEnabledChanged}
+                checked={formModel?.enabled}
+                labelText={`Enabled ?`}
+                value={model?.enabled}
+                id="chk-ruleEnabled"
+              />
+            </CheckboxGroup>
+          </FormGroup>
+          <FormGroup className="clear-margin-bottom">
+            <CheckboxGroup className={styles.checkboxGrid}>
+              <Checkbox
+                onChange={onAppliesToChildrenChanged}
+                name="appliesToChildren"
+                checked={formModel?.enableDescendants}
+                value={model?.enableDescendants}
+                labelText={`Applies to child locations?`}
+                id="chk-ruleAppliesToChildren"
+              />
+            </CheckboxGroup>
+          </FormGroup>
+        </div>
 
-          <div>
-            This stock rule will be evaluated by checking if the stock quantities have lowered to the threshold or below
-            and a notification will be sent to the personnel with the specified role in the given location. The
-            notification will only be sent once per specified notification frequency.
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary" onClick={closeOverlay}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button type="submit">{t('save', 'Save')}</Button>
-        </ModalFooter>
-      </Form>
-    </div>
+        <div>
+          This stock rule will be evaluated by checking if the stock quantities have lowered to the threshold or below
+          and a notification will be sent to the personnel with the specified role in the given location. The
+          notification will only be sent once per specified notification frequency.
+        </div>
+      </div>
+      <ButtonSet className={styles.buttonSet}>
+        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" className={styles.button}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
   );
 };
 

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

@@ -1,17 +1,25 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
 
-.section {
-  margin: spacing.$spacing-03;
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: layout.$spacing-03;
 }
 
-.sectionTitle {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
 }
 
-.modalBody {
-  padding-bottom: spacing.$spacing-05;
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }

package/src/stock-items/add-stock-item/stock-item-rules/edit-stock-rule.component.tsx

@@ -1,11 +1,10 @@
-import React, { useCallback } from 'react';
 import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
+import React, { useCallback } from 'react';
 
+import { launchWorkspace } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../../../core/components/overlay/hook';
-import StockRulesAddOrUpdate from './add-stock-rules.component';
-import { StockRule } from '../../../core/api/types/stockItem/StockRule';
+import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
 
 interface EditStockRulesActionMenuProps {
   data?: StockRule;
@@ -15,8 +14,12 @@ interface EditStockRulesActionMenuProps {
 const EditStockRuleActionsMenu: React.FC<EditStockRulesActionMenuProps> = ({ data, stockItemUuid }) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
-    launchOverlay('Edit Stock Rule', <StockRulesAddOrUpdate model={data} stockItemUuid={data.stockItemUuid} />);
-  }, [data]);
+    launchWorkspace('stock-item-rules-form-workspace', {
+      workspaceTitle: t('editStockRule', 'Edit Stock Rule'),
+      stockItemUuid,
+      model: data,
+    });
+  }, [data, t, stockItemUuid]);
 
   return (
     <Button

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

@@ -21,7 +21,7 @@ import {
 } from '@carbon/react';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
 import styles from '../../stock-items-table.scss';
-import { StockRule } from '../../../core/api/types/stockItem/StockRule';
+import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
 import AddStockRuleActionButton from './add-stock-rule-button.component';
 import { isDesktop } from '@openmrs/esm-framework';
 import StockRulesFilter from './stock-rules-filter.component';

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

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { StockRuleFilter, useStockRules } from '../../stock-items.resource';
+import { type StockRuleFilter, useStockRules } from '../../stock-items.resource';
 import { usePagination } from '@openmrs/esm-framework';
 
 export function useStockItemRules(filter: StockRuleFilter) {

package/src/stock-items/add-stock-item/stock-item-rules/stock-rules.resource.ts

@@ -1,8 +1,8 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { ResourceFilterCriteria, toQueryParams } from '../../../core/api/api';
+import { type ResourceFilterCriteria, toQueryParams } from '../../../core/api/api';
 import useSWR from 'swr';
-import { PageableResult } from '../../../core/api/types/PageableResult';
-import { StockRule } from '../../../core/api/types/stockItem/StockRule';
+import { type PageableResult } from '../../../core/api/types/PageableResult';
+import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
 
 export interface StockSourceFilter extends ResourceFilterCriteria {
   stockItemUuid?: string | null;

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStockItem } from '../../stock-items.resource';
 import DispensingPackageMeasurement from '../dispensing-package-measurement/dispensing-package-measurement.component';
-import { Control, FormState } from 'react-hook-form';
-import { StockItemFormData } from '../../validationSchema';
+import { type Control, type FormState } from 'react-hook-form';
+import { type StockItemFormData } from '../../validationSchema';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
 import { NumberInputSkeleton } from '@carbon/react';
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Button, Stack, ComboButton, MenuItem } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
@@ -6,8 +6,7 @@ import { useStockItem } from '../../../stock-items.resource';
 import { showModal, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../../../config-schema';
 import styles from './printable-transaction.scss';
-import { useEffect, useMemo, useState } from 'react';
-import { StockItemInventoryFilter, useStockItemTransactions } from '../../../stock-items.resource';
+import { type StockItemInventoryFilter, useStockItemTransactions } from '../../../stock-items.resource';
 import { ResourceRepresentation } from '../../../../core/api/api';
 
 type Props = {

package/src/stock-items/add-stock-item/transactions/transaction-filters/transaction-locations-filter.component.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { ComboBox } from '@carbon/react';
-import { Control, Controller, FieldValues } from 'react-hook-form';
+import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useStockTagLocations } from '../../../../stock-lookups/stock-lookups.resource';
 

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

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import DataList from '../../../core/components/table/table.component';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
-import { StockItemInventoryFilter } from '../../stock-items.resource';
+import { type StockItemInventoryFilter } from '../../stock-items.resource';
 import TransactionsPrintAction from './printout/transactions-print-action.component';
 import TransactionsLocationsFilter from './transaction-filters/transaction-locations-filter.component';
 import { useStockItemsTransactions } from './transactions.resource';

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 { StockItemInventoryFilter, useStockItemTransactions } from '../../stock-items.resource';
+import { type StockItemInventoryFilter, useStockItemTransactions } from '../../stock-items.resource';
 
 export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { launchAddOrEditDialog } from '../stock-item.utils';
+import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
+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 { 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 { FetchResponse, showSnackbar } from '@openmrs/esm-framework';
-import { createStockItem, updateStockItem } from './stock-items.resource';
+import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
 
-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,
-    });
-  }
-};
-
-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,
+  });
 };