Fix header/footer placement on image upload step

inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/ImageUploadStep.tsx

@@ -3,8 +3,6 @@ import { useRsi } from "../../hooks/useRsi";
 import { Button } from "@/components/ui/button";
 import { Loader2, Upload, Trash2, AlertCircle, GripVertical, Maximize2, X } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
 import config from "@/config";
@@ -13,7 +11,6 @@ import { cn } from "@/lib/utils";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   DndContext, 
-  closestCenter,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -23,10 +20,7 @@ import {
   DragStartEvent,
   pointerWithin,
   rectIntersection,
-  getFirstCollision,
-  useDndMonitor,
   DragMoveEvent,
-  closestCorners,
   CollisionDetection,
   useDroppable
 } from '@dnd-kit/core';
@@ -35,7 +29,6 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
-  rectSortingStrategy,
   horizontalListSortingStrategy
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -45,7 +38,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 
-type Props<T extends string> = {
+type Props<T extends string = string> = {
   data: any[];
   file: File;
   onBack?: () => void;
@@ -88,9 +81,10 @@ export const ImageUploadStep = <T extends string>({
   // Set up sensors for drag and drop with enhanced configuration
   const sensors = useSensors(
     useSensor(PointerSensor, {
-      // Make it responsive with minimal constraints
+      // Make it responsive with less restrictive constraints
       activationConstraint: {
-        distance: 3, // Reduced distance for more responsive drag
+        distance: 1, // Reduced distance for more responsive drag
+        delay: 0, // No delay
         tolerance: 5
       },
     }),
@@ -104,73 +98,15 @@ export const ImageUploadStep = <T extends string>({
 
   // Custom collision detection algorithm that prioritizes product containers
   const customCollisionDetection: CollisionDetection = (args) => {
-    const { droppableContainers, active, pointerCoordinates } = args;
-    
-    if (!pointerCoordinates) {
-      return [];
-    }
-    
-    // Get the active container (product index)
-    const activeContainer = findContainer(active.id.toString());
-    
-    // Get all collisions
+    // Use the built-in pointerWithin algorithm first for better performance
     const pointerCollisions = pointerWithin(args);
-    const rectCollisions = rectIntersection(args);
     
-    // Combine collision methods for more reliable detection
-    const allCollisions = [...pointerCollisions, ...rectCollisions];
-    
-    // Check for image collisions first - for reordering within the same container
-    const imageCollisions = allCollisions.filter(collision => {
-      const collisionId = collision.id.toString();
-      // Only detect other images, not the active image
-      if (collisionId === active.id.toString()) return false;
-      
-      // Check if it's an image by looking for it in productImages
-      return productImages.some(img => img.id === collisionId);
-    });
-    
-    // If we have image collisions within the same container, prioritize those for reordering
-    if (activeContainer && imageCollisions.length > 0) {
-      const sameContainerCollisions = imageCollisions.filter(collision => {
-        const image = productImages.find(img => img.id === collision.id);
-        return image && image.productIndex.toString() === activeContainer;
-      });
-      
-      if (sameContainerCollisions.length > 0) {
-        return [sameContainerCollisions[0]]; // Return the first image collision in the same container
-      }
+    if (pointerCollisions.length > 0) {
+      return pointerCollisions;
     }
     
-    // If no image collisions in the same container, check for product container collisions
-    const productContainerCollisions = allCollisions.filter(
-      collision => typeof collision.id === 'string' && collision.id.toString().startsWith('product-')
-    );
-    
-    // If the active container is different from container collisions, prioritize those
-    if (activeContainer && productContainerCollisions.length > 0) {
-      const differentContainerCollisions = productContainerCollisions.filter(collision => {
-        const containerIndex = collision.id.toString().split('-')[1];
-        return containerIndex !== activeContainer;
-      });
-      
-      if (differentContainerCollisions.length > 0) {
-        return [differentContainerCollisions[0]];
-      }
-    }
-    
-    // If we have any product container collisions, use those
-    if (productContainerCollisions.length > 0) {
-      return [productContainerCollisions[0]];
-    }
-    
-    // Finally, check images in different containers
-    if (imageCollisions.length > 0) {
-      return [imageCollisions[0]];
-    }
-    
-    // Fall back to all collisions
-    return allCollisions.length > 0 ? [allCollisions[0]] : [];
+    // Fall back to rectIntersection if no pointer collisions
+    return rectIntersection(args);
   };
 
   // Handle drag start to set active image and prevent default behavior
@@ -186,14 +122,13 @@ export const ImageUploadStep = <T extends string>({
 
   // Handle drag over to track which product container is being hovered
   const handleDragOver = (event: DragMoveEvent) => {
-    const { active, over } = event;
+    const { over } = event;
     
     if (!over) {
       setActiveDroppableId(null);
       return;
     }
     
-    const activeContainer = findContainer(active.id.toString());
     let overContainer = null;
     
     // Check if we're over a product container directly
@@ -255,22 +190,13 @@ export const ImageUploadStep = <T extends string>({
         // Check if the container has images
         const hasImages = getProductImages(index).length > 0;
         
-        // Add stronger attributes for empty containers to ensure they stand out as drop targets
-        if (!hasImages) {
-          container.setAttribute('data-empty', 'true');
-          // Setting tabindex makes the element focusable which can help with accessibility
-          container.setAttribute('tabindex', '0');
+        // Set data-empty attribute for tracking purposes
+        container.setAttribute('data-empty', hasImages ? 'false' : 'true');
         
-          // Add ARIA attributes to improve accessibility and recognition
-          container.setAttribute('aria-label', `Empty drop zone for product ${index + 1}`);
-          
-          // Ensure the empty container has sufficient size to be a drop target
+        // Ensure the container has sufficient size to be a drop target
         if (container.offsetHeight < 100) {
           container.style.minHeight = '100px';
         }
-        } else {
-          container.setAttribute('data-empty', 'false');
-        }
       }
     });
   }, [data, productImages]); // Add productImages as a dependency to re-run when images change
@@ -285,32 +211,23 @@ export const ImageUploadStep = <T extends string>({
         // Define handlers for native browser drag events
         const handleNativeDragOver = (e: DragEvent) => {
           e.preventDefault();
-          if (getProductImages(index).length === 0) {
-            // Highlight empty containers during dragover
+          // Highlight all containers during dragover
           container.classList.add('border-primary', 'bg-primary/5');
           setActiveDroppableId(`product-${index}`);
-          }
         };
         
-        const handleNativeDragLeave = (e: DragEvent) => {
-          if (getProductImages(index).length === 0) {
+        const handleNativeDragLeave = () => {
           // Remove highlight when drag leaves
           container.classList.remove('border-primary', 'bg-primary/5');
           if (activeDroppableId === `product-${index}`) {
             setActiveDroppableId(null);
           }
-          }
         };
         
         // Add these handlers
         container.addEventListener('dragover', handleNativeDragOver);
         container.addEventListener('dragleave', handleNativeDragLeave);
         
-        // Log this for debugging
-        console.log(`Added native drag handlers to product-${index}`, {
-          isEmpty: getProductImages(index).length === 0
-        });
-        
         // Return cleanup function
         return () => {
           container.removeEventListener('dragover', handleNativeDragOver);
@@ -318,7 +235,7 @@ export const ImageUploadStep = <T extends string>({
         };
       }
     });
-  }, [data, productImages]); // Re-run when data or productImages change
+  }, [data, productImages, activeDroppableId]); // Re-run when data or productImages change
 
   // Function to remove an image URL from a product
   const removeImageFromProduct = (productIndex: number, imageUrl: string) => {
@@ -489,7 +406,6 @@ export const ImageUploadStep = <T extends string>({
             newItems.push(...newFilteredItems);
             
             // Update the product data with the new image order
-            const updatedData = updateProductImageOrder(sourceProductIndex, newFilteredItems);
             
             return newItems;
           }
@@ -511,7 +427,6 @@ export const ImageUploadStep = <T extends string>({
           newItems.push(...newFilteredItems);
           
           // Update the product data with the new image order
-          const updatedData = updateProductImageOrder(sourceProductIndex, newFilteredItems);
           
           return newItems;
         });
@@ -559,24 +474,6 @@ export const ImageUploadStep = <T extends string>({
   };
   
   // Function to update product data with the new image order
-  const updateProductImageOrder = (productIndex: number, orderedImages: ProductImageSortable[]) => {
-    // Create a copy of the data
-    const newData = [...data];
-    
-    // Get the current product
-    const product = newData[productIndex];
-    
-    // Get the ordered URLs
-    const orderedUrls = orderedImages.map(img => img.imageUrl);
-    
-    // Update the product with the ordered URLs
-    product.image_url = orderedUrls.join(',');
-    
-    // Update the data
-    newData[productIndex] = product;
-    
-    return newData;
-  };
   
   // Function to handle image upload
   const handleImageUpload = async (files: FileList | File[], productIndex: number) => {
@@ -626,7 +523,6 @@ export const ImageUploadStep = <T extends string>({
         );
         
         // Update the product data with the new image URL
-        const updatedData = addImageToProduct(productIndex, result.imageUrl);
         
         toast.success(`Image uploaded for ${data[productIndex].name || `Product #${productIndex + 1}`}`);
       } catch (error) {
@@ -853,7 +749,6 @@ export const ImageUploadStep = <T extends string>({
       setProductImages(prev => prev.filter((_, idx) => idx !== imageIndex));
       
       // Remove the image URL from the product data
-      const updatedData = removeImageFromProduct(image.productIndex, image.imageUrl);
       
       toast.success('Image removed successfully');
     } catch (error) {
@@ -958,7 +853,7 @@ export const ImageUploadStep = <T extends string>({
       <div 
         {...getRootProps()}
         className={cn(
-          "border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md h-24 w-24 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/70 transition-colors shrink-0",
+          "border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md h-24 w-24 flex flex-col items-center justify-center self-center cursor-pointer hover:bg-muted/70 transition-colors shrink-0",
           isDragActive && "border-primary bg-muted"
         )}
       >
@@ -984,7 +879,7 @@ export const ImageUploadStep = <T extends string>({
         <img 
           src={image.previewUrl} 
           alt={`Unassigned image ${index + 1}`}
-          className="h-28 w-full object-cover"
+          className="h-full w-full object-cover"
         />
         <div className="absolute bottom-0 left-0 right-0 bg-black/60 p-2">
           <p className="text-white text-xs mb-1 truncate">{image.file.name}</p>
@@ -1018,7 +913,7 @@ export const ImageUploadStep = <T extends string>({
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogTrigger asChild>
             <button 
-              className="absolute top-1 left-1 bg-black/60 rounded-full p-1.5 text-white z-10 hover:bg-black/80"
+              className="absolute top-1 left-1 bg-black/60 rounded-full p-1 text-white z-10 hover:bg-black/80"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -1093,57 +988,6 @@ export const ImageUploadStep = <T extends string>({
   };
 
   // Add the ZoomedImage component to show a larger version of the image
-  const ZoomedImage = ({ imageUrl, alt }: { imageUrl: string; alt: string }) => {
-    const [open, setOpen] = useState(false);
-    
-    return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <button 
-            className="absolute bottom-1 left-1 bg-black/60 rounded-full p-1.5 text-white z-10 hover:bg-black/80"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation(); // Prevent triggering drag listeners
-              setOpen(true);
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation(); // Prevent drag from starting
-            }}
-            onMouseDown={(e) => {
-              e.stopPropagation(); // Prevent drag from starting
-            }}
-            onTouchStart={(e) => {
-              e.stopPropagation(); // Prevent drag from starting on touch
-            }}
-          >
-            <Maximize2 className="h-3.5 w-3.5" />
-          </button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[650px] max-h-[90vh] p-6 bg-background/95 backdrop-blur-sm border border-border rounded-lg shadow-2xl">
-          <div className="relative flex flex-col items-center justify-center">
-            <Button 
-              variant="ghost" 
-              size="icon" 
-              className="absolute -top-2 -right-2 bg-black/60 text-white hover:bg-black/80 rounded-full z-10 h-8 w-8"
-              onClick={() => setOpen(false)}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-            <div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
-              <img 
-                src={imageUrl} 
-                alt={alt}
-                className="max-h-[70vh] max-w-full object-contain"
-              />
-            </div>
-            <div className="mt-2 text-sm text-muted-foreground text-center">
-              {alt || "Product Image"}
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  };
 
   // Sortable Image component with enhanced drag prevention
   const SortableImage = ({ image, productIndex, imgIndex }: { image: ProductImageSortable, productIndex: number, imgIndex: number }) => {
@@ -1166,17 +1010,19 @@ export const ImageUploadStep = <T extends string>({
     });
     
     // Create a new style object with fixed dimensions to prevent distortion
-    const style = {
+    const style: React.CSSProperties = {
       transform: CSS.Transform.toString(transform),
       transition,
       opacity: isDragging ? 0.5 : 1,
-      zIndex: isDragging ? 10 : 0, // Higher z-index when dragging
-      touchAction: 'none' as 'none', // Prevent touch scrolling during drag
+      zIndex: isDragging ? 999 : 1, // Higher z-index when dragging
+      touchAction: 'none', // Prevent touch scrolling during drag 
+      userSelect: 'none', // Prevent text selection during drag
+      cursor: isDragging ? 'grabbing' : 'grab',
       width: '96px',
       height: '96px',
       flexShrink: 0,
       flexGrow: 0,
-      position: 'relative' as 'relative',
+      position: 'relative',
     };
     
     // Create a ref for the buttons to exclude them from drag listeners
@@ -1187,9 +1033,14 @@ export const ImageUploadStep = <T extends string>({
       <div 
         ref={setNodeRef}
         style={style}
-        className="relative border rounded-md overflow-hidden flex items-center justify-center shrink-0 cursor-grab active:cursor-grabbing select-none no-native-drag"
+        className="relative border rounded-md overflow-hidden flex items-center justify-center shrink-0 cursor-grab active:cursor-grabbing select-none no-native-drag group hover:ring-2 hover:ring-primary/30 transition-all"
         {...attributes}
         {...listeners}
+        onDragStart={(e) => {
+          // This ensures the native drag doesn't interfere
+          e.preventDefault();
+          e.stopPropagation();
+        }}
       >
         {image.loading ? (
           <div className="flex flex-col items-center justify-center p-2">
@@ -1200,13 +1051,17 @@ export const ImageUploadStep = <T extends string>({
           <>
             <img 
               src={getFullImageUrl(image.imageUrl)} 
-              alt={`Product ${productIndex + 1} - Image ${imgIndex + 1}`}
+              alt={`${data[productIndex].name || `Product #${productIndex + 1}`} - Image ${imgIndex + 1}`}
               className="h-full w-full object-cover select-none no-native-drag"
               draggable={false}
             />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200"></div>
+            <div className="absolute right-0 top-0 p-1 opacity-0 group-hover:opacity-90 transition-opacity">
+              <GripVertical className="h-3 w-3 text-white drop-shadow-md" />
+            </div>
             <button 
               ref={deleteButtonRef}
-              className="absolute top-1 right-1 bg-black/60 rounded-full p-1 text-white z-10 hover:bg-black/80"
+              className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 top-1 right-1 bg-black/40 hover:bg-black/70 hover:scale-110 rounded-full p-1 text-white z-10"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation(); // Prevent triggering drag listeners
@@ -1222,7 +1077,7 @@ export const ImageUploadStep = <T extends string>({
                 e.stopPropagation(); // Prevent drag from starting on touch
               }}
             >
-              <Trash2 className="h-3 w-3" />
+              <Trash2 className="h-3.5 w-3.5" />
             </button>
             
             {/* Fix zoom button with proper state management */}
@@ -1230,7 +1085,7 @@ export const ImageUploadStep = <T extends string>({
               <DialogTrigger asChild>
                 <button 
                   ref={zoomButtonRef}
-                  className="absolute bottom-1 left-1 bg-black/60 rounded-full p-1 text-white z-10 hover:bg-black/80"
+                  className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 bottom-1 left-1 bg-black/40 hover:bg-black/70 hover:scale-110 rounded-full p-1 text-white z-10"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation(); // Prevent triggering drag listeners
@@ -1262,12 +1117,12 @@ export const ImageUploadStep = <T extends string>({
                   <div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
                     <img 
                       src={getFullImageUrl(image.imageUrl)} 
-                      alt={`Product ${productIndex + 1} - Image ${imgIndex + 1}`}
+                      alt={`${data[productIndex].name || `Product #${productIndex + 1}`} - Image ${imgIndex + 1}`}
                       className="max-h-[70vh] max-w-full object-contain"
                     />
                   </div>
                   <div className="mt-2 text-sm text-muted-foreground text-center">
-                    {`Product ${productIndex + 1} - Image ${imgIndex + 1}`}
+                    {`${data[productIndex].name || `Product #${productIndex + 1}`} - Image ${imgIndex + 1}`}
                   </div>
                 </div>
               </DialogContent>
@@ -1282,24 +1137,19 @@ export const ImageUploadStep = <T extends string>({
   const getProductContainerClasses = (index: number) => {
     const isValidDropTarget = activeId && findContainer(activeId) !== index.toString();
     const isActiveDropTarget = activeDroppableId === `product-${index}`;
-    const hasImages = getProductImages(index).length > 0;
     
     return cn(
       "flex-1 min-h-[6rem] rounded-md p-2 transition-all",
-      // Always add a border for empty containers to make them visible as drop targets
-      !hasImages && "border-2 border-dashed border-secondary-foreground/30",
-      // Active drop target styling
+      // Only show borders during active drag operations
       isValidDropTarget && isActiveDropTarget 
         ? "border-2 border-dashed border-primary bg-primary/10" 
-        : isValidDropTarget && !hasImages 
-          ? "border-2 border-dashed border-muted-foreground/40 bg-muted/20"
         : isValidDropTarget
           ? "border border-dashed border-muted-foreground/30"
           : ""
     );
   };
 
-  // Add a DroppableContainer component for empty product containers
+  // Add a DroppableContainer component for product containers
   const DroppableContainer = ({ id, children, isEmpty }: { id: string; children: React.ReactNode; isEmpty: boolean }) => {
     const { setNodeRef } = useDroppable({
       id,
@@ -1315,7 +1165,8 @@ export const ImageUploadStep = <T extends string>({
         id={id}
         data-droppable="true"
         data-empty={isEmpty ? "true" : "false"}
-        className={`w-full h-full ${!isEmpty ? "flex flex-row flex-wrap gap-2" : ""}`}
+        className="w-full h-full flex flex-row flex-wrap gap-2"
+        style={{ minHeight: '100px' }} // Ensure minimum height for empty containers
       >
         {children}
       </div>
@@ -1323,23 +1174,28 @@ export const ImageUploadStep = <T extends string>({
   };
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="p-4">
-        <h2 className="text-2xl font-semibold mb-2">Add Product Images</h2>
-        <p className="text-sm text-muted-foreground mb-2">
+    <div className="flex flex-col h-[calc(100vh-9.5rem)] overflow-hidden">
+      {/* Header - fixed at top */}
+      <div className="px-8 py-6 bg-background shrink-0">
+        <h2 className="text-2xl font-semibold">Add Product Images</h2>
+        <p className="text-sm text-muted-foreground mt-1">
           Upload images for each product. Drag images to reorder them or move them between products.
         </p>
       </div>
       
-      <div className="px-4 mb-4">
+      {/* Content area - only this part scrolls */}
+      <div className="flex-1 overflow-hidden">
+        <div className="h-full flex flex-col overflow-auto">
+          <div className="px-8 py-4 shrink-0">
             <GenericDropzone />
           </div>
           
+          <div className="px-8 py-2 shrink-0">
             <UnassignedImagesSection />
+          </div>
           
-      <Separator />
-      
-      <ScrollArea className="flex-1 p-4">
+          {/* Scrollable product cards */}
+          <div className="px-8 py-2 flex-1">
             <DndContext
               sensors={sensors}
               collisionDetection={customCollisionDetection}
@@ -1349,11 +1205,10 @@ export const ImageUploadStep = <T extends string>({
               autoScroll={{
                 threshold: {
                   x: 0,
-              y: 0.2, // Start scrolling when dragging near the edges
+                  y: 0.2,
                 }
               }}
             >
-          {/* Add helper invisible div to handle global styles during drag */}
               {activeId && (
                 <style dangerouslySetInnerHTML={{
                   __html: `
@@ -1389,24 +1244,19 @@ export const ImageUploadStep = <T extends string>({
                         </div>
                       
                         <div className="flex items-start gap-2">
-                      {/* Dropzone for image upload always on the left */}
                           <ImageDropzone productIndex={index} />
                           
-                      {/* Images appear to the right of the dropzone in a sortable container */}
                           <div 
                             className={getProductContainerClasses(index)}
                             style={{ 
                               pointerEvents: 'auto',
                               touchAction: 'none',
-                          minHeight: getProductImages(index).length === 0 ? '100px' : 'auto'
+                              minHeight: '100px'
                             }}
                             onDragOver={(e) => {
-                          // This is a native event handler to ensure the browser recognizes the drop zone
                               e.preventDefault();
                               e.stopPropagation();
-                          if (getProductImages(index).length === 0) {
                               setActiveDroppableId(`product-${index}`);
-                          }
                             }}
                           >
                             <DroppableContainer 
@@ -1428,14 +1278,11 @@ export const ImageUploadStep = <T extends string>({
                                   ))}
                                 </SortableContext>
                               ) : (
-                            <div className="w-full h-full flex items-center justify-center text-muted-foreground text-sm py-8">
-                              Drop images here
-                            </div>
+                                <div className="w-full h-full" data-empty-placeholder="true"></div>
                               )}
                             </DroppableContainer>
                           </div>
                           
-                      {/* Hidden file input for backwards compatibility */}
                           <Input
                             ref={el => fileInputRefs.current[index] = el}
                             type="file"
@@ -1451,7 +1298,6 @@ export const ImageUploadStep = <T extends string>({
                 ))}
               </div>
               
-          {/* Drag overlay for showing the dragged image */}
               <DragOverlay adjustScale={false} zIndex={1000} dropAnimation={null}>
                 {activeId && activeImage && (
                   <div 
@@ -1474,17 +1320,22 @@ export const ImageUploadStep = <T extends string>({
                 )}
               </DragOverlay>
             </DndContext>
-      </ScrollArea>
+          </div>
+        </div>
+      </div>
       
-      <Separator />
-      
-      <div className="p-4 flex justify-between">
+      {/* Footer - fixed at bottom */}
+      <div className="flex items-center justify-between border-t bg-muted px-8 py-4 mt-1 shrink-0">
         {onBack && (
           <Button variant="outline" onClick={onBack}>
             Back
           </Button>
         )}
-        <Button onClick={handleSubmit} disabled={isSubmitting || unassignedImages.length > 0}>
+        <Button 
+          className="ml-auto"
+          onClick={handleSubmit} 
+          disabled={isSubmitting || unassignedImages.length > 0}
+        >
           {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
           {unassignedImages.length > 0 ? 'Assign all images first' : 'Submit'}
         </Button>