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

package/src/stock-operations/stock-operation-operations-filter/stock-operation-operations-filter.component.tsx

@@ -1,9 +1,11 @@
-import styles from './stock-operation-operations-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import styles from './stock-operation-operations-filter.scss';
 
 const StockOperationOperationsFilter: React.FC = () => {
+  const { t } = useTranslation();
   // get stock sources
   const { types, isLoading, error } = useStockOperationTypes();
   if (isLoading || error) {
@@ -15,9 +17,11 @@ const StockOperationOperationsFilter: React.FC = () => {
         <Dropdown
           id="stockOperationOperationsFiter"
           items={types.results}
-          itemToString={(item) => (item ? item.name : 'Not Set')}
+          itemToString={(item) => (item ? item.name : t('notSet', 'Not Set'))}
           type="inline"
           size="sm"
+          label={t('filterByOperationType', 'Filter by operation type')}
+          titleText={t('operationType', 'Operation Type')}
         />
       </div>
     </>

package/src/stock-operations/stock-operation-sources-filter/stock-operation-sources-filter.component.tsx

@@ -1,11 +1,13 @@
-import styles from './stock-operation-sources-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
-import { useConcept } from '../../stock-lookups/stock-lookups.resource';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { type ConfigObject } from '../../config-schema';
+import { useConcept } from '../../stock-lookups/stock-lookups.resource';
 import { useConfig } from '@openmrs/esm-framework';
+import styles from './stock-operation-sources-filter.scss';
 
 const StockOperationSourcesFilter: React.FC = () => {
+  const { t } = useTranslation();
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
 
   // get stock sources
@@ -19,9 +21,11 @@ const StockOperationSourcesFilter: React.FC = () => {
         <Dropdown
           id="stockOperationSourcesFiter"
           items={[...items.answers]}
-          itemToString={(item) => (item ? item.display : 'Not Set')}
+          itemToString={(item) => (item ? item.display : t('notSet', 'Not Set'))}
           type="inline"
           size="sm"
+          label={t('filterBySource', 'Filter by source')}
+          titleText={t('source', 'Source')}
         />
       </div>
     </>

package/src/stock-operations/stock-operation-statuses-filter/stock-operation-statuses-filter.component.tsx

@@ -1,23 +1,25 @@
-import styles from './stock-operation-statuses-filter.scss';
-import { Dropdown } from '@carbon/react';
 import React from 'react';
+import { Dropdown } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './stock-operation-statuses-filter.scss';
+
 const StockOperationStatusesFilter: React.FC = () => {
+  const { t } = useTranslation();
   // get stock sources
-
   const items = ['SUBMITTED', 'NEW', 'RETURNED', 'CANCELLED', 'DISPATCHED', 'COMPLETED', 'REJECTED'];
 
   return (
-    <>
-      <div className={styles.filterContainer}>
-        <Dropdown
-          id="stockOperationStatusesFiter"
-          items={items}
-          itemToString={(item) => (item ? item : 'Not Set')}
-          type="inline"
-          size="sm"
-        />
-      </div>
-    </>
+    <div className={styles.filterContainer}>
+      <Dropdown
+        id="stockOperationStatusesFiter"
+        items={items}
+        itemToString={(item) => (item ? item : t('notSet', 'Not Set'))}
+        type="inline"
+        size="sm"
+        label={t('filterByStatus', 'Filter by status')}
+        titleText={t('status', 'Status')}
+      />
+    </div>
   );
 };
 

package/src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -1,8 +1,8 @@
+import React, { useCallback, useEffect } from 'react';
 import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { OperationType, type StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
 import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
@@ -24,7 +24,7 @@ const StockOperationTypesSelector = () => {
     if (error) {
       showSnackbar({
         kind: 'error',
-        title: t('stockOperationError', 'Error loading stock operation types'),
+        title: t('stockOperationTypesError', 'Error loading stock operation types'),
         subtitle: error?.message,
       });
     }
@@ -42,7 +42,7 @@ const StockOperationTypesSelector = () => {
           <OverflowMenuVertical size={16} />
         </>
       )}
-      menuOffset={{ right: '-100px' }}
+      menuOffset={{ top: 0, left: -100 }}
       style={{
         backgroundColor: '#007d79',
         backgroundImage: 'none',

package/src/stock-operations/stock-operations-filters.component.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { DropdownSkeleton, MultiSelect } from '@carbon/react';
 import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { StockFilters } from '../constants';
@@ -12,6 +13,7 @@ interface StockOperationFiltersProps {
 }
 
 const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptUuid, onFilterChange, filterName }) => {
+  const { t } = useTranslation();
   const { items, isLoading } = useConcept(conceptUuid);
   const [isDataLoading, setIsDataLoading] = useState(false);
   const [dataItems, setDataItems] = useState([]);
@@ -65,7 +67,7 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
       label={filterName}
       labelInline
       items={dataItems}
-      itemToString={(item) => (item ? item.display : 'Not Set')}
+      itemToString={(item) => (item ? item.display : t('notSet', 'Not Set'))}
       onChange={({ selectedItems }) => {
         if (selectedItems) {
           onFilterChange(
@@ -74,7 +76,7 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
           );
         }
       }}
-      placeholder={`Filter by ${filterName}`}
+      placeholder={t('filterBy', 'Filter by {{filterName}}', { filterName })}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.component.tsx

@@ -107,10 +107,10 @@ const BatchNoSelector: React.FC<BatchNoSelectorProps> = ({ stockItemUuid, error,
       itemToString={itemToString}
       name="stockBatchUuid"
       onChange={handleChange}
-      placeholder={`${t('filter', 'Filter')}...`}
+      placeholder={t('filterPlaceholder', 'Filter...')}
       selectedItem={initialSelectedItem}
       style={{ flexGrow: 1 }}
-      titleText={t('batchNo', 'Batch no.')}
+      titleText={t('batchNo', 'Batch number')}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.test.tsx

@@ -106,7 +106,7 @@ describe('BatchNoSelector', () => {
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByText(/batch no./i)).toBeInTheDocument();
+    expect(screen.getByText(/batch number/i)).toBeInTheDocument();
   });
 
   it('should handle batch selection', async () => {

package/src/stock-operations/stock-operations-forms/input-components/qty-uim-selector.test.tsx

@@ -131,7 +131,7 @@ describe('QtyUOMSelector', () => {
 
     render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
 
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
   });
 
   it('should render Inline notification error when error ocuured while fetching item', () => {

package/src/stock-operations/stock-operations-forms/input-components/quantity-uom-selector.component.tsx

@@ -24,7 +24,7 @@ const QtyUomSelector: React.FC<QtyUomSelectorProps> = ({ stockItemUuid, error, i
     }
   }, [initialSelectedItem, onValueChange]);
 
-  if (isLoading) return <SkeletonText role="progressbar" />;
+  if (isLoading) return <SkeletonText />;
 
   if (stockItemError)
     return (
@@ -49,8 +49,8 @@ const QtyUomSelector: React.FC<QtyUomSelectorProps> = ({ stockItemUuid, error, i
       onChange={(data: { selectedItem?: StockItemPackagingUOMDTO }) => {
         onValueChange?.(data.selectedItem?.uuid);
       }}
-      placeholder={t('filter', 'Filter') + '...'}
-      titleText={t('quantityUom', 'Qty UoM')}
+      placeholder={t('filterPlaceholder', 'Filter...')}
+      titleText={t('quantityUom', 'Quantity unit of measurement')}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/stock-item-search.component.tsx

@@ -1,11 +1,11 @@
-import { ClickableTile, Search } from '@carbon/react';
-import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useState } from 'react';
+import { ClickableTile, Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
 import { useFilterableStockItems } from '../hooks/useFilterableStockItems';
-import styles from './input-components-styles.scss';
 import { type ConfigObject } from '../../../config-schema';
+import styles from './input-components-styles.scss';
 
 type StockItemSearchProps = {
   onSelectedItem?: (stockItem: StockItemDTO) => void;
@@ -55,7 +55,6 @@ const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) =>
           closeButtonLabelText={t('clearSearch', 'Clear search input')}
           value={searchTerm}
           id="search-stock-operation-item"
-          name="search-stock-operation-item"
           onChange={(e) => setSearchTerm(e.target.value)}
         />
       </div>

package/src/stock-operations/stock-operations-forms/input-components/stock-operation-reason-selector.component.tsx

@@ -1,8 +1,8 @@
-import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
+import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../../config-schema';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
@@ -56,7 +56,7 @@ const StockOperationReasonSelector: React.FC<StockOperationReasonSelectorProps>
             field.onChange(data?.selectedItem?.uuid);
           }}
           ref={field.ref}
-          invalid={error?.message}
+          invalid={!!error?.message}
           invalidText={error?.message}
         />
       )}

package/src/stock-operations/stock-operations-forms/input-components/users-selector.component.tsx

@@ -1,5 +1,5 @@
-import { ComboBox, InlineNotification, SelectSkeleton, Column, TextInput } from '@carbon/react';
 import React, { useEffect } from 'react';
+import { ComboBox, InlineNotification, SelectSkeleton, Column, TextInput } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { type User } from '../../../core/api/types/identity/User';
@@ -68,10 +68,10 @@ const UsersSelector = () => {
                   ? otherUser
                   : ''
               }
-              itemToString={(item) => item?.person?.display || ''}
+              itemToString={(item) => (typeof item === 'string' ? item : item?.person?.display || '')}
               onInputChange={debouncedSearch}
-              placeholder={t('filter', 'Filter ...')}
-              invalid={error?.message}
+              placeholder={t('filter', 'Filter...')}
+              invalid={!!error?.message}
               invalidText={error?.message}
               ref={field.ref}
             />
@@ -93,8 +93,8 @@ const UsersSelector = () => {
                 name="responsiblePersonOther"
                 size="lg"
                 labelText={t('responsiblePerson', 'Responsible Person')}
-                placeholder={t('pleaseSpecify', 'Please Specify')}
-                invalid={error?.message}
+                placeholder={t('pleaseSpecify', 'Please specify')}
+                invalid={!!error?.message}
                 invalidText={error?.message}
               />
             )}

package/src/stock-operations/stock-operations-forms/step2.test.tsx

@@ -239,11 +239,7 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
     expect(
       screen.getByRole('searchbox', {
         name(accessibleName, element) {
-          return (
-            element.getAttribute('id') === 'search-stock-operation-item' &&
-            element.getAttribute('placeholder') === 'Find your items' &&
-            element.getAttribute('name') === 'search-stock-operation-item'
-          );
+          return element.getAttribute('id') === 'search-stock-operation-item';
         },
       }),
     ).toBeInTheDocument();

package/src/stock-operations/stock-operations-forms/steps/base-operation-details-form-step.tsx

@@ -1,3 +1,4 @@
+import React, { type ChangeEvent, type FC, useEffect, useMemo } from 'react';
 import {
   Button,
   Column,
@@ -10,10 +11,9 @@ import {
   TextInput,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { ErrorState } from '@openmrs/esm-framework';
-import React, { type ChangeEvent, type FC, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { ErrorState } from '@openmrs/esm-framework';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, MAIN_STORE_LOCATION_TAG } from '../../../constants';
 import { type Party } from '../../../core/api/types/Party';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
@@ -42,7 +42,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
     destinationParties,
     sourceParties,
     isLoading: isPartiesLoading,
-    error: patiesError,
+    error: partiesError,
     sourceTags,
     destinationTags,
   } = useParties(stockOperationType);
@@ -61,7 +61,9 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       'reasonUuid',
       'responsiblePersonOther',
     ]);
-    if (valid) onNext();
+    if (valid) {
+      onNext();
+    }
   };
 
   // initialize location fields
@@ -96,9 +98,9 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       />
     );
 
-  if (patiesError)
+  if (partiesError)
     return (
-      <ErrorState error={patiesError} headerTitle={t('partieserror', 'Error launching base operation details form')} />
+      <ErrorState error={partiesError} headerTitle={t('partiesError', 'Error launching base operation details form')} />
     );
 
   return (
@@ -113,7 +115,6 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
           render={({ field, fieldState: { error } }) => (
             <DatePicker
               readOnly={field.disabled}
-              id={`operationDate`}
               datePickerType="single"
               locale="en"
               className={styles.datePickerInput}
@@ -125,12 +126,10 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
               }}
             >
               <DatePickerInput
-                autoComplete="off"
                 id={`operationDate-input`}
-                name="operationDate-input"
                 placeholder={DATE_PICKER_FORMAT}
                 labelText={t('operationDate', 'Operation Date')}
-                invalid={error?.message}
+                invalid={!!error?.message}
                 invalidText={error?.message}
                 size="lg"
               />
@@ -176,7 +175,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                   : t('chooseALocation', 'Choose a location')
               }
               ref={field.ref}
-              invalid={error?.message}
+              invalid={!!error?.message}
               invalidText={error?.message}
             />
           )}
@@ -192,7 +191,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                 readOnly={field.disabled}
                 titleText={
                   isStockIssueOperation
-                    ? t('destination', 'destination')
+                    ? t('destination', 'Destination')
                     : stockOperationType?.hasSource || stockOperation?.atLocationUuid
                     ? t('to', 'To')
                     : t('location', 'Location')
@@ -213,7 +212,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                     : t('location', 'Location')
                 }
                 ref={field.ref}
-                invalid={error?.message}
+                invalid={!!error?.message}
                 invalidText={error?.message}
               />
             )}
@@ -239,10 +238,10 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
               onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                 field.onChange(e.target.value);
               }}
