diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
index e40a80e..a0b3766 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/select"
 
 interface SearchableTemplateSelectProps {
-  templates: Template[];
+  templates: Template[] | undefined;
   value: string;
   onValueChange: (value: string) => void;
   getTemplateDisplayText: (templateId: string | null) => string;
@@ -38,7 +38,7 @@ interface SearchableTemplateSelectProps {
 }
 
 const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({ 
-  templates, 
+  templates = [],
   value, 
   onValueChange, 
   getTemplateDisplayText,
@@ -68,17 +68,15 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
   // Extract unique brands from templates
   const brands = useMemo(() => {
     try {
-      if (!templates || templates.length === 0) {
-        console.log('No templates available for brand extraction');
+      if (!Array.isArray(templates) || templates.length === 0) {
         return [];
       }
       
-      console.log('Extracting brands from templates:', templates);
       const brandSet = new Set<string>();
       const brandNames: {id: string, name: string}[] = [];
       
       templates.forEach(template => {
-        if (!template || !template.company) return;
+        if (!template?.company) return;
         
         const companyId = template.company;
         if (!brandSet.has(companyId)) {
@@ -86,21 +84,17 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
           
           // Try to get the company name from the template display text
           try {
-            // Extract company name from the template display text
             const displayText = getTemplateDisplayText(template.id.toString());
             const companyName = displayText.split(' - ')[0];
             brandNames.push({ id: companyId, name: companyName || companyId });
           } catch (err) {
-            console.error("Error extracting company name:", err);
             brandNames.push({ id: companyId, name: companyId });
           }
         }
       });
       
-      console.log('Extracted brands:', brandNames);
       return brandNames.sort((a, b) => a.name.localeCompare(b.name));
     } catch (err) {
-      console.error("Error extracting brands:", err);
       return [];
     }
   }, [templates, getTemplateDisplayText]);
@@ -108,12 +102,12 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
   // Group templates by company for better organization
   const groupedTemplates = useMemo(() => {
     try {
-      if (!templates || templates.length === 0) return {};
+      if (!Array.isArray(templates) || templates.length === 0) return {};
       
       const groups: Record<string, Template[]> = {};
       
       templates.forEach(template => {
-        if (!template) return;
+        if (!template?.company) return;
         
         const companyId = template.company;
         if (!groups[companyId]) {
@@ -124,7 +118,6 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
       
       return groups;
     } catch (err) {
-      console.error("Error grouping templates:", err);
       return {};
     }
   }, [templates]);
@@ -132,12 +125,12 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
   // Filter templates based on selected brand and search term
   const filteredTemplates = useMemo(() => {
     try {
-      if (!templates || templates.length === 0) return [];
+      if (!Array.isArray(templates) || templates.length === 0) return [];
       
       // First filter by brand if selected
       let brandFiltered = templates;
       if (selectedBrand) {
-        brandFiltered = templates.filter(t => t && t.company === selectedBrand);
+        brandFiltered = templates.filter(t => t?.company === selectedBrand);
       }
       
       // Then filter by search term if provided
@@ -145,22 +138,18 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
       
       const lowerSearchTerm = searchTerm.toLowerCase();
       return brandFiltered.filter(template => {
-        if (!template) return false;
+        if (!template?.id) return false;
         try {
           const displayText = getTemplateDisplayText(template.id.toString());
           const productType = template.product_type?.toLowerCase() || '';
           
-          // Search in both the display text and product type
           return displayText.toLowerCase().includes(lowerSearchTerm) || 
                  productType.includes(lowerSearchTerm);
         } catch (error) {
-          console.error("Error filtering template:", error, template);
           return false;
         }
       });
     } catch (err) {
-      console.error("Error in filteredTemplates:", err);
-      setError("Error filtering templates");
       return [];
     }
   }, [templates, selectedBrand, searchTerm, getTemplateDisplayText]);
@@ -171,29 +160,15 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
       if (!value) return placeholder;
       return getTemplateDisplayText(value);
     } catch (err) {
-      console.error("Error getting template display text:", err);
-      setError("Error displaying template");
       return placeholder;
     }
   }, [getTemplateDisplayText, placeholder, value]);
 
-  // Handle errors in the component
-  if (error) {
-    return (
-      <Button
-        variant="outline"
-        className={cn("w-full justify-between text-destructive", triggerClassName)}
-        onClick={() => setError(null)}
-      >
-        Error: {error}
-      </Button>
-    );
-  }
-
   // Safe render function for CommandItem
   const renderCommandItem = useCallback((template: Template) => {
+    if (!template?.id) return null;
+    
     try {
-      // Get the display text for the template
       const displayText = getTemplateDisplayText(template.id.toString());
       
       return (
@@ -205,10 +180,7 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
               onValueChange(currentValue);
               setOpen(false);
               setSearchTerm("");
-              // Don't reset the brand filter when selecting a template
-              // This allows users to keep filtering by brand
             } catch (err) {
-              console.error("Error in onSelect:", err);
               setError("Error selecting template");
             }
           }}
@@ -219,7 +191,6 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
         </CommandItem>
       );
     } catch (err) {
-      console.error("Error rendering CommandItem:", err);
       return null;
     }
   }, [onValueChange, value, getTemplateDisplayText]);
@@ -240,7 +211,6 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
       <PopoverContent className={cn("w-[300px] p-0", className)}>
         <Command>
           <div className="flex flex-col p-2 gap-2">
-            {/* Brand filter dropdown */}
             {brands.length > 0 && (
               <div className="flex items-center gap-2">
                 <Select
@@ -254,7 +224,7 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">All Brands</SelectItem>
-                    {brands && brands.length > 0 && brands.map(brand => (
+                    {brands.map(brand => (
                       <SelectItem key={brand.id} value={brand.id}>
                         {brand.name}
                       </SelectItem>
@@ -266,25 +236,16 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
             
             <CommandSeparator />
             
-            {/* Search input */}
             <div className="flex items-center gap-2">
               <CommandInput
                 placeholder="Search by product type..."
                 value={searchTerm}
-                onValueChange={(value) => {
-                  try {
-                    setSearchTerm(value);
-                  } catch (err) {
-                    console.error("Error in onValueChange:", err);
-                    setError("Error searching templates");
-                  }
-                }}
+                onValueChange={setSearchTerm}
                 className="h-8 flex-1"
               />
             </div>
           </div>
           
-          {/* Results */}
           <CommandEmpty>
             <div className="py-6 text-center">
               <p className="text-sm text-muted-foreground">No templates found.</p>
@@ -294,16 +255,12 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
           <CommandList>
             <ScrollArea className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
               {!searchTerm ? (
-                // When no search term is applied, show templates grouped by company
-                // If a brand is selected, only show that brand's templates
                 selectedBrand ? (
                   <CommandGroup heading={brands.find(b => b.id === selectedBrand)?.name || selectedBrand}>
                     {groupedTemplates[selectedBrand]?.map(template => renderCommandItem(template))}
                   </CommandGroup>
                 ) : (
-                  // Show all brands and their templates
                   Object.entries(groupedTemplates).map(([companyId, companyTemplates]) => {
-                    // Get company name from the brands array
                     const brand = brands.find(b => b.id === companyId);
                     const companyName = brand ? brand.name : companyId;
                     
@@ -315,9 +272,8 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
                   })
                 )
               ) : (
-                // When search term is applied, show filtered results
                 <CommandGroup>
-                  {filteredTemplates.map(template => template ? renderCommandItem(template) : null)}
+                  {filteredTemplates.map(template => renderCommandItem(template))}
                 </CommandGroup>
               )}
             </ScrollArea>
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx
index 2a99298..85106ee 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx
@@ -1,272 +1,238 @@
-import { useState, useCallback, useMemo, memo } from 'react'
+import React from 'react'
 import { Field } from '../../../types'
-import { Loader2 } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { AlertCircle, AlertTriangle, Info } from 'lucide-react'
-import InputCell from './cells/InputCell'
-import MultiInputCell from './cells/MultiInputCell'
-import SelectCell from './cells/SelectCell'
-import CheckboxCell from './cells/CheckboxCell'
+import { Loader2, AlertCircle } from 'lucide-react'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from '@/components/ui/tooltip'
+import InputCell from './cells/InputCell'
+import SelectCell from './cells/SelectCell'
+import MultiInputCell from './cells/MultiInputCell'
+import { TableCell } from '@/components/ui/table'
 
-// Define an error object type
+// Define error object type
 type ErrorObject = {
   message: string;
   level: string;
   source?: string;
 }
 
-/**
- * ValidationIcon - Renders an appropriate icon based on error level
- */
-const ValidationIcon = memo(({ error }: { error: ErrorObject }) => {
-  const iconClasses = "h-4 w-4"
-  
-  const icon = useMemo(() => {
-    switch(error.level) {
-      case 'error':
-        return <AlertCircle className={cn(iconClasses, "text-destructive")} />;
-      case 'warning':
-        return <AlertTriangle className={cn(iconClasses, "text-amber-500")} />;
-      case 'info':
-        return <Info className={cn(iconClasses, "text-blue-500")} />;
-      default:
-        return <AlertCircle className={cn(iconClasses, "text-muted-foreground")} />;
-    }
-  }, [error.level, iconClasses]);
-  
+// Memoized validation icon component
+const ValidationIcon = React.memo(({ error }: { error: ErrorObject }) => (
+  <TooltipProvider>
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        <div className="cursor-help">
+          <AlertCircle className="h-4 w-4 text-red-500" />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-[300px] text-wrap break-words">
+        <p>{error.message}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+));
+
+ValidationIcon.displayName = 'ValidationIcon';
+
+// Separate component for item number cells to ensure they update independently
+const ItemNumberCell = React.memo(({ 
+  value, 
+  itemNumber, 
+  isValidating, 
+  width 
+}: { 
+  value: any, 
+  itemNumber?: string, 
+  isValidating?: boolean,
+  width: number 
+}) => (
+  <TableCell className="p-1" style={{ width: `${width}px`, minWidth: `${width}px` }}>
+    <div className="px-2 py-1 text-sm">
+      {isValidating ? (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+          <span>{itemNumber || value || ''}</span>
+        </div>
+      ) : (
+        <span>{itemNumber || value || ''}</span>
+      )}
+    </div>
+  </TableCell>
+), (prev, next) => (
+  prev.value === next.value &&
+  prev.itemNumber === next.itemNumber &&
+  prev.isValidating === next.isValidating
+));
+
+ItemNumberCell.displayName = 'ItemNumberCell';
+
+// Memoized base cell content component
+const BaseCellContent = React.memo(({
+  field,
+  value,
+  onChange,
+  hasErrors,
+  options = []
+}: {
+  field: Field<string>;
+  value: any;
+  onChange: (value: any) => void;
+  hasErrors: boolean;
+  options?: readonly any[];
+}) => {
+  const fieldType = typeof field.fieldType === 'string' 
+    ? field.fieldType 
+    : field.fieldType?.type || 'input';
+
+  if (fieldType === 'select') {
+    return (
+      <SelectCell
+        field={field}
+        value={value}
+        onChange={onChange}
+        options={options}
+        hasErrors={hasErrors}
+      />
+    );
+  }
+
+  if (fieldType === 'multi-select' || fieldType === 'multi-input') {
+    return (
+      <MultiInputCell
+        field={field}
+        value={value}
+        onChange={onChange}
+        options={options}
+        hasErrors={hasErrors}
+      />
+    );
+  }
+
   return (
-    <TooltipProvider>
-      <Tooltip delayDuration={200}>
-        <TooltipTrigger asChild>
-          <div className="cursor-help">{icon}</div>
-        </TooltipTrigger>
-        <TooltipContent className="max-w-[300px] text-wrap break-words">
-          <p>{error.message}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <InputCell
+      field={field}
+      value={value}
+      onChange={onChange}
+      hasErrors={hasErrors}
+    />
+  );
+}, (prev, next) => {
+  return (
+    prev.value === next.value &&
+    prev.hasErrors === next.hasErrors &&
+    prev.field === next.field &&
+    JSON.stringify(prev.options) === JSON.stringify(next.options)
   );
 });
 
-export interface ValidationCellProps<T extends string> {
-  field: Field<T>
+BaseCellContent.displayName = 'BaseCellContent';
+
+export interface ValidationCellProps {
+  field: Field<string>
   value: any
   onChange: (value: any) => void
   errors: ErrorObject[]
-  isValidatingUpc?: boolean
-  isInValidatingRow?: boolean
-  fieldKey?: string
-  options?: any[]
-  isLoading?: boolean
-  key?: string
+  isValidating?: boolean
+  fieldKey: string
+  options?: readonly any[]
+  itemNumber?: string
+  width: number
+  rowIndex: number
 }
 
-// Memoized loader component
-const LoadingIndicator = memo(() => (
-  <div className="flex items-center justify-center h-9 rounded-md border border-input bg-gray-50 px-3">
-    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-    <span className="ml-2 text-sm text-muted-foreground">Validating...</span>
-  </div>
-));
-
-// Memoized error display component
-const ErrorDisplay = memo(({ errors, isFocused }: { errors: ErrorObject[], isFocused: boolean }) => {
-  if (!errors || errors.length === 0) return null;
-  
-  return (
-    <>
-      <div className="absolute right-1 top-1/2 -translate-y-1/2">
-        <ValidationIcon error={errors[0]} />
-      </div>
-      
-      {isFocused && (
-        <div className="text-xs text-destructive p-1 mt-1 bg-destructive/5 rounded-sm">
-          {errors.map((error, i) => (
-            <div key={i} className="py-0.5">{error.message}</div>
-          ))}
-        </div>
-      )}
-    </>
-  );
-});
-
-// Main ValidationCell component - now with proper memoization
-const ValidationCell = memo(<T extends string>(props: ValidationCellProps<T>) => {
-  const {
-    field,
-    value,
-    onChange,
-    errors,
-    isValidatingUpc = false,
-    fieldKey,
-    options  } = props;
-  
-  // State for showing/hiding error messages
-  const [isFocused, setIsFocused] = useState(false);
-  
-  // Handlers for edit state
-  const handleStartEdit = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-  
-  const handleEndEdit = useCallback(() => {
-    setIsFocused(false);
-  }, []);
-  
-  // Check if this cell has errors
-  const hasErrors = errors && errors.length > 0;
-  
-  // Show loading state when validating UPC fields
-  if (isValidatingUpc && (fieldKey === 'upc' || fieldKey === 'barcode' || fieldKey === 'item_number')) {
-    return <LoadingIndicator />;
-  }
-  
-  // Handle cases where field might be undefined or incomplete
-  if (!field || !field.fieldType) {
+const ValidationCell = ({
+  field,
+  value,
+  onChange,
+  errors,
+  isValidating,
+  fieldKey,
+  options = [],
+  itemNumber,
+  width}: ValidationCellProps) => {
+  // For item_number fields, use the specialized component
+  if (fieldKey === 'item_number') {
     return (
-      <div className="p-2 text-sm text-muted-foreground">
-        Error: Invalid field configuration
-      </div>
+      <ItemNumberCell
+        value={value}
+        itemNumber={itemNumber}
+        isValidating={isValidating}
+        width={width}
+      />
     );
   }
+
+  // For UPC fields, show loading indicator during validation
+  const isUpcField = fieldKey === 'upc' || fieldKey === 'barcode';
+  const showLoadingIndicator = isUpcField && isValidating;
+
+  // Error states
+  const hasError = errors.some(error => error.level === 'error' || error.level === 'warning');
+  const isRequiredButEmpty = errors.some(error => error.level === 'required' && (!value || value.trim() === ''));
+  const nonRequiredErrors = errors.filter(error => error.level !== 'required');
   
-  // Get the field type safely
-  const fieldType = field.fieldType.type || 'input';
-  
-  // Helper for safely accessing fieldType properties
-  const getFieldTypeProp = (propName: string, defaultValue: any = undefined) => {
-    if (!field.fieldType) return defaultValue;
-    return (field.fieldType as any)[propName] !== undefined ? 
-      (field.fieldType as any)[propName] : 
-      defaultValue;
-  };
-  
-  // Memoize the cell content to prevent unnecessary re-renders
-  const cellContent = useMemo(() => {
-    // Handle custom options for select fields first
-    if ((fieldType === 'select' || fieldType === 'multi-select') && options && options.length > 0) {
-      try {
-        return (
-          <SelectCell
+  return (
+    <TableCell className="p-1" style={{ width: `${width}px`, minWidth: `${width}px` }}>
+      <div className={`relative ${hasError || isRequiredButEmpty ? 'border-red-500' : ''} ${showLoadingIndicator ? 'border-blue-500' : ''}`}>
+        {showLoadingIndicator && (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
+            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+          </div>
+        )}
+        
+        <div className="truncate overflow-hidden">
+          <BaseCellContent
             field={field}
             value={value}
             onChange={onChange}
-            onStartEdit={handleStartEdit}
-            onEndEdit={handleEndEdit}
-            hasErrors={hasErrors}
+            hasErrors={hasError || isRequiredButEmpty}
             options={options}
           />
-        );
-      } catch (error) {
-        console.error("Error rendering SelectCell with custom options:", error);
-        return <div className="p-2 text-destructive">Error rendering field</div>;
-      }
-    }
-    
-    // Standard rendering based on field type
-    try {
-      switch (fieldType) {
-        case 'input':
-          return (
-            <InputCell
-              field={field}
-              value={value}
-              onChange={onChange}
-              onStartEdit={handleStartEdit}
-              onEndEdit={handleEndEdit}
-              hasErrors={hasErrors}
-              isMultiline={getFieldTypeProp('multiline', false)}
-              isPrice={getFieldTypeProp('price', false)}
-            />
-          );
-        case 'multi-input':
-          return (
-            <MultiInputCell
-              field={field}
-              value={value}
-              onChange={onChange}
-              onStartEdit={handleStartEdit}
-              onEndEdit={handleEndEdit}
-              hasErrors={hasErrors}
-              separator={getFieldTypeProp('separator', ',')}
-              isMultiline={getFieldTypeProp('multiline', false)}
-              isPrice={getFieldTypeProp('price', false)}
-            />
-          );
-        case 'select':
-        case 'multi-select':
-          return (
-            <SelectCell
-              field={field}
-              value={value}
-              onChange={onChange}
-              onStartEdit={handleStartEdit}
-              onEndEdit={handleEndEdit}
-              hasErrors={hasErrors}
-              options={getFieldTypeProp('options', [])}
-            />
-          );
-        case 'checkbox':
-          return (
-            <CheckboxCell
-              field={field}
-              value={value}
-              onChange={onChange}
-              hasErrors={hasErrors}
-              booleanMatches={getFieldTypeProp('booleanMatches', {})}
-            />
-          );
-        default:
-          return (
-            <InputCell
-              field={field}
-              value={value}
-              onChange={onChange}
-              onStartEdit={handleStartEdit}
-              onEndEdit={handleEndEdit}
-              hasErrors={hasErrors}
-            />
-          );
-      }
-    } catch (error) {
-      console.error(`Error rendering cell of type ${fieldType}:`, error);
-      return (
-        <div className="p-2 text-destructive">
-          Error rendering field
         </div>
-      );
-    }
-  }, [
-    fieldType, 
-    field, 
-    value, 
-    onChange, 
-    handleStartEdit, 
-    handleEndEdit, 
-    hasErrors, 
-    options,
-    getFieldTypeProp
-  ]);
-  
-  return (
-    <div className={cn(
-      "relative",
-      hasErrors && "space-y-1"
-    )}>
-      {cellContent}
-      
-      {/* Render errors if any exist */}
-      {hasErrors && <ErrorDisplay errors={errors} isFocused={isFocused} />}
-    </div>
+        
+        {nonRequiredErrors.length > 0 && !isRequiredButEmpty && (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-20">
+            <ValidationIcon error={{ 
+              message: nonRequiredErrors.map(e => e.message).join('\n'), 
+              level: 'error' 
+            }} />
+          </div>
+        )}
+      </div>
+    </TableCell>
   );
-});
+};
 
-ValidationCell.displayName = 'ValidationCell';
+export default React.memo(ValidationCell, (prev, next) => {
+  // Deep comparison of errors
+  const prevErrorsStr = JSON.stringify(prev.errors);
+  const nextErrorsStr = JSON.stringify(next.errors);
 
-export default ValidationCell; 
\ No newline at end of file
+  // For item number fields, compare itemNumber
+  if (prev.fieldKey === 'item_number') {
+    return (
+      prev.value === next.value &&
+      prev.itemNumber === next.itemNumber &&
+      prev.isValidating === next.isValidating
+    );
+  }
+
+  // For UPC fields, include validation state in comparison
+  if (prev.fieldKey === 'upc' || prev.fieldKey === 'barcode') {
+    return (
+      prev.value === next.value &&
+      prevErrorsStr === nextErrorsStr &&
+      prev.isValidating === next.isValidating
+    );
+  }
+
+  // For all other fields, compare core props
+  return (
+    prev.value === next.value &&
+    prevErrorsStr === nextErrorsStr &&
+    JSON.stringify(prev.options) === JSON.stringify(next.options)
+  );
+}); 
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
index a716116..7d53443 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
@@ -548,32 +548,54 @@ const ValidationContainer = <T extends string>({
   }, [data, rowSelection, setData, setRowSelection]);
   
   // Enhanced ValidationTable component that's aware of item numbers
-  const EnhancedValidationTable = useCallback(({ 
-    data, 
-    ...props 
-  }: React.ComponentProps<typeof ValidationTable<T>>) => {
+  const EnhancedValidationTable = useCallback((props: React.ComponentProps<typeof ValidationTable>) => {
+    // Create validatingCells set from validatingUpcRows
+    const validatingCells = useMemo(() => {
+      const cells = new Set<string>();
+      validatingUpcRows.forEach(rowIndex => {
+        cells.add(`${rowIndex}-upc`);
+        cells.add(`${rowIndex}-item_number`);
+      });
+      return cells;
+    }, [validatingUpcRows]);
+
+    // Convert itemNumbers to Map
+    const itemNumbersMap = useMemo(() => 
+      new Map(Object.entries(itemNumbers).map(([key, value]) => [parseInt(key), value])),
+      [itemNumbers]
+    );
+
     // Merge the item numbers with the data for display purposes only
     const enhancedData = useMemo(() => {
-      if (Object.keys(itemNumbers).length === 0) return data;
+      if (Object.keys(itemNumbers).length === 0) return props.data;
       
       // Create a new array with the item numbers merged in
-      return data.map((row, index) => {
+      return props.data.map((row: any, index: number) => {
         if (itemNumbers[index]) {
           return { ...row, item_number: itemNumbers[index] };
         }
         return row;
       });
-    }, [data]);
+    }, [props.data]);
     
-    return <ValidationTable<T> data={enhancedData} {...props} />;
-  }, [itemNumbers]);
+    return (
+      <ValidationTable 
+        {...props}
+        data={enhancedData}
+        validatingCells={validatingCells}
+        itemNumbers={itemNumbersMap}
+      />
+    );
+  }, [itemNumbers, validatingUpcRows]);
 
   // Memoize the ValidationTable to prevent unnecessary re-renders
   const renderValidationTable = useMemo(() => (
     <EnhancedValidationTable
       data={filteredData}
       fields={validationState.fields}
-      updateRow={enhancedUpdateRow}
+      updateRow={(rowIndex: number, key: string, value: any) => 
+        enhancedUpdateRow(rowIndex, key as T, value)
+      }
       rowSelection={rowSelection}
       setRowSelection={setRowSelection}
       validationErrors={validationErrors}
@@ -587,6 +609,9 @@ const ValidationContainer = <T extends string>({
       rowSublines={rowSublines}
       isLoadingLines={isLoadingLines}
       isLoadingSublines={isLoadingSublines}
+      upcValidationResults={new Map(Object.entries(itemNumbers).map(([key, value]) => [parseInt(key), { itemNumber: value }]))}
+      validatingCells={new Set()}
+      itemNumbers={new Map()}
     />
   ), [
     EnhancedValidationTable,
@@ -605,7 +630,8 @@ const ValidationContainer = <T extends string>({
     rowProductLines,
     rowSublines,
     isLoadingLines,
-    isLoadingSublines
+    isLoadingSublines,
+    itemNumbers
   ]);
 
   return (
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationStep.tsx
new file mode 100644
index 0000000..110122b
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationStep.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useCallback } from 'react';
+import { useValidationState } from '../hooks/useValidationState';
+import ValidationTable from './ValidationTable';
+import { Fields, Field } from '../../../types';
+import { RowData } from '../hooks/useValidationState';
+
+interface ValidationStepProps<T extends string> {
+  data: RowData<T>[];
+  fields: Fields<T>;
+  onContinue?: (data: RowData<T>[]) => void;
+  onBack?: () => void;
+  initialValidationErrors?: Map<number, Record<string, any>>;
+  initialValidationState?: Map<number, 'pending' | 'validating' | 'validated' | 'error'>;
+}
+
+export const ValidationStep = <T extends string>({
+  data,
+  fields,
+  onContinue,
+  onBack,
+  initialValidationErrors,
+  initialValidationState,
+}: ValidationStepProps<T>) => {
+  const {
+    data: rowData,
+    validationErrors,
+    rowValidationStatus,
+    validateRow,
+    hasErrors,
+    fields: fieldsWithOptions,
+    rowSelection,
+    setRowSelection,
+    updateRow,
+    isValidatingUpc,
+    validatingUpcRows,
+    filters,
+    templates,
+    applyTemplate,
+    getTemplateDisplayText,
+  } = useValidationState({
+    initialData: data,
+    fields,
+    onNext: onContinue,
+    onBack,
+  });
+
+  return (
+    <div className="flex flex-col h-full">
+      <ValidationTable
+        data={rowData}
+        fields={fieldsWithOptions}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        updateRow={updateRow}
+        validationErrors={validationErrors}
+        isValidatingUpc={isValidatingUpc}
+        validatingUpcRows={validatingUpcRows}
+        filters={filters}
+        templates={templates}
+        applyTemplate={applyTemplate}
+        getTemplateDisplayText={getTemplateDisplayText}
+      />
+    </div>
+  );
+};
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
index 83b09de..5a0f31e 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
@@ -3,14 +3,15 @@ import {
   useReactTable, 
   getCoreRowModel, 
   flexRender,
-  createColumnHelper,
-  RowSelectionState} from '@tanstack/react-table'
+  RowSelectionState,
+  ColumnDef
+} from '@tanstack/react-table'
 import { Fields, Field } from '../../../types'
 import { RowData, Template } from '../hooks/useValidationState'
-import { Checkbox } from '@/components/ui/checkbox'
 import ValidationCell from './ValidationCell'
 import { useRsi } from '../../../hooks/useRsi'
 import SearchableTemplateSelect from './SearchableTemplateSelect'
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
 
 // Define a simple Error type locally to avoid import issues
 type ErrorType = {
@@ -36,100 +37,201 @@ interface ValidationTableProps<T extends string> {
   rowSublines?: Record<string, any[]>
   isLoadingLines?: Record<string, boolean>
   isLoadingSublines?: Record<string, boolean>
+  upcValidationResults: Map<number, { itemNumber: string }>
+  validatingCells: Set<string>
+  itemNumbers: Map<number, string>
   [key: string]: any
 }
 
-// Memoized cell component to prevent unnecessary re-renders
-const MemoizedCell = React.memo(
-  ({
-    rowIndex,
-    field,
-    value,
-    errors,
-    isValidatingUpc,
-    fieldOptions,
-    isOptionsLoading,
-    updateRow,
-    columnId
-  }: {
-    rowIndex: number
-    field: Field<any>
-    value: any
-    errors: ErrorType[]
-    isValidatingUpc: (rowIndex: number) => boolean
-    fieldOptions?: any[]
-    isOptionsLoading?: boolean
-    updateRow: (rowIndex: number, key: any, value: any) => void
-    columnId: string
-  }) => {
-    const handleChange = (newValue: any) => {
-      updateRow(rowIndex, columnId, newValue);
-    };
-    
-    return (
-      <ValidationCell 
-        value={value} 
-        field={field}
-        onChange={handleChange}
-        errors={errors || []}
-        isValidatingUpc={isValidatingUpc(rowIndex)}
-        fieldKey={columnId}
-        options={fieldOptions}
-        isLoading={isOptionsLoading}
-      />
-    );
-  },
-  // Custom comparison function for the memo
-  (prevProps, nextProps) => {
-    // Re-render only if any of these props changed
-    return (
-      prevProps.value === nextProps.value &&
-      prevProps.errors === nextProps.errors &&
-      prevProps.fieldOptions === nextProps.fieldOptions &&
-      prevProps.isOptionsLoading === nextProps.isOptionsLoading &&
-      prevProps.isValidatingUpc(prevProps.rowIndex) === nextProps.isValidatingUpc(nextProps.rowIndex)
-    );
-  }
-);
+// Make Field type mutable for internal use
+type MutableField<T extends string> = {
+  -readonly [K in keyof Field<T>]: Field<T>[K] extends readonly (infer U)[] ? U[] : Field<T>[K]
+}
 
-// Memoized template cell component
-const MemoizedTemplateCell = React.memo(
-  ({
-    rowIndex,
-    templateValue,
-    templates,
-    applyTemplate,
-    getTemplateDisplayText
-  }: {
-    rowIndex: number
-    templateValue: string | null
-    templates: Template[]
-    applyTemplate: (templateId: string, rowIndexes: number[]) => void
-    getTemplateDisplayText: (templateId: string | null) => string
-  }) => {
-    const handleTemplateChange = (value: string) => {
-      applyTemplate(value, [rowIndex]);
-    };
+interface MemoizedCellProps<T extends string = string> {
+  field: MutableField<T>
+  value: any
+  rowIndex: number
+  updateRow: (rowIndex: number, key: string, value: any) => void
+  validationErrors: Map<number, Record<string, ErrorType[]>>
+  validatingCells: Set<string>
+  itemNumbers: Map<number, string>
+  width: number
+}
+
+// Memoized cell component that only updates when its specific data changes
+const MemoizedCell = React.memo(({ 
+  field,
+  value,
+  rowIndex,
+  updateRow,
+  validationErrors,
+  validatingCells,
+  itemNumbers,
+  width
+}: MemoizedCellProps) => {
+  const rowErrors = validationErrors.get(rowIndex) || {};
+  const fieldErrors = rowErrors[String(field.key)] || [];
+  const isValidating = validatingCells.has(`${rowIndex}-${field.key}`);
+  const options = field.fieldType.type === 'select' || field.fieldType.type === 'multi-select' 
+    ? Array.from(field.fieldType.options || [])
+    : [];
+
+  return (
+    <ValidationCell
+      field={field}
+      value={value}
+      onChange={(newValue) => updateRow(rowIndex, field.key, newValue)}
+      errors={fieldErrors}
+      isValidating={isValidating}
+      fieldKey={String(field.key)}
+      options={options}
+      itemNumber={itemNumbers.get(rowIndex)}
+      width={width}
+      rowIndex={rowIndex}
+    />
+  );
+}, (prev, next) => {
+  const fieldKey = String(prev.field.key);
+  
+  // For item_number fields, only update if the item number or validation state changes
+  if (fieldKey === 'item_number') {
+    const prevItemNumber = prev.itemNumbers.get(prev.rowIndex);
+    const nextItemNumber = next.itemNumbers.get(next.rowIndex);
+    const prevValidating = prev.validatingCells.has(`${prev.rowIndex}-item_number`);
+    const nextValidating = next.validatingCells.has(`${next.rowIndex}-item_number`);
     
     return (
-      <SearchableTemplateSelect
-        templates={templates}
-        value={templateValue || ''}
-        onValueChange={handleTemplateChange}
-        getTemplateDisplayText={(template) => 
-          template ? getTemplateDisplayText(template) : 'Select template'
-        }
-      />
-    );
-  },
-  // Custom comparison function for the memo
-  (prevProps, nextProps) => {
-    return (
-      prevProps.templateValue === nextProps.templateValue &&
-      prevProps.templates === nextProps.templates
+      prevItemNumber === nextItemNumber &&
+      prevValidating === nextValidating &&
+      prev.value === next.value
     );
   }
-);
+
+  // For UPC fields, only update if the value or validation state changes
+  if (fieldKey === 'upc' || fieldKey === 'barcode') {
+    const prevValidating = prev.validatingCells.has(`${prev.rowIndex}-${fieldKey}`);
+    const nextValidating = next.validatingCells.has(`${next.rowIndex}-${fieldKey}`);
+    
+    return (
+      prev.value === next.value &&
+      prevValidating === nextValidating
+    );
+  }
+
+  // For other fields, only update if the value or errors change
+  const prevErrors = prev.validationErrors.get(prev.rowIndex)?.[fieldKey];
+  const nextErrors = next.validationErrors.get(next.rowIndex)?.[fieldKey];
+  
+  return (
+    prev.value === next.value &&
+    JSON.stringify(prevErrors) === JSON.stringify(nextErrors)
+  );
+});
+
+MemoizedCell.displayName = 'MemoizedCell';
+
+interface MemoizedRowProps {
+  row: RowData<string>;
+  fields: readonly {
+    readonly label: string;
+    readonly key: string;
+    readonly description?: string;
+    readonly alternateMatches?: readonly string[];
+    readonly validations?: readonly any[];
+    readonly fieldType: any;
+    readonly example?: string;
+    readonly width?: number;
+    readonly disabled?: boolean;
+  }[];
+  updateRow: (rowIndex: number, key: string, value: any) => void;
+  validationErrors: Map<number, Record<string, ErrorType[]>>;
+  validatingCells: Set<string>;
+  itemNumbers: Map<number, string>;
+  options?: { [key: string]: any[] };
+  rowIndex: number;
+  isSelected: boolean;
+}
+
+const MemoizedRow = React.memo<MemoizedRowProps>(({ 
+  row, 
+  fields, 
+  updateRow, 
+  validationErrors,
+  validatingCells,
+  itemNumbers,
+  options = {},
+  rowIndex,
+  isSelected
+}) => {
+  return (
+    <TableRow
+      key={row.__index || rowIndex}
+      data-state={isSelected && "selected"}
+      className={validationErrors.get(rowIndex) ? "bg-red-50/40" : "hover:bg-muted/50"}
+    >
+      {fields.map((field) => {
+        if (field.disabled) return null;
+        
+        const fieldWidth = field.width || (
+          field.fieldType.type === "checkbox" ? 80 :
+          field.fieldType.type === "select" ? 150 : 
+          field.fieldType.type === "multi-select" ? 200 :
+          (field.fieldType.type === "input" || field.fieldType.type === "multi-input") && 
+          (field.fieldType as any).multiline ? 300 : 
+          150
+        );
+
+        const isValidating = validatingCells.has(`${rowIndex}-${field.key}`);
+
+        return (
+          <ValidationCell
+            key={String(field.key)}
+            field={field as Field<string>}
+            value={row[field.key]}
+            onChange={(value) => updateRow(rowIndex, field.key, value)}
+            errors={validationErrors.get(rowIndex)?.[String(field.key)] || []}
+            isValidating={isValidating}
+            fieldKey={String(field.key)}
+            options={options[String(field.key)] || []}
+            width={fieldWidth}
+            rowIndex={rowIndex}
+            itemNumber={itemNumbers.get(rowIndex)}
+          />
+        );
+      })}
+    </TableRow>
+  );
+}, (prev, next) => {
+  // Compare row data
+  const prevRowStr = JSON.stringify(prev.row);
+  const nextRowStr = JSON.stringify(next.row);
+  if (prevRowStr !== nextRowStr) return false;
+
+  // Compare validation errors for this row
+  const prevErrors = prev.validationErrors.get(prev.rowIndex);
+  const nextErrors = next.validationErrors.get(next.rowIndex);
+  if (JSON.stringify(prevErrors) !== JSON.stringify(nextErrors)) return false;
+
+  // Compare validation state for this row's cells
+  const prevValidatingCells = Array.from(prev.validatingCells)
+    .filter(key => key.startsWith(`${prev.rowIndex}-`));
+  const nextValidatingCells = Array.from(next.validatingCells)
+    .filter(key => key.startsWith(`${next.rowIndex}-`));
+  if (JSON.stringify(prevValidatingCells) !== JSON.stringify(nextValidatingCells)) return false;
+
+  // Compare item numbers for this row
+  const prevItemNumber = prev.itemNumbers.get(prev.rowIndex);
+  const nextItemNumber = next.itemNumbers.get(next.rowIndex);
+  if (prevItemNumber !== nextItemNumber) return false;
+
+  // Compare selection state
+  if (prev.isSelected !== next.isSelected) return false;
+
+  return true;
+});
+
+MemoizedRow.displayName = 'MemoizedRow';
 
 const ValidationTable = <T extends string>({
   data,
@@ -138,237 +240,150 @@ const ValidationTable = <T extends string>({
   setRowSelection,
   updateRow,
   validationErrors,
-  isValidatingUpc,
   filters,
   templates,
   applyTemplate,
   getTemplateDisplayText,
-  rowProductLines = {},
-  rowSublines = {},
-  isLoadingLines = {},
-  isLoadingSublines = {}}: ValidationTableProps<T>) => {
-  const { translations } = useRsi<T>()
-  const columnHelper = createColumnHelper<RowData<T>>()
-  
-  // Define columns for the table
-  const columns = useMemo(() => {
-    // Selection column
-    const selectionColumn = columnHelper.display({
-      id: 'select',
-      header: ({ table }) => (
-        <div className="flex justify-center">
-          <Checkbox
-            checked={table.getIsAllPageRowsSelected()}
-            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-          />
-        </div>
-      ),
-      cell: ({ row }) => (
-        <div className="flex justify-center">
-          <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={(value) => row.toggleSelected(!!value)}
-            aria-label="Select row"
-          />
-        </div>
-      ),
-      size: 50,
-    });
-    
-    // Template column
-    const templateColumn = columnHelper.display({
-      id: 'template',
-      header: 'Template',
-      cell: ({ row }) => {
-        const rowIndex = row.index;
-        return (
-          <MemoizedTemplateCell
-            rowIndex={rowIndex}
-            templateValue={row.original.__template || null}
+  validatingCells,
+  itemNumbers
+}: ValidationTableProps<T>) => {
+  const { translations } = useRsi<T>();
+
+  // Memoize the template column
+  const templateColumn = useMemo((): ColumnDef<RowData<T>, any> => ({
+    accessorKey: '__template',
+    header: 'Template',
+    size: 200,
+    cell: ({ row }) => {
+      const templateValue = row.original.__template || null;
+      return (
+        <TableCell className="p-1" style={{ width: '200px', minWidth: '200px' }}>
+          <SearchableTemplateSelect
             templates={templates}
-            applyTemplate={applyTemplate}
-            getTemplateDisplayText={getTemplateDisplayText}
+            value={templateValue || ''}
+            onValueChange={(value) => {
+              applyTemplate(value, [row.index]);
+            }}
+            getTemplateDisplayText={(template) => 
+              template ? getTemplateDisplayText(template) : 'Select template'
+            }
+          />
+        </TableCell>
+      );
+    }
+  }), [templates, applyTemplate, getTemplateDisplayText]);
+
+  // Memoize field columns
+  const fieldColumns = useMemo(() => fields.map((field): ColumnDef<RowData<T>, any> | null => {
+    if (field.disabled) return null;
+    
+    const fieldWidth = field.width || (
+      field.fieldType.type === "checkbox" ? 80 :
+      field.fieldType.type === "select" ? 150 : 
+      field.fieldType.type === "multi-select" ? 200 :
+      (field.fieldType.type === "input" || field.fieldType.type === "multi-input") && 
+      (field.fieldType as any).multiline ? 300 : 
+      150
+    );
+
+    return {
+      accessorKey: String(field.key),
+      header: field.label || String(field.key),
+      size: fieldWidth,
+      cell: ({ row }) => {
+        const cellUpdateRow = (rowIndex: number, key: string, value: any) => {
+          updateRow(rowIndex, key as T, value);
+        };
+
+        return (
+          <MemoizedCell
+            field={field as MutableField<T>}
+            value={row.original[field.key as keyof typeof row.original]}
+            rowIndex={row.index}
+            updateRow={cellUpdateRow}
+            validationErrors={validationErrors}
+            validatingCells={validatingCells}
+            itemNumbers={itemNumbers}
+            width={fieldWidth}
           />
         );
-      },
-      size: 200,
-    });
-    
-    // Create columns for each field
-    const fieldColumns = fields.map(field => {
-      // Get the field width directly from the field definition
-      // These are exactly the values defined in Import.tsx
-      const fieldWidth = field.width || (
-        field.fieldType.type === "checkbox" ? 80 :
-        field.fieldType.type === "select" ? 150 : 
-        field.fieldType.type === "multi-select" ? 200 :
-        (field.fieldType.type === "input" || field.fieldType.type === "multi-input") && 
-        (field.fieldType as any).multiline ? 300 : 
-        150
-      );
-      
-      return columnHelper.accessor(
-        (row: RowData<T>) => row[field.key as keyof typeof row],
-        {
-          id: field.key,
-          header: field.label,
-          cell: ({ row, column }) => {
-            try {
-              const rowIndex = row.index;
-              const value = row.getValue(column.id);
-              const errors = validationErrors.get(rowIndex)?.[column.id] || [];
-              const rowId = row.original?.__index;
-              
-              // Determine if we have custom options for this field
-              let fieldOptions;
-              let isOptionsLoading = false;
-              
-              // Handle line field - use company-specific product lines
-              if (field.key === 'line' && rowId && rowProductLines[rowId]) {
-                fieldOptions = rowProductLines[rowId];
-                isOptionsLoading = isLoadingLines[rowId] || false;
-              } 
-              // Handle subline field - use line-specific sublines
-              else if (field.key === 'subline' && rowId && rowSublines[rowId]) {
-                fieldOptions = rowSublines[rowId];
-                isOptionsLoading = isLoadingSublines[rowId] || false;
-              }
-              
-              // Cast the field type for ValidationCell
-              const typedField = field as Field<string>;
-              
-              return (
-                <MemoizedCell
-                  rowIndex={rowIndex}
-                  field={typedField}
-                  value={value}
-                  errors={errors}
-                  isValidatingUpc={isValidatingUpc}
-                  fieldOptions={fieldOptions}
-                  isOptionsLoading={isOptionsLoading}
-                  updateRow={updateRow}
-                  columnId={column.id}
-                />
-              );
-            } catch (error) {
-              console.error(`Error rendering cell for column ${column.id}:`, error);
-              return (
-                <div className="p-2 text-destructive text-sm">
-                  Error rendering cell
-                </div>
-              );
-            }
-          },
-          size: fieldWidth,
-        }
-      );
-    });
-    
-    return [selectionColumn, templateColumn, ...fieldColumns];
-  }, [
-    columnHelper, 
-    fields, 
-    templates, 
-    applyTemplate, 
-    getTemplateDisplayText,
-    rowProductLines,
-    rowSublines,
-    isLoadingLines,
-    isLoadingSublines,
-    validationErrors,
-    isValidatingUpc,
-    updateRow
-  ]);
-  
-  // Initialize table
+      }
+    };
+  }).filter((col): col is ColumnDef<RowData<T>, any> => col !== null), [fields, validationErrors, validatingCells, itemNumbers, updateRow]);
+
+  // Combine columns
+  const columns = useMemo(() => [templateColumn, ...fieldColumns], [templateColumn, fieldColumns]);
+
   const table = useReactTable({
     data,
     columns,
-    state: {
-      rowSelection,
-    },
+    getCoreRowModel: getCoreRowModel(),
+    state: { rowSelection },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.__index || String(row.index)
   });
-  
-  // Apply filters to rows if needed
-  const filteredRows = useMemo(() => {
-    let rows = table.getRowModel().rows;
-    
-    if (filters?.showErrorsOnly) {
-      rows = rows.filter(row => {
-        const rowIndex = row.index;
-        return validationErrors.has(rowIndex) && 
-          Object.values(validationErrors.get(rowIndex) || {}).some(errors => errors.length > 0);
-      });
-    }
-    
-    return rows;
-  }, [table, filters, validationErrors]);
+
+  // Don't render if no data
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-muted-foreground">
+          {filters?.showErrorsOnly 
+            ? translations.validationStep.noRowsMessageWhenFiltered || "No rows with errors"
+            : translations.validationStep.noRowsMessage || "No data to display"}
+        </p>
+      </div>
+    );
+  }
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="overflow-auto flex-1">
-        <table className="w-full border-separate border-spacing-0" style={{ tableLayout: 'fixed' }}>
-          <thead className="sticky top-0 z-10 bg-background border-b h-5">
-            <tr>
-              {table.getHeaderGroups()[0].headers.map((header) => (
-                <th 
-                  key={header.id}
-                  style={{
-                    width: `${header.getSize()}px`,
-                    minWidth: `${header.getSize()}px`,
-                  }}
-                  className="h-10 py-3 px-3 text-left text-muted-foreground font-medium text-sm bg-muted"
-                >
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {filteredRows.length ? (
-              filteredRows.map((row) => (
-                <tr
-                  key={row.id}
-                  data-state={row.getIsSelected() ? "selected" : undefined}
-                  className={validationErrors.has(row.index) ? "bg-red-50/30" : ""}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <td
-                      key={cell.id}
-                      style={{
-                        width: `${cell.column.getSize()}px`,
-                        minWidth: `${cell.column.getSize()}px`,
-                      }}
-                      className="p-1 align-middle border-b border-muted"
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </td>
-                  ))}
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan={columns.length} className="h-24 text-center">
-                  {filters?.showErrorsOnly
-                    ? translations.validationStep.noRowsMessageWhenFiltered || "No rows with errors found."
-                    : translations.validationStep.noRowsMessage || "No rows found."}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {table.getFlatHeaders().map((header) => (
+            <TableHead 
+              key={header.id}
+              style={{ 
+                width: `${header.getSize()}px`,
+                minWidth: `${header.getSize()}px`
+              }}
+            >
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow
+            key={row.id}
+            data-state={row.getIsSelected() && "selected"}
+            className={validationErrors.get(row.index) ? "bg-red-50/40" : "hover:bg-muted/50"}
+          >
+            {row.getVisibleCells().map((cell) => (
+              flexRender(cell.column.columnDef.cell, cell.getContext())
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
   );
 };
 
-export default ValidationTable; 
\ No newline at end of file
+export default React.memo(ValidationTable, (prev, next) => {
+  // Deep compare data
+  if (JSON.stringify(prev.data) !== JSON.stringify(next.data)) return false;
+  
+  // Compare validation errors
+  if (JSON.stringify(Array.from(prev.validationErrors.entries())) !== 
+      JSON.stringify(Array.from(next.validationErrors.entries()))) return false;
+  
+  // Compare filters
+  if (JSON.stringify(prev.filters) !== JSON.stringify(next.filters)) return false;
+  
+  // Compare row selection
+  if (JSON.stringify(prev.rowSelection) !== JSON.stringify(next.rowSelection)) return false;
+  
+  return true;
+}); 
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx
index 8d51604..acc1834 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 import { Field } from '../../../../types'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -25,34 +25,26 @@ const InputCell = <T extends string>({
   isMultiline = false,
   isPrice = false
 }: InputCellProps<T>) => {
-  const [inputValue, setInputValue] = useState('')
   const [isEditing, setIsEditing] = useState(false)
-  
-  // Initialize input value
-  useEffect(() => {
-    if (value !== undefined && value !== null) {
-      setInputValue(String(value))
-    } else {
-      setInputValue('')
-    }
-  }, [value])
+  const [editValue, setEditValue] = useState('')
   
   // Handle focus event
   const handleFocus = useCallback(() => {
     setIsEditing(true)
+    setEditValue(value !== undefined && value !== null ? String(value) : '')
     onStartEdit?.()
-  }, [onStartEdit])
+  }, [value, onStartEdit])
   
   // Handle blur event
   const handleBlur = useCallback(() => {
     setIsEditing(false)
     
     // Format the value for storage (remove formatting like $ for price)
-    let processedValue = inputValue
+    let processedValue = editValue
     
     if (isPrice) {
       // Remove any non-numeric characters except decimal point
-      processedValue = inputValue.replace(/[^\d.]/g, '')
+      processedValue = editValue.replace(/[^\d.]/g, '')
       
       // Parse as float and format to 2 decimal places to ensure valid number
       const numValue = parseFloat(processedValue)
@@ -63,21 +55,21 @@ const InputCell = <T extends string>({
     
     onChange(processedValue)
     onEndEdit?.()
-  }, [inputValue, onChange, onEndEdit, isPrice])
+  }, [editValue, onChange, onEndEdit, isPrice])
   
   // Format price value for display
   const getDisplayValue = useCallback(() => {
-    if (!isPrice || !inputValue) return inputValue
+    if (!isPrice || !value) return value
     
     // Extract numeric part
-    const numericValue = inputValue.replace(/[^\d.]/g, '')
+    const numericValue = String(value).replace(/[^\d.]/g, '')
     
     // Parse as float and format with dollar sign
     const numValue = parseFloat(numericValue)
-    if (isNaN(numValue)) return inputValue
+    if (isNaN(numValue)) return value
     
     return `$${numValue.toFixed(2)}`
-  }, [inputValue, isPrice])
+  }, [value, isPrice])
   
   // Add outline even when not in focus
   const outlineClass = "border focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -86,8 +78,8 @@ const InputCell = <T extends string>({
     <div className="w-full">
       {isMultiline ? (
         <Textarea
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          value={isEditing ? editValue : (value ?? '')}
+          onChange={(e) => setEditValue(e.target.value)}
           onFocus={handleFocus}
           onBlur={handleBlur}
           className={cn(
@@ -100,8 +92,8 @@ const InputCell = <T extends string>({
         isEditing ? (
           <Input
             type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
             onFocus={handleFocus}
             onBlur={handleBlur}
             autoFocus
@@ -119,7 +111,7 @@ const InputCell = <T extends string>({
               hasErrors ? "border-destructive" : "border-input"
             )}
           >
-            {isPrice ? getDisplayValue() : (inputValue)}
+            {isPrice ? getDisplayValue() : (value ?? '')}
           </div>
         )
       )}
@@ -127,4 +119,13 @@ const InputCell = <T extends string>({
   )
 }
 
-export default InputCell 
\ No newline at end of file
+// Memoize the component with a strict comparison function
+export default React.memo(InputCell, (prev, next) => {
+  // Only re-render if these props change
+  return (
+    prev.value === next.value &&
+    prev.hasErrors === next.hasErrors &&
+    prev.isMultiline === next.isMultiline &&
+    prev.isPrice === next.isPrice
+  )
+}) 
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiInputCell.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiInputCell.tsx
index a273d1b..5b2691d 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiInputCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiInputCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { Field } from '../../../../types'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -9,22 +9,35 @@ import { Button } from '@/components/ui/button'
 import { Check, ChevronsUpDown, X } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 
+// Define a type for field options
+interface FieldOption {
+  label: string;
+  value: string;
+}
+
+// Define extended field type that includes multi-select
+interface MultiSelectFieldType {
+  type: 'multi-select';
+  options?: readonly FieldOption[];
+  separator?: string;
+}
+
 interface MultiInputCellProps<T extends string> {
   field: Field<T>
-  value: any
-  onChange: (value: any) => void
+  value: string[]
+  onChange: (value: string[]) => void
   onStartEdit?: () => void
   onEndEdit?: () => void
   hasErrors?: boolean
   separator?: string
   isMultiline?: boolean
   isPrice?: boolean
-  options?: readonly { label: string; value: string }[]
+  options?: readonly FieldOption[]
 }
 
 const MultiInputCell = <T extends string>({
   field,
-  value,
+  value = [],
   onChange,
   onStartEdit,
   onEndEdit,
@@ -35,106 +48,117 @@ const MultiInputCell = <T extends string>({
   options: providedOptions
 }: MultiInputCellProps<T>) => {
   const [open, setOpen] = useState(false)
-  const [inputValue, setInputValue] = useState('')
-  const [selectedValues, setSelectedValues] = useState<string[]>([])
-  const [isEditing, setIsEditing] = useState(false)
-  
-  // Check if field is a multi-select field
-  const isMultiSelect = field.fieldType.type === 'multi-select'
-  const fieldOptions = isMultiSelect && field.fieldType.options 
-    ? field.fieldType.options 
-    : undefined
-  
-  // Convert options to a regular array to avoid issues with readonly arrays
-  const options = providedOptions 
-    ? Array.from(providedOptions) 
-    : (fieldOptions ? Array.from(fieldOptions) : [])
-  
-  // Initialize input value and selected values
-  useEffect(() => {
-    if (value !== undefined && value !== null) {
-      setInputValue(String(value))
-      
-      // Split the value based on separator for display
-      const valueArray = String(value).split(separator).map(v => v.trim()).filter(Boolean)
-      setSelectedValues(valueArray)
-    } else {
-      setInputValue('')
-      setSelectedValues([])
+  const [searchQuery, setSearchQuery] = useState("")
+
+  // Memoize field options to prevent unnecessary recalculations
+  const selectOptions = useMemo(() => {
+    const fieldType = field.fieldType;
+    const fieldOptions = fieldType && 
+      (fieldType.type === 'select' || fieldType.type === 'multi-select') && 
+      fieldType.options ? 
+      fieldType.options : 
+      [];
+    
+    // Use provided options or field options, ensuring they have the correct shape
+    const availableOptions = (providedOptions || fieldOptions || []).map(option => ({
+      label: option.label || String(option.value),
+      value: String(option.value)
+    }));
+    
+    // Add default option if no options available
+    if (availableOptions.length === 0) {
+      availableOptions.push({ label: 'No options available', value: '' });
     }
-  }, [value, separator])
+    
+    return availableOptions;
+  }, [field.fieldType, providedOptions]);
   
+  // Memoize filtered options based on search query
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return selectOptions;
+    return selectOptions.filter(option =>
+      option.label.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [selectOptions, searchQuery]);
+
+  // Memoize selected values display
+  const selectedValues = useMemo(() => {
+    return value.map(v => {
+      const option = selectOptions.find(opt => String(opt.value) === String(v));
+      return {
+        value: v,
+        label: option ? option.label : String(v)
+      };
+    });
+  }, [value, selectOptions]);
+
+  const handleSelect = useCallback((selectedValue: string) => {
+    const newValue = value.includes(selectedValue)
+      ? value.filter(v => v !== selectedValue)
+      : [...value, selectedValue];
+    onChange(newValue);
+    setSearchQuery("");
+  }, [value, onChange]);
+
+  const handleRemove = useCallback((valueToRemove: string) => {
+    onChange(value.filter(v => v !== valueToRemove));
+  }, [value, onChange]);
+
   // Handle focus
   const handleFocus = useCallback(() => {
-    setIsEditing(true)
-    onStartEdit?.()
-  }, [onStartEdit])
+    if (onStartEdit) onStartEdit();
+  }, [onStartEdit]);
   
   // Handle blur
   const handleBlur = useCallback(() => {
-    setIsEditing(false)
-    
-    // Format all values and join with separator
-    let processedValues = selectedValues
-    
-    if (isPrice) {
-      // Format all values as prices
-      processedValues = selectedValues.map(val => {
-        const numValue = parseFloat(val.replace(/[^\d.]/g, ''))
-        return !isNaN(numValue) ? numValue.toFixed(2) : val
-      })
-    }
-    
-    // Join all values with the separator
-    const joinedValue = processedValues.join(separator + ' ')
-    onChange(joinedValue)
-    onEndEdit?.()
-  }, [selectedValues, onChange, onEndEdit, isPrice, separator])
+    if (onEndEdit) onEndEdit();
+  }, [onEndEdit]);
   
-  // Toggle a value selection
-  const toggleValue = useCallback((value: string) => {
-    setSelectedValues(current => {
-      const isSelected = current.includes(value)
-      
-      if (isSelected) {
-        return current.filter(v => v !== value)
-      } else {
-        return [...current, value]
-      }
-    })
-  }, [])
-  
-  // Remove a selected value
-  const removeValue = useCallback((value: string) => {
-    setSelectedValues(current => current.filter(v => v !== value))
-  }, [])
+  // Handle direct input changes
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue.split(separator).map(v => v.trim()).filter(Boolean));
+  }, [separator, onChange]);
   
   // Format display values for price
   const getDisplayValues = useCallback(() => {
-    if (!isPrice) return selectedValues
+    if (!isPrice) return selectedValues.map(v => v.label);
     
-    return selectedValues.map(val => {
-      const numValue = parseFloat(val.replace(/[^\d.]/g, ''))
-      return !isNaN(numValue) ? `$${numValue.toFixed(2)}` : val
-    })
-  }, [selectedValues, isPrice])
+    return selectedValues.map(v => {
+      const numValue = parseFloat(v.value.replace(/[^\d.]/g, ''))
+      return !isNaN(numValue) ? `$${numValue.toFixed(2)}` : v.value
+    });
+  }, [selectedValues, isPrice]);
   
   // Add outline even when not in focus
   const outlineClass = "border focus-visible:ring-0 focus-visible:ring-offset-0"
   
   // If we have a multi-select field with options, use command UI
-  if (isMultiSelect && options.length > 0) {
-    // Ensure all options have the expected shape
-    const safeOptions = options.map(option => ({
-      label: option.label || String(option.value),
-      value: String(option.value)
-    }));
-    
-    // Make sure selectedValues are all strings
-    const safeSelectedValues = selectedValues.map(String);
-    
+  if (field.fieldType.type === 'multi-select' && selectOptions.length > 0) {
     return (
-      <div className="w-full">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-wrap gap-1">
+          {selectedValues.map(({ value: val, label }) => (
+            <Badge
+              key={val}
+              variant="secondary"
+              className={cn(
+                "mr-1 mb-1",
+                hasErrors && "bg-red-100 hover:bg-red-200"
+              )}
+            >
+              {label}
+              <button
+                type="button"
+                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                onClick={() => handleRemove(val)}
+              >
+                <X className="h-3 w-3" />
+                <span className="sr-only">Remove</span>
+              </button>
+            </Badge>
+          ))}
+        </div>
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button
@@ -142,72 +166,40 @@ const MultiInputCell = <T extends string>({
               role="combobox"
               aria-expanded={open}
               className={cn(
-                "w-full justify-between font-normal min-h-10",
-                outlineClass,
-                "text-left",
-                hasErrors ? "border-destructive" : ""
+                "w-full justify-between font-normal",
+                !value.length && "text-muted-foreground",
+                hasErrors && "border-red-500"
               )}
-              onClick={() => {
-                setOpen(!open)
-                handleFocus()
-              }}
+              onClick={handleFocus}
             >
-              <div className="flex flex-wrap gap-1 max-w-[90%]">
-                {safeSelectedValues.length > 0 ? (
-                  safeSelectedValues.map(value => {
-                    const option = safeOptions.find(opt => opt.value === value);
-                    return (
-                      <Badge 
-                        key={value} 
-                        variant="secondary"
-                        className="mr-1 mb-1"
-                      >
-                        {option ? option.label : value}
-                        <button
-                          className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                          onMouseDown={e => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                            removeValue(value)
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </Badge>
-                    )
-                  })
-                ) : (
-                  <span className="text-muted-foreground">{ "Select options..."}</span>
-                )}
-              </div>
-              <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+              {value.length === 0 ? "Select..." : `${value.length} selected`}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-full p-0" align="start">
-            <Command>
-              <CommandInput placeholder="Search options..." />
-              <CommandList>
+          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder="Search options..."
+                className="h-9"
+                value={searchQuery}
+                onValueChange={setSearchQuery}
+              />
+              <CommandList className="max-h-[200px] overflow-y-auto">
                 <CommandEmpty>No options found.</CommandEmpty>
                 <CommandGroup>
-                  {safeOptions.map((option) => (
+                  {filteredOptions.map((option) => (
                     <CommandItem
                       key={option.value}
-                      value={option.label}
-                      onSelect={() => {
-                        toggleValue(option.value);
-                      }}
+                      value={option.value}
+                      onSelect={handleSelect}
                     >
                       <div className="flex items-center">
-                        <div className={cn(
-                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
-                          safeSelectedValues.includes(option.value) 
-                            ? "bg-primary border-primary" 
-                            : "opacity-50"
-                        )}>
-                          {safeSelectedValues.includes(option.value) && (
-                            <Check className="h-3 w-3 text-primary-foreground" />
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            value.includes(option.value) ? "opacity-100" : "opacity-0"
                           )}
-                        </div>
+                        />
                         {option.label}
                       </div>
                     </CommandItem>
@@ -226,8 +218,8 @@ const MultiInputCell = <T extends string>({
     <div className="w-full">
       {isMultiline ? (
         <Textarea
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          value={value.join(separator)}
+          onChange={handleInputChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
           placeholder={`Enter values separated by ${separator}`}
@@ -238,43 +230,27 @@ const MultiInputCell = <T extends string>({
           )}
         />
       ) : (
-        isEditing ? (
-          <Input
-            type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={`Enter values separated by ${separator}`}
-            autoFocus
-            className={cn(
-              outlineClass,
-              hasErrors ? "border-destructive" : ""
-            )}
-          />
-        ) : (
-          <div 
-            onClick={handleFocus}
-            className={cn(
-              "px-3 py-2 h-10 rounded-md text-sm w-full cursor-text flex items-center overflow-hidden",
-              outlineClass,
-              hasErrors ? "border-destructive" : "border-input"
-            )}
-          >
-            {inputValue ? 
-              <div className="truncate">
-                {isPrice ? 
-                  getDisplayValues().join(separator + ' ') : 
-                  inputValue
-                }
-              </div> : 
-              <span className="text-muted-foreground">{`Enter values separated by ${separator}`}</span>
-            }
-          </div>
-        )
+        <div
+          className={cn(
+            "flex h-9 w-full rounded-md border px-3 py-1 text-sm",
+            "cursor-text truncate", // Add truncate for text overflow
+            outlineClass,
+            hasErrors ? "border-destructive" : "",
+            "overflow-hidden items-center"
+          )}
+          onClick={handleFocus}
+        >
+          {value.length > 0 ? getDisplayValues().join(`, `) : (
+            <span className="text-muted-foreground">
+              {`Enter values separated by ${separator}`}
+            </span>
+          )}
+        </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default MultiInputCell 
\ No newline at end of file
+MultiInputCell.displayName = 'MultiInputCell';
+
+export default React.memo(MultiInputCell); 
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx
index 6d7ff03..ae23a74 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx
@@ -24,8 +24,8 @@ export type SelectOption = {
 
 interface SelectCellProps<T extends string> {
   field: Field<T>
-  value: any
-  onChange: (value: any) => void
+  value: string
+  onChange: (value: string) => void
   onStartEdit?: () => void
   onEndEdit?: () => void
   hasErrors?: boolean
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx
index 688b316..d2f7270 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef } from 'react'
 
 interface UpcValidationResult {
   error?: boolean
@@ -6,63 +6,118 @@ interface UpcValidationResult {
   data?: Record<string, any>
 }
 
+interface ValidationState {
+  validatingCells: Set<string>;  // Using rowIndex-fieldKey as identifier
+  itemNumbers: Map<number, string>;  // Using rowIndex as key
+}
+
 export const useUpcValidation = () => {
-  const [validatingUpcRows, setValidatingUpcRows] = useState<number[]>([])
+  // Use a ref for validation state to avoid triggering re-renders
+  const validationStateRef = useRef<ValidationState>({
+    validatingCells: new Set(),
+    itemNumbers: new Map()
+  });
   
-  // Mock API call for UPC validation
-  // In a real implementation, you would call an actual API
-  const mockUpcValidationApi = async (upcValue: string): Promise<UpcValidationResult> => {
-    // Simulate API call delay
-    await new Promise(resolve => setTimeout(resolve, 500))
-    
-    // Validate UPC format
-    if (!/^\d{12,14}$/.test(upcValue)) {
-      return {
-        error: true,
-        message: 'Invalid UPC format. UPC should be 12-14 digits.'
-      }
-    }
-    
-    // Mock successful validation
-    // In a real implementation, this would return data from the API
-    return {
-      error: false,
-      data: {
-        item_number: `ITEM-${upcValue.substring(0, 6)}`,
-        // Add any other fields that would be returned by the UPC validation
-      }
-    }
-  }
+  // Use state only for forcing re-renders of specific cells
+  const [validatingCellKeys, setValidatingCellKeys] = useState<Set<string>>(new Set());
+  const [itemNumberUpdates, setItemNumberUpdates] = useState<Map<number, string>>(new Map());
+  
+  // Helper to create cell key
+  const getCellKey = (rowIndex: number, fieldKey: string) => `${rowIndex}-${fieldKey}`;
+  
+  // Start validating a cell
+  const startValidatingCell = useCallback((rowIndex: number, fieldKey: string) => {
+    const cellKey = getCellKey(rowIndex, fieldKey);
+    validationStateRef.current.validatingCells.add(cellKey);
+    setValidatingCellKeys(new Set(validationStateRef.current.validatingCells));
+  }, []);
+  
+  // Stop validating a cell
+  const stopValidatingCell = useCallback((rowIndex: number, fieldKey: string) => {
+    const cellKey = getCellKey(rowIndex, fieldKey);
+    validationStateRef.current.validatingCells.delete(cellKey);
+    setValidatingCellKeys(new Set(validationStateRef.current.validatingCells));
+  }, []);
+  
+  // Update item number
+  const updateItemNumber = useCallback((rowIndex: number, itemNumber: string) => {
+    validationStateRef.current.itemNumbers.set(rowIndex, itemNumber);
+    setItemNumberUpdates(new Map(validationStateRef.current.itemNumbers));
+  }, []);
+  
+  // Check if a specific cell is being validated
+  const isValidatingCell = useCallback((rowIndex: number, fieldKey: string): boolean => {
+    return validationStateRef.current.validatingCells.has(getCellKey(rowIndex, fieldKey));
+  }, []);
+  
+  // Get item number for a row
+  const getItemNumber = useCallback((rowIndex: number): string | undefined => {
+    return validationStateRef.current.itemNumbers.get(rowIndex);
+  }, []);
   
   // Validate a UPC value
-  const validateUpc = useCallback(async (upcValue: string, rowIndex: number): Promise<UpcValidationResult> => {
-    // Add row to validating state
-    setValidatingUpcRows(prev => [...prev, rowIndex])
+  const validateUpc = useCallback(async (
+    upcValue: string, 
+    rowIndex: number, 
+    supplier: string
+  ): Promise<UpcValidationResult> => {
+    // Start validating UPC and item number cells
+    startValidatingCell(rowIndex, 'upc');
+    startValidatingCell(rowIndex, 'item_number');
     
     try {
-      // Call the UPC validation API (mock for now)
-      const result = await mockUpcValidationApi(upcValue)
-      return result
+      // Call the UPC validation API
+      const response = await fetch(`/api/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplier)}`);
+      
+      if (response.status === 409) {
+        const errorData = await response.json();
+        return {
+          error: true,
+          message: `UPC already exists (${errorData.existingItemNumber})`,
+          data: errorData
+        };
+      }
+      
+      if (!response.ok) {
+        throw new Error(`API error (${response.status})`);
+      }
+      
+      const result = await response.json();
+      
+      if (result.success && result.itemNumber) {
+        // Update item number in our state
+        updateItemNumber(rowIndex, result.itemNumber);
+        return {
+          error: false,
+          data: {
+            itemNumber: result.itemNumber,
+            ...result
+          }
+        };
+      }
+      
+      return {
+        error: true,
+        message: 'Invalid response from server'
+      };
     } catch (error) {
-      console.error('Error validating UPC:', error)
+      console.error('Error validating UPC:', error);
       return {
         error: true,
         message: 'Failed to validate UPC'
-      }
+      };
     } finally {
-      // Remove row from validating state
-      setValidatingUpcRows(prev => prev.filter(idx => idx !== rowIndex))
+      // Stop validating both cells
+      stopValidatingCell(rowIndex, 'upc');
+      stopValidatingCell(rowIndex, 'item_number');
     }
-  }, [])
-  
-  // Check if a row is currently being validated
-  const isValidatingUpc = useCallback((rowIndex: number): boolean => {
-    return validatingUpcRows.includes(rowIndex)
-  }, [validatingUpcRows])
+  }, [startValidatingCell, stopValidatingCell, updateItemNumber]);
   
   return {
     validateUpc,
-    isValidatingUpc,
-    validatingUpcRows
+    isValidatingCell,
+    getItemNumber,
+    itemNumbers: itemNumberUpdates,
+    validatingCells: validatingCellKeys
   }
 } 
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
index 8b2d9fd..fec32da 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
@@ -1,8 +1,10 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { useRsi } from '../../../hooks/useRsi'
-import type { Data, Field, Fields, ErrorSources } from '../../../types'
+import type { Data, Field } from '../../../types'
 import { RowSelectionState } from '@tanstack/react-table'
 import { toast } from 'sonner'
+import { useQuery } from "@tanstack/react-query";
+import config from "@/config";
 
 // Define ErrorType directly in file to avoid import issues
 type ErrorType = {
@@ -11,11 +13,6 @@ type ErrorType = {
   source?: string;
 }
 
-// Define Meta type directly to avoid import issues
-type Meta = { 
-  __index?: string; 
-  __errors?: Record<string, any>;
-}
 
 // Define the Props interface for ValidationStepNew
 export interface Props<T extends string> {
@@ -34,6 +31,12 @@ export type RowData<T extends string> = Data<T> & {
   __original?: Record<string, any>;
   __corrected?: Record<string, any>;
   __changes?: Record<string, boolean>;
+  upc?: string;
+  barcode?: string;
+  supplier?: string;
+  company?: string;
+  item_number?: string;
+  [key: string]: any; // Allow any string key for dynamic fields
 }
 
 // Template interface
@@ -78,12 +81,10 @@ export const getApiUrl = () => window.config?.apiUrl || '/api';
 // Main validation state hook
 export const useValidationState = <T extends string>({
   initialData,
-  file,
   onBack,
-  onNext,
-  isFromScratch
-}: ValidationStateProps<T>) => {
+  onNext}: ValidationStateProps<T>) => {
   const { fields, rowHook, tableHook } = useRsi<T>();
+  
   // Core data state
   const [data, setData] = useState<RowData<T>[]>(initialData)
   
@@ -91,7 +92,7 @@ export const useValidationState = <T extends string>({
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   
   // Validation state
-  const [isValidating, setIsValidating] = useState(false)
+  const [isValidating] = useState(false)
   const [validationErrors, setValidationErrors] = useState<Map<number, Record<string, ErrorType[]>>>(new Map())
   const [rowValidationStatus, setRowValidationStatus] = useState<Map<number, 'pending' | 'validating' | 'validated' | 'error'>>(new Map())
   
@@ -104,9 +105,6 @@ export const useValidationState = <T extends string>({
     newTemplateType: '',
   })
   
-  // Field options state for company names
-  const [fieldOptions, setFieldOptions] = useState<any>(null)
-  
   // Filter state
   const [filters, setFilters] = useState<FilterState>({
     searchText: '',
@@ -116,7 +114,188 @@ export const useValidationState = <T extends string>({
   })
   
   // UPC validation state
-  const [validatingUpcRows, setValidatingUpcRows] = useState<number[]>([])
+  const [validatingUpcRows] = useState<number[]>([])
+  const [upcValidationResults, setUpcValidationResults] = useState<Map<number, { itemNumber: string }>>(new Map())
+  
+  // Create a UPC cache to prevent duplicate API calls
+  const processedUpcMapRef = useRef(new Map<string, string>());
+  const initialValidationDoneRef = useRef(false);
+  
+  // Fetch product by UPC from API - optimized with proper error handling and types
+  const fetchProductByUpc = useCallback(async (supplier: string, upc: string): Promise<ValidationResult> => {
+    try {
+      // Use the correct endpoint and parameter names
+      const response = await fetch(`${getApiUrl()}/check-upc-and-generate-sku?supplierId=${encodeURIComponent(supplier)}&upc=${encodeURIComponent(upc)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      
+      // Handle non-200 responses
+      if (!response.ok) {
+        // Properly handle different error status codes
+        if (response.status === 404) {
+          return {
+            error: true,
+            message: 'UPC not found',
+          };
+        } else if (response.status === 409) {
+          // Handle the case where UPC already exists
+          const errorData = await response.json();
+          return {
+            error: true,
+            message: 'UPC already exists',
+            data: {
+              itemNumber: errorData.existingItemNumber || '',
+            }
+          };
+        } else if (response.status === 429) {
+          return {
+            error: true,
+            message: 'Too many requests, please try again later',
+          };
+        } else {
+          return {
+            error: true,
+            message: `API error (${response.status})`,
+          };
+        }
+      }
+      
+      // Parse successful response
+      const data = await response.json();
+      
+      // If data has an error property, it's an API-level error
+      if (data.error) {
+        return {
+          error: true,
+          message: data.message || 'Error validating UPC',
+        };
+      }
+      
+      // Return successful validation with product data
+      return {
+        error: false,
+        data: {
+          itemNumber: data.itemNumber || '',
+          ...data
+        },
+      };
+    } catch (error) {
+      console.error('Error in fetchProductByUpc:', error);
+      return {
+        error: true,
+        message: 'Network error validating UPC',
+      };
+    }
+  }, []);
+  
+  // Validate a UPC code - optimized for minimal rendering impact
+  const validateUpc = useCallback(async (rowIndex: number, supplierId: string, upcValue: string): Promise<{ success: boolean, itemNumber?: string }> => {
+    try {
+      // Skip if either value is missing
+      if (!supplierId || !upcValue) {
+        return { success: false };
+      }
+      
+      // Check if we've already validated this UPC/supplier combination
+      const cacheKey = `${supplierId}-${upcValue}`;
+      if (processedUpcMapRef.current.has(cacheKey)) {
+        const cachedItemNumber = processedUpcMapRef.current.get(cacheKey);
+        
+        if (cachedItemNumber) {
+          // Update data directly with the cached item number
+          setData(prevData => {
+            const newData = [...prevData];
+            if (newData[rowIndex]) {
+              newData[rowIndex] = {
+                ...newData[rowIndex],
+                item_number: cachedItemNumber
+              };
+            }
+            return newData;
+          });
+          
+          return { success: true, itemNumber: cachedItemNumber };
+        }
+        
+        return { success: false };
+      }
+      
+      // Make API call to validate UPC
+      const response = await fetch(`/api/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplierId)}`);
+      
+      if (response.status === 409) {
+        // UPC already exists - show validation error
+        const errorData = await response.json();
+        
+        setData(prevData => {
+          const newData = [...prevData];
+          const rowToUpdate = newData[rowIndex];
+          if (rowToUpdate) {
+            const fieldKey = 'upc' in rowToUpdate ? 'upc' : 'barcode';
+            newData[rowIndex] = {
+              ...rowToUpdate,
+              __errors: {
+                ...(rowToUpdate.__errors || {}),
+                [fieldKey]: {
+                  level: 'error',
+                  message: `UPC already exists (${errorData.existingItemNumber})`
+                }
+              }
+            };
+          }
+          return newData;
+        });
+        
+        return { success: false };
+      } else if (response.ok) {
+        const responseData = await response.json();
+        
+        if (responseData.success && responseData.itemNumber) {
+          // Store in cache
+          processedUpcMapRef.current.set(cacheKey, responseData.itemNumber);
+          
+          // Update data directly with the new item number
+          setData(prevData => {
+            const newData = [...prevData];
+            if (newData[rowIndex]) {
+              newData[rowIndex] = {
+                ...newData[rowIndex],
+                item_number: responseData.itemNumber
+              };
+              
+              // Clear any UPC errors if they exist
+              if (newData[rowIndex].__errors) {
+                const updatedErrors = { ...newData[rowIndex].__errors };
+                delete updatedErrors.upc;
+                delete updatedErrors.barcode;
+                if (Object.keys(updatedErrors).length > 0) {
+                  newData[rowIndex].__errors = updatedErrors;
+                } else {
+                  delete newData[rowIndex].__errors;
+                }
+              }
+            }
+            return newData;
+          });
+          
+          return { success: true, itemNumber: responseData.itemNumber };
+        }
+      }
+      
+      return { success: false };
+    } catch (error) {
+      console.error(`Error validating UPC for row ${rowIndex}:`, error);
+      return { success: false };
+    }
+  }, [setData]);
+  
+  // Track which cells are currently being validated - allows targeted re-rendering
+  const isValidatingUpc = useCallback((rowIndex: number) => {
+    return validatingUpcRows.includes(rowIndex);
+  }, [validatingUpcRows]);
   
   // Compute filtered data based on current filters
   const filteredData = useMemo(() => {
@@ -201,7 +380,7 @@ export const useValidationState = <T extends string>({
     })
   }, [])
   
-  // Validate a field
+  // First, let's restore the original validateField function
   const validateField = useCallback((value: any, field: Field<T>): ErrorType[] => {
     const errors: ErrorType[] = []
     
@@ -212,14 +391,21 @@ export const useValidationState = <T extends string>({
     
     for (const validation of validations) {
       if (validation.rule === 'required') {
-        if (value === undefined || value === null || value === '') {
+        // Check if the field is empty - handle different value types
+        const isEmpty = 
+          value === undefined || 
+          value === null || 
+          value === '' || 
+          (Array.isArray(value) && value.length === 0);
+        
+        if (isEmpty) {
           errors.push({
             message: validation.errorMessage || 'This field is required',
-            level: validation.level || 'error',
-            source: 'row'
+            level: 'required',
+            source: 'required'  // Mark as required error specifically
           });
         }
-      } 
+      }
       else if (validation.rule === 'regex') {
         if (value !== undefined && value !== null && value !== '') {
           try {
@@ -228,7 +414,7 @@ export const useValidationState = <T extends string>({
               errors.push({
                 message: validation.errorMessage || 'Invalid format',
                 level: validation.level || 'error',
-                source: 'row'
+                source: 'validation'  // Mark as validation error
               });
             }
           } catch (error) {
@@ -236,13 +422,16 @@ export const useValidationState = <T extends string>({
           }
         }
       }
-      // Add other validation types as needed
+      else if (validation.rule === 'unique') {
+        // Unique validation will be handled at the table level
+        // This is just a placeholder for now
+      }
     }
     
     return errors;
   }, []);
   
-  // Update a single row's data
+  // Now, let's update the updateRow function to trigger validation after updating data
   const updateRow = useCallback((rowIndex: number, key: T, value: any) => {
     setData(prevData => {
       const newData = [...prevData]
@@ -259,7 +448,99 @@ export const useValidationState = <T extends string>({
       newData[rowIndex] = row as RowData<T>
       return newData
     })
-  }, [])
+    
+    // Validate just this single field immediately to provide feedback
+    setTimeout(() => {
+      const field = fields.find(f => f.key === key);
+      if (field) {
+        // Get current errors for the row
+        const currentRowErrors = new Map(validationErrors);
+        const rowErrorsMap = currentRowErrors.get(rowIndex) || {};
+        
+        // Validate just this field
+        const fieldErrors = validateField(value, field as unknown as Field<T>);
+        
+        // Update the errors for this field
+        const updatedRowErrors = {
+          ...rowErrorsMap,
+          [key]: fieldErrors
+        };
+        
+        // Update the validation errors
+        currentRowErrors.set(rowIndex, updatedRowErrors);
+        setValidationErrors(currentRowErrors);
+        
+        // Also update __errors in the data row
+        setData(prevData => {
+          const newData = [...prevData];
+          const row = { ...newData[rowIndex], __errors: updatedRowErrors };
+          newData[rowIndex] = row as RowData<T>;
+          return newData;
+        });
+        
+        // If this is a UPC or supplier field and both have values, validate UPC
+        if ((key === 'upc' || key === 'supplier') && data[rowIndex]) {
+          const currentRow = data[rowIndex];
+          // Use type assertion for accessing potentially undefined properties
+          const upcValue = key === 'upc' ? value : (currentRow as Record<string, any>)['upc'];
+          const supplierValue = key === 'supplier' ? value : (currentRow as Record<string, any>)['supplier'];
+          
+          if (upcValue && supplierValue) {
+            validateUpc(rowIndex, supplierValue, String(upcValue));
+          }
+        }
+        
+        // Check for duplicate item numbers
+        if (key === 'item_number' && value) {
+          const duplicates = data.filter((r, idx) => 
+            idx !== rowIndex && 
+            r.item_number === value
+          );
+          
+          if (duplicates.length > 0) {
+            // Add a duplicate error
+            const currentRowErrors = new Map(validationErrors);
+            const rowErrorsMap = currentRowErrors.get(rowIndex) || {};
+            
+            // Get existing errors for this field
+            const existingErrors = rowErrorsMap[key] || [];
+            
+            // Add the duplicate error if it doesn't already exist
+            const hasDuplicateError = existingErrors.some(e => e.message === 'Duplicate item number');
+            
+            if (!hasDuplicateError) {
+              const updatedErrors = [
+                ...existingErrors,
+                {
+                  message: 'Duplicate item number',
+                  level: 'error',
+                  source: 'validation'
+                }
+              ];
+              
+              // Update the errors for this field
+              const updatedRowErrors = {
+                ...rowErrorsMap,
+                [key]: updatedErrors
+              };
+              
+              // Update the validation errors
+              currentRowErrors.set(rowIndex, updatedRowErrors);
+              setValidationErrors(currentRowErrors);
+              
+              // Also update __errors in the data row
+              setData(prevData => {
+                const newData = [...prevData];
+                const row = { ...newData[rowIndex], __errors: updatedRowErrors };
+                newData[rowIndex] = row as RowData<T>;
+                return newData;
+              });
+            }
+          }
+        }
+      }
+    }, 0);
+  }, [data, fields, validateField, validationErrors]);
   
   // Validate a single row - optimized version
   const validateRow = useCallback(async (rowIndex: number) => {
@@ -272,6 +553,9 @@ export const useValidationState = <T extends string>({
       return updated;
     });
     
+    // Use a microtask to prevent UI blocking
+    await new Promise(resolve => setTimeout(resolve, 0));
+    
     try {
       // Collect field errors
       const fieldErrors: Record<string, ErrorType[]> = {};
@@ -288,7 +572,7 @@ export const useValidationState = <T extends string>({
         }
         
         // Use type assertion to address readonly fields issue
-        const errors = validateField(value, field as unknown as Field<T>);
+        const errors = validateField(value, field as Field<T>);
         if (errors.length > 0) {
           fieldErrors[key] = errors;
         }
@@ -299,7 +583,7 @@ export const useValidationState = <T extends string>({
         fieldErrors['supplier'] = [{
           message: 'Supplier is required',
           level: 'error',
-          source: 'row'
+          source: 'required'
         }];
       }
       
@@ -307,7 +591,7 @@ export const useValidationState = <T extends string>({
         fieldErrors['company'] = [{
           message: 'Company is required',
           level: 'error',
-          source: 'row'
+          source: 'required'
         }];
       }
       
@@ -343,135 +627,7 @@ export const useValidationState = <T extends string>({
     }
   }, [data, fields, validateField, rowValidationStatus, validationErrors]);
   
-  // Validate UPC for a row
-  const validateUpc = useCallback(async (rowIndex: number, upcValue: string) => {
-    if (!data[rowIndex]) return
-    
-    // Add row to validating state
-    setValidatingUpcRows(prev => [...prev, rowIndex])
-    
-    try {
-      // Mock UPC validation (replace with actual API call in production)
-      await new Promise(resolve => setTimeout(resolve, 500))
-      
-      // Validate UPC format
-      if (!/^\d{12,14}$/.test(upcValue)) {
-        toast.error('Invalid UPC format. UPC should be 12-14 digits.')
-        return
-      }
-      
-      // Mock successful validation result
-      const result: ValidationResult = {
-        data: {
-          item_number: `ITEM-${upcValue.substring(0, 6)}`,
-        }
-      }
-      
-      // Update row with UPC validation results
-      if (result && !result.error) {
-        setData(prevData => {
-          const newData = [...prevData]
-          newData[rowIndex] = {
-            ...newData[rowIndex],
-            ...result.data
-          }
-          return newData
-        })
-        
-        // Validate the row after UPC update
-        validateRow(rowIndex)
-      }
-    } catch (error) {
-      console.error('Error validating UPC:', error)
-      toast.error('Failed to validate UPC')
-    } finally {
-      // Remove row from validating state
-      setValidatingUpcRows(prev => prev.filter(idx => idx !== rowIndex))
-    }
-  }, [data, validateRow])
-  
-  // Validate all rows - optimized version without batching
-  const validateAllRows = useCallback(async () => {
-    if (isValidating) return; // Prevent multiple validation calls
-    
-    setIsValidating(true);
-    
-    try {
-      // Process all rows in a single pass
-      const updatedData = [...data];
-      const updatedErrors = new Map(validationErrors);
-      const updatedStatus = new Map(rowValidationStatus);
-      
-      // Mark all rows as validating first (single state update)
-      data.forEach((_, index) => {
-        updatedStatus.set(index, 'validating');
-      });
-      setRowValidationStatus(updatedStatus);
-      
-      // Process each row
-      for (let i = 0; i < data.length; i++) {
-        const rowErrors: Record<string, ErrorType[]> = {};
-        
-        // Basic field validations - use type assertion to fix TypeScript error
-        for (let j = 0; j < fields.length; j++) {
-          const field = fields[j];
-          // Type assertion to handle readonly fields
-          const fieldKey = String(field.key);
-          const value = data[i][fieldKey as keyof typeof data[typeof i]];
-          
-          // Skip validation for disabled fields
-          if (field.disabled) {
-            continue;
-          }
-          
-          // Use type assertion to address readonly fields issue
-          const errors = validateField(value, field as unknown as Field<T>);
-          if (errors.length > 0) {
-            rowErrors[fieldKey] = errors;
-          }
-        }
-        
-        // Special validation for supplier and company
-        if (!data[i].supplier) {
-          rowErrors['supplier'] = [{
-            message: 'Supplier is required',
-            level: 'error',
-            source: 'row'
-          }];
-        }
-        
-        if (!data[i].company) {
-          rowErrors['company'] = [{
-            message: 'Company is required',
-            level: 'error',
-            source: 'row'
-          }];
-        }
-        
-        // Store errors for this row
-        updatedErrors.set(i, rowErrors);
-        updatedStatus.set(i, Object.keys(rowErrors).length > 0 ? 'error' : 'validated');
-        
-        // Update row with errors
-        updatedData[i] = {
-          ...updatedData[i],
-          __errors: rowErrors
-        };
-      }
-      
-      // Batch state updates at the end to avoid multiple re-renders
-      setValidationErrors(updatedErrors);
-      setRowValidationStatus(updatedStatus);
-      setData(updatedData);
-      
-      toast.success('Validation complete');
-    } catch (error) {
-      console.error('Error validating all rows:', error);
-      toast.error('Error during validation');
-    } finally {
-      setIsValidating(false);
-    }
-  }, [data, fields, isValidating, validateField, validationErrors, rowValidationStatus]);
+  // Validate all rows - optimized version with batching for better performance
   
   // Load templates
   const loadTemplates = useCallback(async () => {
@@ -499,20 +655,6 @@ export const useValidationState = <T extends string>({
       }
       
       setTemplates(validTemplates)
-      
-      // Fetch field options if not already loaded
-      if (!fieldOptions) {
-        try {
-          const optionsResponse = await fetch(`${getApiUrl()}/import/field-options`);
-          if (optionsResponse.ok) {
-            const optionsData = await optionsResponse.json();
-            console.log('Field options fetched successfully:', optionsData);
-            setFieldOptions(optionsData);
-          }
-        } catch (error) {
-          console.error('Error fetching field options:', error);
-        }
-      }
     } catch (error) {
       console.error('Error fetching templates:', error)
       toast.error('Failed to load templates')
@@ -639,13 +781,60 @@ export const useValidationState = <T extends string>({
       return newData
     })
     
-    toast.success(`Template applied to ${rowIndexes.length} row(s)`)
+    // Only show toast for crucial operations, not validation
+    if (rowIndexes.length === 1) {
+      toast.success('Template applied');
+    } else if (rowIndexes.length > 1) {
+      toast.success(`Template applied to ${rowIndexes.length} rows`);
+    }
     
-    // Validate updated rows
-    rowIndexes.forEach(index => {
-      validateRow(index)
-    })
-  }, [templates, validateRow])
+    // Process validation in batches to prevent UI freezing
+    // For a small number of rows, validate immediately
+    if (rowIndexes.length <= 5) {
+      rowIndexes.forEach(index => {
+        validateRow(index);
+        
+        // Also check for UPC validation - use type assertion
+        const currentRow = data[index];
+        if (currentRow) {
+          const upcValue = (currentRow as Record<string, any>)['upc'];
+          const supplierValue = (currentRow as Record<string, any>)['supplier'];
+          if (upcValue && supplierValue) {
+            validateUpc(index, supplierValue, String(upcValue));
+          }
+        }
+      });
+    } else {
+      // For many rows, use a batched approach to keep UI responsive
+      const BATCH_SIZE = 5;
+      const processBatch = (startIndex: number) => {
+        const endIndex = Math.min(startIndex + BATCH_SIZE, rowIndexes.length);
+        
+        for (let i = startIndex; i < endIndex; i++) {
+          const rowIndex = rowIndexes[i];
+          validateRow(rowIndex);
+          
+          // Check for UPC validation
+          const currentRow = data[rowIndex];
+          if (currentRow) {
+            const upcValue = (currentRow as Record<string, any>)['upc'];
+            const supplierValue = (currentRow as Record<string, any>)['supplier'];
+            if (upcValue && supplierValue) {
+              validateUpc(rowIndex, supplierValue, String(upcValue));
+            }
+          }
+        }
+        
+        // Process next batch if more rows remain
+        if (endIndex < rowIndexes.length) {
+          setTimeout(() => processBatch(endIndex), 50);
+        }
+      };
+      
+      // Start processing batches
+      processBatch(0);
+    }
+  }, [templates, validateRow, validateUpc, data]);
   
   // Apply a template to selected rows
   const applyTemplateToSelected = useCallback((templateId: string) => {
@@ -664,76 +853,321 @@ export const useValidationState = <T extends string>({
     applyTemplate(templateId, selectedIndexes);
   }, [rowSelection, applyTemplate]);
   
-  // Helper function to get company name from ID
-  const getCompanyName = useCallback((companyId: string) => {
-    if (!fieldOptions || !fieldOptions.companies) return companyId;
-    try {
-      const company = fieldOptions.companies.find((c: { value: string; label: string }) => c.value === companyId);
-      return company ? company.label : companyId;
-    } catch (error) {
-      console.error("Error getting company name:", error);
-      return companyId;
-    }
-  }, [fieldOptions]);
-  
+  // Add field options query
+  const { data: fieldOptionsData } = useQuery({
+    queryKey: ["import-field-options"],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/import/field-options`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch field options");
+      }
+      return response.json();
+    },
+    staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+    gcTime: 30 * 60 * 1000, // Keep in cache for 30 minutes
+  });
+
   // Get display text for a template
   const getTemplateDisplayText = useCallback((templateId: string | null) => {
     if (!templateId) return 'Select a template'
-    
+
     const template = templates.find(t => t.id.toString() === templateId)
     if (!template) return 'Unknown template'
-    
+
     try {
       const companyId = template.company || "";
       const productType = template.product_type || "Unknown Type";
-      const companyName = getCompanyName(companyId);
+      
+      // Find company name from field options
+      const companyName = fieldOptionsData?.companies?.find((c: { value: string; label: string }) => 
+        c.value === companyId
+      )?.label || companyId;
+      
       return `${companyName} - ${productType}`;
     } catch (error) {
       console.error("Error formatting template display text:", error, template);
       return "Error displaying template";
     }
-  }, [templates, getCompanyName])
-  
+  }, [templates, fieldOptionsData]);
+
   // Check if there are any errors
   const hasErrors = useMemo(() => {
     for (const [_, status] of rowValidationStatus.entries()) {
       if (status === 'error') return true
     }
     return false
-  }, [rowValidationStatus])
-  
-  // Check if a row is currently being validated for UPC
-  const isValidatingUpc = useCallback((rowIndex: number): boolean => {
-    return validatingUpcRows.includes(rowIndex)
-  }, [validatingUpcRows])
-  
-  // Initialize data with better performance
-  useEffect(() => {
-    // Only run this once on mount
-    const initializeData = () => {
-      // Initialize row validation status map in a single operation
-      const initialStatus = new Map();
-      data.forEach((_, index) => {
-        initialStatus.set(index, 'pending');
-      });
-      setRowValidationStatus(initialStatus);
-      
-      // Validate all rows automatically
-      data.forEach((_, index) => {
-        validateRow(index);
-      });
-    };
-    
-    // Initialize data and load templates
-    initializeData();
-    loadTemplates();
-  }, [loadTemplates]); // Add loadTemplates to dependencies
-  
+  }, [rowValidationStatus]);
+
   // Add a refreshTemplates function
   const refreshTemplates = useCallback(() => {
     loadTemplates();
   }, [loadTemplates]);
-  
+
+  // Create a function to handle button clicks (continue or back)
+  const handleButtonClick = useCallback(async (direction: 'next' | 'back') => {
+    if (direction === 'back' && onBack) {
+      // If a specific action is defined for back, use it
+      onBack();
+      return;
+    }
+    
+    if (direction === 'next') {
+      // When proceeding to the next screen, check for unvalidated rows first
+      const hasErrors = [...validationErrors.entries()].some(([_, errors]) => {
+        return Object.values(errors).some(errorSet => 
+          errorSet.some(error => error.source !== 'required')
+        );
+      });
+      
+      if (hasErrors) {
+        // We have validation errors - ask the user to fix them first or continue anyway
+        const shouldContinue = window.confirm(
+          'There are validation errors in your data. Do you want to continue anyway?'
+        );
+        
+        if (!shouldContinue) {
+          // User chose to fix errors
+          return;
+        }
+      }
+      
+      // Prepare the data for the next step
+      try {
+        // No toast here - unnecessary and distracting
+        
+        // Call onNext with the cleaned data
+        if (onNext) {
+          // Remove metadata fields before passing to onNext
+          const cleanedData = data.map(row => {
+            const { __errors, __original, __corrected, __changes, ...cleanRow } = row;
+            return cleanRow as Data<T>;
+          });
+          
+          onNext(cleanedData);
+        }
+      } catch (error) {
+        console.error('Error proceeding to next step:', error);
+        toast.error('Error saving data');
+      }
+    }
+  }, [data, onBack, onNext, validationErrors]);
+
+  // Initialize validation on mount
+  useEffect(() => {
+    if (initialValidationDoneRef.current) return;
+
+    // Function to perform basic field validations
+    const runBasicValidation = () => {
+      console.log('Starting basic field validation');
+
+      if (!data.length) {
+        console.log('No data to validate');
+        return;
+      }
+
+      const newData = [...data];
+      const initialStatus = new Map();
+      const initialErrors = new Map();
+
+      console.log(`Validating ${data.length} rows`);
+
+      for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
+        const row = data[rowIndex];
+        const fieldErrors: Record<string, ErrorType[]> = {};
+        let hasErrors = false;
+
+        fields.forEach(field => {
+          if (field.disabled) return;
+          const key = String(field.key);
+          const value = row[key as keyof typeof row];
+          const errors = validateField(value, field as Field<T>);
+          if (errors.length > 0) {
+            fieldErrors[key] = errors;
+            hasErrors = true;
+          }
+        });
+        
+        // Special validation for supplier and company
+        if (!row.supplier) {
+          fieldErrors['supplier'] = [{
+            message: 'Supplier is required',
+            level: 'error',
+            source: 'required'
+          }];
+          hasErrors = true;
+        }
+        if (!row.company) {
+          fieldErrors['company'] = [{
+            message: 'Company is required',
+            level: 'error',
+            source: 'required'
+          }];
+          hasErrors = true;
+        }
+
+        if (hasErrors) {
+          initialErrors.set(rowIndex, fieldErrors);
+          initialStatus.set(rowIndex, 'error');
+        } else {
+          initialStatus.set(rowIndex, 'validated');
+        }
+
+        newData[rowIndex] = {
+          ...newData[rowIndex],
+          __errors: Object.keys(fieldErrors).length > 0 ? fieldErrors : undefined
+        };
+      }
+
+      // Batch update all state at once
+      setData(newData);
+      setRowValidationStatus(initialStatus);
+      setValidationErrors(initialErrors);
+
+      console.log('Basic field validation complete');
+    };
+
+    // Function to perform UPC validations asynchronously
+    const runUPCValidation = async () => {
+      console.log('Starting UPC validation');
+
+      // Collect rows that need UPC validation
+      const rowsWithUpc = [];
+      for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
+        const row = data[rowIndex] as Record<string, any>;
+        if (row.upc && row.supplier) {
+          rowsWithUpc.push({ rowIndex, upc: row.upc, supplier: row.supplier });
+        }
+      }
+
+      console.log(`Found ${rowsWithUpc.length} rows with UPC and supplier`);
+      const BATCH_SIZE = 3;
+
+      for (let i = 0; i < rowsWithUpc.length; i += BATCH_SIZE) {
+        const batch = rowsWithUpc.slice(i, i + BATCH_SIZE);
+        await Promise.all(batch.map(async ({ rowIndex, upc, supplier }) => {
+          try {
+            const cacheKey = `${supplier}-${upc}`;
+            if (processedUpcMapRef.current.has(cacheKey)) {
+              const cachedItemNumber = processedUpcMapRef.current.get(cacheKey);
+              if (cachedItemNumber) {
+                setUpcValidationResults(prev => {
+                  const newResults = new Map(prev);
+                  newResults.set(rowIndex, { itemNumber: cachedItemNumber });
+                  return newResults;
+                });
+              }
+              return;
+            }
+
+            console.log(`Validating UPC: ${upc} for supplier: ${supplier}`);
+            const result = await fetchProductByUpc(supplier, upc);
+            if (result && result.data && result.data.itemNumber) {
+              const itemNumber = result.data.itemNumber;
+              processedUpcMapRef.current.set(cacheKey, itemNumber);
+              setUpcValidationResults(prev => {
+                if (prev.get(rowIndex)?.itemNumber === itemNumber) {
+                  return prev;
+                }
+                const newResults = new Map(prev);
+                newResults.set(rowIndex, { itemNumber });
+                return newResults;
+              });
+            } else if (result.error && result.message !== 'UPC not found') {
+              setValidationErrors(prev => {
+                const newErrors = new Map(prev);
+                const rowErrors = newErrors.get(rowIndex) || {};
+                newErrors.set(rowIndex, {
+                  ...rowErrors,
+                  upc: [{
+                    message: result.message || 'Invalid UPC',
+                    level: 'error',
+                    source: 'validation'
+                  }]
+                });
+                return newErrors;
+              });
+              setRowValidationStatus(prev => {
+                const newStatus = new Map(prev);
+                newStatus.set(rowIndex, 'error');
+                return newStatus;
+              });
+            }
+          } catch (error) {
+            console.error('Error validating UPC:', error);
+          }
+        }));
+
+        if (i + BATCH_SIZE < rowsWithUpc.length) {
+          await new Promise(resolve => setTimeout(resolve, 50));
+        }
+      }
+
+      console.log('UPC validation complete');
+    };
+
+    // Run basic validations immediately to update UI
+    runBasicValidation();
+    // Schedule UPC validations asynchronously to avoid blocking the UI
+    setTimeout(() => {
+      runUPCValidation();
+    }, 0);
+
+    initialValidationDoneRef.current = true;
+  }, [data, fields, validateField, fetchProductByUpc]);
+
+  // Update fields with latest options
+  const fieldsWithOptions = useMemo(() => {
+    if (!fieldOptionsData) return fields;
+
+    return fields.map(field => {
+      if (field.fieldType.type !== 'select' && field.fieldType.type !== 'multi-select') {
+        return field;
+      }
+
+      // Get the correct options based on field key
+      let options = [];
+      switch (field.key) {
+        case 'company':
+          options = [...(fieldOptionsData.companies || [])];
+          break;
+        case 'supplier':
+          options = [...(fieldOptionsData.suppliers || [])];
+          break;
+        case 'categories':
+          options = [...(fieldOptionsData.categories || [])];
+          break;
+        case 'themes':
+          options = [...(fieldOptionsData.themes || [])];
+          break;
+        case 'colors':
+          options = [...(fieldOptionsData.colors || [])];
+          break;
+        case 'tax_cat':
+          options = [...(fieldOptionsData.taxCategories || [])];
+          break;
+        case 'ship_restrictions':
+          options = [...(fieldOptionsData.shippingRestrictions || [])];
+          break;
+        case 'artist':
+          options = [...(fieldOptionsData.artists || [])];
+          break;
+        case 'size_cat':
+          options = [...(fieldOptionsData.sizes || [])];
+          break;
+        default:
+          options = [...(field.fieldType.options || [])];
+      }
+
+      return {
+        ...field,
+        fieldType: {
+          ...field.fieldType,
+          options
+        }
+      };
+    });
+  }, [fields, fieldOptionsData]);
+
   return {
     // Data
     data,
@@ -782,10 +1216,14 @@ export const useValidationState = <T extends string>({
     isValidatingUpc,
     
     // Fields reference
-    fields,
+    fields: fieldsWithOptions, // Return updated fields with options
     
     // Hooks
     rowHook,
-    tableHook
+    tableHook,
+    
+    // Button handling
+    handleButtonClick,
+    upcValidationResults,
   }
 } 
\ No newline at end of file