Add bulk image upload with auto assign

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

@@ -1,7 +1,7 @@
-import { useCallback, useState, useRef } from "react";
+import { useCallback, useState, useRef, useEffect } from "react";
 import { useRsi } from "../../hooks/useRsi";
 import { Button } from "@/components/ui/button";
-import { Loader2, Upload, Trash2 } from "lucide-react";
+import { Loader2, Upload, Trash2, AlertCircle } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -10,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import config from "@/config";
 import { useDropzone } from "react-dropzone";
 import { cn } from "@/lib/utils";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 type Props<T extends string> = {
   data: any[];
@@ -25,6 +26,11 @@ type ProductImage = {
   fileName: string;
 }
 
+type UnassignedImage = {
+  file: File;
+  previewUrl: string;
+}
+
 export const ImageUploadStep = <T extends string>({ 
   data, 
   file, 
@@ -35,6 +41,9 @@ export const ImageUploadStep = <T extends string>({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [productImages, setProductImages] = useState<ProductImage[]>([]);
   const fileInputRefs = useRef<{ [key: number]: HTMLInputElement | null }>({});
+  const [unassignedImages, setUnassignedImages] = useState<UnassignedImage[]>([]);
+  const [processingBulk, setProcessingBulk] = useState(false);
+  const [showUnassigned, setShowUnassigned] = useState(false);
   
   // Function to handle image upload
   const handleImageUpload = async (files: FileList | File[], productIndex: number) => {
@@ -101,6 +110,217 @@ export const ImageUploadStep = <T extends string>({
     }
   };
   
+  // Function to extract identifiers from a filename
+  const extractIdentifiers = (filename: string): string[] => {
+    // Remove file extension and convert to lowercase
+    const nameWithoutExt = filename.split('.').slice(0, -1).join('.').toLowerCase();
+    
+    // Split by common separators
+    const parts = nameWithoutExt.split(/[-_\s.]+/);
+    
+    // Add the full name without extension as a possible identifier
+    const identifiers = [nameWithoutExt];
+    
+    // Add parts with at least 3 characters
+    identifiers.push(...parts.filter(part => part.length >= 3));
+    
+    // Look for potential UPC or product codes (digits only)
+    const digitOnlyParts = parts.filter(part => /^\d+$/.test(part) && part.length >= 5);
+    identifiers.push(...digitOnlyParts);
+    
+    // Look for product codes (mix of letters and digits)
+    const productCodes = parts.filter(part => 
+      /^[a-z0-9]+$/.test(part) && 
+      /\d/.test(part) && 
+      /[a-z]/.test(part) && 
+      part.length >= 4
+    );
+    identifiers.push(...productCodes);
+    
+    return [...new Set(identifiers)]; // Remove duplicates
+  };
+  
+  // Function to find product index by identifier
+  const findProductByIdentifier = (identifier: string): number => {
+    // Try to match against supplier_no, upc, SKU, or name
+    return data.findIndex(product => {
+      // Skip if product is missing all identifiers
+      if (!product.supplier_no && !product.upc && !product.sku && !product.name) {
+        return false;
+      }
+      
+      const supplierNo = String(product.supplier_no || '').toLowerCase();
+      const upc = String(product.upc || '').toLowerCase();
+      const sku = String(product.sku || '').toLowerCase();
+      const name = String(product.name || '').toLowerCase();
+      const model = String(product.model || '').toLowerCase();
+      
+      // For exact matches, prioritize certain fields
+      if (
+        (supplierNo && identifier === supplierNo) ||
+        (upc && identifier === upc) ||
+        (sku && identifier === sku)
+      ) {
+        return true;
+      }
+      
+      // For partial matches, check if the identifier is contained within the field
+      // or if the field is contained within the identifier
+      return (
+        (supplierNo && (supplierNo.includes(identifier) || identifier.includes(supplierNo))) ||
+        (upc && (upc.includes(identifier) || identifier.includes(upc))) ||
+        (sku && (sku.includes(identifier) || identifier.includes(sku))) ||
+        (model && (model.includes(identifier) || identifier.includes(model))) ||
+        (name && name.includes(identifier))
+      );
+    });
+  };
+  
+  // Function to create preview URLs for files
+  const createPreviewUrl = (file: File): string => {
+    return URL.createObjectURL(file);
+  };
+  
+  // Function to handle bulk image upload
+  const handleBulkUpload = async (files: File[]) => {
+    if (!files.length) return;
+    
+    setProcessingBulk(true);
+    const unassigned: UnassignedImage[] = [];
+    
+    for (const file of files) {
+      // Extract identifiers from filename
+      const identifiers = extractIdentifiers(file.name);
+      let assigned = false;
+      
+      // Try to match each identifier
+      for (const identifier of identifiers) {
+        const productIndex = findProductByIdentifier(identifier);
+        
+        if (productIndex !== -1) {
+          // Found a match, upload to this product
+          await handleImageUpload([file], productIndex);
+          assigned = true;
+          break;
+        }
+      }
+      
+      // If no match was found, add to unassigned
+      if (!assigned) {
+        unassigned.push({
+          file,
+          previewUrl: createPreviewUrl(file)
+        });
+      }
+    }
+    
+    // Update unassigned images
+    setUnassignedImages(prev => [...prev, ...unassigned]);
+    setProcessingBulk(false);
+    
+    // Show summary toast
+    const assignedCount = files.length - unassigned.length;
+    if (assignedCount > 0) {
+      toast.success(`Auto-assigned ${assignedCount} ${assignedCount === 1 ? 'image' : 'images'} to products`);
+    }
+    if (unassigned.length > 0) {
+      toast.error(`Could not auto-assign ${unassigned.length} ${unassigned.length === 1 ? 'image' : 'images'}`);
+      setShowUnassigned(true);
+    }
+  };
+  
+  // Function to manually assign an unassigned image
+  const assignImageToProduct = async (imageIndex: number, productIndex: number) => {
+    const image = unassignedImages[imageIndex];
+    if (!image) return;
+    
+    // Upload the image to the selected product
+    await handleImageUpload([image.file], productIndex);
+    
+    // Remove from unassigned list
+    setUnassignedImages(prev => prev.filter((_, idx) => idx !== imageIndex));
+    
+    // Revoke the preview URL to free memory
+    URL.revokeObjectURL(image.previewUrl);
+    
+    toast.success(`Image assigned to ${data[productIndex].name || `Product #${productIndex + 1}`}`);
+  };
+  
+  // Function to remove an unassigned image
+  const removeUnassignedImage = (index: number) => {
+    const image = unassignedImages[index];
+    if (!image) return;
+    
+    // Revoke the preview URL to free memory
+    URL.revokeObjectURL(image.previewUrl);
+    
+    // Remove from state
+    setUnassignedImages(prev => prev.filter((_, idx) => idx !== index));
+  };
+  
+  // Cleanup function for preview URLs
+  useEffect(() => {
+    return () => {
+      // Cleanup preview URLs when component unmounts
+      unassignedImages.forEach(image => {
+        URL.revokeObjectURL(image.previewUrl);
+      });
+    };
+  }, []);
+  
+  // Generic dropzone component
+  const GenericDropzone = () => {
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      accept: {
+        'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp']
+      },
+      onDrop: handleBulkUpload,
+      multiple: true
+    });
+
+    return (
+      <div 
+        {...getRootProps()}
+        className={cn(
+          "border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md w-full py-6 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/70 transition-colors",
+          isDragActive && "border-primary bg-muted"
+        )}
+      >
+        <input {...getInputProps()} />
+        {processingBulk ? (
+          <div className="flex flex-col items-center justify-center gap-2">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <p className="text-base text-muted-foreground">Processing images...</p>
+          </div>
+        ) : isDragActive ? (
+          <div className="text-center p-1">
+            <p className="text-base text-muted-foreground mb-1">Drop your images here</p>
+            <p className="text-sm text-muted-foreground">We'll automatically assign them based on filename</p>
+          </div>
+        ) : (
+          <>
+            <Upload className="h-8 w-8 mb-2 text-primary" />
+            <p className="text-base text-muted-foreground mb-1">Drop images here or click to select</p>
+            <p className="text-sm text-muted-foreground">We'll automatically match images to products based on filename</p>
+            {unassignedImages.length > 0 && !showUnassigned && (
+              <Button 
+                variant="link" 
+                size="sm" 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowUnassigned(true);
+                }}
+                className="mt-2 text-amber-600 dark:text-amber-400"
+              >
+                Show {unassignedImages.length} unassigned {unassignedImages.length === 1 ? 'image' : 'images'}
+              </Button>
+            )}
+          </>
+        )}
+      </div>
+    );
+  };
+  
   // Component for image dropzone
   const ImageDropzone = ({ productIndex }: { productIndex: number }) => {
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -253,6 +473,71 @@ export const ImageUploadStep = <T extends string>({
     return `${baseUrl}${path}`;
   };
 
+  // Component for displaying unassigned images
+  const UnassignedImagesSection = () => {
+    if (!showUnassigned || unassignedImages.length === 0) return null;
+    
+    return (
+      <div className="mb-4 px-4">
+        <div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md p-3">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-amber-500" />
+              <h3 className="text-sm font-medium text-amber-700 dark:text-amber-400">
+                Unassigned Images ({unassignedImages.length})
+              </h3>
+            </div>
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={() => setShowUnassigned(false)}
+              className="h-8 text-muted-foreground"
+            >
+              Hide
+            </Button>
+          </div>
+          
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {unassignedImages.map((image, index) => (
+              <div key={index} className="relative border rounded-md overflow-hidden">
+                <img 
+                  src={image.previewUrl} 
+                  alt={`Unassigned image ${index + 1}`}
+                  className="h-28 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>
+                  <div className="flex gap-2">
+                    <Select onValueChange={(value) => assignImageToProduct(index, parseInt(value))}>
+                      <SelectTrigger className="h-7 text-xs bg-white/10 border-0">
+                        <SelectValue placeholder="Assign to..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {data.map((product: any, productIndex: number) => (
+                          <SelectItem key={productIndex} value={productIndex.toString()}>
+                            {product.name || `Product #${productIndex + 1}`}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <Button 
+                      variant="ghost" 
+                      size="icon"
+                      className="h-7 w-7 bg-white/10"
+                      onClick={() => removeUnassignedImage(index)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5 text-white" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-col h-full">
       <div className="p-4">
@@ -262,6 +547,12 @@ export const ImageUploadStep = <T extends string>({
         </p>
       </div>
       
+      <div className="px-4 mb-4">
+        <GenericDropzone />
+      </div>
+      
+      <UnassignedImagesSection />
+      
       <Separator />
       
       <ScrollArea className="flex-1 p-4">
@@ -340,9 +631,9 @@ export const ImageUploadStep = <T extends string>({
             Back
           </Button>
         )}
-        <Button onClick={handleSubmit} disabled={isSubmitting}>
+        <Button onClick={handleSubmit} disabled={isSubmitting || unassignedImages.length > 0}>
           {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Submit
+          {unassignedImages.length > 0 ? 'Assign all images first' : 'Submit'}
         </Button>
       </div>
     </div>