feat: Redesign admin import interface with proper styling and navigation
IMPROVEMENTS: ✅ Template now extends base.html for consistent navigation and styling ✅ Proper dark mode support with neutral/primary color schemes ✅ Professional card-based layout with rounded corners and shadows ✅ Consistent button styling with icons and hover states ✅ Responsive design with proper spacing and typography ✅ Integrated with main navigation menu and user dropdown ✅ Back to Admin button with proper styling FEATURES: - Single file import with table selection and validation - Schema information display with proper styling - Real-time progress tracking with scrollable log - Comprehensive results display with metrics cards - Batch import functionality with file management - All styled consistently with the rest of the application BEFORE: Basic unstyled HTML page without navigation AFTER: Fully integrated admin interface matching application design 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
HotSwapp
@@ -1,133 +1,134 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block title %}CSV Import - Delphi Database{% endblock %}
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% block bridge_css %}{% endblock %}
|
||||||
<title>{{ title }}</title>
|
|
||||||
<link href="/static/css/output.css" rel="stylesheet">
|
{% block content %}
|
||||||
<script src="/static/js/http.js"></script>
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
<script src="/static/js/alerts.js"></script>
|
<!-- Page Header -->
|
||||||
<script src="/static/js/main.js"></script>
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
||||||
</head>
|
<div class="flex items-center gap-3">
|
||||||
<body class="bg-gray-100">
|
<div class="flex items-center justify-center w-12 h-12 bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-400 rounded-xl">
|
||||||
<div id="main-container" class="min-h-screen">
|
<i class="fa-solid fa-cloud-arrow-up text-xl"></i>
|
||||||
<!-- Navigation -->
|
|
||||||
<nav class="bg-blue-600 text-white shadow-lg">
|
|
||||||
<div class="max-w-7xl mx-auto px-4">
|
|
||||||
<div class="flex justify-between h-16">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<h1 class="text-xl font-bold">Data Import</h1>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<a href="/admin" class="hover:text-blue-200">← Back to Admin</a>
|
|
||||||
<div id="userDropdown" class="relative">
|
|
||||||
<button class="flex items-center space-x-2 hover:text-blue-200">
|
|
||||||
<span>Loading...</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">CSV Data Import</h1>
|
||||||
<!-- Main Content -->
|
<p class="text-neutral-600 dark:text-neutral-400">Import CSV files converted from legacy .sc files into the database</p>
|
||||||
<div class="max-w-4xl mx-auto py-8 px-4">
|
|
||||||
<!-- Page Header -->
|
|
||||||
<div class="mb-8">
|
|
||||||
<h2 class="text-3xl font-bold text-gray-900 mb-4">CSV Data Import</h2>
|
|
||||||
<p class="text-gray-600">
|
|
||||||
Import CSV files converted from legacy .sc files into the database.
|
|
||||||
Please ensure your CSV files follow the correct format for each table.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Import Form -->
|
|
||||||
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
|
||||||
<h3 class="text-xl font-semibold mb-4">Single File Import</h3>
|
|
||||||
|
|
||||||
<form id="importForm" class="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label for="tableSelect" class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Select Table Type
|
|
||||||
</label>
|
|
||||||
<select id="tableSelect" name="table_name"
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
||||||
<option value="">-- Select Table --</option>
|
|
||||||
<option value="rolodex">ROLODEX (Contacts)</option>
|
|
||||||
<option value="phone">PHONE (Phone Numbers)</option>
|
|
||||||
<option value="files">FILES (Case Files)</option>
|
|
||||||
<option value="ledger">LEDGER (Financial Transactions)</option>
|
|
||||||
<option value="qdros">QDROS (QDRO Documents)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="csvFile" class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Select CSV File
|
|
||||||
</label>
|
|
||||||
<input type="file" id="csvFile" name="file" accept=".csv"
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
||||||
<p class="text-sm text-gray-500 mt-1">Only CSV files are supported. Max file size: 100MB</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<button type="button" id="validateBtn"
|
|
||||||
class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 disabled:opacity-50">
|
|
||||||
Validate Headers
|
|
||||||
</button>
|
|
||||||
<button type="submit" id="importBtn"
|
|
||||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50">
|
|
||||||
Import Data
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Schema Information -->
|
|
||||||
<div id="schemaInfo" class="bg-blue-50 rounded-lg p-6 mb-8 hidden">
|
|
||||||
<h3 class="text-lg font-semibold text-blue-900 mb-3">Required Columns</h3>
|
|
||||||
<div id="schemaDetails" class="text-sm text-blue-800"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Import Progress -->
|
|
||||||
<div id="importProgress" class="bg-white rounded-lg shadow-md p-6 mb-8 hidden">
|
|
||||||
<h3 class="text-xl font-semibold mb-4">Import Progress</h3>
|
|
||||||
<div id="progressDetails"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Import Results -->
|
|
||||||
<div id="importResults" class="bg-white rounded-lg shadow-md p-6 hidden">
|
|
||||||
<h3 class="text-xl font-semibold mb-4">Import Results</h3>
|
|
||||||
<div id="resultsContent"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Batch Import Section -->
|
|
||||||
<div class="bg-white rounded-lg shadow-md p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-4">Batch Import (Multiple Files)</h3>
|
|
||||||
<p class="text-gray-600 mb-4">
|
|
||||||
Import multiple CSV files at once. Files will be processed in dependency order
|
|
||||||
(ROLODEX → PHONE/FILES → LEDGER/QDROS).
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="batchFiles" class="space-y-3">
|
|
||||||
<!-- Batch file inputs will be added here -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex space-x-4 mt-4">
|
|
||||||
<button type="button" id="addBatchFile"
|
|
||||||
class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
||||||
Add File
|
|
||||||
</button>
|
|
||||||
<button type="button" id="batchImportBtn"
|
|
||||||
class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50">
|
|
||||||
Start Batch Import
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<a href="/admin" class="inline-flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
|
||||||
|
<i class="fa-solid fa-arrow-left text-sm"></i>
|
||||||
|
<span>Back to Admin</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Include the import JavaScript -->
|
<!-- Import Form -->
|
||||||
<script src="/static/js/admin_import.js"></script>
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8">
|
||||||
</body>
|
<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
|
||||||
</html>
|
<i class="fa-solid fa-file-arrow-up text-primary-600"></i>
|
||||||
|
Single File Import
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form id="importForm" class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="tableSelect" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
|
||||||
|
Select Table Type
|
||||||
|
</label>
|
||||||
|
<select id="tableSelect" name="table_name"
|
||||||
|
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">
|
||||||
|
<option value="">-- Select Table --</option>
|
||||||
|
<option value="rolodex">ROLODEX (Contacts)</option>
|
||||||
|
<option value="phone">PHONE (Phone Numbers)</option>
|
||||||
|
<option value="files">FILES (Case Files)</option>
|
||||||
|
<option value="ledger">LEDGER (Financial Transactions)</option>
|
||||||
|
<option value="qdros">QDROS (QDRO Documents)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="csvFile" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
|
||||||
|
Select CSV File
|
||||||
|
</label>
|
||||||
|
<input type="file" id="csvFile" name="file" 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">Only CSV files are supported. Max file size: 100MB</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<button type="button" id="validateBtn"
|
||||||
|
class="px-6 py-3 bg-warning-600 text-white rounded-lg hover:bg-warning-700 focus:outline-none focus:ring-2 focus:ring-warning-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
|
||||||
|
<i class="fa-solid fa-check-circle"></i>
|
||||||
|
<span>Validate Headers</span>
|
||||||
|
</button>
|
||||||
|
<button type="submit" id="importBtn"
|
||||||
|
class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
|
||||||
|
<i class="fa-solid fa-upload"></i>
|
||||||
|
<span>Import Data</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Schema Information -->
|
||||||
|
<div id="schemaInfo" class="bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-xl p-6 mb-8 hidden">
|
||||||
|
<h3 class="text-lg font-semibold text-primary-900 dark:text-primary-100 mb-3 flex items-center gap-2">
|
||||||
|
<i class="fa-solid fa-table-columns"></i>
|
||||||
|
Required Columns
|
||||||
|
</h3>
|
||||||
|
<div id="schemaDetails" class="text-sm text-primary-800 dark:text-primary-200"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Import Progress -->
|
||||||
|
<div id="importProgress" class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8 hidden">
|
||||||
|
<h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
|
||||||
|
<i class="fa-solid fa-spinner fa-spin text-primary-600"></i>
|
||||||
|
Import Progress
|
||||||
|
</h3>
|
||||||
|
<div id="progressDetails" class="space-y-2 max-h-64 overflow-y-auto"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Import Results -->
|
||||||
|
<div id="importResults" class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8 hidden">
|
||||||
|
<h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
|
||||||
|
<i class="fa-solid fa-chart-line text-success-600"></i>
|
||||||
|
Import Results
|
||||||
|
</h3>
|
||||||
|
<div id="resultsContent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Batch Import 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)
|
||||||
|
</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).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="batchFiles" class="space-y-4 mb-6">
|
||||||
|
<!-- Batch file inputs will be added here -->
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Include the import JavaScript -->
|
||||||
|
<script src="/static/js/admin_import.js"></script>
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user