coming together

templates/import.html

@@ -49,17 +49,21 @@
                 <div class="flex items-center gap-2">
                     <label class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Mode:</label>
                     <select id="uploadMode" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm">
+                        <option value="batch">Batch Upload (Recommended)</option>
                         <option value="single">Single File</option>
-                        <option value="batch">Batch Upload</option>
                     </select>
+                    <button type="button" id="importHelpBtn" class="ml-2 px-2 py-1 text-xs border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700" title="How to select and order files">
+                        <i class="fa-solid fa-circle-question"></i>
+                        Help
+                    </button>
                 </div>
             </div>
         </div>
         <div class="p-6">
             <!-- Single File Upload Form -->
-            <form id="importForm" enctype="multipart/form-data" class="single-upload">
+            <form id="importForm" enctype="multipart/form-data" class="single-upload hidden">
                 <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
-                    <div class="md:col-span-4">
+                    <div class="md:col-span-4" id="fileTypeContainer">
                         <label for="fileType" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Data Type *</label>
                         <select class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="fileType" name="fileType" required>
                             <option value="">Select data type...</option>
@@ -72,10 +76,16 @@
                         <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select the CSV file to import</div>
                     </div>
                     <div class="md:col-span-2 flex items-end">
-                        <label class="inline-flex items-center gap-2">
-                            <input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="replaceExisting" name="replaceExisting">
-                            <span class="text-sm">Replace existing</span>
-                        </label>
+                        <div class="flex flex-col gap-2">
+                            <label class="inline-flex items-center gap-2">
+                                <input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="replaceExisting" name="replaceExisting">
+                                <span class="text-sm">Replace existing</span>
+                            </label>
+                            <label class="inline-flex items-center gap-2">
+                                <input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="flexibleOnly" name="flexibleOnly">
+                                <span class="text-sm">Flexible-only</span>
+                            </label>
+                        </div>
                     </div>
                 </div>
                 
@@ -90,6 +100,9 @@
                             <span>Import Data</span>
                         </button>
                     </div>
+                    <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400" id="flexibleHint" style="display:none;">
+                        Flexible-only: Upload any CSV. All columns will be stored as flexible JSON and visible in Flexible Imports.
+                    </p>
                 </div>
             </form>
             
@@ -98,15 +111,24 @@
                 <div class="space-y-4">
                     <div>
                         <label for="batchFiles" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Select Multiple CSV Files *</label>
-                        <input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="batchFiles" name="batchFiles" accept=".csv" multiple required>
-                        <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select multiple CSV files (max 20). Files will be imported in optimal dependency order.</div>
+                        <div class="relative">
+                            <input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="batchFiles" name="batchFiles" accept=".csv" multiple required>
+                        </div>
+                        <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+                            Select all your CSV files at once (max 25). Files will be validated and imported in dependency order automatically.
+                            <br><strong>Tip:</strong> Use Ctrl+A in the file dialog to select all CSV files from your export folder.
+                        </div>
                     </div>
                     
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div>
+                        <div class="space-y-2">
                             <label class="inline-flex items-center gap-2">
                                 <input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="batchReplaceExisting" name="batchReplaceExisting">
-                                <span class="text-sm">Replace existing data</span>
+                                <span class="text-sm font-medium">Replace existing data</span>
+                            </label>
+                            <label class="inline-flex items-center gap-2">
+                                <input class="h-4 w-4 text-success-600 border-neutral-300 rounded" type="checkbox" id="validateAllFirst" name="validateAllFirst" checked>
+                                <span class="text-sm font-medium text-success-700 dark:text-success-400">Validate all files before import</span>
                             </label>
                         </div>
                         <div class="text-right">
@@ -116,13 +138,17 @@
                     
                     <div id="selectedFilesList" class="hidden">
                         <h6 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Selected Files (Import Order):</h6>
-                        <div class="bg-neutral-50 dark:bg-neutral-900 rounded-lg p-3 max-h-32 overflow-y-auto" id="filesList"></div>
+                        <div class="bg-neutral-50 dark:bg-neutral-900 rounded-lg p-3 max-h-40 overflow-y-auto" id="filesList"></div>
                     </div>
                     
                     <div class="flex items-center gap-3">
+                        <button type="button" class="px-4 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="batchValidateBtn">
+                            <i class="fa-solid fa-clipboard-check"></i>
+                            <span>Validate All Files</span>
+                        </button>
                         <button type="submit" class="px-4 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="batchImportBtn">
                             <i class="fa-solid fa-layer-group"></i>
-                            <span>Batch Import</span>
+                            <span>Import All Files</span>
                         </button>
                         <button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center gap-2" id="clearBatchBtn">
                             <i class="fa-solid fa-xmark"></i>
@@ -189,6 +215,22 @@
         </div>
     </div>
 
