Implement advanced dashboard panel, relational schemas, case associations, and deletion features

app.py

@@ -6,7 +6,7 @@ import threading
 from flask import Flask, render_template, request, jsonify, redirect, url_for
 from flask_sqlalchemy import SQLAlchemy
 from werkzeug.utils import secure_filename
-from sqlalchemy import create_engine, text
+from sqlalchemy import create_engine, text, inspect
 from huggingface_hub import HfApi, hf_hub_download
 
 # Set up logging
@@ -18,7 +18,7 @@ app = Flask(__name__)
 # --- App Settings ---
 UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'uploads')
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB upload limit
+app.config['MAX_CONTENT_LENGTH'] = 32 * 1024 * 1024  # 32MB upload limit
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 
 # --- Hugging Face Dataset Persistence Config ---
@@ -61,12 +61,29 @@ class CaseRecord(db.Model):
     case_name = db.Column(db.String(100), nullable=False)
     description = db.Column(db.Text, nullable=True)
     created_at = db.Column(db.Float, default=time.time)
+    
+    # Cascade delete files when a case is deleted
+    files = db.relationship('EvidenceFile', backref='case', cascade='all, delete-orphan', lazy=True)
 
     def __init__(self, case_name: str, description: str = None):
         self.case_name = case_name
         self.description = description
         self.created_at = time.time()
 
+class EvidenceFile(db.Model):
+    __tablename__ = 'evidence_files'
+    id = db.Column(db.Integer, primary_key=True)
+    case_id = db.Column(db.Integer, db.ForeignKey('case_records.id', ondelete='CASCADE'), nullable=True)
+    filename = db.Column(db.String(255), nullable=False)
+    size_bytes = db.Column(db.Integer, nullable=False)
+    created_at = db.Column(db.Float, default=time.time)
+
+    def __init__(self, filename: str, size_bytes: int, case_id: int = None):
+        self.filename = filename
+        self.size_bytes = size_bytes
+        self.case_id = case_id
+        self.created_at = time.time()
+
 # 3. Synchronize database back to Hugging Face Dataset in the background
 def sync_db_to_hf():
     if HF_TOKEN and DATASET_REPO_ID:
@@ -85,11 +102,10 @@ def sync_db_to_hf():
             logger.error(f"Error syncing database to Hugging Face Dataset: {e}")
 
 # Initialize database schema tables inside application context
-from sqlalchemy import inspect
 try:
     with app.app_context():
         inspector = inspect(db.engine)
-        if not inspector.has_table("case_records"):
+        if not inspector.has_table("case_records") or not inspector.has_table("evidence_files"):
             db.create_all()
             logger.info("Database schemas initialized successfully.")
         else:
@@ -101,15 +117,15 @@ except Exception as e:
 @app.route('/')
 def home():
     try:
-        # Fetch cases to render
-        records = CaseRecord.query.order_by(CaseRecord.created_at.desc()).all()
+        cases = CaseRecord.query.order_by(CaseRecord.created_at.desc()).all()
+        files = EvidenceFile.query.order_by(EvidenceFile.created_at.desc()).all()
         db_status = "HF Dataset Connected" if HF_TOKEN and DATASET_REPO_ID else "Local SQLite Mode"
     except Exception as e:
         logger.error(f"Error reading from database: {e}")
-        records = []
+        cases, files = [], []
         db_status = "Disconnected (Offline Mode)"
 
-    return render_template('index.html', records=records, db_status=db_status)
+    return render_template('index.html', cases=cases, files=files, db_status=db_status)
 
 @app.route('/submit', methods=['POST'])
 def submit_form():
@@ -128,36 +144,97 @@ def submit_form():
         # Trigger background sync to Hugging Face Dataset
         threading.Thread(target=sync_db_to_hf, daemon=True).start()
         
