@openmrs/esm-stock-management-app 3.0.1-pre.891 → 3.0.1-pre.895

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

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

package/src/core/components/{privilages-component/privilages.component.tsx → privileged-view-component/privileged-view.component.tsx}

@@ -2,15 +2,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tile } from '@carbon/react';
 import { DocumentProtected } from '@carbon/react/icons';
+import styles from './privileged-view.scss';
 
-import styles from './privilages.scss';
-
-interface PrivilageComponentProps {
+interface PrivilegedViewComponentProps {
   title: string;
   description?: string;
 }
 
-export const PrivilagedView: React.FC<PrivilageComponentProps> = ({ title, description }) => {
+export const PrivilegedView: React.FC<PrivilegedViewComponentProps> = ({ title, description }) => {
   const { t } = useTranslation();
 
   return (
@@ -18,7 +17,7 @@ export const PrivilagedView: React.FC<PrivilageComponentProps> = ({ title, descr
       <Tile className={styles.tile}>
         <div className={styles.tileContent}>
           <DocumentProtected size="24" />
-          <p className={styles.content}>{t('noPrivilagesTitle', `${title}`)}</p>
+          <p className={styles.content}>{t('noPrivilegesTitle', `${title}`)}</p>
           {description && (
             <p className={styles.helper}>
               {t('noViewPrivilegesDescription', 'Description: {{description}}', {

package/src/index.ts

@@ -2,7 +2,7 @@ import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmr
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink';
 import appMenu from './stock-app-menu-item/item.component';
-import deletePackagingUnitModalButtonComponent from './stock-items/add-stock-item/packaging-units/packaging-units-delete-modal-button.component';
+import deletePackagingUnitModalButtonComponent from './stock-items/add-stock-item/packaging-units/delete-packaging-unit-action-button.component';
 import Root from './root.component';
 import SideMenu from './side-menu/side-menu.component';
 import StockHomeLandingPage from './stock-home/stock-home-landing-page-component';
@@ -27,13 +27,13 @@ const options = {
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-export const deleteStockModal = getAsyncLifecycle(() => import('./stock-sources/delete-stock-modal.component'), {
+export const deleteStockModal = getAsyncLifecycle(() => import('./stock-sources/delete-stock-source.modal'), {
   featureName: 'delete-stock-modal',
   moduleName,
 });
 
 export const deleteUserScopeModal = getAsyncLifecycle(
-  () => import('./stock-user-role-scopes/delete-stock-user-scope-modal.component'),
+  () => import('./stock-user-role-scopes/delete-stock-user-scope.modal'),
   {
     featureName: 'delete-stock-user-scope-modal',
     moduleName,
@@ -41,7 +41,7 @@ export const deleteUserScopeModal = getAsyncLifecycle(
 );
 
 export const deletePackagingUnitModal = getAsyncLifecycle(
-  () => import('./stock-items/add-stock-item/packaging-units/packaging-units-delete-modal.component'),
+  () => import('./stock-items/add-stock-item/packaging-units/packaging-units-delete.modal'),
   {
     featureName: 'delete-packaging-unit-modal',
     moduleName,

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

@@ -17,7 +17,7 @@ const StockHomeInventoryCard = () => {
   }
 
   if (stockItems?.length === 0) {
-    return <p>{t('noInventoryAlerts', 'No inventory alerts to display')}</p>;
+    return <p className={styles.content}>{t('noInventoryAlerts', 'No inventory alerts to display')}</p>;
   }
 
   const currentDate = new Date();

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

@@ -1,9 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
-import { DataTableSkeleton, Tile } from '@carbon/react';
+import { DataTableSkeleton } from '@carbon/react';
 import DataList from '../../../core/components/table/table.component';
-import styles from '../../stock-items-table.scss';
 import { useStockItemBatchInformationHook } from './batch-information.resource';
 import BatchInformationLocationsFilter from './batch-information-locations/batch-information-locations-filter.component';
 import { useForm } from 'react-hook-form';

package/src/stock-items/add-stock-item/packaging-units/{packaging-units-delete-modal-button.component.tsx → delete-packaging-unit-action-button.component.tsx}

@@ -1,34 +1,34 @@
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 
-interface DeleteModalButtonProps {
+interface DeletePackagingUnitActionButtonProps {
   row?: StockItemPackagingUOMDTO;
-  closeModal: () => void;
 }
 
-const DeleteModalButton: React.FC<DeleteModalButtonProps> = ({ row }) => {
+const DeletePackagingUnitActionButton: React.FC<DeletePackagingUnitActionButtonProps> = ({ row }) => {
+  const { t } = useTranslation();
   const launchDeleteModal = useCallback(() => {
     const dispose = showModal('delete-packaging-unit-modal', {
       closeModal: () => dispose(),
       row,
     });
   }, [row]);
+
   return (
-    <div>
-      <Button
-        type="button"
-        size="sm"
-        className="submitButton clear-padding-margin"
-        iconDescription={'Delete'}
-        kind="ghost"
-        renderIcon={TrashCan}
-        onClick={launchDeleteModal}
-      />
-    </div>
+    <Button
+      type="button"
+      size="sm"
+      className="submitButton clear-padding-margin"
+      iconDescription={t('delete', 'Delete')}
+      kind="ghost"
+      renderIcon={TrashCan}
+      onClick={launchDeleteModal}
+    />
   );
 };
 
-export default DeleteModalButton;
+export default DeletePackagingUnitActionButton;

package/src/stock-items/add-stock-item/packaging-units/{packaging-units-delete-modal.component.tsx → packaging-units-delete.modal.tsx}

@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalHeader, ModalBody, ModalFooter, TextArea } from '@carbon/react';
-import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 import { deleteStockItemPackagingUnit } from '../../stock-items.resource';
 import { useStockItemPackageUnitsHook } from './packaging-units.resource';
 import styles from '../packaging-units/packaging-units.scss';
 
-interface DeletePackagingUnitProps {
+interface DeletePackagingUnitModalProps {
   row?: StockItemPackagingUOMDTO;
   closeModal: () => void;
 }
 
-const DeletePackagingUnit: React.FC<DeletePackagingUnitProps> = ({ row, closeModal }) => {
+const DeletePackagingUnitModal: React.FC<DeletePackagingUnitModalProps> = ({ row, closeModal }) => {
   const { t } = useTranslation();
   const { mutate, setStockItemUuid } = useStockItemPackageUnitsHook();
 
@@ -85,4 +85,4 @@ const DeletePackagingUnit: React.FC<DeletePackagingUnitProps> = ({ row, closeMod
   );
 };
 
-export default DeletePackagingUnit;
+export default DeletePackagingUnitModal;

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

@@ -21,8 +21,8 @@ import { handleMutate } from '../../../utils';
 import { type PackageUnitFormData, packageUnitSchema } from './validationSchema';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 import { useStockItemPackageUnitsHook } from './packaging-units.resource';
-import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
-import DeleteModalButton from './packaging-units-delete-modal-button.component';
+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 styles from './packaging-units.scss';
 
@@ -299,7 +299,7 @@ const PackagingUnitRow: React.FC<{
           />
         </TableCell>
         <TableCell>
-          <DeleteModalButton closeModal={() => true} row={row} />
+          <DeletePackagingUnitActionButton row={row} />
         </TableCell>
       </TableRow>
     </>

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

@@ -2,10 +2,9 @@ import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ResourceRepresentation } from '../../../core/api/api';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
-import { DataTableSkeleton, Tile } from '@carbon/react';
-import DataList from '../../../core/components/table/table.component';
-import styles from '../../stock-items-table.scss';
+import { DataTableSkeleton } from '@carbon/react';
 import { useStockItemQuantitiesHook } from './quantities.resource';
+import DataList from '../../../core/components/table/table.component';
 
 interface StockQuantitiesProps {
   onSubmit?: () => void;

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

@@ -13,9 +13,9 @@ import { launchAddOrEditStockItemWorkspace } from '../../stock-item.utils';
 import { stockItemDetailsSchema, type StockItemFormData } from '../../validationSchema';
 import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
 import ConceptsSelector from '../concepts-selector/concepts-selector.component';
-import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
-import ControlledRadioButtonGroup from '../../../core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component';
-import ControlledTextInput from '../../../core/components/carbon/controlled-text-input/controlled-text-input.component';
+import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input.component';
+import ControlledRadioButtonGroup from '../../../core/components/carbon/controlled-radio-button-group.component';
+import ControlledTextInput from '../../../core/components/carbon/controlled-text-input.component';
 import DispensingUnitSelector from '../dispensing-unit-selector/dispensing-unit-selector.component';
 import DrugSelector from '../drug-selector/drug-selector.component';
 import PreferredVendorSelector from '../preferred-vendor-selector/preferred-vendor-selector.component';

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

@@ -21,7 +21,7 @@ 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/controlled-text-input.component';
+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';

package/src/stock-items/add-stock-item/stock-item-rules/{delete-stock-rule-modal.component.tsx → delete-stock-rule.modal.tsx}

@@ -4,13 +4,13 @@ import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-framework';
 import styles from '../../../root.scss';
 
-interface DeleteConfirmationProps {
+interface DeleteStockRuleModalProps {
   uuid?: string;
   close: () => void;
   onConfirmation: () => void;
 }
 
-const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfirmation, uuid }) => {
+const DeleteStockRuleModal: React.FC<DeleteStockRuleModalProps> = ({ close, onConfirmation, uuid }) => {
   const { t } = useTranslation();
   const handleCancel = () => close();
   const handleDelete = () => onConfirmation?.();
@@ -41,4 +41,4 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfir
   );
 };
 
-export default DeleteConfirmation;
+export default DeleteStockRuleModal;

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

@@ -4,7 +4,7 @@ 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/controlled-number-input.component';
+import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input.component';
 import { NumberInputSkeleton } from '@carbon/react';
 
 interface StockItemUnitsEditProps {

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

@@ -18,7 +18,6 @@ import {
   TableToolbarContent,
   TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
@@ -140,7 +139,6 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
         <IconButton
           kind="ghost"
           label={t('editStockItem', 'Edit stock item')}
-          size="md"
           onClick={() => {
             stockItem.isDrug = !!stockItem.drugUuid;
             launchAddOrEditStockItemWorkspace(t, stockItem);
@@ -158,7 +156,9 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
 
   return (
     <>
-      <TabPanel>{t('panelDescription', 'Drugs and other stock items managed by the system.')}</TabPanel>
+      <h2 className={styles.tableHeader}>
+        {t('stockItemsTableHeader', 'Drugs and other stock items managed by the system.')}
+      </h2>
       <DataTable
         rows={tableRows}
         headers={tableHeaders}

package/src/stock-items/stock-items-table.scss

@@ -97,3 +97,8 @@
 .toolbarAction {
   max-width: none;
 }
+
+.tableHeader {
+  @include type.type-style('body-02');
+  margin: layout.$spacing-05 0;
+}

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

@@ -22,7 +22,6 @@ import {
   TableToolbarContent,
   TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
@@ -150,7 +149,9 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
 
   return (
     <div>
-      <TabPanel>{t('stockOperationTrackMovement', 'Stock operations to track movement of stock.')}</TabPanel>
+      <h2 className={styles.tableHeader}>
+        {t('stockOperationsTableHeader', 'Stock operations to track movement of stock.')}
+      </h2>
       <DataTable
         headers={tableHeaders}
         isSortable
@@ -265,7 +266,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
               <div className={styles.tileContainer}>
                 <Tile className={styles.tile}>
                   <div className={styles.tileContent}>
-                    <p className={styles.content}>{t('noOperationsToDisplay', 'No Stock Operations to display')}</p>
+                    <p className={styles.content}>{t('noOperationsToDisplay', 'No stock operations to display')}</p>
                     <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                   </div>
                 </Tile>

package/src/stock-operations/stock-operations-table.scss

@@ -109,3 +109,8 @@
 .arrowIcon {
   margin: 0 layout.$spacing-02;
 }
+
+.tableHeader {
+  @include type.type-style('body-02');
+  margin: layout.$spacing-05 0;
+}

package/src/stock-reports/report-list/stock-reports.component.tsx

@@ -21,7 +21,6 @@ import {
   TableToolbarContent,
   TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
 } from '@carbon/react';
 import {
@@ -49,7 +48,7 @@ import {
   BatchJobStatusPending,
 } from '../../core/api/types/BatchJob';
 import { handleMutate } from '../../utils';
-import { PrivilagedView } from '../../core/components/privilages-component/privilages.component';
+import { PrivilegedView } from '../../core/components/privileged-view-component/privileged-view.component';
 import NewReportActionButton from './new-report-button.component';
 import StockReportStatus from './stock-report-status.component';
 import StockReportParameters from './stock-report-parameters.component';
@@ -203,8 +202,7 @@ const StockReports: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <TabPanel>{t('ReportDescription', 'List of reports requested by users')}</TabPanel>
-
+      <h2 className={styles.tableHeader}>{t('stockReportsTableHeader', 'List of reports requested by users.')}</h2>
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
@@ -274,7 +272,7 @@ const StockReports: React.FC = () => {
               </TableBody>
             </Table>
             {!canViewReports ? (
-              <PrivilagedView
+              <PrivilegedView
                 title="Can not view stock reports"
                 description="You have no permissions to view reports"
               />

package/src/stock-reports/report-list/stock-reports.scss

@@ -86,3 +86,8 @@
 .toolbarMenuAction {
   max-width: none;
 }
+
+.tableHeader {
+  @include type.type-style('body-02');
+  margin: layout.$spacing-05 0;
+}

package/src/stock-settings/stock-settings.component.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './stock-settings.scss';
-import { navigate } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
 import { UserSettings } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './stock-settings.scss';
 
 function StockSettings() {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.StockSettings}>
+    <div className={styles.container}>
       <div className={styles.tableHeader}>
         {t(
           'comingSoonUnderDev',

package/src/stock-settings/stock-settings.scss

@@ -3,14 +3,14 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.StockSettings {
+.container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   justify-content: flex-end;
   min-height: calc(layout.$layout-07 * 1.25);
   border: 1px solid colors.$gray-20;
-  margin: layout.$spacing-03;
+  margin: layout.$spacing-05;
   align-items: center;
   background-color: colors.$white-0;
 

package/src/stock-sources/{delete-stock-modal.component.tsx → delete-stock-source.modal.tsx}

@@ -4,13 +4,13 @@ import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-framework';
 import styles from './delete-stock-modal.scss';
 
-interface DeleteConfirmationProps {
+interface DeleteStockSourceModalProps {
   uuid?: string;
   close: () => void;
   onConfirmation: () => void;
 }
 
-const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfirmation, uuid }) => {
+const DeleteStockSourceModal: React.FC<DeleteStockSourceModalProps> = ({ close, onConfirmation, uuid }) => {
   const { t } = useTranslation();
   const handleCancel = () => close();
   const handleDelete = () => onConfirmation?.();
@@ -39,4 +39,4 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfir
   );
 };
 
-export default DeleteConfirmation;
+export default DeleteStockSourceModal;

package/src/stock-sources/stock-sources-delete/stock-sources-delete.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { type FetchResponse, showModal, showSnackbar } from '@openmrs/esm-framework';
 import { deleteStockSource } from '../stock-sources.resource';
 import { handleMutate } from '../../utils';
-import DeleteConfirmation from '../../stock-user-role-scopes/delete-stock-user-scope-modal.component';
+import DeleteConfirmation from '../../stock-user-role-scopes/delete-stock-user-scope.modal';
 import StockSourcesDeleteActionMenu from './stock-sources-delete.component';
 
 const mockDeleteStockSource = jest.mocked(deleteStockSource);

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

@@ -15,7 +15,6 @@ import {
   TableToolbarContent,
   TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
@@ -63,6 +62,7 @@ const StockSourcesItems: React.FC = () => {
       };
     });
   }, [items]);
+
   const handleFilterChange = (selectedSourceType: string) => {
     setSelectedSourceType(selectedSourceType);
   };
@@ -80,8 +80,9 @@ const StockSourcesItems: React.FC = () => {
 
   return (
     <div className={styles.tableOverride}>
-      <TabPanel>{t('panelDescription', 'List of partners who provide stock to the facility.')}</TabPanel>
-
+      <h2 className={styles.tableHeader}>
+        {t('stockSourcesTableHeader', 'List of partners who provide stock to the facility.')}
+      </h2>
       <DataTable
         rows={filteredTableRows}
         headers={tableHeaders}
@@ -155,7 +156,7 @@ const StockSourcesItems: React.FC = () => {
               <div className={styles.tileContainer}>
                 <Tile className={styles.tile}>
                   <div className={styles.tileContent}>
-                    <p className={styles.content}>{t('noSourcesToDisplay', 'No Stock sources to display')}</p>
+                    <p className={styles.content}>{t('noSourcesToDisplay', 'No stock sources to display')}</p>
                     <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                   </div>
                 </Tile>

package/src/stock-sources/stock-sources-items-table.test.tsx

@@ -213,7 +213,10 @@ describe('StockSourcesItems', () => {
       items: mockItems as unknown as StockSource[],
       isLoading: false,
       totalItems: 2,
-      tableHeaders: [{ id: 0, key: 'name', header: 'Name' }],
+      tableHeaders: [
+        { id: 0, key: 'name', header: 'Name' },
+        { id: 1, key: 'sourceType', header: 'Source Type' },
+      ],
       currentPage: 1,
       pageSizes: [10, 20, 50],
       goTo: jest.fn(),
@@ -223,21 +226,42 @@ describe('StockSourcesItems', () => {
       error: null,
     });
 
+    // Mock the concept data for the filter
+    mockUseConcept.mockReturnValue({
+      items: {
+        uuid: '1',
+        display: 'Source Types',
+        answers: [
+          { uuid: '1', display: 'All' },
+          { uuid: '2', display: 'Internal' },
+          { uuid: '3', display: 'External' },
+        ] as Concept[],
+      } as Concept,
+      isLoading: false,
+      error: null,
+    });
+
     render(<StockSourcesItems />);
 
-    expect(screen.getByText('Source A')).toBeInTheDocument();
-    expect(screen.getByText('Source B')).toBeInTheDocument();
+    // Initial state - both sources should be visible
+    expect(screen.getByText(/source a/i)).toBeInTheDocument();
+    expect(screen.getByText(/source b/i)).toBeInTheDocument();
 
-    const filterInput = screen.getByLabelText('');
-    await user.type(filterInput, 'Internal');
+    // Find and click the source type filter dropdown
+    const filterDropdown = screen.getByRole('combobox', { name: /select source type/i });
+    await user.click(filterDropdown);
 
-    await waitFor(() => {
-      expect(screen.getByText('Source A')).toBeInTheDocument();
-    });
+    // Select "Internal" from the dropdown
+    const internalOption = screen.getByRole('option', { name: /internal/i });
+    await user.click(internalOption);
 
+    // Wait for Source B to disappear
     await waitFor(() => {
-      expect(screen.getByText('Source B')).toBeInTheDocument();
+      expect(screen.queryByText(/source b/i)).not.toBeInTheDocument();
     });
+
+    // Verify Source A is still visible
+    expect(screen.getByText(/source a/i)).toBeInTheDocument();
   });
 
   test('renders a message when no stock sources are available', () => {

package/src/stock-sources/stock-sources.scss

@@ -221,3 +221,8 @@
 .toolbarMenuAction {
   max-width: none;
 }
+
+.tableHeader {
+  @include type.type-style('body-02');
+  margin: layout.$spacing-05 0;
+}

package/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.workspace.tsx

@@ -331,7 +331,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             </>
           )}
         </CheckboxGroup>
-        <FormGroup legendText={t('stockOperation', 'Stock Operations')}>
+        <FormGroup legendText={t('stockOperations', 'Stock operations')}>
           <span className={styles.subTitle}>
             {t('roleDescription', 'The role will be applicable to only selected stock operations.')}
           </span>

package/src/stock-user-role-scopes/{delete-stock-user-scope-modal.component.tsx → delete-stock-user-scope.modal.tsx}

@@ -4,13 +4,13 @@ import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-framework';
 import styles from './delete-stock-user-scope-modal.scss';
 
-interface DeleteConfirmationProps {
+interface DeleteStockUserScopeModalProps {
   uuid?: string;
   close: () => void;
   onConfirmation: () => void;
 }
 
-const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfirmation }) => {
+const DeleteStockUserScopeModal: React.FC<DeleteStockUserScopeModalProps> = ({ close, onConfirmation }) => {
   const { t } = useTranslation();
   const handleCancel = () => close();
   const handleDelete = () => onConfirmation?.();
@@ -37,4 +37,4 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfir
   );
 };
 
-export default DeleteConfirmation;
+export default DeleteStockUserScopeModal;

package/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx

@@ -17,7 +17,6 @@ import {
   TableToolbarContent,
   TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
 } from '@carbon/react';
 import { ArrowDownLeft, ArrowLeft } from '@carbon/react/icons';
@@ -159,12 +158,12 @@ function StockUserRoleScopesItems() {
 
   return (
     <div className={styles.tableOverride}>
-      <TabPanel>
+      <h2 className={styles.tableHeader}>
         {t(
-          'panelDescription',
+          'stockUserRoleScopesTableHeader',
           'To access stock management features, users must have assigned roles specifying location and stock operation type scopes.',
         )}
-      </TabPanel>
+      </h2>
       <DataTable
         headers={tableHeaders}
         isSortable