-              placeholder={t('enterRemarks', 'Enter remarks') + ' ...'}
+              placeholder={t('enterRemarksPlaceholder', 'Enter remarks...')}
               id={'remarks'}
               labelText={t('remarks', 'Remarks')}
-              invalid={error?.message}
+              invalid={!!error?.message}
               invalidText={error?.message}
             />
           )}
@@ -251,7 +250,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       <div className={styles.btnSet}>
         {typeof onNext === 'function' && (
           <Button kind="primary" onClick={handleNext} role="button" renderIcon={ArrowRight}>
-            {t('next', 'Next')}
+            {t('nextButton', 'Next')}
           </Button>
         )}
       </div>

package/src/stock-operations/stock-operations-forms/steps/quantity-uom-cell.component.tsx

@@ -20,7 +20,7 @@ const QuantityUomCell: React.FC<QuantityUomCellProps> = ({ stockItemPackagingUOM
     if (error) {
       showSnackbar({
         kind: 'error',
-        title: t('packagingUomError', 'Error loading stockItemPackagingUOM name'),
+        title: t('packagingUomError', 'Error loading Stock item'),
         subtitle: error?.message,
       });
     }

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

@@ -37,7 +37,7 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
     { 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: 'expiry', header: t('expiry', 'Expiry') },
     { key: 'qtySent', header: t('quantitySent', 'Quantity Sent') },
     { key: 'qtyReceived', header: t('quantityReceived', 'Quantity Received') },
     {
@@ -101,7 +101,7 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
             <Button
               data-testid="previous-btn"
               hasIconOnly
-              iconDescription={t('previous', 'Previous')}
+              iconDescription={t('previousButton', 'Previous')}
               kind="secondary"
               onClick={onPrevious}
               renderIcon={ArrowLeft}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useId, useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import {
   Button,
@@ -13,6 +13,7 @@ import {
 } from '@carbon/react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
 import { type StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
 import { getStockOperationUniqueId } from '../../stock-operation.utils';
@@ -24,8 +25,8 @@ import StockAvailability from './stock-availability-cell.component';
 import StockOperationItemBatchNoCell from './stock-operation-item-batch-no-cell.component';
 import StockOperationItemCell from './stock-operation-item-cell.component';
 import StockoperationItemExpiryCell from './stock-operation-item-expiry-cell.component';
+import { type CustomTableHeader } from '../../../core/components/table/types';
 import styles from './stock-operation-items-form-step.scc.scss';
-import { showSnackbar } from '@openmrs/esm-framework';
 
 type StockOperationItemsFormStepProps = {
   stockOperation?: StockOperationDTO;
@@ -63,7 +64,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ? [
             {
               key: 'batch',
-              header: t('batchNo', 'Batch No'),
+              header: t('batchNo', 'Batch number'),
               styles: { width: '15% !important' },
             },
           ]
@@ -87,11 +88,11 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
 
       {
         key: 'quantity',
-        header: t('qty', 'Qty'),
+        header: t('quantity', 'Quantity'),
       },
       {
         key: 'quantityuom',
-        header: t('quantityUom', 'Qty UoM'),
+        header: t('quantityUom', 'Quantity unit of measurement'),
       },
       ...(operationTypePermision.canCaptureQuantityPrice
         ? [
@@ -151,7 +152,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Edit'}
+              iconDescription={t('edit', 'Edit')}
               kind="ghost"
               renderIcon={Edit}
               onClick={() => {
@@ -162,7 +163,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Delete'}
+              iconDescription={t('delete', 'Delete')}
               kind="ghost"
               renderIcon={TrashCan}
               onClick={() => {
@@ -173,7 +174,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ),
       };
     });
-  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, uniqueId]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, t, uniqueId]);
 
   const handleNext = async () => {
     const valid = await form.trigger(['stockOperationItems']);
@@ -191,7 +192,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
     }
   };
 
-  const headerTitle = t('stockoperationItems', 'Stock operation items');
+  const headerTitle = t('stockOperationItems', 'Stock operation items');
 
   return (
     <div style={{ margin: '10px' }}>
@@ -209,13 +210,8 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
             })
           }
         />
-        <DataTable
-          rows={tableRows ?? []}
-          headers={headers}
-          isSortable={false}
-          useZebraStyles={true}
-          className={styles.dataTable}
-          render={({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+        <DataTable rows={tableRows ?? []} headers={headers} isSortable={false} useZebraStyles>
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
             <TableContainer>
               <Table {...getTableProps()}>
                 <TableHead>
@@ -226,10 +222,17 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
                           header,
                           isSortable: false,
                         })}
-                        style={header?.styles}
+                        style={(header as CustomTableHeader)?.styles}
                         key={header.key}
                       >
-                        {header.header?.content ?? header?.header}
+                        {(() => {
+                          const customHeader = header as CustomTableHeader;
+                          return typeof customHeader.header === 'object' &&
+                            customHeader.header !== null &&
+                            'content' in customHeader.header
+                            ? (customHeader.header.content as React.ReactNode)
+                            : (customHeader.header as React.ReactNode);
+                        })()}
                       </TableHeader>
                     ))}
                   </TableRow>