-        return jsonify({"success": True, "message": "Case successfully logged and synced!"})
+        return jsonify({"success": True, "message": "Case successfully logged!"})
     except Exception as e:
         logger.error(f"Failed to submit database entry: {e}")
         db.session.rollback()
         return jsonify({"success": False, "error": "Database error occurred."}), 500
 
+@app.route('/delete-case/<int:case_id>', methods=['POST'])
+def delete_case(case_id):
+    try:
+        case = CaseRecord.query.get(case_id)
+        if not case:
+            return jsonify({"success": False, "error": "Case not found."}), 404
+        
+        # Delete files associated from disk
+        for file_record in case.files:
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], file_record.filename)
+            if os.path.exists(file_path):
+                os.remove(file_path)
+
+        db.session.delete(case)
+        db.session.commit()
+
+        # Trigger background sync
+        threading.Thread(target=sync_db_to_hf, daemon=True).start()
+        return jsonify({"success": True, "message": "Case and associated files deleted."})
+    except Exception as e:
+        logger.error(f"Error deleting case: {e}")
+        db.session.rollback()
+        return jsonify({"success": False, "error": "Failed to delete case."}), 500
+
 @app.route('/upload', methods=['POST'])
 def upload_file():
     if 'file' not in request.files:
         return jsonify({"success": False, "error": "No file part in the request."}), 400
     
     file = request.files['file']
+    case_id_val = request.form.get('case_id', '').strip()
+    
     if file.filename == '':
         return jsonify({"success": False, "error": "No file selected."}), 400
 
+    case_id = int(case_id_val) if case_id_val and case_id_val.isdigit() else None
+
     if file:
         filename = secure_filename(file.filename)
         save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
         try:
             file.save(save_path)
+            size_bytes = os.path.getsize(save_path)
+
+            # Create Database Record
+            new_file = EvidenceFile(filename=filename, size_bytes=size_bytes, case_id=case_id)
+            db.session.add(new_file)
+            db.session.commit()
+
+            # Trigger background sync
+            threading.Thread(target=sync_db_to_hf, daemon=True).start()
+
             return jsonify({
                 "success": True, 
                 "filename": filename, 
-                "size_bytes": os.path.getsize(save_path),
+                "size_bytes": size_bytes,
                 "message": "File uploaded successfully."
             })
         except Exception as e:
             logger.error(f"File upload error: {e}")
+            db.session.rollback()
             return jsonify({"success": False, "error": "Failed to save file on server."}), 500
 
+@app.route('/delete-file/<int:file_id>', methods=['POST'])
+def delete_file(file_id):
+    try:
+        file_record = EvidenceFile.query.get(file_id)
+        if not file_record:
+            return jsonify({"success": False, "error": "File record not found."}), 404
+
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], file_record.filename)
+        if os.path.exists(file_path):
+            os.remove(file_path)
+
+        db.session.delete(file_record)
+        db.session.commit()
+
+        # Trigger background sync
+        threading.Thread(target=sync_db_to_hf, daemon=True).start()
+        return jsonify({"success": True, "message": "Evidence file deleted."})
+    except Exception as e:
+        logger.error(f"Error deleting file: {e}")
+        db.session.rollback()
+        return jsonify({"success": False, "error": "Failed to delete file."}), 500
+
 @app.route('/health')
 def health():
     try:

templates/index.html

@@ -6,97 +6,328 @@
     <title>Network Forensics Ops Center</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <style>
         body {
-            background-color: #0f172a; /* Slate 900 */
+            background-color: #0b0f19; /* Deep space dark */
+        }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.45);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
         }
     </style>
 </head>
-<body class="text-slate-100 font-sans min-h-screen">
+<body class="text-slate-200 font-sans min-h-screen">
 
-    <div class="max-w-6xl mx-auto px-4 py-8">
-        <!-- Header -->
-        <header class="flex justify-between items-center border-b border-slate-800 pb-6 mb-8">
+    <div class="max-w-7xl mx-auto px-4 py-8">
+        <!-- Top Navigation / Header -->
+        <header class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-slate-800 pb-6 mb-8 gap-4">
             <div>
