@openmrs/esm-stock-management-app 3.1.1-pre.1177 → 3.1.1-pre.1184

package/src/stock-home/stock-home-inventory-card.component.tsx

@@ -55,8 +55,8 @@ const StockHomeInventoryCard = () => {
           <div className={styles.cardText}>
             <p>{t('expiringStock', 'Expiring stock')}</p>
             <p>
-              <strong>{item?.drugName}</strong> {t('batchNo', 'Batch No:')} {item?.batchNo} {t('quantity', 'Quantity:')}{' '}
-              {item?.quantity} {item?.dispensingUnitName}
+              <strong>{item?.drugName}</strong> {t('batchNumberLabel', 'Batch number:')} {item?.batchNo}{' '}
+              {t('quantityLabel', 'Quantity:')} {item?.quantity} {item?.dispensingUnitName}
             </p>
           </div>
         </div>

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

@@ -53,7 +53,7 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({ stockItem, closeWorkspa
       disabled: !isEditing,
     },
     {
-      name: t('stockRules', 'Rules'),
+      name: t('rules', 'Rules'),
       component: <StockItemRules stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },

package/src/stock-items/add-stock-item/batch-information/batch-information-locations/batch-information-locations-filter.component.tsx

@@ -29,9 +29,6 @@ const BatchInformationLocationsFilter = <T,>(props: BatchInformationLocationsFil
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={stockLocations ?? []}

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
 import { DataTableSkeleton } from '@carbon/react';
-import DataList from '../../../core/components/table/table.component';
+import { type StockItemInventoryFilter } from '../../stock-items.resource';
 import { useStockItemBatchInformationHook } from './batch-information.resource';
 import BatchInformationLocationsFilter from './batch-information-locations/batch-information-locations-filter.component';
-import { useForm } from 'react-hook-form';
-import { type StockItemInventoryFilter } from '../../stock-items.resource';
+import DataList from '../../../core/components/table/table.component';
 
 interface BatchInformationProps {
   onSubmit?: () => void;
@@ -32,7 +32,7 @@ const BatchInformation: React.FC<BatchInformationProps> = ({ stockItemUuid }) =>
       },
       {
         key: 'batch',
-        header: t('batchNumber', 'Batch Number'),
+        header: t('batchNumber', 'Batch number'),
       },
       {
         key: 'quantity',

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

@@ -1,7 +1,7 @@
-import React, { type ReactNode, useMemo, useState } from 'react';
+import React, { type ReactNode, useMemo } from 'react';
+import { ComboBox, SelectSkeleton } from '@carbon/react';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
-import { ComboBox, SelectSkeleton } from '@carbon/react';
 
 interface DispensingPackageMeasurementProps<T> {
   dispensingUnitPackagingUoMUuid?: string;
@@ -40,9 +40,6 @@ const DispensingPackageMeasurement = <T,>(props: DispensingPackageMeasurementPro
         render={({ field: { onChange, ref } }) => (
           <ComboBox
             titleText={props.title}
-            name={props.name}
-            control={props.control}
-            controllerName={props.controllerName}
             id={props.name}
             size={'sm'}
             items={props.packagingUnits ?? []}

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

@@ -1,10 +1,10 @@
 import React, { type ReactNode, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { ComboBox, InlineLoading } from '@carbon/react';
-import { type Drug } from '../../../core/api/types/concept/Drug';
+import { useTranslation } from 'react-i18next';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
-import { useDrugsHook } from './drug-selector.resource';
+import { type Drug } from '../../../core/api/types/concept/Drug';
 import { fetchStockItem } from '../../stock-items.resource';
+import { useDrugsHook } from './drug-selector.resource';
 
 interface DrugSelectorProps<T> {
   placeholder?: string;
@@ -47,9 +47,6 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
         render={({ field: { onChange, ref } }) => (
           <ComboBox
             titleText={props.title}
-            name={props.name}
-            control={props.control}
-            controllerName={props.controllerName}
             id={props.name}
             size={'md'}
             items={drugList || []}
@@ -64,7 +61,6 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
               }
             }}
             onInputChange={(event) => handleInputChange(event)}
-            inputValue={inputValue}
             placeholder={props.placeholder}
             invalid={props.invalid}
             invalidText={props.invalidText}
@@ -73,7 +69,7 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
         )}
       />
       {isLoading && <InlineLoading status="active" iconDescription="Searching" description="Searching..." />}
-      {showExistenceError && <div style={{ color: '#da1e28' }}>{t('itemAlreadyExists', 'Item already exits')}</div>}
+      {showExistenceError && <div style={{ color: '#da1e28' }}>{t('itemAlreadyExists', 'Item already exists')}</div>}
     </div>
   );
 };

package/src/stock-items/add-stock-item/packaging-units/packaging-units-delete.modal.tsx

@@ -34,9 +34,9 @@ const DeletePackagingUnitModal: React.FC<DeletePackagingUnitModalProps> = ({ row
         closeModal();
         showSnackbar({
           isLowContrast: true,
-          title: t('deletePackagingUnitTitle', 'Delete packing item'),
+          title: t('deletePackingItem', 'Delete packing item'),
           kind: 'success',
-          subtitle: t('deletePackagingUnitMesaage', 'Stock Item packing unit deleted Successfully'),
+          subtitle: t('deletePackagingUnitMessage', 'Stock item packing unit deleted successfully'),
         });
       },
       (error) => {

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

@@ -24,6 +24,7 @@ import { useStockItemPackageUnitsHook } from './packaging-units.resource';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input.component';
 import DeletePackagingUnitActionButton from './delete-packaging-unit-action-button.component';
 import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
+import { type CustomTableHeader, type CustomTableRow } from '../../../core/components/table/types';
 import styles from './packaging-units.scss';
 
 interface PackagingUnitsProps {
@@ -57,7 +58,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
   }, [items]);
 
   const { t } = useTranslation();
-  const tableHeaders = useMemo(
+  const tableHeaders = useMemo<CustomTableHeader[]>(
     () => [
       {
         key: 'packaging',
@@ -189,27 +190,40 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
   return (
     <FormProvider {...packageUnitForm}>
       <DataTable
-        rows={[...items, {}]}
-        headers={tableHeaders}
+        rows={
+          [
+            ...items.map((item, idx) => ({ ...item, id: item.uuid || `item-${idx}` })),
+            { id: 'new-row' },
+          ] as CustomTableRow[]
+        }
+        headers={tableHeaders as any}
         isSortable={false}
-        useZebraStyles={true}
-        render={({ headers, getHeaderProps, getTableProps }) => (
+        useZebraStyles
+      >
+        {({ headers, getHeaderProps, getTableProps }) => (
           <TableContainer className={styles.packagingTableContainer}>
             <Table {...getTableProps()} className={styles.packingTable}>
               <TableHead>
                 <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: false,
-                      })}
-                      style={header.styles}
-                      key={header.key}
-                    >
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
-                  ))}
+                  {headers.map((header) => {
+                    const customHeader = header as CustomTableHeader;
+                    return (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        style={customHeader.styles}
+                        key={header.key}
+                      >
+                        {typeof customHeader.header === 'object' &&
+                        customHeader.header !== null &&
+                        'content' in customHeader.header
+                          ? (customHeader.header.content as React.ReactNode)
+                          : (customHeader.header as React.ReactNode)}
+                      </TableHeader>
+                    );
+                  })}
                   <TableHeader style={{ width: '70%' }} />
                 </TableRow>
               </TableHead>
@@ -232,7 +246,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
             </Table>
           </TableContainer>
         )}
-      />
+      </DataTable>
       <div className={styles.packageUnitsBtn}>
         <Button kind="secondary" onClick={handleCancelPackagingUnits}>
           {getCoreTranslation('cancel')}

package/src/stock-items/add-stock-item/packaging-units-concept-selector/packaging-units-concept-selector.component.tsx

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
+import { ComboBox, TextInputSkeleton } from '@carbon/react';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
-import { ComboBox, TextInputSkeleton } from '@carbon/react';
+import { type ConfigObject } from '../../../config-schema';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 import { useConfig } from '@openmrs/esm-framework';
-import { type ConfigObject } from '../../../config-schema';
 
 interface PackagingUnitsConceptSelectorProps<T> {
   row?: StockItemPackagingUOMDTO;
@@ -38,9 +38,6 @@ const PackagingUnitsConceptSelector = <T,>(props: PackagingUnitsConceptSelectorP
       render={({ field: { onChange } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={`${props.name}-${props.row.id}-${props.row.uuid}`}
           size="md"
           items={

package/src/stock-items/add-stock-item/preferred-vendor-selector/preferred-vendor-selector.component.tsx

@@ -37,9 +37,6 @@ const PreferredVendorSelector = <T,>(props: PreferredVendorSelectorProps<T>) =>
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={sourcesList || []}

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

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { ComboBox, TextInputSkeleton } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
 import { type ConfigObject } from '../../../config-schema';
-import { useConfig } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 
 interface StockItemCategorySelectorProps<T> {
   categoryUuid?: string;
@@ -42,9 +42,6 @@ const StockItemCategorySelector = <T,>(props: StockItemCategorySelectorProps<T>)
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={filteredCategories || []}

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

@@ -49,11 +49,11 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
         if (response?.data) {
           showSnackbar({
             isLowContrast: true,
-            title: stockItem ? `${t('editStockItem', 'Edit Stock Item')}` : `${t('addStockItem', 'Add Stock Item')}`,
+            title: stockItem ? `${t('editStockItem', 'Edit stock item')}` : `${t('addStockItem', 'Add stock item')}`,
             kind: 'success',
             subtitle: stockItem
-              ? `${t('stockItemEdited', 'Stock Item Edited Successfully')}`
-              : `${t('stockItemAdded', 'Stock Item Added Successfully')}`,
+              ? `${t('stockItemEdited', 'Stock item edited successfully')}`
+              : `${t('stockItemAdded', 'Stock item added successfully')}`,
           });
           if (!stockItem) {
             onCloseWorkspace?.();
@@ -91,8 +91,8 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           {!stockItem && (
             <FormGroup
               className="clear-margin-bottom"
-              legendText={t('itemType', 'Item Type')}
-              title={t('itemType', 'Item Type')}
+              legendText={t('itemType', 'Item type')}
+              title={t('itemType', 'Item type')}
             >
               <ControlledRadioButtonGroup
                 control={control}
@@ -110,8 +110,8 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="drugUuid"
               controllerName="drugUuid"
               control={control}
-              title={t('pleaseSpecify', 'Please specify:')}
-              placeholder="Choose a drug"
+              title={t('pleaseSpecify', 'Please specify')}
+              placeholder={t('chooseADrug', 'Choose a drug')}
               drugUuid={stockItem?.drugUuid}
               invalid={!!errors.drugUuid}
               invalidText={errors.drugUuid && errors?.drugUuid?.message}
@@ -121,7 +121,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="conceptUuid"
               controllerName="conceptUuid"
               control={control}
-              title={t('pleaseSpecify', 'Please specify') + ':'}
+              title={t('pleaseSpecify', 'Please specify')}
               placeholder={t('chooseAnItem', 'Choose an item')}
               invalid={!!errors.drugUuid}
               invalidText={errors.drugUuid && errors?.drugUuid?.message}
@@ -174,7 +174,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             </FormGroup>
 
             {observableHasExpiration && (
-              <FormGroup className="clear-margin-bottom" title={t('expirationNotice', 'Expiration Notice (days)')}>
+              <FormGroup className="clear-margin-bottom" legendText={t('expirationNotice', 'Expiration Notice (days)')}>
                 <ControlledNumberInput
                   id="expiryNotice"
                   name="expiryNotice"
@@ -221,7 +221,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="dispensingUnitUuid"
               controllerName="dispensingUnitUuid"
               control={control}
-              title={t('dispensingUnit', 'Dispensing Unit') + ':'}
+              title={t('dispensingUnit', 'Dispensing unit') + ':'}
               placeholder={t('dispensingUnitHolder', 'Choose a dispensing unit')}
               invalid={!!errors.dispensingUnitUuid}
               invalidText={errors.dispensingUnitUuid && errors?.dispensingUnitUuid?.message}

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

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
+  DataTableSkeleton,
   Table,
   TableBody,
   TableCell,
@@ -10,22 +11,22 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  DataTableSkeleton,
 } from '@carbon/react';
-import styles from './stock-item-references.scss';
 import { TrashCan, Save } from '@carbon/react/icons';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
-import StockSourceSelector from './stock-references-selector.component';
 import { useStockItemReferencesHook } from './stock-item-references.resource';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type StockItemReferenceData } from './validation-schema';
 import { stockItemDetailsSchema } from '../../validationSchema';
 import { type StockItemReferenceDTO } from '../../../core/api/types/stockItem/StockItemReference';
-import ControlledTextInput from '../../../core/components/carbon/controlled-text-input.component';
 import { createStockItemReference, deleteStockItemReference } from '../../stock-items.resource';
 import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { extractErrorMessagesFromResponse } from '../../../constants';
 import { handleMutate } from '../../../utils';
+import ControlledTextInput from '../../../core/components/carbon/controlled-text-input.component';
+import StockSourceSelector from './stock-references-selector.component';
+import { type CustomTableHeader, type CustomTableRow } from '../../../core/components/table/types';
+import styles from './stock-item-references.scss';
 
 interface StockReferencesProps {
   isEditing?: boolean;
@@ -42,7 +43,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
     setStockItemUuid(stockItemUuid);
   }, [stockItemUuid, setStockItemUuid]);
 
-  const tableHeaders = useMemo(
+  const tableHeaders = useMemo<CustomTableHeader[]>(
     () => [
       {
         key: 'source',
@@ -84,7 +85,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
         handleMutate(`${restBaseUrl}/stockmanagement/stockitemreference`);
 
         showSnackbar({
-          title: t('saveReferenceTitle', 'StockItem Reference'),
+          title: t('saveReferenceTitle', 'Stock Item Reference'),
           subtitle: t('saveStockItemReferenceMessage', 'Stock Item Reference saved successfully'),
           kind: 'success',
         });
@@ -94,7 +95,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
 
         const err = extractErrorMessagesFromResponse(error);
         showSnackbar({
-          title: t('saveStockItemReferenceErrorTitle', 'StockItem Reference'),
+          title: t('saveStockItemReferenceErrorTitle', 'Stock Item Reference'),
           subtitle: t('saveStockItemReferenceErrorMessage', 'Error saving stock item reference' + err.join(',')),
           kind: 'error',
         });
@@ -107,27 +108,35 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
   return (
     <FormProvider {...stockReferenceForm}>
       <DataTable
-        rows={items ?? []}
-        headers={tableHeaders}
+        rows={(items ?? []).map((item, idx) => ({ ...item, id: item.uuid || `ref-${idx}` })) as CustomTableRow[]}
+        headers={tableHeaders as any}
         isSortable={false}
-        useZebraStyles={true}
-        render={({ headers, getHeaderProps, getTableProps }) => (
+        useZebraStyles
+      >
+        {({ headers, getHeaderProps, getTableProps }) => (
           <TableContainer className={styles.referencesTableContainer}>
             <Table {...getTableProps()} className={styles.referencesTable}>
               <TableHead>
                 <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: false,
-                      })}
-                      style={header.styles}
-                      key={header.key}
-                    >
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
-                  ))}
+                  {headers.map((header) => {
+                    const customHeader = header as CustomTableHeader;
+                    return (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        style={customHeader.styles}
+                        key={header.key}
+                      >
+                        {typeof customHeader.header === 'object' &&
+                        customHeader.header !== null &&
+                        'content' in customHeader.header
+                          ? (customHeader.header.content as React.ReactNode)
+                          : (customHeader.header as React.ReactNode)}
+                      </TableHeader>
+                    );
+                  })}
                   <TableHeader style={{ width: '70%' }} />
                 </TableRow>
               </TableHead>
@@ -140,7 +149,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
             </Table>
           </TableContainer>
         )}
-      />
+      </DataTable>
 
       <Button
         name="save"
@@ -171,9 +180,9 @@ const StockReferencesRow: React.FC<{
     deleteStockItemReference(row.uuid).then(
       () => {
         showSnackbar({
-          title: t('deletePackagingUnitTitle', `Delete StockItem reference`),
+          title: t('deleteStockItemReference', 'Delete stock item reference'),
           kind: 'success',
-          subtitle: t('deleteStockItemReferenceMesaage', `StockItem reference deleted Successfully`),
+          subtitle: t('deleteStockItemReferenceMessage', 'Stock item reference deleted successfully'),
         });
       },
       (error) => {
@@ -217,7 +226,7 @@ const StockReferencesRow: React.FC<{
             type="button"
             size="sm"
             className="submitButton clear-padding-margin"
-            iconDescription={'Delete'}
+            iconDescription={t('delete', 'Delete')}
             kind="ghost"
             renderIcon={TrashCan}
             onClick={(e) => handleDelete(e)}

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TextInputSkeleton, ComboBox } from '@carbon/react';
+import { ComboBox, TextInputSkeleton } from '@carbon/react';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type StockSource } from '../../../core/api/types/stockOperation/StockSource';
-import { ResourceRepresentation } from '../../../core/api/api';
 import { useStockSources } from '../../../stock-sources/stock-sources.resource';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { type StockItemReferenceDTO } from '../../../core/api/types/stockItem/StockItemReference';
+import { ResourceRepresentation } from '../../../core/api/api';
 
 interface StockSourceSelectorProps<T> {
   row?: StockItemReferenceDTO;
@@ -36,9 +36,6 @@ const StockSourceSelector = <T,>(props: StockSourceSelectorProps<T>) => {
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={sourcesList || []}

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

@@ -136,9 +136,9 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
           () => {
             showSnackbar({
               isLowContrast: true,
-              title: t('addedRule', 'Add Rule'),
+              title: t('addedRule', 'Add rule'),
               kind: 'success',
-              subtitle: t('stockRuleAddedSuccessfully', 'Stock Rule Added Successfully'),
+              subtitle: t('stockRuleAddedSuccessfully', 'Stock rule added successfully'),
             });
             closeWorkspace?.();
           },
@@ -159,7 +159,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
   return (
     <Form onSubmit={onFormSubmit} className={styles.formContainer}>
       <div>
-        <FormGroup>
+        <FormGroup legendText={t('ruleConfiguration', 'Rule configuration')}>
           <section className={styles.section}>
             <section className={styles.section}>
               <Select
@@ -181,7 +181,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
               <TextInput
                 id="name"
                 type="text"
-                labelText={t('name', 'Rule Name')}
+                labelText={t('ruleName', 'Rule name')}
                 size="md"
                 onChange={onNameChanged}
                 value={model?.name}
@@ -193,7 +193,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
               <Select
                 name="quantityUnit"
                 className="select-field"
-                labelText={t('quantityUnit', 'Quantity Unit')}
+                labelText={t('quantityUnit', 'Quantity unit')}
                 id="quantityUnit"
                 value={formModel?.stockItemPackagingUOMUuid ? formModel.stockItemPackagingUOMUuid : ''}
                 onChange={onQuantityUnitChange}
@@ -215,7 +215,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
               <TextInput
                 id="quantity"
                 type="number"
-                labelText={t('quantity', 'Quantity Threshold')}
+                labelText={t('quantityThreshold', 'Quantity threshold')}
                 size="md"
                 onChange={onQuantityChanged}
                 value={model?.quantity}
@@ -225,12 +225,12 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
           </section>
         </FormGroup>
 
-        <FormGroup>
+        <FormGroup legendText={t('notifications', 'Notifications')}>
           <section className={styles.section}>
             <Select
               name="alertRole"
               className="select-field"
-              labelText={t('alertRole', 'Alert Role')}
+              labelText={t('alertRole', 'Alert role')}
               id="alertRole"
               value={formModel?.alertRole ? formModel.alertRole : ''}
               onChange={onAlertRoleChange}
@@ -245,7 +245,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
             <Select
               name="mailRole"
               className="select-field"
-              labelText={t('mailRole', 'Mail Role')}
+              labelText={t('mailRole', 'Mail role')}
               id="mailRole"
               value={formModel?.mailRole ? formModel.mailRole : ''}
               onChange={onMailRoleChange}
@@ -285,24 +285,24 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
             justifyContent: 'center',
           }}
         >
-          <FormGroup className="clear-margin-bottom">
-            <CheckboxGroup className={styles.checkboxGrid}>
+          <FormGroup className="clear-margin-bottom" legendText={t('enabled', 'Enabled')}>
+            <CheckboxGroup className={styles.checkboxGrid} legendText="">
               <Checkbox
                 onChange={onEnabledChanged}
                 checked={formModel?.enabled}
                 labelText={`Enabled ?`}
-                value={model?.enabled}
+                value={model?.enabled ? 'true' : 'false'}
                 id="chk-ruleEnabled"
               />
             </CheckboxGroup>
           </FormGroup>
-          <FormGroup className="clear-margin-bottom">
-            <CheckboxGroup className={styles.checkboxGrid}>
+          <FormGroup className="clear-margin-bottom" legendText={t('scope', 'Scope')}>
+            <CheckboxGroup className={styles.checkboxGrid} legendText="">
               <Checkbox
                 onChange={onAppliesToChildrenChanged}
                 name="appliesToChildren"
                 checked={formModel?.enableDescendants}
-                value={model?.enableDescendants}
+                value={model?.enableDescendants ? 'true' : 'false'}
                 labelText={`Applies to child locations?`}
                 id="chk-ruleAppliesToChildren"
               />
@@ -322,7 +322,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button}>