work on import

templates/admin_import.html

@@ -25,6 +25,60 @@
         </div>
     </div>
 
+    <!-- Import Status Overview -->
+    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
+                <i class="fa-solid fa-chart-pie text-primary-600"></i>
+                Import Status Overview
+            </h2>
+            <button id="refreshStatusBtn" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors duration-200 flex items-center gap-2">
+                <i class="fa-solid fa-refresh"></i>
+                <span>Refresh</span>
+            </button>
+        </div>
+        
+        <!-- Summary Stats -->
+        <div id="statusSummary" class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+            <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
+                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400" id="totalTables">-</div>
+                <div class="text-sm text-blue-800 dark:text-blue-300">Total Tables</div>
+            </div>
+            <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
+                <div class="text-2xl font-bold text-green-600 dark:text-green-400" id="importedTables">-</div>
+                <div class="text-sm text-green-800 dark:text-green-300">Imported</div>
+            </div>
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
+                <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400" id="emptyTables">-</div>
+                <div class="text-sm text-yellow-800 dark:text-yellow-300">Empty</div>
+            </div>
+            <div class="bg-red-50 dark:bg-red-900/20 p-4 rounded-lg">
+                <div class="text-2xl font-bold text-red-600 dark:text-red-400" id="missingTables">-</div>
+                <div class="text-sm text-red-800 dark:text-red-300">Missing</div>
+            </div>
+            <div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
+                <div class="text-2xl font-bold text-purple-600 dark:text-purple-400" id="totalRows">-</div>
+                <div class="text-sm text-purple-800 dark:text-purple-300">Total Rows</div>
+            </div>
+        </div>
+        
+        <!-- Progress Bar -->
+        <div class="mb-6">
+            <div class="flex justify-between text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+                <span>Import Progress</span>
+                <span id="completionPercentage">0%</span>
+            </div>
+            <div class="w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-3">
+                <div id="progressBar" class="bg-primary-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
+            </div>
+        </div>
+        
+        <!-- Status by Category -->
+        <div id="statusByCategory" class="space-y-4">
+            <!-- Categories will be populated here -->
+        </div>
+    </div>
+
     <!-- Import Form -->
     <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8">
         <h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
@@ -99,31 +153,56 @@
         <div id="resultsContent"></div>
     </div>
 
-    <!-- Batch Import Section -->
+    <!-- Bulk Upload Section -->
     <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6">
         <h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
             <i class="fa-solid fa-layer-group text-primary-600"></i>
-            Batch Import (Multiple Files)
+            Bulk File Upload
         </h2>
         <p class="text-neutral-600 dark:text-neutral-400 mb-6">
-            Import multiple CSV files at once. Files will be processed in dependency order 
-            (ROLODEX → PHONE/FILES → LEDGER/QDROS).
+            Select multiple CSV files to upload and import at once. You can select all your CSV files in one go.
         </p>
         
-        <div id="batchFiles" class="space-y-4 mb-6">
-            <!-- Batch file inputs will be added here -->
+        <!-- Bulk File Input -->
+        <div class="mb-6">
+            <label for="bulkFiles" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+                Select Multiple CSV Files
+            </label>
+            <input type="file" id="bulkFiles" multiple accept=".csv"
+                   class="w-full px-4 py-3 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-primary-50 file:text-primary-700 file:hover:bg-primary-100">
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+                Hold Ctrl/Cmd to select multiple files. Only CSV files are supported. Max 100MB per file.
+            </p>
         </div>
         
-        <div class="flex space-x-4">
-            <button type="button" id="addBatchFile"
-                    class="px-6 py-3 bg-success-600 text-white rounded-lg hover:bg-success-700 focus:outline-none focus:ring-2 focus:ring-success-500 transition-colors duration-200 flex items-center gap-2">
-                <i class="fa-solid fa-plus"></i>
-                <span>Add File</span>
+        <!-- Selected Files Display -->
+        <div id="bulkFilesDisplay" class="hidden mb-6">
+            <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
+                Selected Files (<span id="bulkFileCount">0</span>)
+            </h3>
+            <div class="bg-neutral-50 dark:bg-neutral-900 rounded-lg p-4 max-h-96 overflow-y-auto">
+                <div id="bulkFilesList" class="space-y-2">
+                    <!-- Selected files will be displayed here -->
+                </div>
+            </div>
+        </div>
+        
+        <!-- Bulk Controls -->
+        <div class="flex flex-wrap items-center gap-4 mb-6">
+            <button type="button" id="autoMapBtn"
+                    class="px-4 py-2 bg-info-600 text-white rounded-lg hover:bg-info-700 focus:outline-none focus:ring-2 focus:ring-info-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50" disabled>
+                <i class="fa-solid fa-magic"></i>
+                <span>Auto-Map Tables</span>
             </button>
-            <button type="button" id="batchImportBtn"
-                    class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
-                <i class="fa-solid fa-rocket"></i>
-                <span>Start Batch Import</span>
+            <button type="button" id="clearAllBtn"
+                    class="px-4 py-2 bg-warning-600 text-white rounded-lg hover:bg-warning-700 focus:outline-none focus:ring-2 focus:ring-warning-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50" disabled>
+                <i class="fa-solid fa-trash"></i>
+                <span>Clear All</span>
+            </button>
+            <button type="button" id="bulkUploadBtn"
+                    class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2" disabled>
+                <i class="fa-solid fa-cloud-upload"></i>
+                <span>Upload & Import All</span>
             </button>
         </div>
     </div>