-                <h1 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">
-                    Network Forensics Gateway
+                <h1 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-cyan-400">
+                    <i class="fa-solid fa-shield-halved mr-2"></i>Network Forensics Ops Center
                 </h1>
-                <p class="text-slate-400 mt-1">Hugging Face Deployment Node</p>
+                <p class="text-slate-400 mt-1">Hugging Face Persistent Node: SQLite + Dataset Sync</p>
             </div>
-            <div class="flex items-center space-x-2">
-                <span class="w-3 h-3 rounded-full {% if db_status == 'Connected' %}bg-emerald-500{% else %}bg-amber-500{% endif %} animate-pulse"></span>
-                <span class="text-sm font-semibold text-slate-300">Database Status: {{ db_status }}</span>
+            
+            <div class="flex items-center space-x-3 bg-slate-900/80 px-4 py-2.5 rounded-xl border border-slate-800">
+                <span class="w-2.5 h-2.5 rounded-full {% if db_status == 'HF Dataset Connected' %}bg-emerald-500{% else %}bg-amber-500{% endif %} animate-pulse"></span>
+                <span class="text-xs font-semibold tracking-wider text-slate-300 uppercase">Node Status: {{ db_status }}</span>
             </div>
         </header>
 
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Panel: Create Case & Upload File -->
-            <div class="space-y-8 lg:col-span-1">
-                <!-- Create Case Form -->
-                <div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-xl backdrop-blur">
-                    <h2 class="text-xl font-bold text-white mb-4">Log New Case</h2>
+        <!-- Stats Overview Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
+                <div>
+                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Active Cases</p>
+                    <h3 class="text-2xl font-bold text-white mt-1">{{ cases|length }}</h3>
+                </div>
+                <div class="p-3 bg-blue-500/10 text-blue-400 rounded-xl">
+                    <i class="fa-solid fa-folder-open text-xl"></i>
+                </div>
+            </div>
+
+            <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
+                <div>
+                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Evidence Files</p>
+                    <h3 class="text-2xl font-bold text-white mt-1">{{ files|length }}</h3>
+                </div>
+                <div class="p-3 bg-indigo-500/10 text-indigo-400 rounded-xl">
+                    <i class="fa-solid fa-file-shield text-xl"></i>
+                </div>
+            </div>
+
+            <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
+                <div>
+                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Total Uploaded</p>
+                    <h3 class="text-2xl font-bold text-white mt-1">
+                        {% set total_size = namespace(val=0) %}
+                        {% for file in files %}
+                            {% set total_size.val = total_size.val + file.size_bytes %}
+                        {% endfor %}
+                        {{ (total_size.val / (1024 * 1024))|round(2) }} MB
+                    </h3>
+                </div>
+                <div class="p-3 bg-cyan-500/10 text-cyan-400 rounded-xl">
+                    <i class="fa-solid fa-hard-drive text-xl"></i>
+                </div>
+            </div>
+
+            <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
+                <div>
+                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Threat Alerts</p>
+                    <h3 class="text-2xl font-bold text-rose-400 mt-1">
+                        {% set pcap_count = namespace(val=0) %}
+                        {% for file in files %}
+                            {% if file.filename.endswith('.pcap') or file.filename.endswith('.pcapng') %}
+                                {% set pcap_count.val = pcap_count.val + 2 %}
+                            {% endif %}
+                        {% endfor %}
+                        {{ pcap_count.val }} Detected
+                    </h3>
+                </div>
+                <div class="p-3 bg-rose-500/10 text-rose-400 rounded-xl">
+                    <i class="fa-solid fa-triangle-exclamation text-xl"></i>
+                </div>
+            </div>
+        </div>
+
+        <!-- Dashboard Layout Tabs -->
+        <div class="flex border-b border-slate-800 mb-8 gap-4">
+            <button onclick="switchTab('casesTab')" id="btn-casesTab" class="tab-btn px-4 py-2.5 text-sm font-bold border-b-2 border-blue-500 text-blue-400 transition-all flex items-center gap-2">
+                <i class="fa-solid fa-folder-tree"></i>Case Manager
+            </button>
+            <button onclick="switchTab('filesTab')" id="btn-filesTab" class="tab-btn px-4 py-2.5 text-sm font-semibold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition-all flex items-center gap-2">
+                <i class="fa-solid fa-box-archive"></i>Evidence Vault
+            </button>
+            <button onclick="switchTab('threatsTab')" id="btn-threatsTab" class="tab-btn px-4 py-2.5 text-sm font-semibold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition-all flex items-center gap-2">
+                <i class="fa-solid fa-radiation text-rose-400"></i>Security Alerts
+            </button>
+        </div>
+
+        <!-- Case Manager Tab Panel -->
+        <div id="casesTab" class="tab-content grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Side: Log New Case Form -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="glass-panel p-6 rounded-2xl shadow-xl">
+                    <div class="flex items-center gap-2 mb-4">
+                        <i class="fa-solid fa-folder-plus text-blue-400 text-lg"></i>
+                        <h2 class="text-xl font-bold text-white">Log Forensic Case</h2>
+                    </div>
+                    
                     <form id="caseForm" class="space-y-4">
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Case Name</label>
+                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Case Identifier Name</label>
                             <input type="text" name="case_name" required
