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

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

@@ -1,14 +1,16 @@
-import styles from './stock-rules-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { useStockRules } from './stock-rules.resource';
 import { ResourceRepresentation } from '../../../core/api/api';
+import styles from './stock-rules-filter.scss';
 
 interface StockRulesFilterProps {
   stockItemUuid: string;
 }
 
 const StockRulesFilter: React.FC<StockRulesFilterProps> = ({ stockItemUuid }) => {
+  const { t } = useTranslation();
   const { items, isLoading, error } = useStockRules({
     v: ResourceRepresentation.Default,
     totalCount: true,
@@ -18,15 +20,18 @@ const StockRulesFilter: React.FC<StockRulesFilterProps> = ({ stockItemUuid }) =>
   if (isLoading || error) {
     return <DropdownSkeleton />;
   }
+
   return (
     <>
       <div className={styles.filterContainer}>
         <Dropdown
           id="stockRulesFiter"
           items={[...items.results]}
-          itemToString={(item) => (item ? item.display : 'Not Set')}
+          itemToString={(item) => (item ? item.name : t('notSet', 'Not Set'))}
           type="inline"
           size="sm"
+          label={t('filterStockRules', 'Filter stock rules')}
+          titleText={t('stockRules', 'Stock rules')}
         />
       </div>
     </>

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

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

package/src/stock-items/add-stock-item/transactions/printout/printable-bincard-transaction-header.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import styles from './printable-transaction-header.scss';
-import { useConfig } from '@openmrs/esm-framework';
+import { startCase } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import startCase from 'lodash-es/startCase';
+import { useConfig } from '@openmrs/esm-framework';
+import styles from './printable-transaction-header.scss';
 
 interface PrintableTransactionHeaderProps {
   itemName: string;
@@ -15,7 +15,7 @@ const PrintableBincardTransactionHeader: React.FC<PrintableTransactionHeaderProp
   return (
     <div className={styles.container}>
       <div className={styles.printableHeader}>
-        <p className={styles.heading}>{t('bincard', 'Bin Card')}</p>
+        <p className={styles.heading}>{t('binCard', 'Bin card')}</p>
         {logo?.src ? (
           <img className={styles.img} height={60} width={250} src={logo.src} alt={logo.alt} />
         ) : logo?.name ? (
@@ -41,7 +41,7 @@ const PrintableBincardTransactionHeader: React.FC<PrintableTransactionHeaderProp
 
       <div className={styles.printableBody}>
         <div className={styles.transactionDetails}>
-          <p className={styles.itemHeading}>{t('itemname', 'Item Name')}</p>
+          <p className={styles.itemHeading}>{t('itemName', 'Item name')}</p>
           <p className={styles.itemLabel}>{startCase(itemName)}</p>
         </div>
       </div>

package/src/stock-items/add-stock-item/transactions/printout/printable-stockcard-transaction-header.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './printable-transaction-header.scss';
 import { useConfig } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import startCase from 'lodash-es/startCase';
+import { startCase } from 'lodash-es';
 
 interface PrintableTransactionHeaderProps {
   itemName: string;
@@ -15,7 +15,7 @@ const PrintableStockcardTransactionHeader: React.FC<PrintableTransactionHeaderPr
   return (
     <div className={styles.container}>
       <div className={styles.printableHeader}>
-        <p className={styles.heading}>{t('bincard', 'Stock Card')}</p>
+        <p className={styles.heading}>{t('stockCard', 'Stock card')}</p>
         {logo?.src ? (
           <img className={styles.img} height={60} width={250} src={logo.src} alt={logo.alt} />
         ) : logo?.name ? (
@@ -41,7 +41,7 @@ const PrintableStockcardTransactionHeader: React.FC<PrintableTransactionHeaderPr
 
       <div className={styles.printableBody}>
         <div className={styles.transactionDetails}>
-          <p className={styles.itemHeading}>{t('itemname', 'Item Name')}</p>
+          <p className={styles.itemHeading}>{t('itemName', 'Item name')}</p>
           <p className={styles.itemLabel}>{startCase(itemName)}</p>
         </div>
       </div>

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

@@ -1,13 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Stack, ComboButton, MenuItem } from '@carbon/react';
+import { ComboButton, MenuItem } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { useStockItem, useStockItemInventory } from '../../../stock-items.resource';
 import { showModal, useConfig } from '@openmrs/esm-framework';
-import { type ConfigObject } from '../../../../config-schema';
-import styles from './printable-transaction.scss';
 import { type StockItemInventoryFilter, useStockItemTransactions } from '../../../stock-items.resource';
 import { ResourceRepresentation } from '../../../../core/api/api';
+import { type ConfigObject } from '../../../../config-schema';
 
 type Props = {
   itemUuid: string;
@@ -156,14 +155,12 @@ const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid, fil
           <MenuItem
             label={t('printStockCard', 'Print Stock Card')}
             renderIcon={(props) => <Printer size={24} {...props} />}
-            iconDescription="Print Stock Card"
             onClick={handleStockcardClick}
             disabled={isStockItemLoading || isStockCardLoading}
           />
           <MenuItem
             label={t('printBinCard', 'Print Bin Card')}
             renderIcon={(props) => <Printer size={24} {...props} />}
-            iconDescription="Print Bin Card"
             onClick={handleBincardClick}
             disabled={isStockItemLoading}
           />

package/src/stock-items/add-stock-item/transactions/printout/transactions-print-bincard-preview.modal.tsx

@@ -28,7 +28,7 @@ const TransactionsBincardPrintPreviewModal: React.FC<TransactionsBincardPrintPre
   });
   return (
     <>
-      <ModalHeader closeModal={onClose} title={t('printbincard', 'Print Bin Card')} />
+      <ModalHeader closeModal={onClose} title={t('printBinCard', 'Print Bin Card')} />
       <ModalBody>
         <div ref={ref}>
           <TransactionsBincardPrintout title={title} columns={columns} data={data} />

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

@@ -27,9 +27,6 @@ const TransactionsLocationsFilter = <T,>(props: TransactionsLocationsFilterProps
       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/components/filter-stock-items/filter-stock-items.component.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { RadioButton, RadioButtonGroup } from '@carbon/react';
 import styles from './filter-stock-items.scss';
 
@@ -8,16 +9,17 @@ interface FilterStockItemsProps {
 }
 
 const FilterStockItems: React.FC<FilterStockItemsProps> = ({ filterType, changeFilterType }) => {
+  const { t } = useTranslation();
   return (
     <RadioButtonGroup
       name="is-drug"
       defaultSelected={filterType}
-      onChange={changeFilterType}
+      onChange={(value) => changeFilterType(value as string)}
       className={styles.spacing}
     >
-      <RadioButton labelText="All" value="" id="is-drug-all" />
-      <RadioButton labelText="Pharmaceuticals" value="true" id="is-drug-drug" />
-      <RadioButton labelText="Non Pharmaceuticals" value="false" id="is-drug-other" />
+      <RadioButton labelText={t('all', 'All')} value="" id="is-drug-all" />
+      <RadioButton labelText={t('pharmaceuticals', 'Pharmaceuticals')} value="true" id="is-drug-drug" />
+      <RadioButton labelText={t('nonPharmaceuticals', 'Non Pharmaceuticals')} value="false" id="is-drug-other" />
     </RadioButtonGroup>
   );
 };

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

@@ -19,7 +19,7 @@ const EditStockItemActionsMenu: React.FC<EditStockItemActionsMenuProps> = ({ dat
         data.isDrug = !!data.drugUuid;
         launchAddOrEditStockItemWorkspace(t, data);
       }}
-      iconDescription={t('editStockItem', 'Edit Stock Item')}
+      iconDescription={t('editStockItem', 'Edit stock item')}
     >
       {`${data?.drugName ?? data.conceptName}`}
     </Button>

package/src/stock-items/stock-items-table.component.tsx

@@ -31,6 +31,7 @@ import AddStockItemActionButton from './add-stock-item/add-stock-action-button.c
 import AddStockItemsBulktImportActionButton from './add-bulk-stock-item/add-stock-items-bulk-import-action-button.component';
 import EditStockItemActionsMenu from './edit-stock-item/edit-stock-item-action-menu.component';
 import FilterStockItems from './components/filter-stock-items/filter-stock-items.component';
+import { type CustomTableHeader } from '../core/components/table/types';
 import styles from './stock-items-table.scss';
 
 interface StockItemsTableProps {
@@ -80,17 +81,17 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
       },
       {
         id: 1,
-        header: t('genericName', 'Generic Name'),
+        header: t('genericName', 'Generic name'),
         key: 'genericName',
       },
       {
         id: 2,
-        header: t('commonName', 'Common Name'),
+        header: t('commonName', 'Common name'),
         key: 'commonName',
       },
       {
         id: 3,
-        header: t('tradeName', 'Trade Name'),
+        header: t('tradeName', 'Trade name'),
         key: 'tradeName',
       },
       {
@@ -100,12 +101,12 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
       },
       {
         id: 5,
-        header: t('defaultStockOperationsUoMName', 'Bulk Packaging'),
+        header: t('defaultStockOperationsUoMName', 'Bulk packaging'),
         key: 'defaultStockOperationsUoMName',
       },
       {
         id: 6,
-        header: t('reorderLevel', 'Reorder Level'),
+        header: t('reorderLevel', 'Reorder level'),
         key: 'reorderLevel',
       },
       {
@@ -159,12 +160,8 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
       <h2 className={styles.tableHeader}>
         {t('stockItemsTableHeader', 'Drugs and other stock items managed by the system.')}
       </h2>
-      <DataTable
-        rows={tableRows}
-        headers={tableHeaders}
-        isSortable
-        useZebraStyles
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, getBatchActionProps }) => (
+      <DataTable rows={tableRows} headers={tableHeaders} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, getBatchActionProps }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -181,7 +178,9 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                 }}
               >
                 <TableToolbarSearch
-                  onChange={(e) => handleSearch(e.target.value)}
+                  onChange={(e) =>
+                    handleSearch(typeof e === 'string' ? e : (e as React.ChangeEvent<HTMLInputElement>).target.value)
+                  }
                   persistent
                   placeholder={t('searchStockItems', 'Search stock items')}
                   value={searchInput}
@@ -205,13 +204,20 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                         <TableHeader
                           {...getHeaderProps({
                             header,
-                            isSortable: header.isSortable,
+                            isSortable: (header as CustomTableHeader).isSortable,
                           })}
                           className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
                           key={`${header.key}`}
                           isSortable={header.key !== 'name'}
                         >
-                          {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>
                       ),
                   )}
@@ -249,7 +255,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         className={styles.paginationOverride}
         onChange={({ page, pageSize }) => {

package/src/stock-items/stock-items-table.resource.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePagination } from '@openmrs/esm-framework';
 import { type StockItemFilter, useStockItems } from './stock-items.resource';

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

@@ -10,8 +10,7 @@ import { type StockItemReference, type StockItemReferenceDTO } from '../core/api
 import { type StockItemTransactionDTO } from '../core/api/types/stockItem/StockItemTransaction';
 import { type StockRule } from '../core/api/types/stockItem/StockRule';
 import { type StockOperationItemCost } from '../core/api/types/stockOperation/StockOperationItemCost';
-import { z } from 'zod';
-import { stockItemDetailsSchema, type StockItemFormData } from './validationSchema';
+import { type StockItemFormData } from './validationSchema';
 
 export interface StockItemFilter extends ResourceFilterCriteria {
   isDrug?: string | null | undefined;

package/src/stock-locations/add-locations-form.workspace.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { saveLocation } from './stock-locations-table.resource';
 import { type locationData, type LocationMutator } from '../stock-items/types';
-import LocationAdministrationForm from './location-admin-form.component';
 import { extractErrorMessagesFromResponse } from '../constants';
+import LocationAdministrationForm from './location-admin-form.component';
 
 interface LocationFormProps {
   showModal: boolean;
@@ -33,7 +33,7 @@ const NewLocationForm: React.FC<LocationFormProps> = ({ showModal, onModalChange
       saveLocation({ locationPayload: locationbject })
         .then(() => {
           showSnackbar({
-            title: t('formCreated', 'Add Location'),
+            title: t('locationCreatedTitle', 'Location created'),
             kind: 'success',
             isLowContrast: true,
             subtitle: t('locationCreatedSuccessfully', 'Location {{locationName}} was created successfully.', {
@@ -60,15 +60,13 @@ const NewLocationForm: React.FC<LocationFormProps> = ({ showModal, onModalChange
   );
 
   return (
-    <>
-      <LocationAdministrationForm
-        onModalChange={onModalChange}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        initialData={initialData}
-      />
-    </>
+    <LocationAdministrationForm
+      onModalChange={onModalChange}
+      showModal={showModal}
+      handleCreateQuestion={handleCreateQuestion}
+      headerTitle={headerTitle}
+      initialData={initialData}
+    />
   );
 };
 export default NewLocationForm;

package/src/stock-locations/location-admin-form.component.tsx

@@ -101,7 +101,7 @@ const LocationAdministrationForm: React.FC<LocationAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="location"
-                      labelText={t('location', 'Location Name')}
+                      labelText={t('locationName', 'Location name')}
                       placeholder={t('locationPlaceholder', 'Add a location')}
                       invalidText={fieldState.error?.message}
                       {...field}
@@ -116,11 +116,16 @@ const LocationAdministrationForm: React.FC<LocationAdministrationFormProps> = ({
                   render={({ field }) => (
                     <FilterableMultiSelect
                       id="tag"
-                      titleText={t('selectTags', 'Select tag(s)')}
-                      helperText="This is helper text"
+                      titleText={t('selectTags', 'Select tags')}
+                      helperText={t('selectTagsHelper', 'Select one or more tags for this location')}
                       items={Tags ?? []}
                       {...field}
-                      itemToString={(item) => (item ? item.display : '')}
+                      itemToString={(item) => {
+                        if (item && typeof item === 'object' && 'display' in item) {
+                          return (item as { display: string }).display;
+                        }
+                        return '';
+                      }}
                       selectionFeedback="top-after-reopen"
                     />
                   )}

package/src/stock-locations/stock-locations-table.component.tsx

@@ -9,7 +9,7 @@ import {
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { mutate } from 'swr';
+import { useSWRConfig } from 'swr';
 import { restBaseUrl } from '@openmrs/esm-framework';
 import { handleMutate } from '../utils';
 import { ResourceRepresentation } from '../core/api/api';
@@ -24,7 +24,7 @@ interface StockLocationsTableProps {
 
 const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
   const { t } = useTranslation();
-
+  const { mutate } = useSWRConfig();
   const [showLocationModal, setAddLocationModal] = useState(false);
 
   const { tableHeaders, tableRows, items, isLoading } = useStockLocationPages({
@@ -69,7 +69,7 @@ const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
   return (
     <div className={styles.tileContainer}>
       <Tile className={styles.tile}>
-        <p className={styles.content}>{t('noStockItemsToDisplay', 'No stock items to display')}</p>
+        <p className={styles.content}>{t('noLocationsToDisplay', 'No locations to display')}</p>
       </Tile>
     </div>
   );

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

@@ -15,7 +15,7 @@ import { type OpenMRSLocation, type OpenMRSLocationTag } from '../core/api/types
 import { type PageableResult } from '../core/api/types/PageableResult';
 import { type Party } from '../core/api/types/Party';
 import { type Patient } from '../core/api/types/identity/Patient';
-import { type ResourceFilterCriteria, toQueryParams } from '../core/api/api';
+import { type ResourceFilterCriteria, type ResourceRepresentation, toQueryParams } from '../core/api/api';
 import { type Role } from '../core/api/types/identity/Role';
 import { type StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
 import { type User } from '../core/api/types/identity/User';
@@ -166,7 +166,7 @@ export function useUsers(filter: UserFilterCriteria) {
 
 // getUser
 export function useUser(id: string, v?: string) {
-  const apiUrl = `${restBaseUrl}/user/${id}${toQueryParams({ v: v as any })}`;
+  const apiUrl = `${restBaseUrl}/user/${id}${toQueryParams({ v: (v as ResourceRepresentation) || undefined })}`;
   const { data, error, isLoading } = useSWR<
     {
       data: User;

package/src/stock-management-admin-card-link.component.tsx

@@ -11,7 +11,7 @@ const StockManagementCardLink: React.FC = () => {
       <ClickableTile href={window.getOpenmrsSpaBase() + 'stock-management'} rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t('stockManagement', 'Stock Management')}</div>
+          <div className="content">{t('stockManagement', 'Stock management')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-items-table.tsx

@@ -1,3 +1,5 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   DataTable,
   Pagination,
@@ -11,8 +13,6 @@ import {
   Tile,
 } from '@carbon/react';
 import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { type StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
 import styles from './stock-items-table.scss';
 
@@ -23,7 +23,7 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
   const { t } = useTranslation();
   const [pageSize, setPageSize] = useState(10);
   const pageSizesOptions = useMemo(() => [5, 10, 20, 50, 100], []);
-  const [searchText, setSearchText] = useState();
+  const [searchText, setSearchText] = useState<string>('');
 
   const handleSearch = (item: StockOperationItemDTO) => {
     if (!searchText) return true;
@@ -39,7 +39,7 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
         key: 'commonName',
       },
       {
-        header: t('batchNo', 'Batch No'),
+        header: t('batchNo', 'Batch number'),
         key: 'batchNo',
       },
       {
@@ -47,11 +47,11 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
         key: 'expiration',
       },
       {
-        header: t('qty', 'Qty'),
+        header: t('quantity', 'Quantity'),
         key: 'quantity',
       },
       {
-        header: t('uom', 'UoM'),
+        header: t('uom', 'Unit of Measurement'),
         key: 'stockItemPackagingUOMName',
       },
     ],
@@ -71,8 +71,12 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
   return (
     <Tile className={styles.container}>
       <span className={styles.title}>{t('stockItems', 'Stock items')}</span>
-      <Search value={searchText} onChange={({ target: { value } }) => setSearchText(value)} />
-      <DataTable useZebraStyles={true} rows={tableRows} headers={headers}>
+      <Search
+        labelText={t('search', 'Search')}
+        value={searchText}
+        onChange={({ target: { value } }) => setSearchText(value as string)}
+      />
+      <DataTable useZebraStyles rows={tableRows} headers={headers}>
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
           <Table {...getTableProps()}>
             <TableHead>

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component.tsx

@@ -86,8 +86,8 @@ const StockOperationExpandedRow: React.FC<StockOperationExpandedRowProps> = (pro
         <Row className={styles.statusContainerRow}>
           {isLoading && (
             <InlineLoading
-              description={t('loading StockoperationLinks', 'Loading stock operation links') + '...'}
-              iconDescription={t('loading StockoperationLinks', 'Loading stock operation links')}
+              description={t('loadingStockOperationLinks', 'Loading stock operation links...')}
+              iconDescription={t('loadingStockOperationLinksIcon', 'Loading stock operation links')}
             />
           )}
           {currentOperationType && (
@@ -100,8 +100,8 @@ const StockOperationExpandedRow: React.FC<StockOperationExpandedRowProps> = (pro
         <Row className={styles.statusContainerRow}>
           {isLoading && (
             <InlineLoading
-              description={t('loadingOperationActions', 'Loading stock operation actions') + '...'}
-              iconDescription={t('loadingOperationActions', 'Loading stock operation actions')}
+              description={t('loadingOperationActions', 'Loading stock operation actions...')}
+              iconDescription={t('loadingOperationActionsIcon', 'Loading stock operation actions')}
             />
           )}
           {currentOperationType && (

package/src/stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component.tsx

@@ -1,12 +1,12 @@
-import { IconButton, InlineLoading } from '@carbon/react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import { showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
 import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
-import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 import { useStockOperationAndItems } from '../stock-operations.resource';
+import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 import styles from './edit-stock-operation-button.scss';
 
 interface EditStockOperationActionMenuProps {
@@ -51,7 +51,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
     if (operationTypesError || stockOperationError) {
       showSnackbar({
         kind: 'error',
-        title: t('stockOperationError', 'Error loading stock operation'),
+        title: t('stockOperationLoadError', 'Error loading stock operation'),
         subtitle: operationTypesError?.message || stockOperationError?.message || '',
       });
     }
@@ -66,16 +66,15 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
   }
 
   return (
-    <IconButton
+    <Button
       className={styles.editStockButton}
       kind="ghost"
       size="sm"
       onClick={handleLaunchWorkspace}
-      label={t('editStockOperation', 'Edit Stock Operation')}
       renderIcon={showIcon ? () => <Edit size={16} /> : undefined}
     >
       {showprops && <span className={styles.operationNumberText}>{fetchedStockOperation?.operationNumber}</span>}
-    </IconButton>
+    </Button>
   );
 };
 

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>
     </>