+    <!-- Recent Batch Uploads Panel -->
+    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft" id="recentBatchesPanel">
+        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
+            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
+                <i class="fa-solid fa-clock-rotate-left"></i>
+                <span>Recent Batch Uploads</span>
+            </h5>
+        </div>
+        <div class="p-6" id="recentBatches">
+            <div class="flex flex-col items-center justify-center py-4 text-neutral-500 dark:text-neutral-400">
+                <i class="fa-solid fa-file-arrow-up text-2xl mb-2"></i>
+                <p>Loading recent batches...</p>
+            </div>
+        </div>
+    </div>
+
     <!-- Data Management Panel -->
     <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
         <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
@@ -234,6 +276,7 @@
 // Import functionality
 let availableFiles = {};
 let importInProgress = false;
+let recentState = { limit: 5, offset: 0, status: 'all', start: '', end: '' };
 
 // Authorization is injected by window.http.wrappedFetch
 
@@ -245,10 +288,35 @@ document.addEventListener('DOMContentLoaded', function() {
         window.location.href = '/login';
         return;
     }
+    // Ensure admin only access for this page
+    (async () => {
+        try {
+            const resp = await window.http.wrappedFetch('/api/auth/me');
+            if (!resp.ok) {
+                window.location.href = '/login';
+                return;
+            }
+            const me = await resp.json();
+            if (!me || !me.is_admin) {
+                window.location.href = '/';
+                return;
+            }
+        } catch (_) {
+            window.location.href = '/login';
+            return;
+        }
+    })();
     
     loadAvailableFiles();
     loadImportStatus();
+    loadRecentBatches(false);
     setupEventListeners();
+    
+    // Set batch mode as default after a short delay to ensure DOM is ready
+    setTimeout(() => {
+        document.getElementById('uploadMode').value = 'batch';
+        switchUploadMode();
+    }, 100);
 });
 
 function setupEventListeners() {
@@ -258,9 +326,12 @@ function setupEventListeners() {
     
     // Upload mode switching
     document.getElementById('uploadMode').addEventListener('change', switchUploadMode);
+    const helpBtn = document.getElementById('importHelpBtn');
+    if (helpBtn) helpBtn.addEventListener('click', showImportHelp);
     
-    // Validation button
+    // Validation buttons
     document.getElementById('validateBtn').addEventListener('click', validateFile);
+    document.getElementById('batchValidateBtn').addEventListener('click', validateAllFiles);
     
     // File type selection
     document.getElementById('fileType').addEventListener('change', updateFileTypeDescription);
@@ -278,6 +349,24 @@ function setupEventListeners() {
     // Other buttons
     document.getElementById('backupBtn').addEventListener('click', downloadBackup);
     document.getElementById('viewLogsBtn').addEventListener('click', viewLogs);
+    const flexibleOnly = document.getElementById('flexibleOnly');
+    if (flexibleOnly) {
+        flexibleOnly.addEventListener('change', () => {
+            const isFlex = flexibleOnly.checked;
+            const fileTypeContainer = document.getElementById('fileTypeContainer');
+            const fileType = document.getElementById('fileType');
+            const hint = document.getElementById('flexibleHint');
+            if (isFlex) {
+                if (fileTypeContainer) fileTypeContainer.classList.add('opacity-50');
+                if (fileType) fileType.required = false;
+                if (hint) hint.style.display = '';
+            } else {
+                if (fileTypeContainer) fileTypeContainer.classList.remove('opacity-50');
+                if (fileType) fileType.required = true;
+                if (hint) hint.style.display = 'none';
+            }
+        });
+    }
 }
 
 async function loadAvailableFiles() {
@@ -398,10 +487,11 @@ function updateFileTypeDescription() {
 }
 
 async function validateFile() {
+    const flexibleOnly = document.getElementById('flexibleOnly').checked;
     const fileType = document.getElementById('fileType').value;
     const fileInput = document.getElementById('csvFile');
     
-    if (!fileType || !fileInput.files[0]) {
+    if ((!flexibleOnly && !fileType) || !fileInput.files[0]) {
         showAlert('Please select both data type and CSV file', 'warning');
         return;
     }
@@ -412,7 +502,9 @@ async function validateFile() {
     try {
         showProgress(true, 'Validating file...');
         
-        const response = await window.http.wrappedFetch(`/api/import/validate/${fileType}`, {
+        const endpoint = flexibleOnly ? '/api/import/upload-flexible' : `/api/import/validate/${fileType}`;
+        const method = flexibleOnly ? 'POST' : 'POST';
+        const response = await window.http.wrappedFetch(endpoint, {
             method: 'POST',
             body: formData
         });
@@ -423,7 +515,23 @@ async function validateFile() {
         }
         
         const result = await response.json();
-        displayValidationResults(result);
+        if (flexibleOnly) {
+            // Synthesize a validation-like display for flexible-only
+            displayValidationResults({
+                valid: true,
+                headers: {
+                    found: result.auto_mapping?.unmapped_headers || [],
+                    mapped: {},
+                    unmapped: result.auto_mapping?.unmapped_headers || [],
+                },
+                sample_data: [],
+                validation_errors: [],
+                total_errors: 0,
+                auto_mapping: { suggestions: {} },
+            });
+        } else {
+            displayValidationResults(result);
+        }
         
     } catch (error) {
         console.error('Validation error:', error);
@@ -446,24 +554,37 @@ function displayValidationResults(result) {
     html += `
         <div class="p-4 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg mb-4">
             <i class="fa-solid fa-${statusIcon} mr-2"></i>
-            <span class="font-medium">File validation ${result.valid ? 'passed' : 'failed'}</span>
+            <span class="font-medium">File validation ${result.valid ? 'passed' : 'completed with issues'}</span>
         </div>
     `;
     
-    // Headers validation
-    html += '<h6 class="text-sm font-semibold mb-2">Column Headers</h6>';
-    if (result.headers.missing.length > 0) {
-        html += `<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg mb-2">
-            <strong class="text-warning-700 dark:text-warning-300">Missing columns:</strong> ${result.headers.missing.join(', ')}
-        </div>`;
+    // Auto-discovery mapping summary
+    html += '<h6 class="text-sm font-semibold mb-2">Auto-Discovery Mapping</h6>';
+    const mapped = (result.headers && result.headers.mapped) || {};
+    const unmapped = (result.headers && result.headers.unmapped) || [];
+    const suggestions = (result.auto_mapping && result.auto_mapping.suggestions) || {};
+    const mappedCount = Object.keys(mapped).length;
+    const unmappedCount = unmapped.length;
+    html += `<div class="p-3 bg-neutral-100 dark:bg-neutral-900/30 rounded-lg mb-3 text-sm">
+        <div>Mapped columns: <strong>${mappedCount}</strong> | Unmapped columns: <strong>${unmappedCount}</strong></div>
+    </div>`;
+    
+    if (mappedCount > 0) {
+        html += '<div class="overflow-x-auto mb-3"><table class="w-full text-sm"><thead><tr class="bg-neutral-100 dark:bg-neutral-700"><th class="px-3 py-2 text-left font-medium">CSV Column</th><th class="px-3 py-2 text-left font-medium">Mapped To</th></tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">';
+        Object.entries(mapped).forEach(([csvCol, dbField]) => {
+            html += `<tr><td class="px-3 py-2">${csvCol}</td><td class="px-3 py-2 font-mono">${dbField}</td></tr>`;
+        });
+        html += '</tbody></table></div>';
     }
-    if (result.headers.extra.length > 0) {
-        html += `<div class="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg mb-2">
-            <strong class="text-info-700 dark:text-info-300">Extra columns:</strong> ${result.headers.extra.join(', ')}
-        </div>`;
-    }
-    if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
-        html += '<div class="p-3 bg-success-100 dark:bg-success-900/30 rounded-lg mb-2">All expected columns found</div>';
+    if (unmappedCount > 0) {
+        html += '<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg mb-2">Some columns were not recognized and will be stored as flexible JSON data:</div>';
+        html += '<div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="bg-neutral-100 dark:bg-neutral-700"><th class="px-3 py-2 text-left font-medium">Unmapped CSV Column</th><th class="px-3 py-2 text-left font-medium">Top Suggestions</th></tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">';
+        unmapped.forEach(col => {
+            const sug = suggestions[col] || [];
+            const sugText = sug.map(([name, score]) => `${name} (${(score*100).toFixed(0)}%)`).join(', ');
+            html += `<tr><td class="px-3 py-2">${col}</td><td class="px-3 py-2 text-neutral-600 dark:text-neutral-400">${sugText || '—'}</td></tr>`;
+        });
+        html += '</tbody></table></div>';
     }
     
     // Sample data
@@ -511,11 +632,12 @@ async function handleImport(event) {
         return;
     }
     
+    const flexibleOnly = document.getElementById('flexibleOnly').checked;
     const fileType = document.getElementById('fileType').value;
     const fileInput = document.getElementById('csvFile');
     const replaceExisting = document.getElementById('replaceExisting').checked;
     
-    if (!fileType || !fileInput.files[0]) {
+    if ((!flexibleOnly && !fileType) || !fileInput.files[0]) {
         showAlert('Please select both data type and CSV file', 'warning');
         return;
     }
@@ -529,10 +651,12 @@ async function handleImport(event) {
     try {
         showProgress(true, 'Importing data...');
         
-        const response = await window.http.wrappedFetch(`/api/import/upload/${fileType}`, {
-            method: 'POST',
-            body: formData
-        });
+        let response;
+        if (flexibleOnly) {
+            response = await window.http.wrappedFetch('/api/import/upload-flexible', { method: 'POST', body: formData });
+        } else {
+            response = await window.http.wrappedFetch(`/api/import/upload/${fileType}`, { method: 'POST', body: formData });
+        }
         
         if (!response.ok) {
             const error = await response.json();
@@ -574,6 +698,19 @@ function displayImportResults(result) {
         </div>
     `;
     
+    if (result.auto_mapping) {
+        const mappedCount = Object.keys(result.auto_mapping.mapped_headers || {}).length;
+        const unmappedCount = (result.auto_mapping.unmapped_headers || []).length;
+        const flexSaved = result.auto_mapping.flexible_saved_rows || 0;
+        html += `
+            <div class="p-3 bg-neutral-100 dark:bg-neutral-900/30 rounded-lg mb-4 text-sm">
+                <strong>Auto-Discovery Summary</strong>
+                <div class="mt-1">Mapped columns: ${mappedCount} | Unmapped stored as flexible JSON: ${unmappedCount}</div>
+                <div>Rows with flexible data saved: ${flexSaved}</div>
+            </div>
+        `;
+    }
+
     if (result.errors && result.errors.length > 0) {
         html += '<h6 class="text-sm font-semibold mb-2">Import Errors</h6>';
         html += '<div class="p-3 bg-danger-100 dark:bg-danger-900/30 rounded-lg">';
@@ -651,15 +788,206 @@ function switchUploadMode() {
     const singleForm = document.querySelector('.single-upload');
     const batchForm = document.querySelector('.batch-upload');
     
+    console.log('Switch mode to:', mode);
+    console.log('Single form found:', !!singleForm);
+    console.log('Batch form found:', !!batchForm);
+    
     if (mode === 'batch') {
-        singleForm.classList.add('hidden');
-        batchForm.classList.remove('hidden');
+        if (singleForm) singleForm.classList.add('hidden');
+        if (batchForm) batchForm.classList.remove('hidden');
+        console.log('Switched to batch mode');
     } else {
-        singleForm.classList.remove('hidden');
-        batchForm.classList.add('hidden');
+        if (singleForm) singleForm.classList.remove('hidden');
+        if (batchForm) batchForm.classList.add('hidden');
+        console.log('Switched to single mode');
     }
 }
 
+function showImportHelp() {
+    const tips = `
+<div class="space-y-2 text-sm">
+  <div class="p-2 bg-neutral-100 dark:bg-neutral-900/40 rounded">
+    <strong>Recommended flow:</strong>
+    <ol class="list-decimal list-inside mt-1 space-y-1">
+      <li>Choose Batch Upload mode.</li>
+      <li>Select all exported CSVs at once (Cmd+A/ Ctrl+A).</li>
+      <li>Keep file names exactly as exported (e.g., STATES.csv, GRUPLKUP.csv, …).</li>
+      <li>Optionally Validate All first to catch header/format issues.</li>
+      <li>Click Import All Files.</li>
+    </ol>
+  </div>
+  <div>
+    Files will be imported in dependency order automatically:
+    <code class="block mt-1">STATES.csv → GRUPLKUP.csv → EMPLOYEE.csv → FILETYPE.csv → FILESTAT.csv → TRNSTYPE.csv → TRNSLKUP.csv → FOOTERS.csv → SETUP.csv → PRINTERS.csv → ROLODEX.csv → PHONE.csv → FILES.csv → LEDGER.csv → TRNSACTN.csv → QDROS.csv → PENSIONS.csv → PLANINFO.csv → PAYMENTS.csv → DEPOSITS.csv → FILENOTS.csv → FORM_INX.csv → FORM_LST.csv → FVARLKUP.csv → RVARLKUP.csv</code>
+  </div>
+  <div>
+    Unrecognized columns are saved as flexible JSON automatically. Unknown CSVs fall back to flexible-only storage.
+  </div>
+  <div class="text-xs text-neutral-500 mt-1">
+    Tip: Use Replace Existing to clear a table before importing its file.
+  </div>
+</div>`;
+    if (window.alerts && window.alerts.show) {
+        window.alerts.show(tips, 'info', { html: true, duration: 0, title: 'Import Help' });
+    } else if (window.showNotification) {
+        window.showNotification('See import tips in console', 'info');
+        console.log('[Import Help]', tips);
+    } else {
+        alert('Batch mode → select all CSVs → Validate (optional) → Import. Files auto-ordered. Unknown columns saved as flexible.');
+    }
+}
+
+async function validateAllFiles() {
+    const fileInput = document.getElementById('batchFiles');
+    
+    if (!fileInput.files || fileInput.files.length === 0) {
+        showAlert('Please select at least one CSV file', 'warning');
+        return;
+    }
+    
+    if (fileInput.files.length > 25) {
+        showAlert('Maximum 25 files allowed per batch', 'warning');
+        return;
+    }
+    
+    showProgress(true, 'Validating all selected files...');
+    
+    try {
+        const formData = new FormData();
+        for (let file of fileInput.files) {
+            formData.append('files', file);
+        }
+        
+        const response = await window.http.wrappedFetch('/api/import/batch-validate', {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Batch validation failed');
+        }
+        
+        const result = await response.json();
+        displayBatchValidationResults(result.batch_validation_results, result.summary.all_valid);
+        
+    } catch (error) {
+        console.error('Batch validation error:', error);
+        showAlert('Batch validation failed: ' + error.message, 'danger');
+    } finally {
+        showProgress(false);
+    }
+}
+
+function displayBatchValidationResults(results, allValid) {
+    const panel = document.getElementById('validationPanel');
+    const container = document.getElementById('validationResults');
+    
+    const statusClass = allValid ? 'success' : 'warning';
+    const statusIcon = allValid ? 'circle-check text-success-600' : 'triangle-exclamation text-warning-600';
+    
+    const validCount = results.filter(r => r.valid).length;
+    const invalidCount = results.filter(r => !r.valid && r.error !== 'Unsupported file type').length;
+    const errorCount = results.filter(r => r.error && !r.valid).length;
+    const unsupportedCount = results.filter(r => r.error === 'Unsupported file type').length;
+    
+    let html = `
+        <div class="p-4 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg mb-4">
+            <div class="flex items-center gap-2">
+                <i class="fa-solid fa-${statusIcon}"></i>
+                <span class="font-medium">Batch validation ${allValid ? 'passed' : 'completed with issues'}</span>
+            </div>
+            <div class="text-sm mt-2">
+                Validated ${results.length} files: 
+                <span class="text-success-600 dark:text-success-400">${validCount} valid</span>, 
+                <span class="text-warning-600 dark:text-warning-400">${invalidCount} invalid</span>, 
+                <span class="text-danger-600 dark:text-danger-400">${errorCount} errors</span>, 
+                <span class="text-neutral-600 dark:text-neutral-400">${unsupportedCount} unsupported</span>
+            </div>
+        </div>
+    `;
+    
+    html += '<h6 class="text-sm font-semibold mb-3">File Validation Details</h6>';
+    html += '<div class="space-y-2">';
+    
+    results.forEach(result => {
+        let resultClass, resultIcon, status;
+        
+        if (result.valid) {
+            resultClass = 'success';
+            resultIcon = 'circle-check';
+            status = 'valid';
+        } else if (result.error === 'Unsupported file type') {
+            resultClass = 'neutral';
+            resultIcon = 'circle-info';
+            status = 'unsupported';
+        } else if (result.error && result.error.includes('failed')) {
+            resultClass = 'danger';
+            resultIcon = 'circle-xmark';
+            status = 'error';
+        } else {
+            resultClass = 'warning';
+            resultIcon = 'triangle-exclamation';
+            status = 'invalid';
+        }
+        
+        html += `
+            <div class="p-3 bg-${resultClass}-100 dark:bg-${resultClass}-900/30 rounded-lg">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <i class="fa-solid fa-${resultIcon} text-${resultClass}-600 dark:text-${resultClass}-400"></i>
+                        <strong class="text-sm">${result.file_type}</strong>
+                    </div>
+                    <div class="text-sm text-${resultClass}-600 dark:text-${resultClass}-400 capitalize">${status}</div>
+                </div>
+        `;
+        
+        if (result.headers && result.headers.mapped) {
+            const mappedCount = Object.keys(result.headers.mapped).length;
+            const unmappedCount = (result.headers.unmapped || []).length;
+            html += `<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">${mappedCount} mapped, ${unmappedCount} unmapped</p>`;
+        }
+        
+        if (result.total_errors > 0) {
+            html += `<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">${result.total_errors} data validation errors found</p>`;
+        }
+        
+        if (result.error) {
+            html += `<p class="text-xs text-${resultClass}-600 dark:text-${resultClass}-400 mt-1">${result.error}</p>`;
+        }
+        
+        html += `</div>`;
+    });
+    
+    html += '</div>';
+    
+    if (allValid) {
+        html += `
+            <div class="mt-4 p-3 bg-success-100 dark:bg-success-900/30 rounded-lg">
+                <div class="flex items-center gap-2">
+                    <i class="fa-solid fa-thumbs-up text-success-600"></i>
+                    <span class="text-sm font-medium text-success-700 dark:text-success-300">All files passed validation! Ready for import.</span>
+                </div>
+            </div>
+        `;
+    } else {
+        html += `
+            <div class="mt-4 p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg">
+                <div class="flex items-center gap-2">
+                    <i class="fa-solid fa-exclamation-triangle text-warning-600"></i>
+                    <span class="text-sm font-medium text-warning-700 dark:text-warning-300">Some files have issues. Review the details above before importing.</span>
+                </div>
+            </div>
+        `;
+    }
+    
+    container.innerHTML = html;
+    panel.classList.remove('hidden');
+    
+    // Scroll to validation panel
+    panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
 function updateSelectedFiles() {
     const fileInput = document.getElementById('batchFiles');
     const countSpan = document.getElementById('selectedFilesCount');
@@ -734,19 +1062,91 @@ async function handleBatchImport(event) {
     
     const fileInput = document.getElementById('batchFiles');
     const replaceExisting = document.getElementById('batchReplaceExisting').checked;
+    const validateFirst = document.getElementById('validateAllFirst').checked;
     
     if (!fileInput.files || fileInput.files.length === 0) {
         showAlert('Please select at least one CSV file', 'warning');
         return;
     }
     
-    if (fileInput.files.length > 20) {
-        showAlert('Maximum 20 files allowed per batch', 'warning');
+    if (fileInput.files.length > 25) {
+        showAlert('Maximum 25 files allowed per batch', 'warning');
         return;
     }
     
     importInProgress = true;
     
+    // Validate all files first if option is selected
+    if (validateFirst) {
+        try {
+            showProgress(true, 'Pre-validating all files before import...');
+            
+            const validationResults = [];
+            let hasErrors = false;
+            
+            for (let i = 0; i < fileInput.files.length; i++) {
+                const file = fileInput.files[i];
+                const fileName = file.name;
+                
+                showProgress(true, `Pre-validating ${fileName} (${i + 1}/${fileInput.files.length})...`);
+                
+                if (availableFiles.available_files && availableFiles.available_files.includes(fileName)) {
+                    try {
+                        const formData = new FormData();
+                        formData.append('file', file);
+                        
+                        const response = await window.http.wrappedFetch(`/api/import/validate/${fileName}`, {
+                            method: 'POST',
+                            body: formData
+                        });
+                        
+                        if (response.ok) {
+                            const result = await response.json();
+                            if (!result.valid) {
+                                hasErrors = true;
+                                validationResults.push({ fileName, valid: false, errors: result.validation_errors || [] });
+                            }
+                        } else {
+                            hasErrors = true;
+                            validationResults.push({ fileName, valid: false, errors: ['Validation request failed'] });
+                        }
+                    } catch (error) {
+                        hasErrors = true;
+                        validationResults.push({ fileName, valid: false, errors: [error.message] });
+                    }
+                } else {
+                    hasErrors = true;
+                    validationResults.push({ fileName, valid: false, errors: ['Unsupported file type'] });
+                }
+            }
+            
+            if (hasErrors) {
+                importInProgress = false;
+                showProgress(false);
+                
+                let errorMessage = 'Pre-validation found issues in the following files:\n\n';
+                validationResults.forEach(result => {
+                    if (!result.valid) {
+                        errorMessage += `• ${result.fileName}: ${result.errors.join(', ')}\n`;
+                    }
+                });
+                errorMessage += '\nPlease fix these issues before importing, or disable "Validate all files before import" to proceed anyway.';
+                
+                showAlert(errorMessage, 'danger');
+                return;
+            } else {
+                showAlert('All files passed pre-validation. Proceeding with import...', 'success');
+            }
+        } catch (error) {
+            importInProgress = false;
+            showProgress(false);
+            showAlert('Pre-validation failed: ' + error.message, 'danger');
+            return;
+        }
+    }
+    
+    // Continue with import if validation passed or was skipped
+    
     const formData = new FormData();
     for (let file of fileInput.files) {
         formData.append('files', file);
@@ -846,6 +1246,12 @@ function displayBatchResults(result) {
                     </div>
                 </div>
                 <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">${fileResult.message}</p>
+                ${fileResult.auto_mapping ? `
+                    <div class=\"mt-2 text-xs text-neutral-600 dark:text-neutral-400\">
+                        <span>${Object.keys(fileResult.auto_mapping.mapped_headers || {}).length} mapped</span>
+                        <span class=\"ml-2\">${(fileResult.auto_mapping.unmapped_headers || []).length} unmapped (stored as flexible)</span>
+                    </div>
+                ` : ''}
             </div>
         `;
     });
@@ -856,6 +1262,198 @@ function displayBatchResults(result) {
     panel.classList.remove('hidden');
 }
 
+async function loadRecentBatches(append) {
+    try {
+        const params = new URLSearchParams();
+        params.set('limit', String(recentState.limit));
+        params.set('offset', String(recentState.offset));
+        if (recentState.status && recentState.status !== 'all') params.set('status', recentState.status);
+        if (recentState.start) params.set('start', recentState.start);
+        if (recentState.end) params.set('end', recentState.end);
+        const resp = await window.http.wrappedFetch(`/api/import/recent-batches?${params.toString()}`);
+        if (!resp.ok) return;
+        const data = await resp.json();
+        const rows = (data.recent || []).map(r => `
+            <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-800 cursor-pointer" onclick="viewAuditDetails(${r.id})">
+                <td class="px-3 py-2 text-sm"><span class="inline-block px-2 py-0.5 rounded ${r.status === 'success' ? 'bg-green-100 text-green-700' : (r.status === 'completed_with_errors' ? 'bg-yellow-100 text-yellow-700' : (r.status === 'running' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'))}">${r.status}</span></td>
+                <td class="px-3 py-2 text-sm">${r.started_at ? new Date(r.started_at).toLocaleString() : ''}</td>
+                <td class="px-3 py-2 text-sm">${r.finished_at ? new Date(r.finished_at).toLocaleString() : ''}</td>
+                <td class="px-3 py-2 text-sm">${r.successful_files}/${r.total_files}</td>
+                <td class="px-3 py-2 text-sm">${Number(r.total_imported || 0).toLocaleString()}</td>
+                <td class="px-3 py-2 text-right text-sm"><button class="px-2 py-1 border rounded" onclick="event.stopPropagation();downloadAuditJson(${r.id})">JSON</button></td>
+            </tr>
+        `).join('');
+
+        if (!append) {
+            const html = `
+                <div class="mb-3 flex flex-wrap items-end gap-2">
+                    <div>
+                        <label class="block text-xs text-neutral-600 dark:text-neutral-400 mb-1">Status</label>
+                        <select id="recentStatusFilter" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm">
+                            <option value="all" ${recentState.status==='all'?'selected':''}>All</option>
+                            <option value="running" ${recentState.status==='running'?'selected':''}>Running</option>
+                            <option value="success" ${recentState.status==='success'?'selected':''}>Success</option>
+                            <option value="completed_with_errors" ${recentState.status==='completed_with_errors'?'selected':''}>Completed with errors</option>
+                            <option value="failed" ${recentState.status==='failed'?'selected':''}>Failed</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs text-neutral-600 dark:text-neutral-400 mb-1">Start</label>
+                        <input id="recentStartFilter" type="datetime-local" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm" value="${recentState.start || ''}">
+                    </div>
+                    <div>
+                        <label class="block text-xs text-neutral-600 dark:text-neutral-400 mb-1">End</label>
+                        <input id="recentEndFilter" type="datetime-local" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm" value="${recentState.end || ''}">
+                    </div>
+                    <div class="ml-auto">
+                        <button id="recentApplyBtn" class="px-3 py-1.5 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded">Apply</button>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm border border-neutral-200 dark:border-neutral-700 rounded">
+                        <thead class="bg-neutral-50 dark:bg-neutral-800">
+                            <tr>
+                                <th class="px-3 py-2 text-left">Status</th>
+                                <th class="px-3 py-2 text-left">Started</th>
+                                <th class="px-3 py-2 text-left">Finished</th>
+                                <th class="px-3 py-2 text-left">Files</th>
+                                <th class="px-3 py-2 text-left">Imported</th>
+                                <th class="px-3 py-2 text-right">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="recentBatchesTableBody">
+                            ${rows || '<tr><td class="px-3 py-3 text-neutral-500" colspan="6">No batch uploads</td></tr>'}
+                        </tbody>
+                    </table>
+                </div>
+                <div class="mt-3 text-center">
+                    <button id="recentLoadMoreBtn" class="px-3 py-1.5 border rounded ${((data.offset||0)+(data.recent?.length||0)) >= (data.total||0) ? 'opacity-50 cursor-not-allowed' : ''}">Load more</button>
+                    <span class="ml-2 text-xs text-neutral-500">Showing ${(data.offset||0)+(data.recent?.length||0)} of ${data.total||0}</span>
+                </div>
+            `;
+            document.getElementById('recentBatches').innerHTML = html;
+
+            const statusEl = document.getElementById('recentStatusFilter');
+            const startEl = document.getElementById('recentStartFilter');
+            const endEl = document.getElementById('recentEndFilter');
+            const applyBtn = document.getElementById('recentApplyBtn');
+            const loadMoreBtn = document.getElementById('recentLoadMoreBtn');
+            if (applyBtn) applyBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                recentState.status = statusEl.value || 'all';
+                recentState.start = startEl.value || '';
+                recentState.end = endEl.value || '';
+                recentState.offset = 0;
+                loadRecentBatches(false);
+            });
+            if (loadMoreBtn) loadMoreBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (((data.offset||0)+(data.recent?.length||0)) >= (data.total||0)) return;
+                recentState.offset = (data.offset||0) + (data.recent?.length||0);
+                loadRecentBatches(true);
+            });
+        } else {
+            const tbody = document.getElementById('recentBatchesTableBody');
+            if (tbody) tbody.insertAdjacentHTML('beforeend', rows);
+            const showing = recentState.offset + (data.recent?.length || 0);
+            const loadMoreBtn = document.getElementById('recentLoadMoreBtn');
+            if (loadMoreBtn && showing >= (data.total||0)) {
+                loadMoreBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            }
+        }
+    } catch (_) {}
+}
+
+async function viewAuditDetails(auditId) {
+    try {
+        const resp = await window.http.wrappedFetch(`/api/import/recent-batches/${auditId}`);
+        if (!resp.ok) return;
+        const data = await resp.json();
+        const files = (data.files || []).map(f => `
+            <tr>
+                <td class="px-3 py-2 text-sm font-mono">${f.file_type}</td>
+                <td class="px-3 py-2 text-sm"><span class="inline-block px-2 py-0.5 rounded ${f.status === 'success' ? 'bg-green-100 text-green-700' : (f.status === 'completed_with_errors' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700')}">${f.status}</span></td>
+                <td class="px-3 py-2 text-sm">${f.imported_count}</td>
+                <td class="px-3 py-2 text-sm">${f.errors}</td>
+                <td class="px-3 py-2 text-sm">${f.message || ''}</td>
+            </tr>
+        `).join('');
+        const hasFailed = Number(data.audit.failed_files || 0) > 0;
+        const content = `
+            <div class="space-y-2 text-sm">
+                <div><strong>Status:</strong> ${data.audit.status}</div>
+                <div><strong>Started:</strong> ${data.audit.started_at ? new Date(data.audit.started_at).toLocaleString() : ''}</div>
+                <div><strong>Finished:</strong> ${data.audit.finished_at ? new Date(data.audit.finished_at).toLocaleString() : ''}</div>
+                <div><strong>Files:</strong> ${data.audit.successful_files}/${data.audit.total_files}
+                    <button class="ml-2 px-2 py-1 border rounded" onclick="downloadAuditJson(${data.audit.id})">Download JSON</button>
+                    ${hasFailed ? `<button class="ml-2 px-2 py-1 border rounded" onclick="rerunFailedFiles(${data.audit.id})">Rerun failed files</button>` : ''}
+                </div>
+                <div class="overflow-x-auto mt-2">
+                    <table class="w-full text-sm border border-neutral-200 dark:border-neutral-700 rounded">
+                        <thead class="bg-neutral-50 dark:bg-neutral-800">
+                            <tr>
+                                <th class="px-3 py-2 text-left">File</th>
+                                <th class="px-3 py-2 text-left">Status</th>
+                                <th class="px-3 py-2 text-left">Imported</th>
+                                <th class="px-3 py-2 text-left">Errors</th>
+                                <th class="px-3 py-2 text-left">Message</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${files || '<tr><td class="px-3 py-3 text-neutral-500" colspan="5">No file records</td></tr>'}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        `;
+        if (window.alerts && window.alerts.show) {
+            window.alerts.show(content, 'info', { html: true, duration: 0, title: `Batch #${data.audit.id}` });
+        } else {
+            alert(`Batch ${data.audit.id}: ${data.audit.status}`);
+        }
+    } catch (_) {}
+}
+
+async function downloadAuditJson(auditId) {
+    try {
+        const resp = await window.http.wrappedFetch(`/api/import/recent-batches/${auditId}`);
+        if (!resp.ok) return;
+        const data = await resp.json();
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `import_audit_${auditId}.json`;
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(url);
+        a.remove();
+    } catch (_) {}
+}
+
+async function rerunFailedFiles(auditId) {
+    try {
+        const confirmReplace = confirm('Replace existing records for these file types before rerun? Click OK to replace, Cancel to append.');
+        const formData = new FormData();
+        if (confirmReplace) formData.append('replace_existing', 'true');
+        showProgress(true, 'Re-running failed files...');
+        const resp = await window.http.wrappedFetch(`/api/import/recent-batches/${auditId}/rerun-failed`, { method: 'POST', body: formData });
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({}));
+            throw new Error(err.detail || 'Rerun failed');
+        }
+        const result = await resp.json();
+        displayBatchResults(result);
+        await loadRecentBatches(false);
+        showAlert('Rerun completed', 'success');
+    } catch (e) {
+        console.error('Rerun failed', e);
+        showAlert('Rerun failed: ' + (e?.message || 'Unknown error'), 'danger');
+    } finally {
+        showProgress(false);
+    }
+}
+
 function showAlert(message, type = 'info') {
     if (window.alerts && typeof window.alerts.show === 'function') {
         window.alerts.show(message, type);