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

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

@@ -1,3 +1,4 @@
+import React, { useMemo } from 'react';
 import {
   Button,
   ButtonSet,
@@ -9,12 +10,11 @@ import {
   Stack,
   TextInput,
 } from '@carbon/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { type z } from 'zod';
 import { type ConfigObject } from '../../../config-schema';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatForDatePicker, today } from '../../../constants';
@@ -48,7 +48,8 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
   const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
 
   const fields = formSchema.keyof().options;
-  const form = useForm<z.infer<typeof formSchema>>({
+  type FormData = z.infer<typeof formSchema>;
+  const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: stockOperationItem,
     mode: 'all',
@@ -77,21 +78,21 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
         <p className={styles.title}>{useItemCommonNameAsDisplay ? commonName : drugName}</p>
 
         {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
-          fields.includes('batchNo' as any) && (
+          fields.includes('batchNo' as keyof FormData) && (
             <Column>
               <Controller
                 control={form.control}
                 defaultValue={stockOperationItem?.batchNo}
-                name={'batchNo' as any}
+                name={'batchNo' as keyof FormData}
                 render={({ field, fieldState: { error } }) => (
                   <TextInput
-                    label={t('qty', 'Qty')}
                     maxLength={50}
                     {...field}
+                    value={String(field.value ?? '')}
                     invalidText={error?.message}
-                    invalid={error?.message}
-                    placeholder={t('batchNumber', 'Batch Number')}
-                    labelText={t('batchNumber', 'Batch Number')}
+                    invalid={!!error?.message}
+                    placeholder={t('batchNumber', 'Batch number')}
+                    labelText={t('batchNumber', 'Batch number')}
                     id="batchNumber"
                   />
                 )}
@@ -103,7 +104,7 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
           <Column>
             <Controller
               control={form.control}
-              name={'stockBatchUuid' as any}
+              name={'stockBatchUuid' as keyof FormData}
               render={({ field, fieldState: { error } }) => (
                 <BatchNoSelector
                   initialValue={stockOperationItem?.stockBatchUuid}
@@ -116,37 +117,35 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
           </Column>
         )}
         {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
-          fields.includes('expiration' as any) && (
+          fields.includes('expiration' as keyof FormData) && (
             <Column>
               <Controller
                 control={form.control}
-                name={'expiration' as any}
-                render={({ field, fieldState: { error } }) => (
-                  <DatePicker
-                    id={`expiration`}
-                    datePickerType="single"
-                    minDate={formatForDatePicker(today())}
-                    locale="en"
-                    className={styles.datePickerInput}
-                    dateFormat={DATE_PICKER_CONTROL_FORMAT}
-                    value={field.value}
-                    name={field.name}
-                    disabled={field.disabled}
-                    onChange={([newDate]) => {
-                      field.onChange(newDate);
-                    }}
-                  >
-                    <DatePickerInput
-                      autoComplete="off"
-                      id={`expiration-input`}
-                      name="operationDate"
-                      placeholder={DATE_PICKER_FORMAT}
-                      labelText={t('expiriation', 'Expiration Date')}
-                      invalid={error?.message}
-                      invalidText={error?.message}
-                    />
-                  </DatePicker>
-                )}
+                name={'expiration' as keyof FormData}
+                render={({ field, fieldState: { error } }) => {
+                  const { value, onChange, onBlur, name, ref } = field;
+                  return (
+                    <DatePicker
+                      datePickerType="single"
+                      minDate={formatForDatePicker(today())}
+                      locale="en"
+                      className={styles.datePickerInput}
+                      dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                      value={(value as unknown as Date) || null}
+                      onChange={([newDate]) => {
+                        onChange(newDate);
+                      }}
+                    >
+                      <DatePickerInput
+                        id={`expiration-input`}
+                        placeholder={DATE_PICKER_FORMAT}
+                        labelText={t('expiration', 'Expiration date')}
+                        invalid={!!error?.message}
+                        invalidText={error?.message}
+                      />
+                    </DatePicker>
+                  );
+                }}
               />
             </Column>
           )}
@@ -163,9 +162,9 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
                 hideSteppers
                 id={`qty`}
                 {...field}
-                label={t('qty', 'Qty')}
+                label={t('quantity', 'Quantity')}
                 invalidText={error?.message}
-                invalid={error?.message}
+                invalid={!!error?.message}
               />
             )}
           />
@@ -185,21 +184,29 @@ const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stock
           />
         </Column>
 
-        {operationTypePermision?.canCaptureQuantityPrice && fields.includes('purchasePrice' as any) && (
+        {operationTypePermision?.canCaptureQuantityPrice && fields.includes('purchasePrice' as keyof FormData) && (
           <Column>
             <Controller
               control={form.control}
-              name={'purchasePrice' as any}
-              render={({ field, fieldState: { error } }) => (
-                <TextInput
-                  {...field}
-                  labelText={t('purchasePrice', 'Purchase Price')}
-                  invalid={error?.message}
-                  invalidText={error?.message}
-                  id={`purchaseprice`}
-                  placeholder={t('purchasePrice', 'Purchase Price')}
-                />
-              )}
+              name={'purchasePrice' as keyof FormData}
+              render={({ field, fieldState: { error } }) => {
+                const { value, onChange, onBlur, disabled, name, ref } = field;
+                return (
+                  <TextInput
+                    value={String(value ?? '')}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    disabled={disabled}
+                    name={name}
+                    ref={ref}
+                    labelText={t('purchasePrice', 'Purchase Price')}
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    id={`purchaseprice`}
+                    placeholder={t('purchasePrice', 'Purchase Price')}
+                  />
+                );
+              }}
             />
           </Column>
         )}

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

@@ -80,7 +80,7 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
         stockOperation?.responsiblePersonUuid ?? // if person uuid exist, make it default
         (stockOperation?.responsiblePersonOther ? otherUser.uuid : undefined) ?? // if other resp person exist, default other user uuid
         (autoPopulateResponsiblePerson ? defaultLoggedUserUuid : undefined), //Else default login user if configured
-      operationDate: stockOperation?.operationDate ? parseDate(stockOperation!.operationDate as any) : today(),
+      operationDate: stockOperation?.operationDate ? parseDate(String(stockOperation.operationDate)) : today(),
       remarks: stockOperation?.remarks ?? '',
 
       operationTypeUuid: stockOperation?.operationTypeUuid ?? stockOperationType?.uuid,
@@ -89,7 +89,7 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
       stockOperationItems:
         stockOperation?.stockOperationItems?.map((item) =>
           pick(
-            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
+            { ...item, expiration: item.expiration ? parseDate(String(item.expiration)) : undefined },
             stockOperationItemFormSchema.keyof().options,
           ),
         ) ?? [],
@@ -102,16 +102,18 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
           sourceUuid: _stockOperation?.destinationUuid,
           destinationUuid: _stockOperation?.sourceUuid,
           operationTypeUuid: stockOperationType?.uuid,
-          stockOperationItems: (_stockOperation?.stockOperationItems?.map((item) =>
-            pick(
-              { ...item, expiration: item?.expiration ? parseDate(item.expiration as any) : undefined },
-              stockOperationItemFormSchema.keyof().options,
-            ),
-          ) ?? []) as any,
+          stockOperationItems: (_stockOperation?.stockOperationItems && _stockOperation.stockOperationItems.length > 0
+            ? _stockOperation.stockOperationItems.map((item) =>
+                pick(
+                  { ...item, expiration: item?.expiration ? parseDate(String(item.expiration)) : undefined },
+                  stockOperationItemFormSchema.keyof().options,
+                ),
+              )
+            : []) as [BaseStockOperationItemFormData, ...BaseStockOperationItemFormData[]],
           requisitionStockOperationUuid: stockRequisitionUuid,
           responsiblePersonUuid: _stockOperation?.responsiblePersonUuid,
           responsiblePersonOther: _stockOperation?.responsiblePersonOther,
-          operationDate: _stockOperation?.operationDate ? parseDate(_stockOperation!.operationDate as any) : today(),
+          operationDate: _stockOperation?.operationDate ? parseDate(String(_stockOperation.operationDate)) : today(),
         }
       : undefined,
     resolver: zodResolver(formschema),
@@ -125,14 +127,17 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
         stockOperationType,
         stockOperationItem,
         onSave: (data) => {
-          const items = (form.getValues('stockOperationItems') ?? []) as Array<BaseStockOperationItemFormData>;
+          const items = (form.getValues('stockOperationItems') ?? []) as BaseStockOperationItemFormData[];
           const index = items.findIndex((i) => i.uuid === data.uuid);
           if (index === -1) {
             items.push(data);
           } else {
             items[index] = data;
           }
-          form.setValue('stockOperationItems', items as any);
+          form.setValue(
+            'stockOperationItems',
+            items as [BaseStockOperationItemFormData, ...BaseStockOperationItemFormData[]],
+          );
           setRenderItemForm(false);
           setItemFormProps(undefined);
         },
@@ -159,7 +164,7 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
         disabled: !stockOperation,
       },
       {
-        name: t('stockItems', 'Stock Items'),
+        name: t('stockItems', 'Stock items'),
         component: (
           <StockOperationItemsFormStep
             stockOperation={stockOperation}

package/src/stock-operations/stock-operations-modal/stock-operations-completed-dispatch-button.component.tsx

@@ -27,7 +27,7 @@ const StockOperationCompleteDispatchButton: React.FC<StockOperationCompleteDispa
 
   return (
     <Button onClick={launchcompletedDispatchModal} renderIcon={(props) => <Arrival size={16} {...props} />}>
-      {t('complete', 'Complete Dispatch ')}
+      {t('completeDispatch', 'Complete dispatch')}
     </Button>
   );
 };

package/src/stock-operations/stock-operations-modal/stock-operations-issue-stock-button.component.tsx

@@ -29,7 +29,7 @@ const StockOperationIssueStockButton: React.FC<StockOperationIssueStockButtonPro
     if (error) {
       showSnackbar({
         kind: 'error',
-        title: t('stockOperationError', 'Error loading stock operation types'),
+        title: t('stockOperationTypesError', 'Error loading stock operation types'),
         subtitle: error?.message,
       });
     }

package/src/stock-operations/stock-operations-modal/stock-operations-print-button.component.tsx

@@ -76,7 +76,11 @@ const StockOperationPrintButton: React.FC<StockOperationCancelButtonProps> = ({
         inventoryFilter.groupBy = 'LocationStockItem';
         inventoryFilter.includeStockItemName = 'true';
 
-        inventoryFilter.date = (parentOperation?.dateCreated ?? operation?.dateCreated) as any;
+        inventoryFilter.date = parentOperation?.dateCreated
+          ? new Date(parentOperation.dateCreated).toISOString()
+          : operation?.dateCreated
+          ? new Date(operation.dateCreated).toISOString()
+          : null;
         // get stock item inventory
         const res = await getStockItemInventory(inventoryFilter);
         itemInventory = res.data?.results;
@@ -119,7 +123,7 @@ const StockOperationPrintButton: React.FC<StockOperationCancelButtonProps> = ({
       renderIcon={(props) => <Printer size={16} {...props} />}
     >
       {loading || isLoading ? (
-        <InlineLoading description={t('loading', 'Loading') + '...'} iconDescription={t('loading', 'Loading')} />
+        <InlineLoading description={t('loadingPlaceholder', 'Loading...')} iconDescription={t('loading', 'Loading')} />
       ) : (
         t('print', 'Print')
       )}

package/src/stock-operations/stock-operations-modal/stock-operations-reject-button.component.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-
 import { Button } from '@carbon/react';
-import { showModal } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 import { Repeat } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
 import { type StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
 
 interface StockOperationRejectButtonProps {
@@ -22,8 +21,8 @@ const StockOperationRejectButton: React.FC<StockOperationRejectButtonProps> = ({
   }, [operation]);
 
   return (
-    <Button onClick={launchRejectModal} kind="" renderIcon={(props) => <Repeat size={16} {...props} />}>
-      {t('reject', 'Reject ')}
+    <Button onClick={launchRejectModal} renderIcon={(props) => <Repeat size={16} {...props} />}>
+      {t('reject', 'Reject')}
     </Button>
   );
 };

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

@@ -109,7 +109,9 @@ const StockOperationsModal: React.FC<StockOperationsModalProps> = ({ title, requ
         <ModalBody>
           <div className={styles.modalBody}>
             <section className={styles.section}>
-              <h5 className={styles.section}>Would you really like to {title} the operation ?</h5>
+              <h5 className={styles.section}>
+                {t('confirmOperation', 'Would you really like to {{title}} the operation?', { title })}
+              </h5>
             </section>
             <br />
             {requireReason && (
@@ -118,7 +120,7 @@ const StockOperationsModal: React.FC<StockOperationsModalProps> = ({ title, requ
                   labelText={t('notes', 'Please explain the reason:')}
                   id="nextNotes"
                   name="nextNotes"
-                  invalidText="Required"
+                  invalidText={t('required', 'Required')}
                   maxCount={500}
                   enableCounter
                   onChange={(e) => setNotes(e.target.value)}

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

@@ -148,16 +148,12 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   }
 
   return (
-    <div>
+    <>
       <h2 className={styles.tableHeader}>
         {t('stockOperationsTableHeader', 'Stock operations to track movement of stock.')}
       </h2>
-      <DataTable
-        headers={tableHeaders}
-        isSortable
-        rows={tableRows}
-        useZebraStyles
-        render={({
+      <DataTable headers={tableHeaders} isSortable rows={tableRows} useZebraStyles>
+        {({
           expandRow,
           getExpandedRowProps,
           getHeaderProps,
@@ -190,8 +186,16 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                     onChange={([startDate, endDate]) => handleDateFilterChange([startDate, endDate])}
                     value={[selectedFromDate, selectedToDate]}
                   >
-                    <DatePickerInput labelText={t('startDate', 'Start date')} placeholder={DATE_PICKER_FORMAT} />
-                    <DatePickerInput labelText={t('endDate', 'End date')} placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput
+                      id="stock-operations-start-date"
+                      labelText={t('startDate', 'Start date')}
+                      placeholder={DATE_PICKER_FORMAT}
+                    />
+                    <DatePickerInput
+                      id="stock-operations-end-date"
+                      labelText={t('endDate', 'End date')}
+                      placeholder={DATE_PICKER_FORMAT}
+                    />
                   </DatePicker>
                   <StockOperationsFilters filterName={StockFilters.SOURCES} onFilterChange={handleOnFilterChange} />
                   <StockOperationsFilters filterName={StockFilters.STATUS} onFilterChange={handleOnFilterChange} />
@@ -274,12 +278,12 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
             ) : null}
             {Boolean(filterApplied && isLoading) && (
               <div className={styles.rowLoadingContainer}>
-                <InlineLoading description={t('loading', 'Loading...')} />
+                <InlineLoading description={t('loadingPlaceholder', 'Loading...')} />
               </div>
             )}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       {items.length > 0 && (
         <Pagination
           page={currentPage}
@@ -297,7 +301,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
           className={styles.paginationOverride}
         />
       )}
-    </div>
+    </>
   );
 };
 

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

@@ -53,6 +53,7 @@ export function useStockOperationPages(filter: StockOperationFilter) {
       {
         id: 7,
         key: 'details',
+        header: '',
       },
       { key: 'actions', header: '' },
     ],

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

@@ -8,14 +8,14 @@ import {
   ComboBox,
   DatePicker,
   DatePickerInput,
+  Form,
+  FormGroup,
   InlineLoading,
   NumberInput,
   RadioButton,
   RadioButtonGroup,
   Select,
   SelectItem,
-  Form,
-  FormGroup,
   Stack,
 } from '@carbon/react';
 import {
@@ -112,7 +112,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
   useEffect(() => {
     let hasResetParameters = false;
     if (selectedReportName) {
-      const reportType = (reportTypes as any)?.find((p) => p.name === selectedReportName);
+      const reportType = Array.isArray(reportTypes)
+        ? reportTypes.find((p) => p.name === selectedReportName)
+        : undefined;
       if (reportType) {
         setDisplayDate(reportType.parameters?.some((p) => p === ReportParameter.Date));
         setDisplayStartDate(reportType.parameters?.some((p) => p === ReportParameter.StartDate));
@@ -159,7 +161,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
         display: 'All Categories',
         name: 'All Categories',
         uuid: '',
-      } as any as Concept,
+      } as unknown as Concept,
       ...((items && items?.answers?.length > 0 ? items?.answers : items?.setMembers) ?? []),
     ];
   }, [items]);
@@ -178,9 +180,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
   }
 
   const handleSave = async (report: StockReportSchema) => {
-    const reportSystemName = (reportTypes as any).find(
-      (reportType) => reportType.name === report.reportName,
-    )?.systemName;
+    const reportSystemName = Array.isArray(reportTypes)
+      ? reportTypes.find((reportType) => reportType.name === report.reportName)?.systemName
+      : undefined;
 
     let hideSplash = true;
     try {
@@ -331,14 +333,14 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           if (response.status === 201) {
             showSnackbar({
               title: t('batchJob', 'Batch Job'),
-              subtitle: t('BatchJobSuccess', 'Batch job created successfully'),
+              subtitle: t('batchJobSuccess', 'Batch job created successfully'),
               kind: 'success',
             });
             handleMutate(`${restBaseUrl}/stockmanagement/batchjob?batchJobType=Report&v=default`);
             closeWorkspace();
           } else {
             showSnackbar({
-              title: t('BatchJobErrorTitle', 'Batch job'),
+              title: t('batchJobErrorTitle', 'Batch job'),
               subtitle: t('batchJobErrorMessage', 'Error creating batch job'),
               kind: 'error',
             });
@@ -347,7 +349,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
         })
         .catch(() => {
           showSnackbar({
-            title: t('BatchJobErrorTitle', 'Batch job'),
+            title: t('batchJobErrorTitle', 'Batch job'),
             subtitle: t('batchJobErrorMessage', 'Error creating batch job'),
             kind: 'error',
           });
@@ -360,6 +362,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
       }
     }
   };
+
   const getReportParameter = (
     name: string,
     value: string,
@@ -381,8 +384,8 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               render={({ field: { onChange } }) => (
                 <ComboBox
                   id="report"
-                  labelText={t('reportName', 'Report name')}
-                  items={reportTypes}
+                  titleText={t('reportName', 'Report name')}
+                  items={Array.isArray(reportTypes) ? reportTypes : [reportTypes]}
                   itemToString={(item) => `${item?.name ?? item?.name ?? ''}`}
                   placeholder={t('filter', 'Filter...')}
                   onChange={({ selectedItem }) => {
@@ -405,7 +408,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
                   <ComboBox
                     id="stockReportItem"
                     size="md"
-                    labelText={t('stockItemCategory', 'Stock Item Category')}
+                    titleText={t('stockItemCategory', 'Stock Item Category')}
                     items={stockItemCategories}
                     onChange={({ selectedItem }) => {
                       onChange(selectedItem.uuid);
@@ -433,11 +436,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="startDate"
-                  name="startDate"
                   placeholder={DATE_PICKER_FORMAT}
-                  labelText={t('startDate', 'Start Date')}
-                  defaultValue=""
-                  invalid={errors?.startDate?.message}
+                  labelText={t('startDate', 'Start date')}
+                  invalid={!!errors?.startDate?.message}
                   invalidText={errors?.startDate?.message}
                 />
               </DatePicker>
@@ -459,11 +460,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="endDate"
-                  name="endDate"
                   placeholder={DATE_PICKER_FORMAT}
-                  labelText={t('endDate', 'End Date')}
-                  defaultValue=""
-                  invalid={errors?.endDate?.message}
+                  labelText={t('endDate', 'End date')}
+                  invalid={!!errors?.endDate?.message}
                   invalidText={errors?.endDate?.message}
                 />
               </DatePicker>
@@ -474,15 +473,15 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           <Select
             id="inventoryGroupBy"
             defaultValue={model?.inventoryGroupBy}
-            invalid={errors?.inventoryGroupBy?.message}
+            invalid={!!errors?.inventoryGroupBy?.message}
             invalidText={errors?.inventoryGroupBy?.message}
             labelText={t('inventoryBy', 'Inventory by')}
             onChange={(e) => setValue('inventoryGroupBy', e.target.value)}
           >
-            <SelectItem value="" text={t('SelectOption', 'Select an option')} />
+            <SelectItem value="" text={t('selectOption', 'Select an option')} />
             <SelectItem value="StockItemOnly" text={t('stockItem', 'Stock Item')} />
-            <SelectItem value="LocationStockItem" text={t('locationAndStockItem', 'Location and Stock Item')} />
-            <SelectItem value="LocationStockItemBatchNo" text={t('locationAndBatchno', 'Location and Batch')} />
+            <SelectItem value="LocationStockItem" text={t('locationAndStockItem', 'Location and stock item')} />
+            <SelectItem value="LocationStockItemBatchNo" text={t('locationAndBatchNo', 'Location and batch')} />
           </Select>
         )}
         {displayLocation && (
@@ -497,7 +496,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               setValue('location', selectedLocation?.name || '');
             }}
             defaultValue=""
-            invalid={errors?.location?.message}
+            invalid={!!errors?.location?.message}
             invalidText={errors?.location?.message}
           >
             <SelectItem disabled hidden value="" text={t('chooseALocation', 'Choose a location')} />
@@ -514,7 +513,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               <Checkbox
                 id="childLocations"
                 onChange={onChange}
-                value={value}
+                checked={value}
                 labelText={t('includeChildLocations', 'Include Child Locations')}
               />
             )}
@@ -526,7 +525,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
             name="mostLeastMoving"
             render={({ field: { onChange, value } }) => (
               <RadioButtonGroup name="mostLeastMoving" legendText={t('rank', 'Rank')} onChange={onChange} value={value}>
-                <RadioButton value="MostMoving" id="mostLeastMovingMost" labelText={t('mostMoving', 'Most Moving')} />
+                <RadioButton value="MostMoving" id="mostLeastMovingMost" labelText={t('mostMoving', 'Most moving')} />
                 <RadioButton
                   value="LeastMoving"
                   id="mostLeastMovingLeast"
@@ -547,9 +546,8 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
                 disableWheel
                 hideSteppers
                 value={value}
-                onchange={onChange}
+                onChange={onChange}
                 label={t('limit', 'Limit')}
-                defaultValue={20}
               />
             )}
           />
@@ -633,11 +631,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="date"
-                  name="date"
                   placeholder={DATE_PICKER_FORMAT}
                   labelText={t('date', 'Date')}
-                  defaultValue=""
-                  invalid={errors?.date?.message}
+                  invalid={!!errors?.date?.message}
                   invalidText={errors?.date?.message}
                 />
               </DatePicker>
@@ -652,10 +648,10 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
-        <Button type="submit" className={styles.button} onClick={handleSave}>
+        <Button type="submit" className={styles.button}>
           {getCoreTranslation('save')}
         </Button>
       </ButtonSet>