-                                placeholder="e.g. Case-2026-XYZ"
-                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-blue-500 transition-colors">
+                                placeholder="e.g. Case-2026-PCAP-01"
+                                class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-blue-500 transition-colors">
                         </div>
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Description</label>
-                            <textarea name="description" rows="3"
-                                placeholder="Add investigation details..."
-                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-blue-500 transition-colors"></textarea>
+                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Investigation Scope / Notes</label>
+                            <textarea name="description" rows="4"
+                                placeholder="Add notes regarding traffic source, target IP, scope..."
+                                class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-blue-500 transition-colors"></textarea>
                         </div>
                         <button type="submit"
-                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-xl transition-all shadow-lg hover:shadow-blue-500/20">
-                            Submit Case
+                            class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 rounded-xl transition-all shadow-lg shadow-blue-500/10">
+                            Create Forensic Case
                         </button>
                     </form>
                 </div>
+            </div>
+
+            <!-- Right Side: Active Cases List -->
+            <div class="lg:col-span-2">
+                <div class="glass-panel p-6 rounded-2xl shadow-xl min-h-[400px]">
+                    <h2 class="text-xl font-bold text-white mb-4"><i class="fa-solid fa-list-check mr-2 text-indigo-400"></i>Active Investigation Log</h2>
+                    
+                    <div class="space-y-4">
+                        {% if not cases %}
+                        <div class="text-center py-20 text-slate-500">
+                            <i class="fa-solid fa-folder-closed text-4xl mb-3 block"></i>
+                            No active cases found. Create one using the form on the left!
+                        </div>
+                        {% else %}
+                            {% for case in cases %}
+                            <div class="p-5 bg-slate-900/50 rounded-xl border border-slate-800/80 hover:border-slate-700/80 transition-all flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                                <div class="space-y-1">
+                                    <div class="flex items-center gap-2">
+                                        <span class="px-2 py-0.5 bg-blue-500/15 text-blue-400 text-xs font-bold rounded-md">CASE #{{ case.id }}</span>
+                                        <h3 class="font-bold text-white text-lg">{{ case.case_name }}</h3>
+                                    </div>
+                                    <p class="text-slate-400 text-sm">{{ case.description or 'No scope details entered.' }}</p>
+                                    <div class="flex items-center gap-4 text-xs text-slate-500 pt-1">
+                                        <span><i class="fa-regular fa-clock mr-1"></i>Logged: <span class="logged-date" data-time="{{ case.created_at }}"></span></span>
+                                        <span><i class="fa-solid fa-paperclip mr-1"></i>{{ case.files|length }} Associated Files</span>
+                                    </div>
+                                </div>
+                                <button onclick="deleteCase({{ case.id }}, '{{ case.case_name }}')"
+                                    class="text-xs font-semibold px-3.5 py-2 bg-rose-500/10 hover:bg-rose-500 text-rose-400 hover:text-white rounded-lg transition-colors border border-rose-500/20">
+                                    <i class="fa-regular fa-trash-can mr-1"></i>Delete
+                                </button>
+                            </div>
+                            {% endfor %}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
 
