@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/components/ImportModal.tsx

@@ -35,14 +35,15 @@
  * - Processing state management
  * - Customizable text content
  */
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogBody } from '../../Dialog';
 import { Button } from '../../Button/Button';
-import { Input } from '../../Input/Input';
-import { Progress } from '../../Progress';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../Table/Table';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../Card/Card';
-import { Upload, FileText, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { useImportModalState } from '../hooks/useImportModalState';
+import { ImportModalFileSection } from './ImportModalFileSection';
+import { ImportModalPreviewSection } from '../ui/modals/ImportModalPreviewSection';
+import { ImportModalSummarySection } from '../ui/modals/ImportModalSummarySection';
+import { ImportModalFailedRowsSection } from '../ui/modals/ImportModalFailedRowsSection';
+import type { ImportHandlerResult } from '../ui/modals/importModalPersistence';
 
 /**
  * Configuration interface for customizing ImportModal text content
@@ -67,6 +68,8 @@ export interface ImportModalConfig {
   previewHeaderText?: string;
   /** Custom text pattern for total rows display. Use {count} as placeholder for the actual count */
   totalRowsText?: string;
+  /** When true, send the entire file in one chunk (for handlers that do delete-then-insert per entity). */
+  singleChunk?: boolean;
 }
 
 /**
@@ -78,87 +81,26 @@ interface ImportModalProps {
   isOpen: boolean;
   /** Callback function when the modal is closed */
   onClose: () => void;
