@striae-org/striae 3.0.4

package/app/components/sidebar/case-import/components/FileSelector.tsx

@@ -0,0 +1,161 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { resetFileInput } from '../utils/file-validation';
+import styles from '../case-import.module.css';
+
+interface FileSelectorProps {
+  selectedFile: File | null;
+  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled: boolean;
+  onClear?: () => void;
+  onFileSelectDirect?: (file: File) => void; // For drag and drop
+}
+
+export const FileSelector = ({ 
+  selectedFile, 
+  onFileSelect, 
+  isDisabled,
+  onClear,
+  onFileSelectDirect
+}: FileSelectorProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const isMountedRef = useRef(true);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const handleClear = () => {
+    resetFileInput(fileInputRef);
+    onClear?.();
+  };
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    if (!isDisabled && isMountedRef.current) {
+      setIsDragOver(true);
+    }
+  }, [isDisabled]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (!relatedTarget || !e.currentTarget?.contains(relatedTarget)) {
+      if (isMountedRef.current) {
+        setIsDragOver(false);
+      }
+    }
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    if (isMountedRef.current) {
+      setIsDragOver(false);
+    }
+    if (isDisabled || !isMountedRef.current) return;
+    
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      
+      // Check file type (same as input accept attribute)
+      const isValidType = file.name.toLowerCase().endsWith('.zip') || 
+                         file.name.toLowerCase().endsWith('.json');
+      
+      if (isValidType) {
+        if (onFileSelectDirect) {
+          onFileSelectDirect(file);
+        } else {
+          // Fallback: simulate file input change event
+          const dataTransfer = new DataTransfer();
+          dataTransfer.items.add(file);
+          if (fileInputRef.current) {
+            fileInputRef.current.files = dataTransfer.files;
+            const input = fileInputRef.current;
+            const event = new Event('change', { bubbles: true });
+            Object.defineProperty(event, 'target', { value: input, enumerable: true });
+            onFileSelect(event as unknown as React.ChangeEvent<HTMLInputElement>);
+          }
+        }
+      } else {
+        console.warn('Invalid file type dropped:', file.name);
+      }
+    }
+  }, [isDisabled, onFileSelectDirect, onFileSelect]);
+
+  return (
+    <div className={styles.fileSection}>
+      <div className={styles.fileInputGroup}>
+        <input
+          ref={fileInputRef}
+          type="file"
+          id="zipFile"
+          accept=".zip,.json"
+          onChange={onFileSelect}
+          disabled={isDisabled}
+          className={styles.fileInput}
+          aria-label="File picker for ZIP or JSON files"
+        />
+        <div 
+          className={`${styles.fileLabel} ${isDragOver ? styles.fileLabelDragOver : ''}`}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => {
+            if (!isDisabled) {
+              fileInputRef.current?.click();
+            }
+          }}
+          role="button"
+          tabIndex={isDisabled ? -1 : 0}
+          aria-disabled={isDisabled}
+          aria-label="File selection area. Drag and drop a ZIP file for case import or JSON file for confirmation import."
+          onKeyDown={(e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
+              if (e.key === ' ') {
+                e.preventDefault();
+              }
+              fileInputRef.current?.click();
+            }
+          }}
+        >
+          <div className={styles.fileLabelContent}>
+            <span className={styles.fileLabelIcon}>📁</span>
+            <span className={styles.fileLabelText}>
+              {selectedFile 
+                ? selectedFile.name 
+                : isDragOver 
+                  ? 'Drop file here...' 
+                  : 'Select ZIP or JSON file... or drag & drop'
+              }
+            </span>
+          </div>
+        </div>
+        
+        {/* Clear button positioned in upper right corner */}
+        {selectedFile && onClear && (
+          <button 
+            type="button"
+            onClick={handleClear}
+            className={styles.clearFileButton}
+            disabled={isDisabled}
+            title="Clear selected file"
+            aria-label="Clear selected file"
+          >
+            ×
+          </button>
+        )}
+      </div>
+      
+      {selectedFile && (
+        <div className={styles.fileInfo}>
+          <span className={styles.fileSize}>
+            {(selectedFile.size / (1024 * 1024)).toFixed(2)} MB
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

package/app/components/sidebar/case-import/components/ProgressSection.tsx

@@ -0,0 +1,46 @@
+import styles from '../case-import.module.css';
+
+interface ProgressState {
+  stage: string;
+  progress: number;
+  details?: string;
+}
+
+interface ProgressSectionProps {
+  importProgress: ProgressState | null;
+}
+
+export const ProgressSection = ({ importProgress }: ProgressSectionProps) => {
+  if (!importProgress) return null;
+
+  const progressPercent = Math.round(importProgress.progress);
+  const isComplete = importProgress.progress >= 100;
+
+  return (
+    <div className={styles.progressSection} role="region" aria-live="polite" aria-label="Import progress">
+      <div className={styles.progressText}>
+        {importProgress.stage}
+        {importProgress.details && (
+          <span className={styles.progressDetails}> - {importProgress.details}</span>
+        )}
+      </div>
+      <div 
+        className={styles.progressBar}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={importProgress.progress}
+        aria-valuetext={`${progressPercent}% complete${isComplete ? ' - Import finished' : ''}`}
+        aria-label="Case import progress"
+      >
+        <div 
+          className={styles.progressFill}
+          style={{ width: `${importProgress.progress}%` }}
+        />
+      </div>
+      <div className={styles.progressPercent}>
+        {progressPercent}%
+      </div>
+    </div>
+  );
+};

package/app/components/sidebar/case-import/hooks/useFilePreview.ts

@@ -0,0 +1,101 @@
+import { useState, useCallback } from 'react';
+import { User } from 'firebase/auth';
+import { previewCaseImport } from '~/components/actions/case-review';
+import { CaseImportPreview } from '~/types';
+import { ConfirmationPreview } from '../components/ConfirmationPreviewSection';
+
+interface UseFilePreviewReturn {
+  casePreview: CaseImportPreview | null;
+  confirmationPreview: ConfirmationPreview | null;
+  loadCasePreview: (file: File) => Promise<void>;
+  loadConfirmationPreview: (file: File) => Promise<void>;
+  clearPreviews: () => void;
+}
+
+/**
+ * Custom hook for handling file preview loading
+ */
+export const useFilePreview = (
+  user: User | null,
+  setError: (error: string) => void,
+  setIsLoadingPreview: (loading: boolean) => void,
+  clearImportData: () => void
+): UseFilePreviewReturn => {
+  const [casePreview, setCasePreview] = useState<CaseImportPreview | null>(null);
+  const [confirmationPreview, setConfirmationPreview] = useState<ConfirmationPreview | null>(null);
+
+  const loadCasePreview = useCallback(async (file: File) => {
+    if (!user) {
+      setError('User authentication required');
+      return;
+    }
+
+    setIsLoadingPreview(true);
+    try {
+      const preview = await previewCaseImport(file, user);
+      setCasePreview(preview);
+    } catch (error) {
+      console.error('Error loading case preview:', error);
+      setError(`Failed to read case information: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      clearImportData();
+    } finally {
+      setIsLoadingPreview(false);
+    }
+  }, [user, setError, setIsLoadingPreview, clearImportData]);
+
+  const loadConfirmationPreview = useCallback(async (file: File) => {
+    if (!user) {
+      setError('User authentication required');
+      return;
+    }
+
+    setIsLoadingPreview(true);
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      
+      // Extract confirmation IDs from the confirmations object
+      const confirmationIds: string[] = [];
+      if (data.confirmations) {
+        Object.values(data.confirmations).forEach((imageConfirmations: any) => {
+          if (Array.isArray(imageConfirmations)) {
+            imageConfirmations.forEach((confirmation: any) => {
+              if (confirmation.confirmationId) {
+                confirmationIds.push(confirmation.confirmationId);
+              }
+            });
+          }
+        });
+      }
+
+      const preview: ConfirmationPreview = {
+        caseNumber: data.metadata?.caseNumber || 'Unknown',
+        fullName: data.metadata?.exportedByName || 'Unknown',
+        exportDate: data.metadata?.exportDate || new Date().toISOString(),
+        totalConfirmations: data.metadata?.totalConfirmations || confirmationIds.length,
+        confirmationIds
+      };
+      
+      setConfirmationPreview(preview);
+    } catch (error) {
+      console.error('Error loading confirmation preview:', error);
+      setError(`Failed to read confirmation data: ${error instanceof Error ? error.message : 'Invalid JSON format'}`);
+      clearImportData();
+    } finally {
+      setIsLoadingPreview(false);
+    }
+  }, [user, setError, setIsLoadingPreview, clearImportData]);
+
+  const clearPreviews = useCallback(() => {
+    setCasePreview(null);
+    setConfirmationPreview(null);
+  }, []);
+
+  return {
+    casePreview,
+    confirmationPreview,
+    loadCasePreview,
+    loadConfirmationPreview,
+    clearPreviews
+  };
+};

package/app/components/sidebar/case-import/hooks/useImportExecution.ts

@@ -0,0 +1,152 @@
+import { useCallback } from 'react';
+import { User } from 'firebase/auth';
+import { importCaseForReview, importConfirmationData } from '~/components/actions/case-review';
+import { ImportResult, ConfirmationImportResult } from '~/types';
+
+interface ProgressState {
+  stage: string;
+  progress: number;
+  details?: string;
+}
+
+interface UseImportExecutionProps {
+  user: User | null;
+  selectedFile: File | null;
+  importType: 'case' | 'confirmation' | null;
+  setImportProgress: (progress: ProgressState | null) => void;
+  clearMessages: () => void;
+  setError: (error: string) => void;
+  setSuccess: (success: string) => void;
+  setIsImporting: (importing: boolean) => void;
+  onImportComplete?: (result: ImportResult | ConfirmationImportResult) => void;
+  onUpdateExistingCase: (caseNumber: string) => void;
+  onClose: () => void;
+}
+
+/**
+ * Custom hook for handling import execution logic
+ */
+export const useImportExecution = ({
+  user,
+  selectedFile,
+  importType,
+  setImportProgress,
+  clearMessages,
+  setError,
+  setSuccess,
+  setIsImporting,
+  onImportComplete,
+  onUpdateExistingCase,
+  onClose
+}: UseImportExecutionProps) => {
+
+  const executeImport = useCallback(async () => {
+    if (!user || !selectedFile || !importType) return;
+    
+    // Clear any existing success and error messages when starting a new import
+    clearMessages();
+    setIsImporting(true);
+    
+    try {
+      if (importType === 'case') {
+        // Handle case import
+        setImportProgress({ stage: 'Starting case import...', progress: 0 });
+        
+        // Track if we're in cleanup phase to trigger UI reset
+        let hasTriggeredCleanupReset = false;
+        
+        const result = await importCaseForReview(
+          user,
+          selectedFile,
+          { overwriteExisting: true },
+          (stage: string, progress: number, details?: string) => {
+            setImportProgress({ stage, progress, details });
+            
+            // Detect cleanup phase and trigger UI reset once
+            if (!hasTriggeredCleanupReset && 
+                (stage.toLowerCase().includes('checking existing read-only cases') || 
+                 stage.toLowerCase().includes('cleaning up existing case') ||
+                 details?.toLowerCase().includes('cleaning up previous imports') ||
+                 details?.toLowerCase().includes('removing existing case data'))) {
+              hasTriggeredCleanupReset = true;
+              
+              // Trigger immediate UI reset during cleanup phase
+              onImportComplete?.({ 
+                success: true,
+                caseNumber: '',
+                isReadOnly: false,
+                filesImported: 0,
+                annotationsImported: 0,
+                errors: [],
+                warnings: []
+              });
+            }
+          }
+        );
+        
+        if (result.success) {
+          setSuccess(`Successfully imported case "${result.caseNumber}" for review`);
+          
+          // Update existing case status
+          onUpdateExistingCase(result.caseNumber);
+          
+          // Call completion callback
+          onImportComplete?.(result);
+          
+          // Auto-close after success
+          setTimeout(() => {
+            onClose();
+          }, 2000);
+          
+        } else {
+          setError(result.errors?.join(', ') || 'Case import failed');
+        }
+        
+      } else if (importType === 'confirmation') {
+        // Handle confirmation import
+        setImportProgress({ stage: 'Validating confirmation data...', progress: 50 });
+        
+        const result = await importConfirmationData(user, selectedFile);
+        
+        if (result.success) {
+          let message = `Successfully imported ${result.confirmationsImported} confirmation(s) for case "${result.caseNumber}"`;
+          
+          // If there were blocked confirmations, include that information
+          if (result.errors && result.errors.length > 0) {
+            message += `\n\n${result.errors.length} confirmation(s) were blocked:\n\n${result.errors.join('\n\n')}`;
+          }
+          
+          setSuccess(message);
+          
+          // No auto-close for confirmation imports - let user read the details and close manually
+          
+        } else {
+          setError(result.errors?.join(', ') || 'Confirmation import failed');
+        }
+      }
+      
+    } catch (error) {
+      console.error('Import failed:', error);
+      setError(error instanceof Error ? error.message : 'Import failed. Please try again.');
+    } finally {
+      setIsImporting(false);
+      setImportProgress(null);
+    }
+  }, [
+    user, 
+    selectedFile, 
+    importType, 
+    setImportProgress, 
+    clearMessages,
+    setError, 
+    setSuccess, 
+    setIsImporting, 
+    onImportComplete, 
+    onUpdateExistingCase, 
+    onClose
+  ]);
+
+  return {
+    executeImport
+  };
+};

package/app/components/sidebar/case-import/hooks/useImportState.ts

@@ -0,0 +1,88 @@
+import { useState, useCallback } from 'react';
+
+// State interfaces
+interface ImportState {
+  selectedFile: File | null;
+  isImporting: boolean;
+  isClearing: boolean;
+  isLoadingPreview: boolean;
+  showConfirmation: boolean;
+  importType: 'case' | 'confirmation' | null;
+}
+
+interface MessageState {
+  error: string;
+  success: string;
+}
+
+interface ProgressState {
+  stage: string;
+  progress: number;
+  details?: string;
+}
+
+/**
+ * Custom hook for managing import-related state
+ */
+export const useImportState = () => {
+  const [importState, setImportState] = useState<ImportState>({
+    selectedFile: null,
+    isImporting: false,
+    isClearing: false,
+    isLoadingPreview: false,
+    showConfirmation: false,
+    importType: null
+  });
+  
+  const [messages, setMessages] = useState<MessageState>({
+    error: '',
+    success: ''
+  });
+  
+  const [importProgress, setImportProgress] = useState<ProgressState | null>(null);
+
+  // Helper functions
+  const clearMessages = useCallback(() => {
+    setMessages({ error: '', success: '' });
+  }, []);
+
+  const setError = useCallback((error: string) => {
+    setMessages({ error, success: '' });
+  }, []);
+
+  const setSuccess = useCallback((success: string) => {
+    setMessages({ error: '', success });
+  }, []);
+
+  const updateImportState = useCallback((updates: Partial<ImportState>) => {
+    setImportState(prev => ({ ...prev, ...updates }));
+  }, []);
+
+  const resetImportState = useCallback(() => {
+    setImportState({
+      selectedFile: null,
+      isImporting: false,
+      isClearing: false,
+      isLoadingPreview: false,
+      showConfirmation: false,
+      importType: null
+    });
+    clearMessages();
+    setImportProgress(null);
+  }, [clearMessages]);
+
+  return {
+    // State
+    importState,
+    messages,
+    importProgress,
+    
+    // Actions
+    clearMessages,
+    setError,
+    setSuccess,
+    updateImportState,
+    resetImportState,
+    setImportProgress
+  };
+};

package/app/components/sidebar/case-import/index.ts

@@ -0,0 +1,18 @@
+// Components
+export { FileSelector } from './components/FileSelector';
+export { CasePreviewSection } from './components/CasePreviewSection';
+export { ConfirmationPreviewSection } from './components/ConfirmationPreviewSection';
+export { ProgressSection } from './components/ProgressSection';
+export { ExistingCaseSection } from './components/ExistingCaseSection';
+export { ConfirmationDialog } from './components/ConfirmationDialog';
+
+// Hooks
+export { useImportState } from './hooks/useImportState';
+export { useFilePreview } from './hooks/useFilePreview';
+export { useImportExecution } from './hooks/useImportExecution';
+
+// Utils
+export * from './utils/file-validation';
+
+// Types
+export type { ConfirmationPreview } from './components/ConfirmationPreviewSection';

package/app/components/sidebar/case-import/utils/file-validation.ts

@@ -0,0 +1,43 @@
+import { isConfirmationDataFile } from '~/components/actions/case-review';
+
+/**
+ * Check if a file is a valid ZIP file
+ */
+export const isValidZipFile = (file: File): boolean => {
+  return file.type === 'application/zip' || 
+         file.type === 'application/x-zip-compressed' ||
+         file.name.toLowerCase().endsWith('.zip');
+};
+
+/**
+ * Check if a file is a valid confirmation JSON file
+ */
+export const isValidConfirmationFile = (file: File): boolean => {
+  return file.type === 'application/json' && 
+         isConfirmationDataFile(file.name);
+};
+
+/**
+ * Check if a file is valid for import (either ZIP or confirmation JSON)
+ */
+export const isValidImportFile = (file: File): boolean => {
+  return isValidZipFile(file) || isValidConfirmationFile(file);
+};
+
+/**
+ * Get import type based on file
+ */
+export const getImportType = (file: File): 'case' | 'confirmation' | null => {
+  if (isValidZipFile(file)) return 'case';
+  if (isValidConfirmationFile(file)) return 'confirmation';
+  return null;
+};
+
+/**
+ * Reset file input element
+ */
+export const resetFileInput = (ref: React.RefObject<HTMLInputElement | null>): void => {
+  if (ref.current) {
+    ref.current.value = '';
+  }
+};