-                <!-- File Upload Box -->
-                <div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-xl backdrop-blur">
-                    <h2 class="text-xl font-bold text-white mb-4">Upload PCAP / Evidence</h2>
+        <!-- Evidence Vault Tab Panel -->
+        <div id="filesTab" class="tab-content hidden grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Side: Upload PCAP Form -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="glass-panel p-6 rounded-2xl shadow-xl">
+                    <div class="flex items-center gap-2 mb-4">
+                        <i class="fa-solid fa-cloud-arrow-up text-cyan-400 text-lg"></i>
+                        <h2 class="text-xl font-bold text-white">Upload PCAP / Evidence</h2>
+                    </div>
+                    
                     <form id="uploadForm" class="space-y-4" enctype="multipart/form-data">
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Choose Evidence File</label>
-                            <input type="file" name="file" required
-                                class="w-full text-sm text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-slate-700 file:text-white hover:file:bg-slate-600 cursor-pointer">
+                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Associate with Case</label>
+                            <select name="case_id" class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-cyan-500 transition-colors">
+                                <option value="">-- General Evidence (No Specific Case) --</option>
+                                {% for case in cases %}
+                                <option value="{{ case.id }}">{{ case.case_name }} (ID: {{ case.id }})</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Choose PCAP / Capture File</label>
+                            <div class="border-2 border-dashed border-slate-700 rounded-xl p-6 text-center hover:border-cyan-500 transition-colors cursor-pointer relative bg-slate-900/30">
+                                <input type="file" name="file" required id="fileInput"
+                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                                <i class="fa-solid fa-file-zipper text-3xl text-slate-500 mb-2"></i>
+                                <p class="text-sm text-slate-400" id="fileLabel">Drag & drop or click to browse</p>
+                                <p class="text-xs text-slate-600 mt-1">Supports PCAP, PCAPNG, CAP, ZIP, log files</p>
+                            </div>
                         </div>
                         <button type="submit"
-                            class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 rounded-xl transition-all shadow-lg hover:shadow-indigo-500/20">
+                            class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-semibold py-3 rounded-xl transition-all shadow-lg shadow-cyan-500/10">
                             Upload File
                         </button>
                     </form>
                 </div>
             </div>
 
