@openmrs/esm-stock-management-app 3.0.1-pre.848 → 3.0.1-pre.853

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

@@ -1,20 +1,20 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import { Button, Column, InlineLoading, RadioButton, RadioButtonGroup, Stack } from '@carbon/react';
 import { ArrowLeft, ArrowRight, Departure, ListChecked, Save, SendFilled } from '@carbon/react/icons';
-import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { createStockOperation, deleteStockOperationItem, updateStockOperation } from '../../stock-operations.resource';
 import { extractErrorMessagesFromResponse } from '../../../constants';
-import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
-import { type StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
+import { handleMutate } from '../../../utils';
 import { OperationType, type StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
 import { otherUser } from '../../../core/utils/utils';
-import { handleMutate } from '../../../utils';
 import { showActionDialogButton } from '../../stock-operation.utils';
-import { createStockOperation, deleteStockOperationItem, updateStockOperation } from '../../stock-operations.resource';
+import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { type StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
 import { type StockOperationItemDtoSchema } from '../../validation-schema';
-import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
 import styles from '../stock-operation-form.scss';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
 
 type StockOperationSubmissionFormStepProps = {
   onPrevious?: () => void;
@@ -23,6 +23,7 @@ type StockOperationSubmissionFormStepProps = {
   onNext?: () => void;
   dismissWorkspace?: () => void;
 };
+
 const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
   onPrevious,
   stockOperationType,
@@ -152,12 +153,12 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
         <RadioButtonGroup
           name="rbgApprovelRequired"
           legendText={t('doesThisTransactionRequireApproval', 'Does the transaction require approval ?')}
-          onChange={handleRadioButtonChange}
+          onChange={(value) => handleRadioButtonChange(value === 'true')}
           readOnly={!editable}
-          valueSelected={approvalRequired === true ? true : approvalRequired === false ? false : null}
+          valueSelected={approvalRequired === true ? 'true' : approvalRequired === false ? 'false' : null}
         >
-          <RadioButton value={true} id="rbgApprovelRequired-true" labelText={t('yes', 'Yes')} />
-          <RadioButton value={false} id="rbgApprovelRequired-false" labelText={t('no', 'No')} />
+          <RadioButton value="true" id="rbgApprovelRequired-true" labelText={t('yes', 'Yes')} />
+          <RadioButton value="false" id="rbgApprovelRequired-false" labelText={t('no', 'No')} />
         </RadioButtonGroup>
       </Column>
       {editable && (

package/src/stock-operations/stock-operations-forms/stock-item-form/stock-item-form.scss

@@ -16,6 +16,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/stock-operations/stock-operations-forms/stock-item-form/stock-item-form.workspace.tsx

@@ -1,3 +1,5 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import {
   Button,
   ButtonSet,
@@ -10,8 +12,7 @@ import {
   TextInput,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DefaultWorkspaceProps, useConfig } from '@openmrs/esm-framework';
-import React, { useMemo } from 'react';
+import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { type z } from 'zod';
@@ -20,14 +21,14 @@ import {
   operationFromString,
   type StockOperationType,
 } from '../../../core/api/types/stockOperation/StockOperationType';
-import { useStockItem } from '../../../stock-items/stock-items.resource';
 import { type BaseStockOperationItemFormData, getStockOperationItemFormSchema } from '../../validation-schema';
-import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import { type ConfigObject } from '../../../config-schema';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
 import BatchNoSelector from '../input-components/batch-no-selector.component';
 import QtyUomSelector from '../input-components/quantity-uom-selector.component';
-import styles from './stock-item-form.scss';
 import UniqueBatchNoEntryInput from '../input-components/unique-batch-no-entry-input.component';
-import { type ConfigObject } from '../../../config-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import styles from './stock-item-form.scss';
 
 export interface StockItemFormProps {
   stockOperationType: StockOperationType;
@@ -37,18 +38,19 @@ export interface StockItemFormProps {
 }
 
 const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stockOperationItem, onSave, onBack }) => {
+  const isTablet = useLayoutType() === 'tablet';
   const operationType = useMemo(() => {
     return operationFromString(stockOperationType.operationType);
   }, [stockOperationType]);
-  const formschema = useMemo(() => {
+  const formSchema = useMemo(() => {
     return getStockOperationItemFormSchema(operationType);
   }, [operationType]);
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
   const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
 
-  const fields = formschema.keyof().options;
-  const form = useForm<z.infer<typeof formschema>>({
-    resolver: zodResolver(formschema),
+  const fields = formSchema.keyof().options;
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     defaultValues: stockOperationItem,
     mode: 'all',
   });
@@ -66,9 +68,10 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
     return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
   }, [item, useItemCommonNameAsDisplay, t]);
 
-  const onSubmit = (data: z.infer<typeof formschema>) => {
+  const onSubmit = (data: z.infer<typeof formSchema>) => {
     onSave?.(data);
   };
+
   return (
     <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
       <Stack gap={4} className={styles.grid}>
@@ -197,7 +200,12 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
         )}
       </Stack>
 
-      <ButtonSet className={styles.buttonSet}>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}
+      >
         <Button className={styles.button} kind="secondary" onClick={onBack}>
           {t('discard', 'Discard')}
         </Button>

package/src/stock-operations/stock-operations-forms/stock-operation-form.scss

@@ -17,6 +17,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stepper.scss

@@ -5,8 +5,7 @@
 .layer {
   display: flex;
   flex-direction: row;
-  gap: layout.$spacing-05;
-  padding: layout.$spacing-03;
+  padding: 0 layout.$spacing-03 0;
   height: 100%;
 }
 
@@ -40,5 +39,4 @@
 
 .content {
   flex: 1;
-  overflow: auto;
 }

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component.tsx

@@ -1,5 +1,5 @@
-import { Layer } from '@carbon/react';
 import React from 'react';
+import { Layer } from '@carbon/react';
 import styles from './stepper.scss';
 
 export type Step = {
@@ -17,6 +17,7 @@ type StockOperationStepperProps = {
   selectedIndex?: number;
   onChange?: (index: number) => void;
 };
+
 const StockOperationStepper: React.FC<StockOperationStepperProps> = ({
   steps,
   hasContainer,

package/src/stock-reports/generate-report/create-stock-report.scss

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .formContainer {
@@ -11,6 +11,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/stock-reports/generate-report/create-stock-report.workspace.tsx

@@ -1,48 +1,48 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
-  InlineLoading,
+  ButtonSet,
+  Checkbox,
   ComboBox,
-  DatePickerInput,
   DatePicker,
+  DatePickerInput,
+  InlineLoading,
+  NumberInput,
+  RadioButton,
+  RadioButtonGroup,
   Select,
   SelectItem,
-  RadioButtonGroup,
-  RadioButton,
-  Form,
-  Checkbox,
-  NumberInput,
-  ButtonSet,
 } from '@carbon/react';
-import styles from './create-stock-report.scss';
-import { useTranslation } from 'react-i18next';
-import { useReportTypes } from '../stock-reports.resource';
-import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatForDatePicker, today } from '../../constants';
-import { Controller, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { type StockReportSchema, reportSchema } from '../report-validation-schema';
-import { useConcept, useStockTagLocations } from '../../stock-lookups/stock-lookups.resource';
 import {
   type ConfigObject,
   type DefaultWorkspaceProps,
+  getCoreTranslation,
   restBaseUrl,
   showSnackbar,
   useConfig,
-  getCoreTranslation,
+  useLayoutType,
 } from '@openmrs/esm-framework';
-import { type Concept } from '../../core/api/types/concept/Concept';
-import { createBatchJob } from '../../stock-batch/stock-batch.resource';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
-  ReportParameter,
   getParamDefaultLimit,
   getReportEndDateLabel,
   getReportLimitLabel,
   getReportStartDateLabel,
+  ReportParameter,
 } from '../ReportType';
-import { formatDisplayDate } from '../../core/utils/datetimeUtils';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatForDatePicker, today } from '../../constants';
 import { BatchJobTypeReport } from '../../core/api/types/BatchJob';
+import { createBatchJob } from '../../stock-batch/stock-batch.resource';
+import { formatDisplayDate } from '../../core/utils/datetimeUtils';
 import { handleMutate } from '../../utils';
-import { Save } from '@carbon/react/icons';
+import { type Concept } from '../../core/api/types/concept/Concept';
+import { type StockReportSchema, reportSchema } from '../report-validation-schema';
+import { useConcept, useStockTagLocations } from '../../stock-lookups/stock-lookups.resource';
+import { useReportTypes } from '../stock-reports.resource';
+import styles from './create-stock-report.scss';
 
 type CreateReportProps = DefaultWorkspaceProps & {
   model?: ReportModel;
@@ -76,9 +76,11 @@ export interface ReportModel {
   mostLeastMovingName?: string;
   fullFillment?: string[];
 }
+
 const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) => {
   const { t } = useTranslation();
   const { stockItemCategoryUUID } = useConfig<ConfigObject>();
+  const isTablet = useLayoutType() === 'tablet';
 
   const { reportTypes, isLoading } = useReportTypes();
   const { stockLocations } = useStockTagLocations();
@@ -640,12 +642,17 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
         )}
       </div>
 
-      <ButtonSet className={styles.buttonSet}>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}
+      >
         <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
-          {getCoreTranslation('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button} onClick={handleSave}>
-          {getCoreTranslation('save', 'Save')}
+          {getCoreTranslation('save')}
         </Button>
       </ButtonSet>
     </div>

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

@@ -35,7 +35,7 @@ const StockReportParameters = (props: StockReportParametersProps) => {
       parseParametersToMap(props.model?.parameters, ['param.report']),
     );
   } catch (ex) {
-    console.log(ex);
+    console.error(ex);
   }
 
   return <span>{parameterMap}</span>;

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

@@ -37,7 +37,7 @@ const StockReportStatus = (props: StockReportStatusProps) => {
   try {
     executionStateMap = displayParameterMap(props.model?.uuid, parseParametersToMap(props.model?.executionState));
   } catch (ex) {
-    console.log(ex);
+    console.error(ex);
   }
   return (
     <div className={styles.statusContainer}>

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

@@ -1,32 +1,39 @@
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  Button,
   DataTable,
   DataTableSkeleton,
-  TabPanel,
+  InlineLoading,
   Pagination,
   Table,
   TableBody,
   TableCell,
   TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
   TableHead,
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
+  TableToolbarMenu,
   TableToolbarSearch,
+  TabPanel,
   Tile,
-  Button,
-  InlineLoading,
-  TableToolbarMenu,
-  TableToolbarAction,
-  TableExpandHeader,
-  TableExpandRow,
-  TableExpandedRow,
 } from '@carbon/react';
+import {
+  CheckmarkOutline,
+  Copy,
+  Download,
+  IncompleteCancel,
+  MisuseOutline,
+  View,
+  WarningAltFilled,
+} from '@carbon/react/icons';
 import { isDesktop, restBaseUrl, useSession } from '@openmrs/esm-framework';
-import NewReportActionButton from './new-report-button.component';
-import styles from './stock-reports.scss';
 import { useGetReports } from '../stock-reports.resource';
 import {
   URL_BATCH_JOB_ARTIFACT,
@@ -41,19 +48,12 @@ import {
   BatchJobStatusFailed,
   BatchJobStatusPending,
 } from '../../core/api/types/BatchJob';
-import {
-  CheckmarkOutline,
-  Copy,
-  Download,
-  IncompleteCancel,
-  MisuseOutline,
-  View,
-  WarningAltFilled,
-} from '@carbon/react/icons';
 import { handleMutate } from '../../utils';
 import { PrivilagedView } from '../../core/components/privilages-component/privilages.component';
+import NewReportActionButton from './new-report-button.component';
 import StockReportStatus from './stock-report-status.component';
 import StockReportParameters from './stock-report-parameters.component';
+import styles from './stock-reports.scss';
 
 const StockReports: React.FC = () => {
   const { t } = useTranslation();
@@ -202,12 +202,9 @@ const StockReports: React.FC = () => {
   }
 
   return (
-    <div className={styles.tableOverride}>
+    <div className={styles.container}>
       <TabPanel>{t('ReportDescription', 'List of reports requested by users')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
+
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
@@ -225,7 +222,9 @@ const StockReports: React.FC = () => {
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch persistent onChange={onInputChange} />
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
                 {canCreateReport && <NewReportActionButton />}
               </TableToolbarContent>

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

@@ -1,8 +1,12 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
 @use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.container {
+  margin: layout.$spacing-05;
+}
+
 .content {
   @include type.type-style('heading-compact-02');
   color: $text-02;
@@ -78,3 +82,7 @@
     margin-right: 4px;
   }
 }
+
+.toolbarMenuAction {
+  max-width: none;
+}

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

@@ -2,10 +2,6 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.section {
-  margin: layout.$spacing-03;
-}
-
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
@@ -15,6 +11,7 @@
 .modalBody {
   padding-bottom: layout.$spacing-05;
 }
+
 .formContainer {
   display: flex;
   flex-direction: column;
@@ -24,6 +21,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -39,3 +37,12 @@
 .body {
   padding: 1rem;
 }
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}

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

@@ -1,24 +1,16 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import StockSourcesAddOrUpdate from './add-stock-sources.workspace';
+import { render, screen } from '@testing-library/react';
+import { type FetchResponse, useConfig } from '@openmrs/esm-framework';
+import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
 import { createOrUpdateStockSource } from '../stock-sources.resource';
-import { useConfig } from '@openmrs/esm-framework';
+import StockSourcesAddOrUpdate from './add-stock-sources.workspace';
 
-import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
+const mockCreateOrUpdateStockSource = jest.mocked(createOrUpdateStockSource);
+const mockUseConfig = jest.mocked(useConfig);
 
-jest.mock('../stock-sources.resource');
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-  useConfig: jest.fn(),
-  getCoreTranslation: jest.fn((key, defaultValue) => {
-    const translations: Record<string, string> = {
-      cancel: 'Cancel',
-      save: 'Save',
-    };
-    return translations[key] ?? defaultValue;
-  }),
+jest.mock('../stock-sources.resource', () => ({
+  createOrUpdateStockSource: jest.fn(),
 }));
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
@@ -34,7 +26,7 @@ jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
 
 describe('StockSourcesAddOrUpdate', () => {
   beforeEach(() => {
-    (useConfig as jest.Mock).mockReturnValue({ stockSourceTypeUUID: 'mock-uuid' });
+    mockUseConfig.mockReturnValue({ stockSourceTypeUUID: 'mock-uuid' });
   });
 
   it('renders correctly without model prop', () => {
@@ -46,9 +38,9 @@ describe('StockSourcesAddOrUpdate', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-    expect(screen.getByLabelText('Full Name')).toBeInTheDocument();
-    expect(screen.getByLabelText('Acronym/Code')).toBeInTheDocument();
-    expect(screen.getByLabelText('Source Type')).toBeInTheDocument();
+    expect(screen.getByLabelText(/full name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/acronym\/code/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/source type/i)).toBeInTheDocument();
   });
 
   it('renders correctly with model prop', () => {
@@ -110,9 +102,9 @@ describe('StockSourcesAddOrUpdate', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-    expect(screen.getByLabelText('Full Name')).toHaveValue('Test Source');
-    expect(screen.getByLabelText('Acronym/Code')).toHaveValue('TS');
-    expect(screen.getByLabelText('Source Type')).toHaveValue('type1');
+    expect(screen.getByLabelText(/full name/i)).toHaveValue('Test Source');
+    expect(screen.getByLabelText(/acronym\/code/i)).toHaveValue('TS');
+    expect(screen.getByLabelText(/source type/i)).toHaveValue('type1');
   });
 
   it('updates form fields correctly on user input', async () => {
@@ -126,16 +118,21 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.type(screen.getByLabelText('Full Name'), 'New Source');
-    await user.type(screen.getByLabelText('Acronym/Code'), 'NS');
+    await user.type(screen.getByLabelText(/full name/i), 'New Source');
+    await user.type(screen.getByLabelText(/acronym\/code/i), 'NS');
 
-    expect(screen.getByLabelText('Full Name')).toHaveValue('New Source');
-    expect(screen.getByLabelText('Acronym/Code')).toHaveValue('NS');
+    expect(screen.getByLabelText(/full name/i)).toHaveValue('New Source');
+    expect(screen.getByLabelText(/acronym\/code/i)).toHaveValue('NS');
   });
 
   it('calls createOrUpdateStockSource with correct data on form submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
+    mockCreateOrUpdateStockSource.mockResolvedValue({
+      data: {},
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+    } as unknown as FetchResponse);
 
     render(
       <StockSourcesAddOrUpdate
@@ -146,15 +143,20 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.type(screen.getByLabelText('Full Name'), 'New Source');
-    await user.type(screen.getByLabelText('Acronym/Code'), 'NS');
-    await user.selectOptions(screen.getByLabelText('Source Type'), 'type2');
+    await user.type(screen.getByLabelText(/full name/i), 'New Source');
+    await user.type(screen.getByLabelText(/acronym\/code/i), 'NS');
+    await user.selectOptions(screen.getByLabelText(/source type/i), 'type2');
     await user.click(screen.getByText('Save'));
   });
 
   it('shows success message and closes overlay on successful submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
+    mockCreateOrUpdateStockSource.mockResolvedValue({
+      data: {},
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+    } as unknown as FetchResponse);
 
     render(
       <StockSourcesAddOrUpdate
@@ -165,12 +167,12 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Save'));
+    await user.click(screen.getByText(/save/i));
   });
 
   it('shows error message on failed submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockRejectedValue(new Error('API Error'));
+    mockCreateOrUpdateStockSource.mockRejectedValue(new Error('API Error'));
 
     render(
       <StockSourcesAddOrUpdate
@@ -181,7 +183,7 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Save'));
+    await user.click(screen.getByText(/save/i));
   });
 
   it('closes overlay when cancel button is clicked', async () => {
@@ -195,6 +197,6 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText(/cancel/i));
   });
 });