-  /** Callback function when data is imported successfully */
-  onImport: (data: Array<Record<string, unknown>>) => void | Promise<void>;
+  /**
+   * Handler called per chunk. May return void/Promise<void> (no throw = full success for chunk)
+   * or ImportSummary/Promise<ImportSummary>; when provided, the modal uses/merges it for the summary.
+   */
+  onImport: (data: Array<Record<string, unknown>>) => ImportHandlerResult;
   /** Configuration object for customizing modal text content */
   config?: ImportModalConfig;
 }
 
 /**
  * ImportModal component for handling CSV data import
- * 
- * @param props - The component props
- * @returns JSX.Element - The import modal dialog
- * 
- * @example
- * ```tsx
- * const importConfig = {
- *   title: "Import Customer Data",
- *   description: "Upload a CSV file with customer information to import multiple records.",
- *   uploadText: "Choose a customer CSV file",
- *   selectFileButtonText: "Browse Files",
- *   importButtonText: "Import Customers",
- *   totalRowsText: "Found {count} customer records to import"
- * };
- * 
- * <ImportModal
- *   isOpen={isImportModalOpen}
- *   onClose={() => setIsImportModalOpen(false)}
- *   onImport={handleDataImport}
- *   config={importConfig}
- * />
- * ```
- */
-/**
- * Import modal component for DataTable.
- * Provides CSV file upload, preview, and import functionality.
- * 
- * @param props - Import modal configuration
- * @returns The rendered import modal dialog
+ *
+ * Flow:
+ * 1. Modal opens → user selects file
+ * 2. File selected → show preview of first 5 rows
+ * 3. User confirms import → show import in progress
+ * 4. Import completes → show summary
+ * 5. User closes dialog
  */
 export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportModalProps) {
-  const [file, setFile] = useState<File | null>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [previewData, setPreviewData] = useState<Array<Record<string, unknown>> | null>(null);
-  const [totalCount, setTotalCount] = useState<number>(0);
-  const [validationErrors, setValidationErrors] = useState<Array<{row: number; field: string; message: string}>>([]);
-  const [importProgress, setImportProgress] = useState<{ 
-    current: number; 
-    total: number; 
-    stage: 'parsing' | 'importing';
-    chunkNumber?: number;
-    totalChunks?: number;
-  } | null>(null);
-  const [importSummary, setImportSummary] = useState<{ successCount: number; totalCount: number } | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const autoCloseTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Reset state when modal opens/closes to ensure clean initial state
-  useEffect(() => {
-    if (!isOpen) {
-      // Clear any pending auto-close timeout
-      if (autoCloseTimeoutRef.current) {
-        clearTimeout(autoCloseTimeoutRef.current);
-        autoCloseTimeoutRef.current = null;
-      }
-      // Reset all state when modal is closed
-      setFile(null);
-      setPreviewData(null);
-      setTotalCount(0);
-      setError(null);
-      setValidationErrors([]);
-      setIsProcessing(false);
-      setImportProgress(null);
-      setImportSummary(null);
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    }
-  }, [isOpen]);
-
-  // Extract config with defaults
   const {
     title = 'Import Data',
     description = 'Upload a CSV file to import multiple records at once.',
@@ -171,347 +113,33 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     totalRowsText = 'Total rows to import: {count}'
   } = config;
 
-
-  /**
-   * Calculate optimal chunk size based on data length
-   * Intelligently determines chunk size to balance progress feedback with performance
-   * 
-   * @param dataLength - Total number of rows to import
-   * @returns Optimal chunk size for processing
-   */
-  const calculateOptimalChunkSize = (dataLength: number): number => {
-    // Small imports (< 50 rows): No chunking - single call
-    if (dataLength < 50) {
-      return dataLength; // Process all at once
-    }
-    
-    // Medium imports (50-1000 rows): Small chunks for frequent updates
-    if (dataLength <= 1000) {
-      return 100; // Frequent progress updates
-    }
-    
-    // Large imports (1000-10000 rows): Medium chunks
-    if (dataLength <= 10000) {
-      return 500; // Balance between updates and performance
-    }
-    
-    // Very large imports (> 10000 rows): Larger chunks
-    // Note: No upper limit - will process all rows regardless of count
-    return 1000; // Fewer updates but better performance
-  };
-
-  const processCSV = (csvText: string): Array<Record<string, unknown>> => {
-    const lines = csvText.split('\n').filter(line => line.trim());
-    
-    if (lines.length < 2) {
-      throw new Error('CSV must have at least a header row and one data row');
-    }
-
-    // Better CSV parsing that handles quotes and commas within values
-    const parseCSVLine = (line: string): string[] => {
-      const result: string[] = [];
-      let current = '';
-      let inQuotes = false;
-      
-      for (let i = 0; i < line.length; i++) {
-        const char = line[i];
-        
-        if (char === '"') {
-          inQuotes = !inQuotes;
-        } else if (char === ',' && !inQuotes) {
-          result.push(current.trim());
-          current = '';
-        } else {
-          current += char;
-        }
-      }
-      result.push(current.trim());
-      return result;
-    };
-
-    const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
-    
-    const data = lines.slice(1).map((line) => {
-      const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
-      const row: Record<string, unknown> = {};
-      headers.forEach((header, colIndex) => {
-        row[header] = values[colIndex] || '';
-      });
-      return row;
-    });
-
-    return data;
-  };
-
-  const handleImport = async () => {
-    if (!file) return;
-
-    setIsProcessing(true);
-    setError(null);
-    // Initialize progress - will be updated once we know the file size
-    setImportProgress({ current: 0, total: totalCount || 0, stage: 'parsing' });
-
-    try {
-      // Step 1: Parse CSV with progress indication
-      const text = await file.text();
-      const lines = text.split('\n').filter(line => line.trim());
-      const totalLines = lines.length;
-      
-      if (totalLines < 2) {
-        throw new Error('CSV must have at least a header row and one data row');
-      }
-
-      // Process in chunks to show progress and keep UI responsive
-      // Smaller chunks = more frequent progress updates = better UX
-      const CHUNK_SIZE = 100; // Process 100 rows at a time for better progress feedback
-      const PROGRESS_UPDATE_INTERVAL = 50; // Update progress every 50ms max to avoid excessive state updates
-      const data: Array<Record<string, unknown>> = [];
-      
-      // Optimized CSV line parser (reused for all lines)
-      // Returns raw values - trimming and quote removal done once during processing
-      const parseCSVLine = (line: string): string[] => {
-        const result: string[] = [];
-        let current = '';
-        let inQuotes = false;
-        
-        for (let i = 0; i < line.length; i++) {
-          const char = line[i];
-          
-          if (char === '"') {
-            inQuotes = !inQuotes;
-          } else if (char === ',' && !inQuotes) {
-            result.push(current);
-            current = '';
-          } else {
-            current += char;
-          }
-        }
-        result.push(current);
-        return result;
-      };
-
-      // Pre-process headers once
-      const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
-      const headerCount = headers.length;
-      let lastProgressUpdate = Date.now();
-      let lastReportedProgress = 0;
-      
-      // Process data rows in chunks with frequent progress updates
-      for (let i = 1; i < totalLines; i += CHUNK_SIZE) {
-        const chunkEnd = Math.min(i + CHUNK_SIZE, totalLines);
-        const chunk = lines.slice(i, chunkEnd);
-        
-        // Process chunk synchronously (faster than forEach)
-        for (let j = 0; j < chunk.length; j++) {
-          const line = chunk[j];
-          const values = parseCSVLine(line);
-          const row: Record<string, unknown> = {};
-          
-          // Optimize: process values inline - trim and remove quotes once
-          for (let colIndex = 0; colIndex < headerCount; colIndex++) {
-            const rawValue = values[colIndex];
-            // Trim and remove quotes in one pass
-            row[headers[colIndex]] = rawValue ? rawValue.replace(/"/g, '').trim() : '';
-          }
-          data.push(row);
-        }
-        
-        // Update progress more frequently for better feedback
-        const processed = Math.min(chunkEnd - 1, totalLines - 1);
-        const now = Date.now();
-        
-        // Throttle progress updates to avoid excessive state updates
-        // Update immediately if enough time has passed or if we're near completion
-        if (now - lastProgressUpdate >= PROGRESS_UPDATE_INTERVAL || 
-          processed === totalLines - 1 ||
-          processed - lastReportedProgress >= CHUNK_SIZE) {
-          setImportProgress({ 
-            current: processed, 
-            total: totalLines - 1, 
-            stage: 'parsing' 
-          });
-          lastProgressUpdate = now;
-          lastReportedProgress = processed;
-        }
-        
-        // Yield to browser using requestAnimationFrame for smoother UI updates
-        // Only yield every few chunks to maintain performance
-        if ((i / CHUNK_SIZE) % 5 === 0) {
-          await new Promise(resolve => requestAnimationFrame(resolve));
-        }
-      }
-      
-      // Ensure final progress is set
-      if (lastReportedProgress < totalLines - 1) {
-        setImportProgress({ 
-          current: totalLines - 1, 
-          total: totalLines - 1, 
-          stage: 'parsing' 
-        });
-      }
-      
-      // Step 2: Import data with intelligent automatic chunking
-      // Calculate optimal chunk size based on data length
-      const chunkSize = calculateOptimalChunkSize(data.length);
-      const totalChunks = chunkSize === data.length ? 1 : Math.ceil(data.length / chunkSize);
-      let processedCount = 0;
-      const errors: Array<{ chunk: number; startRow: number; endRow: number; error: Error }> = [];
-      
-      // Initialize progress for import stage with chunk information
-      setImportProgress({ 
-        current: 0, 
-        total: data.length, 
-        stage: 'importing',
-        chunkNumber: 0,
-        totalChunks: totalChunks
-      });
-      
-      // Process chunks sequentially with real progress updates
-      // IMPORTANT: This loop processes ALL rows - there is no limit on total rows
-      for (let i = 0; i < data.length; i += chunkSize) {
-        const chunk = data.slice(i, i + chunkSize);
-        const chunkNumber = Math.floor(i / chunkSize) + 1;
-        const startRow = i + 1;
-        const endRow = Math.min(i + chunkSize, data.length);
-        
-        try {
-          // Call onImport with this chunk
-          // Note: Each chunk is passed separately - ensure your onImport handler
-          // processes all chunks, not just the first one
-          const result = onImport(chunk);
-          if (result && typeof result.then === 'function') {
-            await result;
-          }
-          
-          // Update processed count after successful chunk
-          processedCount += chunk.length;
-          
-          // Update progress after each chunk completes with chunk information
-          setImportProgress({
-            current: processedCount,
-            total: data.length,
-            stage: 'importing',
-            chunkNumber: chunkNumber,
-            totalChunks: totalChunks
-          });
-        } catch (error) {
-          // Collect error but continue processing remaining chunks
-          errors.push({
-            chunk: chunkNumber,
-            startRow,
-            endRow,
-            error: error instanceof Error ? error : new Error(String(error))
-          });
-          
-          // Still update progress to show we attempted this chunk
-          // Don't increment processedCount since it failed
-          setImportProgress({
-            current: processedCount,
-            total: data.length,
-            stage: 'importing',
-            chunkNumber: chunkNumber,
-            totalChunks: totalChunks
-          });
-          
-          // Continue with next chunk - partial success is better than total failure
-        }
-      }
-      
-      // Handle final results
-      if (errors.length > 0) {
-        // Some chunks failed - show comprehensive error message
-        const errorMessage = errors.length === 1
-          ? `Imported ${processedCount} rows, 1 chunk failed (chunk ${errors[0].chunk}: rows ${errors[0].startRow}-${errors[0].endRow}). ${errors[0].error.message}`
-          : `Imported ${processedCount} rows, ${errors.length} chunks failed. Failed chunks: ${errors.map(e => `${e.chunk} (rows ${e.startRow}-${e.endRow})`).join(', ')}. First error: ${errors[0].error.message}`;
-        
-        throw new Error(errorMessage);
-      }
-      
-      // All chunks succeeded - mark as complete
-      setImportProgress({ 
-        current: data.length, 
-        total: data.length, 
-        stage: 'importing',
-        chunkNumber: totalChunks,
-        totalChunks: totalChunks
-      });
-      
-      // Show success summary
-      setIsProcessing(false);
-      setImportProgress(null);
-      setImportSummary({
-        successCount: processedCount,
-        totalCount: data.length
-      });
-      
-      // Auto-close after 2 seconds (user can also close manually via Close button)
-      autoCloseTimeoutRef.current = setTimeout(() => {
-        handleClose();
-      }, 2000);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to process file');
-      // Set processing to false on error - dialog stays open so user can see error and retry
-      setIsProcessing(false);
-      setImportProgress(null);
-    }
-  };
-
-  const handleClose = () => {
-    // Clear any pending auto-close timeout
-    if (autoCloseTimeoutRef.current) {
-      clearTimeout(autoCloseTimeoutRef.current);
-      autoCloseTimeoutRef.current = null;
-    }
-    // Clear summary first to allow closing
-    setImportSummary(null);
-    setFile(null);
-    setError(null);
-    setPreviewData(null);
-    setTotalCount(0);
-    setValidationErrors([]);
-    setImportProgress(null);
-    onClose();
-  };
-  
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files?.[0];
-    if (selectedFile) {
-      setFile(selectedFile);
-      setError(null);
-      setValidationErrors([]);
-      
-      // Generate preview
-      try {
-        const text = await selectedFile.text();
-        const data = processCSV(text);
-        setPreviewData(data.slice(0, 5)); // Show first 5 rows as preview
-        setTotalCount(data.length); // Store total count
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to preview file');
-        setPreviewData(null);
-        setTotalCount(0);
-      }
-    }
-  };
+  const state = useImportModalState({ isOpen, onClose, onImport, config });
+  const {
+    file,
+    isProcessing,
+    error,
+    previewData,
+    totalCount,
+    validationErrors,
+    importProgress,
+    summaryToShow,
+    handleFileSelect,
+    handleImport,
+    handleClose,
+    handleOpenChange,
+    fileInputRef
+  } = state;
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => {
-      // Prevent closing if processing is in progress or showing summary
-      if (!open && (isProcessing || importSummary)) {
-        return;
-      }
-      if (!open) {
-        handleClose();
-      }
-    }}>
+    <Dialog open={isOpen} onOpenChange={(open) => handleOpenChange(open)}>
       <DialogContent 
         maxWidthPercent={70}
         maxHeightPercent={80}
         enableScrolling={true}
         title={title} 
         description={description}