-            <!-- Right Panel: Case Log Directory -->
-            <div class="lg:col-span-2 space-y-6">
-                <div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 shadow-xl min-h-[400px]">
-                    <h2 class="text-xl font-bold text-white mb-4">Active Cases Log</h2>
-                    <div class="space-y-4">
-                        {% if not records %}
-                        <div class="text-center py-12 text-slate-500">
-                            No cases reported yet. Use the panel on the left to add one!
-                        </div>
-                        {% else %}
-                            {% for record in records %}
-                            <div class="p-4 bg-slate-900/60 rounded-xl border border-slate-700/50 hover:border-blue-500/40 transition-colors flex justify-between items-center">
-                                <div>
-                                    <h3 class="font-bold text-white text-lg">{{ record.case_name }}</h3>
-                                    <p class="text-slate-400 text-sm mt-1">{{ record.description or 'No description provided' }}</p>
+            <!-- Right Side: Evidence File Table -->
+            <div class="lg:col-span-2">
+                <div class="glass-panel p-6 rounded-2xl shadow-xl min-h-[400px]">
+                    <h2 class="text-xl font-bold text-white mb-4"><i class="fa-solid fa-database mr-2 text-cyan-400"></i>Evidence Catalog</h2>
+                    
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left text-sm">
+                            <thead>
+                                <tr class="border-b border-slate-800 text-slate-400 font-semibold">
+                                    <th class="py-3 px-4">Filename</th>
+                                    <th class="py-3 px-4">Associated Case</th>
+                                    <th class="py-3 px-4">Size</th>
+                                    <th class="py-3 px-4">Uploaded At</th>
+                                    <th class="py-3 px-4 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% if not files %}
+                                <tr>
+                                    <td colspan="5" class="text-center py-20 text-slate-500">
+                                        <i class="fa-solid fa-file-excel text-4xl mb-3 block"></i>
+                                        No files uploaded yet.
+                                    </td>
+                                </tr>
+                                {% else %}
+                                    {% for file in files %}
+                                    <tr class="border-b border-slate-800/60 hover:bg-slate-900/30 transition-colors">
+                                        <td class="py-4 px-4 font-semibold text-white">
+                                            <i class="fa-regular fa-file-lines mr-2 text-slate-400"></i>{{ file.filename }}
+                                        </td>
+                                        <td class="py-4 px-4">
+                                            {% if file.case %}
+                                            <span class="px-2 py-0.5 bg-blue-500/10 text-blue-400 text-xs font-semibold rounded">
+                                                {{ file.case.case_name }}
+                                            </span>
+                                            {% else %}
+                                            <span class="text-slate-500 text-xs italic">Unassigned</span>
+                                            {% endif %}
+                                        </td>
+                                        <td class="py-4 px-4 font-mono text-xs">
+                                            {{ (file.size_bytes / 1024)|round(2) }} KB
+                                        </td>
+                                        <td class="py-4 px-4 text-xs text-slate-400 file-date" data-time="{{ file.created_at }}">
+                                        </td>
+                                        <td class="py-4 px-4 text-right">
+                                            <button onclick="deleteFile({{ file.id }}, '{{ file.filename }}')"
+                                                class="text-rose-400 hover:text-rose-300 p-2 text-xs font-semibold">
+                                                <i class="fa-solid fa-trash"></i> Delete
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    {% endfor %}
+                                {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Security Alerts Tab Panel -->
+        <div id="threatsTab" class="tab-content hidden space-y-6">
+            <div class="glass-panel p-6 rounded-2xl shadow-xl">
+                <div class="flex items-center gap-2 mb-6">
+                    <i class="fa-solid fa-radiation text-rose-500 text-xl animate-pulse"></i>
+                    <div>
+                        <h2 class="text-xl font-bold text-white">Threat Intelligence Alert Feed</h2>
+                        <p class="text-xs text-slate-400">Simulated security analytics ran against uploaded PCAP packet traces.</p>
+                    </div>
+                </div>
+
+                <div class="space-y-4">
+                    {% set alerts_namespace = namespace(count=0) %}
+                    {% for file in files %}
+                        {% if file.filename.endswith('.pcap') or file.filename.endswith('.pcapng') or file.filename.endswith('.cap') %}
+                            {% set alerts_namespace.count = alerts_namespace.count + 1 %}
+                            <div class="p-4 bg-rose-500/5 rounded-xl border border-rose-500/20 flex items-start gap-4">
+                                <div class="p-2.5 bg-rose-500/10 text-rose-400 rounded-lg">
+                                    <i class="fa-solid fa-circle-exclamation"></i>
+                                </div>
+                                <div class="space-y-1">
+                                    <div class="flex items-center gap-2">
+                                        <span class="px-2 py-0.5 bg-rose-500/20 text-rose-400 text-xs font-bold rounded">HIGH SEVERITY</span>
+                                        <h4 class="font-bold text-white">DNS Tunneling Anomaly Detected</h4>
+                                    </div>
+                                    <p class="text-sm text-slate-400">Unusually high frequency of subdomains queries detected in file <span class="font-mono text-slate-300">{{ file.filename }}</span>. Potential command-and-control behavior.</p>
+                                    <div class="text-xs text-slate-600 font-mono">Source IP: 192.168.10.42 | Destination IP: 104.24.12.8</div>
+                                </div>
+                            </div>
+
+                            <div class="p-4 bg-amber-500/5 rounded-xl border border-amber-500/20 flex items-start gap-4">
+                                <div class="p-2.5 bg-amber-500/10 text-amber-400 rounded-lg">
+                                    <i class="fa-solid fa-triangle-exclamation"></i>
+                                </div>
+                                <div class="space-y-1">
+                                    <div class="flex items-center gap-2">
+                                        <span class="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs font-bold rounded">MEDIUM SEVERITY</span>
+                                        <h4 class="font-bold text-white">Suspicious User Agent in HTTP Session</h4>
+                                    </div>
+                                    <p class="text-sm text-slate-400">Cleartext HTTP traffic in <span class="font-mono text-slate-300">{{ file.filename }}</span> contained automated user-agent payload queries matching sqlmap patterns.</p>
+                                    <div class="text-xs text-slate-600 font-mono">Source IP: 192.168.10.155 | Destination IP: 172.56.24.1</div>
                                 </div>
-                                <span class="text-xs text-slate-500 font-mono">
-                                    Logged recently
-                                </span>
                             </div>
-                            {% endfor %}
                         {% endif %}
+                    {% endfor %}
+
+                    {% if alerts_namespace.count == 0 %}
+                    <div class="text-center py-20 text-slate-500">
+                        <i class="fa-solid fa-circle-check text-4xl text-emerald-500 mb-3 block"></i>
+                        No threat anomalies detected. Upload PCAP files in the Evidence Vault to trigger automated packet scanning logs.
                     </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -104,14 +335,50 @@
 
     <!-- AJAX Scripts & SweetAlert Hooks -->
     <script>
-        // Set SweetAlert default styles for dark-mode
+        // Form file input styling
+        const fileInput = document.getElementById('fileInput');
+        const fileLabel = document.getElementById('fileLabel');
+        if (fileInput) {
+            fileInput.addEventListener('change', (e) => {
+                if (e.target.files.length > 0) {
+                    fileLabel.textContent = e.target.files[0].name;
+                    fileLabel.classList.add('text-cyan-400', 'font-bold');
+                }
+            });
+        }
+
+        // Convert Timestamps to Human-readable local formats
+        document.querySelectorAll('.logged-date, .file-date').forEach(el => {
+            const timestamp = parseFloat(el.getAttribute('data-time'));
+            if (!isNaN(timestamp)) {
+                const date = new Date(timestamp * 1000);
+                el.textContent = date.toLocaleString();
+            }
+        });
+
+        // Tab Switching Logic
+        function switchTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.classList.remove('border-b-2', 'border-blue-500', 'text-blue-400');
+                btn.classList.add('border-transparent', 'text-slate-400');
+            });
+
+            document.getElementById(tabId).classList.remove('hidden');
+            const activeBtn = document.getElementById(`btn-${tabId}`);
+            activeBtn.classList.remove('border-transparent', 'text-slate-400');
+            activeBtn.classList.add('border-b-2', 'border-blue-500', 'text-blue-400');
+        }
+
+        // Swivel dark-themed presets
         const customSwal = Swal.mixin({
-            background: '#1e293b',
-            color: '#fff',
-            confirmButtonColor: '#3b82f6'
+            background: '#131926',
+            color: '#cbd5e1',
+            confirmButtonColor: '#2563eb',
+            cancelButtonColor: '#475569'
         });
 
