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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useId, useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import {
   Button,
@@ -13,6 +13,7 @@ import {
 } from '@carbon/react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
 import { type StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
 import { getStockOperationUniqueId } from '../../stock-operation.utils';
@@ -24,8 +25,8 @@ import StockAvailability from './stock-availability-cell.component';
 import StockOperationItemBatchNoCell from './stock-operation-item-batch-no-cell.component';
 import StockOperationItemCell from './stock-operation-item-cell.component';
 import StockoperationItemExpiryCell from './stock-operation-item-expiry-cell.component';
+import { type CustomTableHeader } from '../../../core/components/table/types';
 import styles from './stock-operation-items-form-step.scc.scss';
-import { showSnackbar } from '@openmrs/esm-framework';
 
 type StockOperationItemsFormStepProps = {
   stockOperation?: StockOperationDTO;
@@ -63,7 +64,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ? [
             {
               key: 'batch',
-              header: t('batchNo', 'Batch No'),
+              header: t('batchNo', 'Batch number'),
               styles: { width: '15% !important' },
             },
           ]
@@ -87,11 +88,11 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
 
       {
         key: 'quantity',
-        header: t('qty', 'Qty'),
+        header: t('quantity', 'Quantity'),
       },
       {
         key: 'quantityuom',
-        header: t('quantityUom', 'Qty UoM'),
+        header: t('quantityUom', 'Quantity unit of measurement'),
       },
       ...(operationTypePermision.canCaptureQuantityPrice
         ? [
@@ -151,7 +152,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Edit'}
+              iconDescription={t('edit', 'Edit')}
               kind="ghost"
               renderIcon={Edit}
               onClick={() => {
@@ -162,7 +163,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Delete'}
+              iconDescription={t('delete', 'Delete')}
               kind="ghost"
               renderIcon={TrashCan}
               onClick={() => {
@@ -173,7 +174,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ),
       };
     });
-  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, uniqueId]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, t, uniqueId]);
 
   const handleNext = async () => {
     const valid = await form.trigger(['stockOperationItems']);
@@ -191,7 +192,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
     }
   };
 
-  const headerTitle = t('stockoperationItems', 'Stock operation items');
+  const headerTitle = t('stockOperationItems', 'Stock operation items');
 
   return (
     <div style={{ margin: '10px' }}>
@@ -209,13 +210,8 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
             })
           }
         />
-        <DataTable
-          rows={tableRows ?? []}
-          headers={headers}
-          isSortable={false}
-          useZebraStyles={true}
-          className={styles.dataTable}
-          render={({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+        <DataTable rows={tableRows ?? []} headers={headers} isSortable={false} useZebraStyles>
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
             <TableContainer>
               <Table {...getTableProps()}>
                 <TableHead>
@@ -226,10 +222,17 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
                           header,
                           isSortable: false,
                         })}
-                        style={header?.styles}
+                        style={(header as CustomTableHeader)?.styles}
                         key={header.key}
                       >
-                        {header.header?.content ?? header?.header}
+                        {(() => {
+                          const customHeader = header as CustomTableHeader;
+                          return typeof customHeader.header === 'object' &&
+                            customHeader.header !== null &&
+                            'content' in customHeader.header
+                            ? (customHeader.header.content as React.ReactNode)
+                            : (customHeader.header as React.ReactNode);
+                        })()}
                       </TableHeader>
                     ))}
                   </TableRow>
@@ -246,11 +249,11 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               </Table>
             </TableContainer>
           )}
-        />
+        </DataTable>
         <div className={styles.btnSet}>
           {typeof onNext === 'function' && (
             <Button kind="primary" onClick={handleNext} renderIcon={ArrowRight}>
-              {t('next', 'Next')}
+              {t('nextButton', 'Next')}
             </Button>
           )}
           {typeof onPrevious === 'function' && (
@@ -260,7 +263,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               renderIcon={ArrowLeft}
               hasIconOnly
               data-testid="previous-btn"
-              iconDescription={t('previous', 'Previous')}
+              iconDescription={t('previousButton', 'Previous')}
             />
           )}
         </div>

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

@@ -66,14 +66,14 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             kind: del.status === 'rejected' ? 'error' : 'success',
             title:
               del.status === 'rejected'
-                ? t('stockoperationItemDeleteError', 'Error deleting stock operation item {{item}}', {
+                ? t('stockOperationItemDeleteError', 'Error deleting stock operation item {{item}}', {
                     item: itemsToDelete[index].commonName,
                   })
                 : t('success', 'Success'),
             subtitle:
               del.status === 'rejected'
                 ? del.reason?.message
-                : t('stockoperationItemDeletSuccess', 'Stock operation item {{item}} deleted succesfully', {
+                : t('stockOperationItemDeleteSuccess', 'Stock operation item {{item}} deleted successfully', {
                     item: itemsToDelete[index].commonName,
                   }),
           });
@@ -233,7 +233,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
       <div className={styles.btnSet}>
         {typeof onNext === 'function' && (
           <Button kind="tertiary" onClick={onNext} renderIcon={ArrowRight}>
-            {t('next', 'Next')}
+            {t('nextButton', 'Next')}
           </Button>
         )}
         {typeof onPrevious === 'function' && (
@@ -243,7 +243,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             renderIcon={ArrowLeft}
             hasIconOnly
             data-testid="previous-btn"
-            iconDescription={t('previous', 'Previous')}
+            iconDescription={t('previousButton', 'Previous')}
           />
         )}
       </div>

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: '' },
     ],