@@ -246,11 +249,11 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               </Table>
             </TableContainer>
           )}
-        />
+        </DataTable>
         <div className={styles.btnSet}>
           {typeof onNext === 'function' && (
             <Button kind="primary" onClick={handleNext} renderIcon={ArrowRight}>
-              {t('next', 'Next')}
+              {t('nextButton', 'Next')}
             </Button>
           )}
           {typeof onPrevious === 'function' && (
@@ -260,7 +263,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               renderIcon={ArrowLeft}
               hasIconOnly
               data-testid="previous-btn"
-              iconDescription={t('previous', 'Previous')}
+              iconDescription={t('previousButton', 'Previous')}
             />
           )}
         </div>

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

@@ -66,14 +66,14 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             kind: del.status === 'rejected' ? 'error' : 'success',
             title:
               del.status === 'rejected'
-                ? t('stockoperationItemDeleteError', 'Error deleting stock operation item {{item}}', {
+                ? t('stockOperationItemDeleteError', 'Error deleting stock operation item {{item}}', {
                     item: itemsToDelete[index].commonName,
                   })
                 : t('success', 'Success'),
             subtitle:
               del.status === 'rejected'
                 ? del.reason?.message
-                : t('stockoperationItemDeletSuccess', 'Stock operation item {{item}} deleted succesfully', {
+                : t('stockOperationItemDeleteSuccess', 'Stock operation item {{item}} deleted successfully', {
                     item: itemsToDelete[index].commonName,
                   }),
           });
@@ -233,7 +233,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
       <div className={styles.btnSet}>
         {typeof onNext === 'function' && (
           <Button kind="tertiary" onClick={onNext} renderIcon={ArrowRight}>
-            {t('next', 'Next')}
+            {t('nextButton', 'Next')}
           </Button>
         )}
         {typeof onPrevious === 'function' && (
@@ -243,7 +243,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             renderIcon={ArrowLeft}
             hasIconOnly
             data-testid="previous-btn"
-            iconDescription={t('previous', 'Previous')}
+            iconDescription={t('previousButton', 'Previous')}
           />
         )}
       </div>