-        // Submit Case Form Handler
+        // Submit Case Form
         document.getElementById('caseForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = new FormData(e.target);
@@ -125,12 +392,10 @@
                 
                 if (result.success) {
                     customSwal.fire({
-                        title: 'Success!',
+                        title: 'Case Logged',
                         text: result.message,
                         icon: 'success'
-                    }).then(() => {
-                        window.location.reload();
-                    });
+                    }).then(() => window.location.reload());
                 } else {
                     customSwal.fire({
                         title: 'Error',
@@ -141,20 +406,20 @@
             } catch (error) {
                 customSwal.fire({
                     title: 'Connection Error',
-                    text: 'Failed to communicate with API. Server might be undergoing maintenance.',
+                    text: 'Could not communicate with server.',
                     icon: 'error'
                 });
             }
         });
 
-        // Submit File Upload Form Handler
+        // Submit File Upload Form
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = new FormData(e.target);
             
             customSwal.fire({
-                title: 'Uploading...',
-                text: 'Securing evidence on the node.',
+                title: 'Uploading file...',
+                text: 'Securing capture payload on node storage.',
                 allowOutsideClick: false,
                 didOpen: () => {
                     Swal.showLoading();
@@ -170,12 +435,10 @@
                 
                 if (result.success) {
                     customSwal.fire({
-                        title: 'Upload Successful!',
-                        text: `Secured file: ${result.filename} (${(result.size_bytes / 1024).toFixed(2)} KB)`,
+                        title: 'Upload Complete',
+                        text: `File ${result.filename} secured successfully!`,
                         icon: 'success'
-                    }).then(() => {
-                        e.target.reset();
-                    });
+                    }).then(() => window.location.reload());
                 } else {
                     customSwal.fire({
                         title: 'Upload Failed',
@@ -185,12 +448,92 @@
                 }
             } catch (error) {
                 customSwal.fire({
-                    title: 'Connection Error',
-                    text: 'Upload timed out. Check network path and try again.',
+                    title: 'Error',
+                    text: 'Upload timed out. Check network path.',
                     icon: 'error'
                 });
             }
         });
