feat: Complete modular plugin architecture v0.17.0

Major architectural refactor: - Convert invcount and conssheets to self-contained modules - Add Module Manager with upload/install/uninstall - Implement auto-restart after module installation - Add drag-and-drop module upload system - Create triple-confirmation uninstall flow - Redesign Module Manager UI with card layout - Support dynamic module loading from /modules/ This enables easy distribution and installation of new modules without code changes to core application.
2026-02-08 00:54:12 -06:00
3 changed files with 1120 additions and 99 deletions
--- a/app.py
+++ b/app.py
@@ -28,7 +28,7 @@ app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(hours=1)


 # 1. Define the version
-APP_VERSION = '0.16.0'  # Bumped version for modular architecture
+APP_VERSION = '0.17.0'  # Bumped version for modular architecture

 # 2. Inject it into all templates automatically
@app.context_processor
@@ -236,6 +236,125 @@ def restart_server():
        
    except Exception as e:
        return jsonify({'success': False, 'message': f'Restart failed: {str(e)}'})
+    
+
+"""
+Add this route to app.py
+"""
+
+@app.route('/admin/modules/upload', methods=['POST'])
+@login_required
+def upload_module():
+    """Upload and extract a module package"""
+    if session.get('role') not in ['owner', 'admin']:
+        return jsonify({'success': False, 'message': 'Access denied'}), 403
+    
+    if 'module_file' not in request.files:
+        return jsonify({'success': False, 'message': 'No file uploaded'})
+    
+    file = request.files['module_file']
+    
+    if file.filename == '':
+        return jsonify({'success': False, 'message': 'No file selected'})
+    
+    if not file.filename.endswith('.zip'):
+        return jsonify({'success': False, 'message': 'File must be a ZIP archive'})
+    
+    try:
+        import zipfile
+        import tempfile
+        import shutil
+        from pathlib import Path
+        import json
+        
+        # Create temp directory
+        with tempfile.TemporaryDirectory() as temp_dir:
+            # Save uploaded file
+            zip_path = os.path.join(temp_dir, 'module.zip')
+            file.save(zip_path)
+            
+            # Extract zip
+            with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+                zip_ref.extractall(temp_dir)
+            
+            # Find the module folder (should contain manifest.json)
+            module_folder = None
+            manifest_path = None
+            
+            # Check if manifest.json is at root of zip
+            if os.path.exists(os.path.join(temp_dir, 'manifest.json')):
+                module_folder = temp_dir
+                manifest_path = os.path.join(temp_dir, 'manifest.json')
+            else:
+                # Look for manifest.json in subdirectories
+                for item in os.listdir(temp_dir):
+                    item_path = os.path.join(temp_dir, item)
+                    if os.path.isdir(item_path):
+                        potential_manifest = os.path.join(item_path, 'manifest.json')
+                        if os.path.exists(potential_manifest):
+                            module_folder = item_path
+                            manifest_path = potential_manifest
+                            break
+            
+            if not manifest_path:
+                return jsonify({
+                    'success': False, 
+                    'message': 'Invalid module package: manifest.json not found'
+                })
+            
+            # Read and validate manifest
+            with open(manifest_path, 'r') as f:
+                manifest = json.load(f)
+            
+            required_fields = ['module_key', 'name', 'version', 'author']
+            for field in required_fields:
+                if field not in manifest:
+                    return jsonify({
+                        'success': False,
+                        'message': f'Invalid manifest.json: missing required field "{field}"'
+                    })
+            
+            module_key = manifest['module_key']
+            
+            # Check if module already exists
+            modules_dir = os.path.join(os.path.dirname(__file__), 'modules')
+            target_path = os.path.join(modules_dir, module_key)
+            
+            if os.path.exists(target_path):
+                return jsonify({
+                    'success': False,
+                    'message': f'Module "{module_key}" already exists. Please uninstall it first or use a different module key.'
+                })
+            
+            # Required files check
+            required_files = ['manifest.json', '__init__.py']
+            for req_file in required_files:
+                if not os.path.exists(os.path.join(module_folder, req_file)):
+                    return jsonify({
+                        'success': False,
+                        'message': f'Invalid module package: {req_file} not found'
+                    })
+            
+            # Copy module to /modules directory
+            shutil.copytree(module_folder, target_path)
+            
+            print(f"✅ Module '{manifest['name']}' uploaded successfully to {target_path}")
+            
+            return jsonify({
+                'success': True,
+                'message': f"Module '{manifest['name']}' uploaded successfully! Click Install to activate it."
+            })
+            
+    except zipfile.BadZipFile:
+        return jsonify({'success': False, 'message': 'Invalid ZIP file'})
+    except json.JSONDecodeError:
+        return jsonify({'success': False, 'message': 'Invalid manifest.json: not valid JSON'})
+    except Exception as e:
+        print(f"❌ Module upload error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'success': False, 'message': f'Upload failed: {str(e)}'})
+
 # ==================== PWA SUPPORT ROUTES ====================

@app.route('/manifest.json')
--- a/templates/module_manager.html
+++ b/templates/module_manager.html
@@ -3,86 +3,240 @@
 {% block title %}Module Manager - ScanLook{% endblock %}

 {% block content %}
-<div class="container mt-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <h1><i class="fas fa-puzzle-piece"></i> Module Manager</h1>
-        <a href="{{ url_for('home') }}" class="btn btn-secondary">
-            <i class="fas fa-arrow-left"></i> Back to Home
-        </a>
+<div class="dashboard-container">
+    <div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: flex-start;">
+        <div>
+            <h1 class="page-title"><i class="fas fa-puzzle-piece"></i> Module Manager</h1>
+            <p class="page-subtitle">Install, manage, and configure ScanLook modules</p>
+        </div>
+        <button class="btn btn-primary" onclick="openUploadModal()" style="margin-top: 10px;">
+            <i class="fas fa-upload"></i> Upload
+        </button>
    </div>

-    <p class="lead">Install, uninstall, and manage ScanLook modules</p>
-
-    <div class="row">
+    {% if modules %}
+    <div class="module-grid">
        {% for module in modules %}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <div class="card h-100 {% if module.is_active %}border-success{% elif module.is_installed %}border-warning{% endif %}">
-                <div class="card-header {% if module.is_active %}bg-success text-white{% elif module.is_installed %}bg-warning text-dark{% else %}bg-light{% endif %}">
-                    <h5 class="mb-0">
-                        <i class="fas fa-cube"></i> {{ module.name }}
-                        <span class="badge badge-secondary float-right">v{{ module.version }}</span>
-                    </h5>
-                </div>
-                <div class="card-body">
-                    <p class="card-text">{{ module.description }}</p>
+        <div class="module-card {% if module.is_active %}module-card-active{% endif %}">
+            <!-- Module Icon -->
+            <div class="module-icon">
+                {% if module.icon %}
+                <i class="fa-solid {{ module.icon }}"></i>
+                {% else %}
+                <i class="fa-solid fa-cube"></i>
+                {% endif %}
+            </div>

-                    <p class="mb-2">
-                        <small class="text-muted">
-                            <strong>Author:</strong> {{ module.author }}<br>
-                            <strong>Module Key:</strong> <code>{{ module.module_key }}</code>
-                        </small>
-                    </p>
+            <!-- Module Info -->
+            <h3 class="module-name">{{ module.name }}</h3>
+            <p class="module-desc">{{ module.description }}</p>

-                    <div class="mt-3">
-                        {% if module.is_installed and module.is_active %}
-                        <span class="badge badge-success mb-2">
-                            <i class="fas fa-check-circle"></i> Active
-                        </span>
-                        {% elif module.is_installed %}
-                        <span class="badge badge-warning mb-2">
-                            <i class="fas fa-pause-circle"></i> Installed (Inactive)
-                        </span>
-                        {% else %}
-                        <span class="badge badge-secondary mb-2">
-                            <i class="fas fa-times-circle"></i> Not Installed
-                        </span>
-                        {% endif %}
-                    </div>
+            <!-- Module Metadata -->
+            <div class="module-metadata">
+                <div class="metadata-row">
+                    <span class="metadata-label">Version:</span>
+                    <span class="metadata-value">{{ module.version }}</span>
                </div>
-                <div class="card-footer bg-light">
-                    {% if not module.is_installed %}
-                    <button class="btn btn-primary btn-sm btn-block" onclick="installModule('{{ module.module_key }}')">
-                        <i class="fas fa-download"></i> Install
-                    </button>
-                    {% elif module.is_active %}
-                    <button class="btn btn-warning btn-sm btn-block mb-2" onclick="deactivateModule('{{ module.module_key }}')">
-                        <i class="fas fa-pause"></i> Deactivate
-                    </button>
-                    <button class="btn btn-danger btn-sm btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
-                        <i class="fas fa-trash"></i> Uninstall
-                    </button>
-                    {% else %}
-                    <button class="btn btn-success btn-sm btn-block mb-2" onclick="activateModule('{{ module.module_key }}')">
-                        <i class="fas fa-play"></i> Activate
-                    </button>
-                    <button class="btn btn-danger btn-sm btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
-                        <i class="fas fa-trash"></i> Uninstall
-                    </button>
-                    {% endif %}
+                <div class="metadata-row">
+                    <span class="metadata-label">Author:</span>
+                    <span class="metadata-value">{{ module.author }}</span>
                </div>
            </div>
+
+            <!-- Status Badge -->
+            <div class="module-status">
+                {% if module.is_installed and module.is_active %}
+                <span class="status-badge status-active">
+                    <i class="fas fa-check-circle"></i> Active
+                </span>
+                {% elif module.is_installed %}
+                <span class="status-badge status-inactive">
+                    <i class="fas fa-pause-circle"></i> Inactive
+                </span>
+                {% else %}
+                <span class="status-badge status-not-installed">
+                    <i class="fas fa-times-circle"></i> Not Installed
+                </span>
+                {% endif %}
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="module-actions">
+                {% if not module.is_installed %}
+                <!-- Not Installed: Show Install Button -->
+                <button class="btn btn-primary btn-block" onclick="installModule('{{ module.module_key }}')">
+                    <i class="fas fa-download"></i> Install Module
+                </button>
+                
+                {% elif module.is_active %}
+                <!-- Active: Show Deactivate and Uninstall -->
+                <button class="btn btn-warning btn-block" onclick="deactivateModule('{{ module.module_key }}')">
+                    <i class="fas fa-pause"></i> Deactivate
+                </button>
+                <button class="btn btn-danger btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
+                    <i class="fas fa-trash"></i> Uninstall
+                </button>
+                
+                {% else %}
+                <!-- Installed but Inactive: Show Activate and Uninstall -->
+                <button class="btn btn-success btn-block" onclick="activateModule('{{ module.module_key }}')">
+                    <i class="fas fa-play"></i> Activate
+                </button>
+                <button class="btn btn-danger btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
+                    <i class="fas fa-trash"></i> Uninstall
+                </button>
+                {% endif %}
+            </div>
        </div>
        {% endfor %}
    </div>
-
-    {% if not modules %}
-    <div class="alert alert-info">
-        <i class="fas fa-info-circle"></i> No modules found in the <code>/modules</code> directory.
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-icon"><i class="fas fa-puzzle-piece"></i></div>
+        <h2 class="empty-title">No Modules Found</h2>
+        <p class="empty-text">No modules found in the <code>/modules</code> directory.</p>
+        <p class="empty-text">Upload a module package to get started.</p>
    </div>
    {% endif %}
 </div>

+<style>
+/* Module Manager Specific Styles */
+.module-metadata {
+    margin: var(--space-md) 0;
+    padding: var(--space-sm) 0;
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.metadata-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+    font-size: 0.875rem;
+}
+
+.metadata-label {
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.metadata-value {
+    color: var(--text-color);
+}
+
+.module-status {
+    margin: var(--space-sm) 0;
+    text-align: center;
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-active {
+    background: rgba(40, 167, 69, 0.2);
+    color: #28a745;
+    border: 1px solid #28a745;
+}
+
+.status-inactive {
+    background: rgba(255, 193, 7, 0.2);
+    color: #ffc107;
+    border: 1px solid #ffc107;
+}
+
+.status-not-installed {
+    background: rgba(108, 117, 125, 0.2);
+    color: #6c757d;
+    border: 1px solid #6c757d;
+}
+
+.module-actions {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-sm);
+    margin-top: auto;
+}
+
+.module-actions .btn {
+    flex: 1;
+    justify-content: center;
+}
+
+/* Override for active module cards */
+.module-card-active {
+    border-color: var(--success-color);
+    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
+}
+
+.module-card-active .module-icon {
+    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
+    color: var(--success-color);
+}
+
+/* Make module cards compact */
+.module-grid .module-card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-md);
+    gap: var(--space-xs);
+}
+
+.module-grid .module-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+    margin: 0 auto var(--space-xs);
+}
+
+.module-grid .module-name {
+    margin: var(--space-xs) 0;
+    font-size: 1.25rem;
+}
+
+.module-grid .module-desc {
+    flex-grow: 0;
+    margin: 0 0 var(--space-xs) 0;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.module-metadata {
+    margin: var(--space-xs) 0;
+    padding: var(--space-xs) 0;
+}
+
+.metadata-row {
+    padding: 2px 0;
+    font-size: 0.8125rem;
+}
+
+.module-status {
+    margin: var(--space-xs) 0;
+}
+
+.status-badge {
+    padding: 4px 12px;
+    font-size: 0.75rem;
+}
+
+.module-actions {
+    margin-top: var(--space-xs);
+}
+</style>
+
 <script>
+// Keep all your existing JavaScript functions exactly as they are
 function installModule(moduleKey) {
    if (!confirm(`Install module "${moduleKey}"?\n\nThis will create database tables and activate the module.`)) {
        return;
@@ -98,9 +252,8 @@ function installModule(moduleKey) {
    .then(data => {
        if (data.success) {
            if (data.restart_required) {
-                // Auto-restart server
                alert(`✅ ${data.message}\n\nServer will restart automatically...`);
-                restartServerSilent();  // Restart without confirmation
+                restartServerSilent();
            } else {
                alert(`✅ ${data.message}`);
                location.reload();
@@ -115,7 +268,6 @@ function installModule(moduleKey) {
 }

 function restartServerSilent() {
-    // Auto-restart without confirmation (used after module install)
    fetch('/admin/restart', {
        method: 'POST',
        headers: {
@@ -125,7 +277,6 @@ function restartServerSilent() {
    .then(response => response.json())
    .then(data => {
        if (data.success) {
-            // Show loading message
            document.body.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; background: #1a1a1a; color: white;">
                    <div style="font-size: 48px; margin-bottom: 20px;">🔄</div>
@@ -133,8 +284,6 @@ function restartServerSilent() {
                    <p>Module installed successfully. Please wait...</p>
                </div>
            `;
-            
-            // Wait 3 seconds then reload
            setTimeout(() => {
                location.reload();
            }, 3000);
@@ -145,13 +294,7 @@ function restartServerSilent() {
    });
 }

-/**
- * 3-Stage Uninstall Confirmation - ALWAYS DELETES DATA
- * If users want to keep data, they should use "Deactivate" instead
- */
-
 function uninstallModule(moduleKey, moduleName) {
-    // STAGE 1: Initial warning
    const stage1Modal = `
        <div id="uninstall-modal-stage1" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 2px solid #ffc107; border-radius: 8px; padding: 30px; max-width: 500px; color: white;">
@@ -179,15 +322,12 @@ function uninstallModule(moduleKey, moduleName) {
            </div>
        </div>
    `;
-    
    document.body.insertAdjacentHTML('beforeend', stage1Modal);
 }

 function proceedToStage2(moduleKey, moduleName) {
-    // Remove stage 1
    document.getElementById('uninstall-modal-stage1').remove();
    
-    // STAGE 2: Data deletion warning
    const stage2Modal = `
        <div id="uninstall-modal-stage2" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 3px solid #dc3545; border-radius: 8px; padding: 30px; max-width: 550px; color: white;">
@@ -218,15 +358,12 @@ function proceedToStage2(moduleKey, moduleName) {
            </div>
        </div>
    `;
-    
    document.body.insertAdjacentHTML('beforeend', stage2Modal);
 }

 function proceedToStage3(moduleKey, moduleName) {
-    // Remove stage 2
    document.getElementById('uninstall-modal-stage2').remove();
    
-    // STAGE 3: Type "DELETE" confirmation
    const stage3Modal = `
        <div id="uninstall-modal-stage3" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 4px solid #dc3545; border-radius: 8px; padding: 35px; max-width: 500px; color: white; box-shadow: 0 0 30px rgba(220, 53, 69, 0.5);">
@@ -254,23 +391,15 @@ function proceedToStage3(moduleKey, moduleName) {
            </div>
        </div>
    `;
-    
    document.body.insertAdjacentHTML('beforeend', stage3Modal);
-    
-    // Focus the input
-    setTimeout(() => {
-        document.getElementById('delete-confirmation-text').focus();
-    }, 100);
+    setTimeout(() => document.getElementById('delete-confirmation-text').focus(), 100);
 }

 function cancelUninstall() {
-    // Remove any open modals
-    const modal1 = document.getElementById('uninstall-modal-stage1');
-    const modal2 = document.getElementById('uninstall-modal-stage2');
-    const modal3 = document.getElementById('uninstall-modal-stage3');
-    if (modal1) modal1.remove();
-    if (modal2) modal2.remove();
-    if (modal3) modal3.remove();
+    ['uninstall-modal-stage1', 'uninstall-modal-stage2', 'uninstall-modal-stage3'].forEach(id => {
+        const modal = document.getElementById(id);
+        if (modal) modal.remove();
+    });
 }

 function finalUninstall(moduleKey, moduleName) {
@@ -284,10 +413,8 @@ function finalUninstall(moduleKey, moduleName) {
        return;
    }
    
-    // Remove modal
    document.getElementById('uninstall-modal-stage3').remove();
    
-    // Actually uninstall - ALWAYS delete tables
    fetch(`/admin/modules/${moduleKey}/uninstall`, {
        method: 'POST',
        headers: {
@@ -353,5 +480,387 @@ function deactivateModule(moduleKey) {
        alert(`❌ Error: ${error}`);
    });
 }
+
+// ==================== MODULE UPLOAD FUNCTIONS ====================
+
+function openUploadModal() {
+    document.getElementById('upload-modal').style.display = 'flex';
+    resetUploadModal();
+}
+
+function closeUploadModal() {
+    document.getElementById('upload-modal').style.display = 'none';
+    resetUploadModal();
+}
+
+function closeUploadModalAndReload() {
+    closeUploadModal();
+    location.reload();
+}
+
+function resetUploadModal() {
+    document.getElementById('drop-zone').style.display = 'flex';
+    document.getElementById('upload-progress').style.display = 'none';
+    document.getElementById('upload-result').style.display = 'none';
+    document.getElementById('file-input').value = '';
+}
+
+// Drag and Drop Handlers
+document.addEventListener('DOMContentLoaded', function() {
+    const dropZone = document.getElementById('drop-zone');
+    const fileInput = document.getElementById('file-input');
+
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+
+    dropZone.addEventListener('dragleave', () => {
+        dropZone.classList.remove('drag-over');
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            handleFileUpload(files[0]);
+        }
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handleFileUpload(e.target.files[0]);
+        }
+    });
+});
+
+// Handle File Upload
+function handleFileUpload(file) {
+    // Validate file type
+    if (!file.name.endsWith('.zip')) {
+        showUploadResult(false, 'Invalid File Type', 'Please upload a ZIP file containing your module.');
+        return;
+    }
+
+    // Show progress
+    document.getElementById('drop-zone').style.display = 'none';
+    document.getElementById('upload-progress').style.display = 'block';
+    document.getElementById('upload-filename').textContent = file.name;
+
+    // Create FormData
+    const formData = new FormData();
+    formData.append('module_file', file);
+
+    // Upload with progress
+    const xhr = new XMLHttpRequest();
+
+    xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+            const percentComplete = Math.round((e.loaded / e.total) * 100);
+            updateProgress(percentComplete);
+        }
+    });
+
+    xhr.addEventListener('load', () => {
+        if (xhr.status === 200) {
+            const response = JSON.parse(xhr.responseText);
+            if (response.success) {
+                showUploadResult(true, 'Upload Successful!', response.message);
+            } else {
+                showUploadResult(false, 'Upload Failed', response.message);
+            }
+        } else {
+            showUploadResult(false, 'Upload Failed', 'Server error: ' + xhr.status);
+        }
+    });
+
+    xhr.addEventListener('error', () => {
+        showUploadResult(false, 'Upload Failed', 'Network error occurred');
+    });
+
+    xhr.open('POST', '/admin/modules/upload', true);
+    xhr.send(formData);
+}
+
+function updateProgress(percent) {
+    document.getElementById('progress-bar').style.width = percent + '%';
+    document.getElementById('progress-text').textContent = percent + '%';
+    
+    if (percent === 100) {
+        document.getElementById('upload-status').textContent = 'Processing...';
+    }
+}
+
+function showUploadResult(success, title, message) {
+    document.getElementById('upload-progress').style.display = 'none';
+    
+    const resultDiv = document.getElementById('upload-result');
+    resultDiv.style.display = 'block';
+    resultDiv.className = 'upload-result ' + (success ? 'success' : 'error');
+    
+    const icon = success 
+        ? '<i class="fas fa-check-circle"></i>' 
+        : '<i class="fas fa-exclamation-circle"></i>';
+    
+    document.getElementById('result-icon').innerHTML = icon;
+    document.getElementById('result-title').textContent = title;
+    document.getElementById('result-message').textContent = message;
+}
 </script>
+
+<!-- Upload Modal -->
+<div id="upload-modal" class="upload-modal" style="display: none;">
+    <div class="upload-modal-overlay" onclick="closeUploadModal()"></div>
+    <div class="upload-modal-content">
+        <div class="upload-modal-header">
+            <h2><i class="fas fa-upload"></i> Upload Module Package</h2>
+            <button class="close-btn" onclick="closeUploadModal()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        
+        <div class="upload-modal-body">
+            <!-- Drag & Drop Zone -->
+            <div id="drop-zone" class="drop-zone">
+                <div class="drop-zone-content">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <h3>Drag & Drop Module ZIP</h3>
+                    <p>or</p>
+                    <label for="file-input" class="btn btn-secondary">
+                        <i class="fas fa-folder-open"></i> Browse Files
+                    </label>
+                    <input type="file" id="file-input" accept=".zip" style="display: none;">
+                    <p class="file-requirements">
+                        <small>
+                            <strong>Requirements:</strong><br>
+                            • ZIP file containing module folder<br>
+                            • Must include manifest.json<br>
+                            • Module key must be unique
+                        </small>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Upload Progress (hidden by default) -->
+            <div id="upload-progress" class="upload-progress" style="display: none;">
+                <div class="progress-info">
+                    <span id="upload-filename"></span>
+                    <span id="upload-status">Uploading...</span>
+                </div>
+                <div class="progress-bar-container">
+                    <div id="progress-bar" class="progress-bar"></div>
+                </div>
+                <div class="progress-percentage">
+                    <span id="progress-text">0%</span>
+                </div>
+            </div>
+
+            <!-- Upload Result (hidden by default) -->
+            <div id="upload-result" class="upload-result" style="display: none;">
+                <div id="result-icon"></div>
+                <h3 id="result-title"></h3>
+                <p id="result-message"></p>
+                <button class="btn btn-primary" onclick="closeUploadModalAndReload()">
+                    Close & Refresh
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+/* Upload Modal */
+.upload-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.upload-modal-content {
+    position: relative;
+    background: var(--bg-primary);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow: auto;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.upload-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.upload-modal-header h2 {
+    margin: 0;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: var(--space-sm);
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.close-btn:hover {
+    color: var(--text-color);
+}
+
+.upload-modal-body {
+    padding: var(--space-xl);
+}
+
+/* Drop Zone */
+.drop-zone {
+    border: 3px dashed var(--border-color);
+    border-radius: 12px;
+    padding: var(--space-xl);
+    text-align: center;
+    transition: all 0.3s;
+    background: var(--bg-secondary);
+    min-height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.drop-zone:hover {
+    border-color: var(--primary-color);
+    background: rgba(0, 188, 212, 0.05);
+}
+
+.drop-zone.drag-over {
+    border-color: var(--primary-color);
+    background: rgba(0, 188, 212, 0.1);
+    transform: scale(1.02);
+}
+
+.drop-zone-content {
+    width: 100%;
+}
+
+.drop-zone-content i {
+    font-size: 4rem;
+    color: var(--primary-color);
+    margin-bottom: var(--space-md);
+}
+
+.drop-zone-content h3 {
+    margin: var(--space-md) 0;
+    color: var(--text-color);
+}
+
+.drop-zone-content p {
+    color: var(--text-muted);
+    margin: var(--space-sm) 0;
+}
+
+.file-requirements {
+    margin-top: var(--space-lg);
+    padding: var(--space-md);
+    background: var(--bg-primary);
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-color);
+}
+
+/* Upload Progress */
+.upload-progress {
+    text-align: center;
+    padding: var(--space-xl);
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--space-md);
+    color: var(--text-color);
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 30px;
+    background: var(--bg-secondary);
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: var(--space-sm);
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+    transition: width 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+}
+
+.progress-percentage {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+/* Upload Result */
+.upload-result {
+    text-align: center;
+    padding: var(--space-xl);
+}
+
+.upload-result i {
+    font-size: 5rem;
+    margin-bottom: var(--space-lg);
+}
+
+.upload-result.success i {
+    color: var(--success-color);
+}
+
+.upload-result.error i {
+    color: var(--danger-color);
+}
+
+.upload-result h3 {
+    margin: var(--space-md) 0;
+    color: var(--text-color);
+}
+
+.upload-result p {
+    color: var(--text-muted);
+    margin-bottom: var(--space-lg);
+}
+</style>
+
 {% endblock %}
--- a/templates/module_upload_ui.html
+++ b/templates/module_upload_ui.html
@@ -0,0 +1,393 @@
+<!-- Add this button to the top of module_manager.html, right after the dashboard-header -->
+
+<div class="upload-section">
+    <button class="btn btn-primary btn-lg" onclick="openUploadModal()">
+        <i class="fas fa-upload"></i> Upload New Module
+    </button>
+</div>
+
+<!-- Upload Modal -->
+<div id="upload-modal" class="upload-modal" style="display: none;">
+    <div class="upload-modal-overlay" onclick="closeUploadModal()"></div>
+    <div class="upload-modal-content">
+        <div class="upload-modal-header">
+            <h2><i class="fas fa-upload"></i> Upload Module Package</h2>
+            <button class="close-btn" onclick="closeUploadModal()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        
+        <div class="upload-modal-body">
+            <!-- Drag & Drop Zone -->
+            <div id="drop-zone" class="drop-zone">
+                <div class="drop-zone-content">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <h3>Drag & Drop Module ZIP</h3>
+                    <p>or</p>
+                    <label for="file-input" class="btn btn-secondary">
+                        <i class="fas fa-folder-open"></i> Browse Files
+                    </label>
+                    <input type="file" id="file-input" accept=".zip" style="display: none;">
+                    <p class="file-requirements">
+                        <small>
+                            <strong>Requirements:</strong><br>
+                            • ZIP file containing module folder<br>
+                            • Must include manifest.json<br>
+                            • Module key must be unique
+                        </small>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Upload Progress (hidden by default) -->
+            <div id="upload-progress" class="upload-progress" style="display: none;">
+                <div class="progress-info">
+                    <span id="upload-filename"></span>
+                    <span id="upload-status">Uploading...</span>
+                </div>
+                <div class="progress-bar-container">
+                    <div id="progress-bar" class="progress-bar"></div>
+                </div>
+                <div class="progress-percentage">
+                    <span id="progress-text">0%</span>
+                </div>
+            </div>
+
+            <!-- Upload Result (hidden by default) -->
+            <div id="upload-result" class="upload-result" style="display: none;">
+                <div id="result-icon"></div>
+                <h3 id="result-title"></h3>
+                <p id="result-message"></p>
+                <button class="btn btn-primary" onclick="closeUploadModalAndReload()">
+                    Close & Refresh
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+/* Upload Section */
+.upload-section {
+    margin: var(--space-lg) 0;
+    text-align: center;
+}
+
+/* Upload Modal */
+.upload-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.upload-modal-content {
+    position: relative;
+    background: var(--bg-primary);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow: auto;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.upload-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.upload-modal-header h2 {
+    margin: 0;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: var(--space-sm);
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.close-btn:hover {
+    color: var(--text-color);
+}
+
+.upload-modal-body {
+    padding: var(--space-xl);
+}
+
+/* Drop Zone */
+.drop-zone {
+    border: 3px dashed var(--border-color);
+    border-radius: 12px;
+    padding: var(--space-xl);
+    text-align: center;
+    transition: all 0.3s;
+    background: var(--bg-secondary);
+    min-height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.drop-zone:hover {
+    border-color: var(--primary-color);
+    background: rgba(0, 188, 212, 0.05);
+}
+
+.drop-zone.drag-over {
+    border-color: var(--primary-color);
+    background: rgba(0, 188, 212, 0.1);
+    transform: scale(1.02);
+}
+
+.drop-zone-content {
+    width: 100%;
+}
+
+.drop-zone-content i {
+    font-size: 4rem;
+    color: var(--primary-color);
+    margin-bottom: var(--space-md);
+}
+
+.drop-zone-content h3 {
+    margin: var(--space-md) 0;
+    color: var(--text-color);
+}
+
+.drop-zone-content p {
+    color: var(--text-muted);
+    margin: var(--space-sm) 0;
+}
+
+.file-requirements {
+    margin-top: var(--space-lg);
+    padding: var(--space-md);
+    background: var(--bg-primary);
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-color);
+}
+
+/* Upload Progress */
+.upload-progress {
+    text-align: center;
+    padding: var(--space-xl);
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--space-md);
+    color: var(--text-color);
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 30px;
+    background: var(--bg-secondary);
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: var(--space-sm);
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+    transition: width 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+}
+
+.progress-percentage {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+/* Upload Result */
+.upload-result {
+    text-align: center;
+    padding: var(--space-xl);
+}
+
+.upload-result i {
+    font-size: 5rem;
+    margin-bottom: var(--space-lg);
+}
+
+.upload-result.success i {
+    color: var(--success-color);
+}
+
+.upload-result.error i {
+    color: var(--danger-color);
+}
+
+.upload-result h3 {
+    margin: var(--space-md) 0;
+    color: var(--text-color);
+}
+
+.upload-result p {
+    color: var(--text-muted);
+    margin-bottom: var(--space-lg);
+}
+</style>
+
+<script>
+// Upload Modal Functions
+function openUploadModal() {
+    document.getElementById('upload-modal').style.display = 'flex';
+    resetUploadModal();
+}
+
+function closeUploadModal() {
+    document.getElementById('upload-modal').style.display = 'none';
+    resetUploadModal();
+}
+
+function closeUploadModalAndReload() {
+    closeUploadModal();
+    location.reload();
+}
+
+function resetUploadModal() {
+    document.getElementById('drop-zone').style.display = 'flex';
+    document.getElementById('upload-progress').style.display = 'none';
+    document.getElementById('upload-result').style.display = 'none';
+    document.getElementById('file-input').value = '';
+}
+
+// Drag and Drop Handlers
+const dropZone = document.getElementById('drop-zone');
+const fileInput = document.getElementById('file-input');
+
+dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('drag-over');
+});
+
+dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('drag-over');
+});
+
+dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+    
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+        handleFileUpload(files[0]);
+    }
+});
+
+fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        handleFileUpload(e.target.files[0]);
+    }
+});
+
+// Handle File Upload
+function handleFileUpload(file) {
+    // Validate file type
+    if (!file.name.endsWith('.zip')) {
+        showUploadResult(false, 'Invalid File Type', 'Please upload a ZIP file containing your module.');
+        return;
+    }
+
+    // Show progress
+    document.getElementById('drop-zone').style.display = 'none';
+    document.getElementById('upload-progress').style.display = 'block';
+    document.getElementById('upload-filename').textContent = file.name;
+
+    // Create FormData
+    const formData = new FormData();
+    formData.append('module_file', file);
+
+    // Upload with progress
+    const xhr = new XMLHttpRequest();
+
+    xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+            const percentComplete = Math.round((e.loaded / e.total) * 100);
+            updateProgress(percentComplete);
+        }
+    });
+
+    xhr.addEventListener('load', () => {
+        if (xhr.status === 200) {
+            const response = JSON.parse(xhr.responseText);
+            if (response.success) {
+                showUploadResult(true, 'Upload Successful!', response.message);
+            } else {
+                showUploadResult(false, 'Upload Failed', response.message);
+            }
+        } else {
+            showUploadResult(false, 'Upload Failed', 'Server error: ' + xhr.status);
+        }
+    });
+
+    xhr.addEventListener('error', () => {
+        showUploadResult(false, 'Upload Failed', 'Network error occurred');
+    });
+
+    xhr.open('POST', '/admin/modules/upload', true);
+    xhr.send(formData);
+}
+
+function updateProgress(percent) {
+    document.getElementById('progress-bar').style.width = percent + '%';
+    document.getElementById('progress-text').textContent = percent + '%';
+    
+    if (percent === 100) {
+        document.getElementById('upload-status').textContent = 'Processing...';
+    }
+}
+
+function showUploadResult(success, title, message) {
+    document.getElementById('upload-progress').style.display = 'none';
+    
+    const resultDiv = document.getElementById('upload-result');
+    resultDiv.style.display = 'block';
+    resultDiv.className = 'upload-result ' + (success ? 'success' : 'error');
+    
+    const icon = success 
+        ? '<i class="fas fa-check-circle"></i>' 
+        : '<i class="fas fa-exclamation-circle"></i>';
+    
+    document.getElementById('result-icon').innerHTML = icon;
+    document.getElementById('result-title').textContent = title;
+    document.getElementById('result-message').textContent = message;
+}
+</script>