-        preventCloseOnEscape={isProcessing || !!importSummary}
-        preventCloseOnOutsideClick={isProcessing || !!importSummary}
+        preventCloseOnEscape={isProcessing}
+        preventCloseOnOutsideClick={isProcessing}
       >
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
@@ -519,156 +147,30 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
         </DialogHeader>
 
         <DialogBody>
-          <Card className="text-center">
-            <CardHeader>
-              <FileText className="size-8 mx-auto text-sec-400 mb-2" />
-            </CardHeader>
-            <CardDescription>
-              {file ? `Selected: ${file.name}` : uploadText}
-              {file && (
-                <><br/>
-                  File selected, processing preview...
-                </>
-              )}
-            </CardDescription>
-            <CardContent className="text-center">
-              {importSummary && (
-                <>
-                  <CheckCircle2 className="inline-block size-6 mx-auto text-main-600 mb-2" />
-                  <p>
-                    Import completed successfully!
-                  </p>
-                  <p>
-                    {importSummary.successCount.toLocaleString()} of {importSummary.totalCount.toLocaleString()} {importSummary.totalCount === 1 ? 'row' : 'rows'} imported
-                  </p>
-                </>
-              )}
-              
-              {error && !importSummary && (
-                <>
-                  <AlertCircle className="inline-block size-4 mr-2" />
-                  <span className="text-sm">{error}</span>
-                </>
-              )}
-              
-              {validationErrors.length > 0 && !importSummary && (
-                <>
-                  <AlertCircle className="size-4" />
-                  <span className="text-sm font-medium">
-                    {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
-                  </span>
-                  {validationErrors.slice(0, 10).map((err, idx) => (
-                    <p key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
-                      <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
-                    </p>
-                  ))}
-                  {validationErrors.length > 10 && (
-                    <p className="text-xs text-sec-500 italic">
-                      ... and {validationErrors.length - 10} more errors
-                    </p>
-                  )}
-                </>
-              )}
-
-              {isProcessing && !importSummary && (
-                <>
-                  <span className="text-sm font-medium text-sec-900">
-                    {importProgress?.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
-                  </span>
-                  {importProgress && importProgress.total > 0 && (
-                    <>
-                      <span className="text-sm text-sec-600">
-                        {importProgress.stage === 'importing' && importProgress.chunkNumber && importProgress.chunkNumber > 0 && importProgress.totalChunks && importProgress.totalChunks > 1
-                          ? `Chunk ${importProgress.chunkNumber} of ${importProgress.totalChunks} • ${importProgress.current.toLocaleString()} / ${importProgress.total.toLocaleString()} rows (${Math.round((importProgress.current / importProgress.total) * 100)}%)`
-                          : importProgress.stage === 'importing' && importProgress.current === 0
-                          ? `Importing ${importProgress.total.toLocaleString()} ${importProgress.total === 1 ? 'row' : 'rows'}...`
-                          : `${importProgress.current.toLocaleString()} / ${importProgress.total.toLocaleString()} rows (${Math.round((importProgress.current / importProgress.total) * 100)}%)`}
-                      </span>
-                      <Progress 
-                        value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
-                        className="h-2 bg-sec-200"
-                      />
-                      <p className="text-xs text-sec-500">
-                        {importProgress.stage === 'parsing' && importProgress.current < importProgress.total
-                          ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
-                          : importProgress.stage === 'importing' && importProgress.current === 0
-                          ? 'Processing your data...'
-                          : importProgress.current === importProgress.total
-                          ? 'Complete!'
-                          : importProgress.stage === 'importing' && importProgress.chunkNumber && importProgress.totalChunks && importProgress.totalChunks > 1
-                          ? `Processing chunk ${importProgress.chunkNumber} of ${importProgress.totalChunks}...`
-                          : importProgress.stage === 'importing'
-                          ? 'Importing...'
-                          : 'Processing...'}
-                      </p>
-                    </>
-                  )}
-                  {importProgress && importProgress.total === 0 && (
-                    <p className="text-xs text-sec-500">Processing...</p>
-                  )}
-                  {!importProgress && (
-                    <p className="text-xs text-sec-500">Initializing...</p>
-                  )}
-                </>
-              )}
-            </CardContent>
-            <CardFooter>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <Upload className="size-4 mr-2" />
-                {selectFileButtonText}
-              </Button>
-              <Input
-                ref={fileInputRef}
-                type="file"
-                accept=".csv"
-                onChange={handleFileSelect}
-                className="hidden"
-              />
-            </CardFooter>
-          </Card>
-
-          {file && previewData && previewData.length > 0 && !isProcessing ? (
-            <Card className="mt-4">
-              <CardHeader>
-                <CardTitle>{previewHeaderText}</CardTitle>
-              </CardHeader>
-              <CardContent className="overflow-x-auto">
-                  <Table className="min-w-full">
-                    <TableHeader>
-                      <TableRow>
-                        {Object.keys(previewData[0]).map((header) => (
-                          <TableHead key={header} >
-                            {header}
-                          </TableHead>
-                        ))}
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {previewData.map((row, index) => (
-                        <TableRow key={index} >
-                          {Object.values(row).map((value, cellIndex) => (
-                            <TableCell key={cellIndex} >
-                              {String(value)}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-              </CardContent>
-              <CardFooter>
-                  {totalRowsText.replace('{count}', totalCount.toString())}     
-              </CardFooter>
-            </Card>
-          ) : null}
+          <ImportModalFileSection
+            file={file}
+            error={error}
+            isProcessing={isProcessing}
+            importProgress={importProgress}
+            validationErrors={validationErrors}
+            uploadText={uploadText}
+            selectFileButtonText={selectFileButtonText}
+            fileInputRef={fileInputRef}
+            onFileInputChange={handleFileSelect}
+          />
+          <ImportModalPreviewSection
+            file={file}
+            previewData={previewData}
+            totalCount={totalCount}
+            previewHeaderText={previewHeaderText}
+            totalRowsText={totalRowsText}
+          />
+          <ImportModalSummarySection summary={summaryToShow} />
+          <ImportModalFailedRowsSection summary={summaryToShow} />
         </DialogBody>
 
         <DialogFooter>
-          {importSummary ? (
+          {summaryToShow ? (
             <Button onClick={handleClose}>
               Close
             </Button>