+
+        // Delete Case Function
+        async function deleteCase(id, name) {
+            const confirm = await customSwal.fire({
+                title: 'Delete Case?',
+                text: `Are you sure you want to delete "${name}"? All associated files will be removed.`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Yes, delete case',
+                cancelButtonText: 'Cancel'
+            });
+
+            if (confirm.isConfirmed) {
+                try {
+                    const response = await fetch(`/delete-case/${id}`, {
+                        method: 'POST'
+                    });
+                    const result = await response.json();
+                    if (result.success) {
+                        customSwal.fire({
+                            title: 'Deleted',
+                            text: result.message,
+                            icon: 'success'
+                        }).then(() => window.location.reload());
+                    } else {
+                        customSwal.fire({
+                            title: 'Delete Failed',
+                            text: result.error,
+                            icon: 'error'
+                        });
+                    }
+                } catch (error) {
+                    customSwal.fire({
+                        title: 'Connection Error',
+                        text: 'Failed to complete deletion request.',
+                        icon: 'error'
+                    });
+                }
+            }
+        }
+
+        // Delete File Function
+        async function deleteFile(id, filename) {
+            const confirm = await customSwal.fire({
+                title: 'Delete File?',
+                text: `Are you sure you want to delete "${filename}" from the node catalog?`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Yes, delete',
+                cancelButtonText: 'Cancel'
+            });
+
+            if (confirm.isConfirmed) {
+                try {
+                    const response = await fetch(`/delete-file/${id}`, {
+                        method: 'POST'
+                    });
+                    const result = await response.json();
+                    if (result.success) {
+                        customSwal.fire({
+                            title: 'Deleted',
+                            text: result.message,
+                            icon: 'success'
+                        }).then(() => window.location.reload());
+                    } else {
+                        customSwal.fire({
+                            title: 'Delete Failed',
+                            text: result.error,
+                            icon: 'error'
+                        });
+                    }
+                } catch (error) {
+                    customSwal.fire({
+                        title: 'Connection Error',
+                        text: 'Failed to complete deletion request.',
+                        icon: 'error'
+                    });
+                }
+            }
+        }
     </script>
 </body>
 </html>