@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -35,15 +35,15 @@
  * - Processing state management
  * - Customizable text content
  */
-import React, { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../../Dialog';
+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 } from 'lucide-react';
-import { createLogger } from '../../../utils/core/logger';
+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
@@ -68,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;
 }
 
 /**
@@ -79,82 +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 logger = createLogger('ImportModal');
-  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' } | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const isMountedRef = useRef(true);
-
-  // Cleanup effect to prevent state updates after unmount
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  // Reset state when modal opens/closes to ensure clean initial state
-  useEffect(() => {
-    if (!isOpen) {
-      // Reset all state when modal is closed
-      setFile(null);
-      setPreviewData(null);
-      setTotalCount(0);
-      setError(null);
-      setValidationErrors([]);
-      setIsProcessing(false);
-      setImportProgress(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.',
@@ -167,352 +113,80 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     totalRowsText = 'Total rows to import: {count}'
   } = config;
 
-
-  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);
-    setImportProgress({ current: 0, total: 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');
-      }
-
-      // For large files, process in chunks to show progress
-      const CHUNK_SIZE = 1000; // Process 1000 rows at a time
-      const data: Array<Record<string, unknown>> = [];
-      
-      if (totalLines > CHUNK_SIZE) {
-        // Large file - process in chunks with progress
-        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());
-        
-        // Process data rows in chunks
-        for (let i = 1; i < totalLines; i += CHUNK_SIZE) {
-          const chunkEnd = Math.min(i + CHUNK_SIZE, totalLines);
-          const chunk = lines.slice(i, chunkEnd);
-          
-          chunk.forEach((line, index) => {
-            const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
-            const row: Record<string, unknown> = {};
-            headers.forEach((header, colIndex) => {
-              row[header] = values[colIndex] || '';
-            });
-            data.push(row);
-          });
-          
-          // Update progress
-          const processed = Math.min(chunkEnd - 1, totalLines - 1);
-          if (isMountedRef.current) {
-            setImportProgress({ 
-              current: processed, 
-              total: totalLines - 1, 
-              stage: 'parsing' 
-            });
-          }
-          
-          // Yield to browser to update UI
-          await new Promise(resolve => setTimeout(resolve, 0));
-        }
-      } else {
-        // Small file - process normally
-        const parsedData = processCSV(text);
-        data.push(...parsedData);
-        if (isMountedRef.current) {
-          setImportProgress({ 
-            current: totalLines - 1, 
-            total: totalLines - 1, 
-            stage: 'parsing' 
-          });
-        }
-      }
-      
-      // Step 2: Import data with progress indication
-      if (isMountedRef.current) {
-        setImportProgress({ 
-          current: 0, 
-          total: data.length, 
-          stage: 'importing' 
-        });
-      }
-      
-      // Await the onImport callback in case it returns a promise
-      const result = onImport(data);
-      if (result && typeof result.then === 'function') {
-        // For async imports, we can't track exact progress, but we show it's processing
-        // The progress will remain at 0 until the import completes
-        await result;
-      }
-      // Note: For synchronous imports, the progress stays at 0 until we mark it complete
-      
-      // Mark as complete
-      if (isMountedRef.current) {
-        setImportProgress({ 
-          current: data.length, 
-          total: data.length, 
-          stage: 'importing' 
-        });
-      }
-      
-      // Small delay to show completion
-      await new Promise(resolve => setTimeout(resolve, 300));
-      
-      onClose();
-      setFile(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to process file');
-      setImportProgress(null);
-    } finally {
-      if (isMountedRef.current) {
-        setIsProcessing(false);
-        setImportProgress(null);
-      }
-    }
-  };
-
-  const handleClose = () => {
-    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) {
-        logger.error('CSV parsing error:', 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={handleClose}>
+    <Dialog open={isOpen} onOpenChange={(open) => handleOpenChange(open)}>
       <DialogContent 
-        maxWidthPercent={95} 
-        className="w-auto" 
+        maxWidthPercent={70}
+        maxHeightPercent={80}
+        enableScrolling={true}
         title={title} 
         description={description}
+        preventCloseOnEscape={isProcessing}
+        preventCloseOnOutsideClick={isProcessing}
       >
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
 
-          <Card className="text-center">
-            <CardHeader>
-              <FileText className="size-8 mx-auto text-sec-400 mb-2" />
-            </CardHeader>
-            <CardDescription>
-              {file ? `Selected: ${file.name}` : uploadText}
-              {file && (
-                <span className="block text-xs text-sec-500 mt-1">
-                  File selected, processing preview...
-                </span>
-              )}
-            </CardDescription>
-            <CardContent className="text-center">
-              {error && (
-                <>
-                  <AlertCircle className="inline-block size-4 mr-2" />
-                  <span className="text-sm">{error}</span>
-                </>
-              )}
-              
-              {validationErrors.length > 0 && (
-                <>
-                  <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>
-                  )}
-                </>
-              )}
+        <DialogBody>
+          <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>
 
-              {importProgress && isProcessing && (
-                <>
-                  <span className="text-sm font-medium text-sec-900">
-                    {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
-                  </span>
-                  <span className="text-sm text-sec-600">
-                    {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
-                  </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.total > 0 && 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!'
-                      : 'Processing...'}
-                  </p>
-                </>
-              )}
-            </CardContent>
-            <CardFooter>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => fileInputRef.current?.click()}
+        <DialogFooter>
+          {summaryToShow ? (
+            <Button onClick={handleClose}>
+              Close
+            </Button>
+          ) : (
+            <>
+              <Button variant="outline" onClick={handleClose}>
+                {cancelButtonText}
+              </Button>
+              <Button 
+                onClick={handleImport} 
+                disabled={!file || isProcessing}
               >
-                <Upload className="size-4 mr-2" />
-                {selectFileButtonText}
+                {isProcessing ? importButtonProcessingText : importButtonText}
               </Button>
-              <Input
-                ref={fileInputRef}
-                type="file"
-                accept=".csv"
-                onChange={handleFileSelect}
-                className="hidden"
-              />
-            </CardFooter>
-          </Card>
-
-          {file && previewData && previewData.length > 0 && !isProcessing ? (
-            <Card>
-              <CardHeader>
-                <CardTitle>{previewHeaderText}</CardTitle>
-              </CardHeader>
-              <CardContent className="overflow-x-auto">
-                  <Table className="text-xs 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}
-
-
-        <DialogFooter>
-          <Button variant="outline" onClick={handleClose}>
-            {cancelButtonText}
-          </Button>
-          <Button 
-            onClick={handleImport} 
-            disabled={!file || isProcessing}
-          >
-            {isProcessing ? importButtonProcessingText : importButtonText}
-          </Button>
+            </>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/components/DataTable/components/ImportModalFileSection.tsx

@@ -0,0 +1,148 @@
+/**
+ * @file ImportModal File Section
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ *
+ * File selection card: icon, upload text or selected file name, file input, progress, validation errors.
+ */
+
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader } from '../../Card/Card';
+import { Button } from '../../Button/Button';
+import { Input } from '../../Input/Input';
+import { Progress } from '../../Progress';
+import { Upload, FileText, AlertCircle } from 'lucide-react';
+import type { ImportProgress, ValidationError } from '../hooks/useImportModalState';
+
+export interface ImportModalFileSectionProps {
+  file: File | null;
+  error: string | null;
+  isProcessing: boolean;
+  importProgress: ImportProgress | null;
+  validationErrors: ValidationError[];
+  uploadText: string;
+  selectFileButtonText: string;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  onFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function getProgressMessage(importProgress: ImportProgress): string {
+  if (importProgress.stage === 'importing' && importProgress.chunkNumber && importProgress.chunkNumber > 0 && importProgress.totalChunks && importProgress.totalChunks > 1) {
+    return `Chunk ${importProgress.chunkNumber} of ${importProgress.totalChunks} • ${importProgress.current.toLocaleString()} / ${importProgress.total.toLocaleString()} rows (${Math.round((importProgress.current / importProgress.total) * 100)}%)`;
+  }
+  if (importProgress.stage === 'importing' && importProgress.current === 0) {
+    return `Importing ${importProgress.total.toLocaleString()} ${importProgress.total === 1 ? 'row' : 'rows'}...`;
+  }
+  return `${importProgress.current.toLocaleString()} / ${importProgress.total.toLocaleString()} rows (${Math.round((importProgress.current / importProgress.total) * 100)}%)`;
+}
+
+function getProgressSubtext(importProgress: ImportProgress): string {
+  if (importProgress.stage === 'parsing' && importProgress.current < importProgress.total) {
+    return `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`;
+  }
+  if (importProgress.stage === 'importing' && importProgress.current === 0) {
+    return 'Processing your data...';
+  }
+  if (importProgress.current === importProgress.total) {
+    return 'Complete!';
+  }
+  if (importProgress.stage === 'importing' && importProgress.chunkNumber && importProgress.totalChunks && importProgress.totalChunks > 1) {
+    return `Processing chunk ${importProgress.chunkNumber} of ${importProgress.totalChunks}...`;
+  }
+  if (importProgress.stage === 'importing') {
+    return 'Importing...';
+  }
+  return 'Processing...';
+}
+
+export function ImportModalFileSection({
+  file,
+  error,
+  isProcessing,
+  importProgress,
+  validationErrors,
+  uploadText,
+  selectFileButtonText,
+  fileInputRef,
+  onFileInputChange
+}: ImportModalFileSectionProps) {
+  return (
+    <Card className="text-center">
+      <CardHeader>
+        <FileText className="size-8 mx-auto" aria-hidden />
+      </CardHeader>
+      <CardDescription>
+        {file ? `Selected: ${file.name}` : uploadText}
+      </CardDescription>
+      <CardContent className="text-center">
+        {!file && error && (
+          <>
+            <AlertCircle className="inline-block size-4 mr-2" />
+            <span>{error}</span>
+          </>
+        )}
+
+        {isProcessing && (
+          <>
+            <span>
+              {importProgress?.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
+            </span>
+            {importProgress && importProgress.total > 0 && (
+              <>
+                <span>{getProgressMessage(importProgress)}</span>
+                <Progress
+                  value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0}
+                  className="h-2 bg-sec-200"
+                />
+                <p>{getProgressSubtext(importProgress)}</p>
+              </>
+            )}
+            {importProgress && importProgress.total === 0 && <p>Processing...</p>}
+            {!importProgress && <p>Initializing...</p>}
+            {error && (
+              <>
+                <AlertCircle className="inline-block size-4 mr-2" />
+                <span>{error}</span>
+              </>
+            )}
+            {validationErrors.length > 0 && (
+              <>
+                <AlertCircle className="size-4" />
+                <span>
+                  {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+                </span>
+                {validationErrors.slice(0, 10).map((err, idx) => (
+                  <p key={idx} className="p-2 bg-acc-50 border border-acc-200 rounded">
+                    Row {err.row} • {err.field}: {err.message}
+                  </p>
+                ))}
+                {validationErrors.length > 10 && (
+                  <p>... and {validationErrors.length - 10} more errors</p>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </CardContent>
+      {!file && (
+        <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={onFileInputChange}
+            className="hidden"
+          />
+        </CardFooter>
+      )}
+    </Card>
+  );
+}