@openmrs/esm-stock-management-app 3.0.1-pre.845 → 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-operations/stock-operations-table.component.tsx

@@ -1,9 +1,11 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   DataTable,
   DataTableSkeleton,
   DatePicker,
   DatePickerInput,
   InlineLoading,
+  Link,
   Pagination,
   Table,
   TableBody,
@@ -22,22 +24,18 @@ import {
   TableToolbarSearch,
   TabPanel,
   Tile,
-  Link,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, StockFilters } from '../constants';
-import { ResourceRepresentation } from '../core/api/api';
-import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
 import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import { handleMutate } from '../utils';
+import { ResourceRepresentation } from '../core/api/api';
+import { useStockOperationPages } from './stock-operations-table.resource';
 import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
 import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
 import StockOperationsFilters from './stock-operations-filters.component';
-import { useStockOperationPages } from './stock-operations-table.resource';
-
 import StockOperationExpandedRow from './add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component';
 import styles from './stock-operations-table.scss';
 
@@ -47,6 +45,7 @@ interface StockOperationsTableProps {
 
 const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const { t } = useTranslation();
+
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
@@ -96,46 +95,48 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const tableRows = useMemo(() => {
-    return items?.map((stockOperation, index) => {
-      const threshHold = 1;
-      const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
-      const commonNames =
-        stockOperation?.stockOperationItems
-          ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
-          .map((item) => item.commonName)
-          .join(', ') ?? '';
+  const tableRows = useMemo(
+    () =>
+      items?.map((stockOperation, index) => {
+        const threshHold = 1;
+        const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
+        const commonNames =
+          stockOperation?.stockOperationItems
+            ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
+            .map((item) => item.commonName)
+            .join(', ') ?? '';
 
-      return {
-        ...stockOperation,
-        id: stockOperation?.uuid,
-        key: `key-${stockOperation?.uuid}`,
-        operationTypeName: `${stockOperation?.operationTypeName}`,
-        operationNumber: (
-          <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
-        ),
-        stockOperationItems: {
-          commonNames,
-          more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
-        },
-        status: `${stockOperation?.status}`,
-        source: `${stockOperation?.sourceName ?? ''}`,
-        destination: `${stockOperation?.destinationName ?? ''}`,
-        location: (
-          <>
-            {stockOperation?.sourceName ?? ''}
-            {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
-            {stockOperation?.destinationName ?? ''}
-          </>
-        ),
-        responsiblePerson: `${
-          stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
-        } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
-        operationDate: formatDisplayDate(stockOperation?.operationDate),
-        actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
-      };
-    });
-  }, [items]);
+        return {
+          ...stockOperation,
+          id: stockOperation?.uuid,
+          key: `key-${stockOperation?.uuid}`,
+          operationTypeName: `${stockOperation?.operationTypeName}`,
+          operationNumber: (
+            <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
+          ),
+          stockOperationItems: {
+            commonNames,
+            more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
+          },
+          status: `${stockOperation?.status}`,
+          source: `${stockOperation?.sourceName ?? ''}`,
+          destination: `${stockOperation?.destinationName ?? ''}`,
+          location: (
+            <>
+              {stockOperation?.sourceName ?? ''}
+              {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
+              {stockOperation?.destinationName ?? ''}
+            </>
+          ),
+          responsiblePerson: `${
+            stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
+          } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
+          operationDate: formatDisplayDate(stockOperation?.operationDate),
+          actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
+        };
+      }),
+    [items],
+  );
 
   if (isLoading && !filterApplied) {
     return (
@@ -144,26 +145,22 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   }
 
   return (
-    <div className={styles.tableOverride}>
+    <div>
       <TabPanel>{t('stockOperationTrackMovement', 'Stock operations to track movement of stock.')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
       <DataTable
-        rows={tableRows}
         headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
+        isSortable
+        rows={tableRows}
+        useZebraStyles
         render={({
-          rows,
-          headers,
+          expandRow,
+          getExpandedRowProps,
           getHeaderProps,
-          getTableProps,
           getRowProps,
+          getTableProps,
+          headers,
           onInputChange,
-          getExpandedRowProps,
-          expandRow,
+          rows,
         }) => (
           <TableContainer>
             <TableToolbar
@@ -175,34 +172,30 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
             >
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch
-                  className={styles.patientListSearch}
                   expanded
+                  labelText={t('searchStockOperations', 'Search stock operations')}
                   onChange={onInputChange}
-                  placeholder="Filter Table"
-                  size="sm"
+                  placeholder={t('searchStockOperations', 'Search stock operations')}
                 />
-                <div className={styles.filterContainer}>
+                <div className={styles.container}>
                   <DatePicker
-                    className={styles.dateAlign}
+                    className={styles.datePicker}
                     datePickerType="range"
                     dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    onChange={([startDate, endDate]) => handleDateFilterChange([startDate, endDate])}
                     value={[selectedFromDate, selectedToDate]}
-                    onChange={([startDate, endDate]) => {
-                      handleDateFilterChange([startDate, endDate]);
-                    }}
                   >
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('startDate', 'Start date')} placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('endDate', 'End date')} placeholder={DATE_PICKER_FORMAT} />
                   </DatePicker>
-
                   <StockOperationsFilters filterName={StockFilters.SOURCES} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.STATUS} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.OPERATION} onFilterChange={handleOnFilterChange} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
 
                 <StockOperationTypesSelector />

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

@@ -1,7 +1,7 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
   background-color: $ui-02;
@@ -34,23 +34,20 @@
 .toolbarContent {
   display: flex;
   align-items: center;
+  height: layout.$spacing-09;
+  margin-top: layout.$spacing-05;
 }
 
-.filterContainer {
+.container {
   display: flex;
   align-items: center;
-}
-
-.dateAlign {
-  padding-top: layout.$spacing-03;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .filterContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: layout.$spacing-05;
 }
 
 .rowLoadingContainer {
@@ -96,3 +93,15 @@
 .relatedTransactionHeader {
   color: colors.$green-50;
 }
+
+.toolbarMenuAction {
+  max-width: none;
+}
+
+.dataTableSkeleton {
+  margin-top: layout.$spacing-09;
+}
+
+.datePicker {
+  margin-bottom: layout.$spacing-05;
+}

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

@@ -3,7 +3,7 @@ import StockOperations from './stock-operations-table.component';
 
 function StockOperationsComponent() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockOperations />
     </div>
   );

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