p

app.py

@@ -481,5 +481,41 @@ def get_stats():
         "category_distribution": category_stats
     })
 
+@app.route("/api/document-preview/<document_id>", methods=["GET"])
+def get_document_preview(document_id):
+    # Verify token
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith('Bearer '):
+        # For image requests, try to get token from query params as fallback
+        token = request.args.get('token')
+        if not token:
+            return jsonify({"error": "Missing or invalid token"}), 401
+        username = verify_token(token)
+    else:
+        token = auth_header.split(' ')[1]
+        username = verify_token(token)
+    
+    if not username:
+        return jsonify({"error": "Invalid token"}), 401
+    
+    try:
+        conn = sqlite3.connect(DATABASE_PATH)
+        cursor = conn.cursor()
+        cursor.execute('SELECT file_path FROM documents WHERE id = ?', (document_id,))
+        result = cursor.fetchone()
+        conn.close()
+        
+        if not result:
+            return jsonify({"error": "Document not found"}), 404
+        
+        file_path = result[0]
+        
+        if not os.path.exists(file_path):
+            return jsonify({"error": "File not found"}), 404
+        
+        return send_from_directory(os.path.dirname(file_path), os.path.basename(file_path))
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=True)

static/index.html

@@ -47,9 +47,12 @@
 
     <!-- Main Application -->
     <div id="mainApp" style="display: none;">
-        <!-- Navigation Header -->
-        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-            <div class="container">
+        <!-- Top Navigation -->
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+            <div class="container-fluid">
+                <button class="btn btn-primary me-3" type="button" id="sidebarToggle">
+                    <i class="fas fa-bars"></i>
+                </button>
                 <a class="navbar-brand" href="#">
                     <i class="fas fa-archive me-2"></i>Archive Digitalization System
                 </a>
@@ -62,45 +65,104 @@
             </div>
         </nav>
 
-        <div class="container mt-4">
-            <!-- Dashboard Stats -->
-            <div class="row mb-4" id="stats">
+        <!-- Sidebar -->
+        <nav id="sidebar" class="sidebar">
+            <div class="sidebar-header">
+                <h4><i class="fas fa-archive me-2"></i>Archive System</h4>
+            </div>
+            
+            <!-- Dashboard Stats in Sidebar -->
+            <div class="sidebar-stats" id="sidebarStats">
                 <!-- Stats will be loaded here -->
             </div>
 
-            <!-- Navigation Tabs -->
-            <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist">
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link active" onclick="showTab('upload')" type="button">
+            <ul class="sidebar-nav">
+                <li class="nav-item">
+                    <a href="#" class="nav-link active" onclick="showTab('dashboard')">
+                        <i class="fas fa-chart-dashboard me-2"></i>Dashboard
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link" onclick="showTab('upload')">
                         <i class="fas fa-upload me-2"></i>Upload Categories
-                    </button>
+                    </a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" onclick="showTab('classify')" type="button">
+                <li class="nav-item">
+                    <a href="#" class="nav-link" onclick="showTab('classify')">
                         <i class="fas fa-search me-2"></i>Classify Documents
-                    </button>
+                    </a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" onclick="showTab('browse')" type="button">
+                <li class="nav-item">
+                    <a href="#" class="nav-link" onclick="showTab('browse')">
                         <i class="fas fa-folder-open me-2"></i>Browse Archive
-                    </button>
+                    </a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" onclick="showTab('ocr')" type="button">
+                <li class="nav-item">
+                    <a href="#" class="nav-link" onclick="showTab('ocr')">
                         <i class="fas fa-eye me-2"></i>OCR Text
-                    </button>
+                    </a>
                 </li>
             </ul>
 
+            <!-- Category List in Sidebar -->
+            <div class="sidebar-section">
+                <h6 class="sidebar-heading">Categories</h6>
+                <div id="sidebarCategories">
+                    <!-- Categories will be loaded here -->
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Dashboard Tab -->
+            <div id="dashboard" class="tab-content active">
+                <div class="content-header">
+                    <h2><i class="fas fa-chart-dashboard me-2"></i>Dashboard</h2>
+                    <p class="text-muted">Overview of your document archive system</p>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="row mb-4" id="dashboardStats">
+                    <!-- Stats will be loaded here -->
+                </div>
+
+                <!-- Category Overview -->
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5><i class="fas fa-chart-bar me-2"></i>Document Distribution</h5>
+                            </div>
+                            <div class="card-body">
+                                <canvas id="categoryChart" width="400" height="200"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5><i class="fas fa-clock me-2"></i>Recent Activity</h5>
+                            </div>
+                            <div class="card-body">
+                                <div id="recentActivity">
+                                    <!-- Recent activity will be loaded here -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Upload Categories Tab -->
-            <div id="upload" class="tab-content active">
+            <div id="upload" class="tab-content">
+                <div class="content-header">
+                    <h2><i class="fas fa-tags me-2"></i>Upload Document Categories</h2>
+                    <p class="text-muted">Train the system by uploading sample documents for each category</p>
+                </div>
+
                 <div class="card">
-                    <div class="card-header bg-primary text-white">
-                        <h4><i class="fas fa-tags me-2"></i>Upload Document Categories</h4>
-                    </div>
                     <div class="card-body">
-                        <p class="text-muted">Upload sample documents for each category to train the classification system.</p>
-                        
                         <form id="uploadForm" class="row g-3">
                             <div class="col-md-6">
                                 <label for="categoryFile" class="form-label">Document File (Image or PDF)</label>
@@ -114,9 +176,8 @@
                                 <label for="categoryLabel" class="form-label">Category Label</label>
                                 <input type="text" id="categoryLabel" class="form-control" placeholder="e.g., birth_certificate, passport, diploma">
                                 <div class="form-text">Use descriptive names without spaces</div>
-                            </div>
-                            <div class="col-12">
-                                <button type="submit" class="btn btn-primary">
+                                
+                                <button type="submit" class="btn btn-primary mt-3">
                                     <i class="fas fa-plus me-2"></i>Add Category
                                 </button>
                             </div>
@@ -159,22 +220,35 @@
 
             <!-- Browse Archive Tab -->
             <div id="browse" class="tab-content">
-                <div class="card">
-                    <div class="card-header bg-info text-white">
-                        <h4><i class="fas fa-archive me-2"></i>Browse Document Archive</h4>
-                    </div>
+                <div class="content-header">
+                    <h2><i class="fas fa-archive me-2"></i>Browse Document Archive</h2>
+                    <p class="text-muted">Browse and search through your classified documents by category</p>
+                </div>
+
+                <!-- Category Filters -->
+                <div class="card mb-4">
                     <div class="card-body">
-                        <p class="text-muted">Browse and search through your classified documents by category.</p>
-                        
-                        <div class="mb-3" id="categoryButtons">
-                            <!-- Category buttons will be loaded here -->
+                        <div class="d-flex justify-content-between align-items-center mb-3">
+                            <h5 class="mb-0">Filter by Category</h5>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleView('grid')">
+                                    <i class="fas fa-th-large"></i> Grid
+                                </button>
+                                <button type="button" class="btn btn-outline-primary btn-sm active" onclick="toggleView('list')">
+                                    <i class="fas fa-list"></i> List
+                                </button>
+                            </div>
                         </div>
-                        
-                        <div id="documentsContainer">
-                            <!-- Documents will be loaded here -->
+                        <div id="categoryButtons" class="category-buttons">
+                            <!-- Category buttons will be loaded here -->
                         </div>
                     </div>
                 </div>
+
+                <!-- Documents Container -->
+                <div id="documentsContainer">
+                    <!-- Documents will be loaded here -->
+                </div>
             </div>
 
             <!-- OCR Text Tab -->
@@ -206,11 +280,29 @@
                     </div>
                 </div>
             </div>
+        </main>
+    </div>
+
+    <!-- Document Preview Modal -->
+    <div class="modal fade" id="documentModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Document Preview</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <img id="documentPreview" class="img-fluid mb-3" style="max-height: 400px;">
+                    <div id="documentDetails"></div>
+                </div>
+            </div>
         </div>
     </div>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <!-- Custom JS -->
     <script src="/static/script.js"></script>
 </body>

static/script.js

@@ -3,12 +3,34 @@ let categories = [];
 let documents = [];
 let authToken = null;
 let currentUser = null;
+let currentView = 'list';
 
 // Initialize app
 document.addEventListener('DOMContentLoaded', function() {
     checkAuth();
+    setupSidebar();
 });
 
+// Sidebar functionality
+function setupSidebar() {
+    const sidebarToggle = document.getElementById('sidebarToggle');
+    const sidebar = document.getElementById('sidebar');
+    const mainContent = document.querySelector('.main-content');
+
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', function() {
+            sidebar.classList.toggle('collapsed');
+            mainContent.classList.toggle('sidebar-collapsed');
+        });
+    }
+
+    // Auto-collapse on mobile
+    if (window.innerWidth <= 768) {
+        sidebar.classList.add('collapsed');
+        mainContent.classList.add('sidebar-collapsed');
+    }
+}
+
 // Authentication functions
 function checkAuth() {
     authToken = localStorage.getItem('authToken');
@@ -105,24 +127,35 @@ async function authenticatedFetch(url, options = {}) {
     return response;
 }
 
-// Tab management
+// Enhanced tab management with sidebar highlighting
 function showTab(tabName) {
     // Hide all tabs
     document.querySelectorAll('.tab-content').forEach(tab => {
         tab.classList.remove('active');
     });
-    document.querySelectorAll('.tab-button').forEach(btn => {
-        btn.classList.remove('active');
+    
+    // Remove active class from all sidebar links
+    document.querySelectorAll('.sidebar-nav .nav-link').forEach(link => {
+        link.classList.remove('active');
     });
 
     // Show selected tab
     document.getElementById(tabName).classList.add('active');
-    event.target.classList.add('active');
+    
+    // Highlight active sidebar link
+    const activeLink = document.querySelector(`[onclick="showTab('${tabName}')"]`);
+    if (activeLink) {
+        activeLink.classList.add('active');
+    }
 
     // Load data for specific tabs
     if (tabName === 'browse') {
         loadCategories();
         loadAllDocuments();
+    } else if (tabName === 'dashboard') {
+        loadStats();
+        loadRecentActivity();
+        createCategoryChart();
     }
 }
 
@@ -167,52 +200,88 @@ function setupFileUploads() {
     });
 }
 
-// Load dashboard stats
+// Enhanced stats loading with sidebar display
 async function loadStats() {
     try {
         const response = await authenticatedFetch('/api/stats');
         const stats = await response.json();
         
-        const statsHtml = `
-            <div class="stat-card">
-                <h3>${stats.total_categories}</h3>
-                <p><i class="fas fa-tags"></i> Total Categories</p>
+        // Dashboard stats
+        const dashboardStatsHtml = `
+            <div class="col-md-4">
+                <div class="card stat-card">
+                    <div class="card-body">
+                        <h3>${stats.total_categories}</h3>
+                        <p><i class="fas fa-tags me-2"></i>Total Categories</p>
+                    </div>
+                </div>
             </div>
-            <div class="stat-card">
-                <h3>${stats.total_documents}</h3>
-                <p><i class="fas fa-file"></i> Documents Archived</p>
+            <div class="col-md-4">
+                <div class="card stat-card">
+                    <div class="card-body">
+                        <h3>${stats.total_documents}</h3>
+                        <p><i class="fas fa-file me-2"></i>Documents Archived</p>
+                    </div>
+                </div>
             </div>
-            <div class="stat-card">
-                <h3>35%</h3>
-                <p><i class="fas fa-percentage"></i> Min Confidence</p>
+            <div class="col-md-4">
+                <div class="card stat-card">
+                    <div class="card-body">
+                        <h3>35%</h3>
+                        <p><i class="fas fa-percentage me-2"></i>Min Confidence</p>
+                    </div>
+                </div>
             </div>
         `;
         
-        document.getElementById('stats').innerHTML = statsHtml;
+        // Sidebar stats
+        const sidebarStatsHtml = `
+            <div class="sidebar-stat">
+                <h6>${stats.total_categories}</h6>
+                <small>Categories</small>
+            </div>
+            <div class="sidebar-stat">
+                <h6>${stats.total_documents}</h6>
+                <small>Documents</small>
+            </div>
+        `;
+        
+        document.getElementById('dashboardStats').innerHTML = dashboardStatsHtml;
+        document.getElementById('sidebarStats').innerHTML = sidebarStatsHtml;
     } catch (error) {
         console.error('Error loading stats:', error);
     }
 }
 
-// Load categories
+// Enhanced categories loading with sidebar display
 async function loadCategories() {
     try {
         const response = await authenticatedFetch('/api/categories');
         const data = await response.json();
         categories = data.categories;
         
+        // Main category buttons
         const buttonsHtml = `
             <button class="category-btn active" onclick="filterDocuments('all')">
-                All Documents
+                <i class="fas fa-th-large me-2"></i>All Documents
             </button>
             ${categories.map(cat => `
                 <button class="category-btn" onclick="filterDocuments('${cat}')">
-                    ${cat} (${data.counts[cat] || 0})
+                    <i class="fas fa-folder me-2"></i>${cat} (${data.counts[cat] || 0})
                 </button>
             `).join('')}
         `;
         
+        // Sidebar categories
+        const sidebarCategoriesHtml = categories.map(cat => `
+            <div class="sidebar-category" onclick="filterDocuments('${cat}')">
+                <div class="sidebar-category-icon"></div>
+                <span>${cat} (${data.counts[cat] || 0})</span>
+            </div>
+        `).join('');
+        
         document.getElementById('categoryButtons').innerHTML = buttonsHtml;
+        document.getElementById('sidebarCategories').innerHTML = sidebarCategoriesHtml;
     } catch (error) {
         console.error('Error loading categories:', error);
     }
@@ -283,12 +352,18 @@ async function deleteDocument(documentId, filename) {
     }
 }
 
-// Display documents
+// Enhanced document display with image preview
 function displayDocuments(docs) {
     const container = document.getElementById('documentsContainer');
     
     if (docs.length === 0) {
-        container.innerHTML = '<p>No documents found for this category.</p>';
+        container.innerHTML = `
+            <div class="text-center py-5">
+                <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>
+                <h4 class="text-muted">No documents found</h4>
+                <p class="text-muted">Upload some documents to get started</p>
+            </div>
+        `;
         return;
     }
 
@@ -296,23 +371,42 @@ function displayDocuments(docs) {
         const similarityClass = doc.similarity >= 0.7 ? 'similarity-high' : 
                               doc.similarity >= 0.5 ? 'similarity-medium' : 'similarity-low';
         
+        const confidenceText = doc.similarity >= 0.7 ? 'High' : 
+                             doc.similarity >= 0.5 ? 'Medium' : 'Low';
+        
         return `
             <div class="document-card">
-                <h4><i class="fas fa-file"></i> ${doc.original_filename}</h4>
-                <p><strong>Category:</strong> ${doc.category}</p>
-                <p><strong>Confidence:</strong> 
-                    <span class="similarity-badge ${similarityClass}">
-                        ${(doc.similarity * 100).toFixed(1)}%
+                <img src="/api/document-preview/${doc.id}" 
+                     class="document-preview" 
+                     alt="${doc.original_filename}"
+                     onclick="showDocumentPreview('${doc.id}', '${doc.original_filename}')"
+                     onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2Y4ZjlmYSIvPgo8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSIjNmM3NTdkIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+RG9jdW1lbnQ8L3RleHQ+Cjwvc3ZnPg=='">
+                
+                <div class="document-title">${doc.original_filename}</div>
+                
+                <div class="document-meta">
+                    <i class="fas fa-tag me-1"></i>
+                    <strong>${doc.category}</strong>
+                </div>
+                
+                <div class="document-meta">
+                    <i class="fas fa-chart-line me-1"></i>
+                    Confidence: <span class="similarity-badge ${similarityClass}">
+                        ${(doc.similarity * 100).toFixed(1)}% ${confidenceText}
                     </span>
-                </p>
-                <p><strong>Upload Date:</strong> ${new Date(doc.upload_date).toLocaleDateString()}</p>
-                <p><strong>OCR Preview:</strong></p>
-                <div style="max-height: 100px; overflow-y: auto; background: #f8f9fa; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem;">
-                    ${doc.ocr_text.substring(0, 200)}${doc.ocr_text.length > 200 ? '...' : ''}
                 </div>
-                <div class="document-actions">
-                    <button class="btn btn-danger" onclick="deleteDocument('${doc.id}', '${doc.original_filename}')">
-                        <i class="fas fa-trash"></i> Delete
+                
+                <div class="document-meta">
+                    <i class="fas fa-calendar me-1"></i>
+                    ${new Date(doc.upload_date).toLocaleDateString()}
+                </div>
+                
+                <div class="mt-3">
+                    <button class="btn btn-primary btn-sm me-2" onclick="showDocumentPreview('${doc.id}', '${doc.original_filename}')">
+                        <i class="fas fa-eye me-1"></i>Preview
+                    </button>
+                    <button class="btn btn-danger btn-sm" onclick="deleteDocument('${doc.id}', '${doc.original_filename}')">
+                        <i class="fas fa-trash me-1"></i>Delete
                     </button>
                 </div>
             </div>
@@ -322,6 +416,98 @@ function displayDocuments(docs) {
     container.innerHTML = `<div class="document-grid">${docsHtml}</div>`;
 }
 
+// Document preview functionality
+function showDocumentPreview(documentId, filename) {
+    const modal = new bootstrap.Modal(document.getElementById('documentModal'));
+    const preview = document.getElementById('documentPreview');
+    const details = document.getElementById('documentDetails');
+    
+    preview.src = `/api/document-preview/${documentId}`;
+    details.innerHTML = `<h6>${filename}</h6>`;
+    
+    modal.show();
+}
+
+// View toggle functionality
+function toggleView(viewType) {
+    currentView = viewType;
+    
+    // Update button states
+    document.querySelectorAll('.btn-group .btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    event.target.classList.add('active');
+    
+    // Reload documents with new view
+    loadAllDocuments();
+}
+
+// Create category distribution chart
+function createCategoryChart() {
+    const ctx = document.getElementById('categoryChart');
+    if (!ctx) return;
+    
+    // Sample data - you can modify this to use real data
+    const data = {
+        labels: categories.slice(0, 5), // Show top 5 categories
+        datasets: [{
+            label: 'Documents',
+            data: categories.slice(0, 5).map(() => Math.floor(Math.random() * 20) + 1),
+            backgroundColor: [
+                'rgba(13, 110, 253, 0.8)',
+                'rgba(25, 135, 84, 0.8)',
+                'rgba(255, 193, 7, 0.8)',
+                'rgba(220, 53, 69, 0.8)',
+                'rgba(13, 202, 240, 0.8)'
+            ],
+            borderColor: [
+                'rgb(13, 110, 253)',
+                'rgb(25, 135, 84)',
+                'rgb(255, 193, 7)',
+                'rgb(220, 53, 69)',
+                'rgb(13, 202, 240)'
+            ],
+            borderWidth: 2
+        }]
+    };
+
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: data,
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                }
+            }
+        }
+    });
+}
+
+// Load recent activity
+function loadRecentActivity() {
+    const recentActivity = document.getElementById('recentActivity');
+    // Sample recent activity - you can modify this to use real data
+    const activities = [
+        { action: 'Document classified', item: 'passport.jpg', time: '2 min ago' },
+        { action: 'Category added', item: 'driver_license', time: '1 hour ago' },
+        { action: 'Document uploaded', item: 'certificate.pdf', time: '3 hours ago' }
+    ];
+    
+    const activityHtml = activities.map(activity => `
+        <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
+            <div>
+                <small class="fw-bold">${activity.action}</small><br>
+                <small class="text-muted">${activity.item}</small>
+            </div>
+            <small class="text-muted">${activity.time}</small>
+        </div>
+    `).join('');
+    
+    recentActivity.innerHTML = activityHtml;
+}
+
 // Form submissions
 document.getElementById('uploadForm').addEventListener('submit', async (e) => {
     e.preventDefault();

static/styles.css

@@ -4,6 +4,8 @@
     --warning-color: #ffc107;
     --danger-color: #dc3545;
     --info-color: #0dcaf0;
+    --sidebar-width: 280px;
+    --navbar-height: 60px;
 }
 
 * {
@@ -15,308 +17,357 @@
 body {
     background-color: #f8f9fa;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: var(--text-primary);
-    line-height: 1.6;
 }
 
-/* Modal Styles */
-.modal {
-    display: flex;
+/* Sidebar Styles */
+.sidebar {
     position: fixed;
-    z-index: 1000;
+    top: var(--navbar-height);
     left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.5);
-    align-items: center;
-    justify-content: center;
+    width: var(--sidebar-width);
+    height: calc(100vh - var(--navbar-height));
+    background: linear-gradient(180deg, #1e3a5f 0%, #2c5f8a 100%);
+    color: white;
+    z-index: 1000;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
+    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
 }
 
-.modal-content {
-    background-color: var(--card-bg);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-    width: 90%;
-    max-width: 400px;
+.sidebar.collapsed {
+    transform: translateX(-100%);
 }
 
-.modal-content h2 {
-    text-align: center;
-    margin-bottom: 1.5rem;
-    color: var(--primary-color);
+.sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+.sidebar-header h4 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
 }
 
-.header {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    border-radius: 12px;
+.sidebar-stats {
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
+.sidebar-stat {
+    background: rgba(255,255,255,0.1);
+    border-radius: 8px;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
 }
 
-.header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
+.sidebar-stat h6 {
+    font-size: 1.5rem;
+    margin: 0;
+    color: #ffd700;
 }
 
-.header p {
-    font-size: 1.1rem;
-    opacity: 0.9;
+.sidebar-stat small {
+    opacity: 0.8;
+    font-size: 0.8rem;
 }
 
-.user-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+.sidebar-nav {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
 }
 
-.user-info span {
-    font-weight: 500;
+.sidebar-nav .nav-item {
+    margin: 0;
 }
 
-.dashboard-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 2rem;
+.sidebar-nav .nav-link {
+    display: block;
+    padding: 0.75rem 1.5rem;
+    color: rgba(255,255,255,0.8);
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border-left: 3px solid transparent;
 }
 
-.stat-card {
-    background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
+.sidebar-nav .nav-link:hover,
+.sidebar-nav .nav-link.active {
+    background: rgba(255,255,255,0.1);
     color: white;
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    text-align: center;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    border-left-color: #ffd700;
 }
 
-.stat-card h3 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
+.sidebar-section {
+    padding: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
 }
 
-.stat-card p {
-    margin-bottom: 0;
-    opacity: 0.9;
+.sidebar-heading {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    opacity: 0.8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.tabs {
+.sidebar-category {
     display: flex;
-    margin-bottom: 2rem;
-    background: var(--card-bg);
-    border-radius: 12px;
+    align-items: center;
     padding: 0.5rem;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
-}
-
-.tab-button {
-    flex: 1;
-    padding: 1rem;
-    border: none;
-    background: transparent;
+    margin-bottom: 0.25rem;
+    background: rgba(255,255,255,0.05);
+    border-radius: 6px;
+    font-size: 0.85rem;
     cursor: pointer;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.3s ease;
+    transition: background 0.3s ease;
 }
 
-.tab-button.active {
-    background: var(--primary-color);
-    color: white;
+.sidebar-category:hover {
+    background: rgba(255,255,255,0.1);
 }
 
-.tab-content {
-    display: none;
-    background: var(--card-bg);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--border-color);
-}
-
-.tab-content.active {
-    display: block;
-}
-
-/* File Upload Styling */
-.file-upload {
-    border: 2px dashed #dee2e6 !important;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    background-color: #f8f9fa;
+.sidebar-category-icon {
+    width: 8px;
+    height: 8px;
+    background: #ffd700;
+    border-radius: 50%;
+    margin-right: 0.5rem;
 }
 
-.file-upload:hover {
-    border-color: var(--primary-color) !important;
-    background-color: #e3f2fd;
+/* Main Content */
+.main-content {
+    margin-left: var(--sidebar-width);
+    margin-top: var(--navbar-height);
+    padding: 2rem;
+    min-height: calc(100vh - var(--navbar-height));
+    transition: margin-left 0.3s ease;
 }
 
-.file-upload.dragover {
-    border-color: var(--primary-color) !important;
-    background-color: #e3f2fd;
+.main-content.sidebar-collapsed {
+    margin-left: 0;
 }
 
-/* Form Styles */
-.form-group {
-    margin-bottom: 1.5rem;
+.content-header {
+    margin-bottom: 2rem;
 }
 
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
+.content-header h2 {
+    color: #2c3e50;
     font-weight: 600;
-    color: var(--text-primary);
 }
 
-.form-control {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px solid var(--border-color);
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: border-color 0.3s ease;
+/* Navbar */
+.navbar {
+    z-index: 1001;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.form-control:focus {
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-/* Button Styles */
-.btn {
-    padding: 0.75rem 1.5rem;
+#sidebarToggle {
     border: none;
-    border-radius: 8px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
+    background: rgba(255,255,255,0.1);
 }
 
-.btn-primary {
-    background: var(--primary-color);
-    color: white;
+/* Tab Content */
+.tab-content {
+    display: none;
 }
 
-.btn-primary:hover {
-    background: var(--secondary-color);
+.tab-content.active {
+    display: block;
 }
 
-.btn-secondary {
-    background: var(--text-secondary);
+/* Stats Cards */
+.stat-card {
+    background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
     color: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(13,110,253,0.2);
+    border: none;
+    transition: transform 0.3s ease;
 }
 
-.btn-success {
-    background: var(--success-color);
-    color: white;
+.stat-card:hover {
+    transform: translateY(-2px);
 }
 
-.btn-danger {
-    background: var(--error-color);
-    color: white;
+.stat-card h3 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }
 
-.btn-danger:hover {
-    background: #dc2626;
+.stat-card p {
+    margin-bottom: 0;
+    opacity: 0.9;
 }
 
-/* Result Boxes */
-.result-box {
-    padding: 1rem;
-    border-radius: 0.375rem;
-    font-family: 'Courier New', monospace;
-    white-space: pre-wrap;
-    word-wrap: break-word;
+/* Document Cards */
+.document-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
 }
 
-.result-success {
-    background-color: #d1e7dd;
-    border: 1px solid #badbcc;
-    color: #0f5132;
+.document-card {
+    background: white;
+    border: none;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
 }
 
-.result-error {
-    background-color: #f8d7da;
-    border: 1px solid #f5c2c7;
-    color: #842029;
+.document-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
 }
 
-.result-warning {
-    background-color: #fff3cd;
-    border: 1px solid #ffecb5;
-    color: #664d03;
+.document-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
 }
 
-.result-info {
-    background-color: #cff4fc;
-    border: 1px solid #b6effb;
-    color: #055160;
+.document-preview {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    cursor: pointer;
+    transition: transform 0.3s ease;
 }
 
-/* Document Cards */
-.document-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1rem;
+.document-preview:hover {
+    transform: scale(1.02);
 }
 
-.document-card {
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 0.375rem;
-    padding: 1rem;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    transition: box-shadow 0.15s ease-in-out;
+.document-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 0.5rem;
 }
 
-.document-card:hover {
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+.document-meta {
+    font-size: 0.9rem;
+    color: #6c757d;
+    margin-bottom: 0.25rem;
 }
 
 /* Category Buttons */
 .category-buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: 0.75rem;
 }
 
 .category-btn {
-    padding: 0.375rem 0.75rem;
-    border: 1px solid #dee2e6;
-    border-radius: 1.5rem;
-    background-color: white;
-    color: #6c757d;
+    padding: 0.5rem 1rem;
+    border: 2px solid #e9ecef;
+    border-radius: 25px;
+    background: white;
+    color: #495057;
     cursor: pointer;
-    transition: all 0.15s ease-in-out;
+    transition: all 0.3s ease;
     text-decoration: none;
+    font-weight: 500;
+    position: relative;
+    overflow: hidden;
+}
+
+.category-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    transition: left 0.5s;
+}
+
+.category-btn:hover::before {
+    left: 100%;
 }
 
 .category-btn:hover,
 .category-btn.active {
-    background-color: var(--primary-color);
+    background: var(--primary-color);
     border-color: var(--primary-color);
     color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(13,110,253,0.3);
+}
+
+/* File Upload */
+.file-upload {
+    border: 2px dashed #dee2e6;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #f8f9fa;
+    position: relative;
+    overflow: hidden;
+}
+
+.file-upload::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(13,110,253,0.1) 0%, transparent 70%);
+    transform: scale(0);
+    transition: transform 0.5s ease;
+}
+
+.file-upload:hover::before {
+    transform: scale(1);
+}
+
+.file-upload:hover {
+    border-color: var(--primary-color);
+    background: rgba(13,110,253,0.02);
+}
+
+/* Similarity Badges */
+.similarity-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.similarity-high {
+    background: linear-gradient(45deg, #10b981, #059669);
+    color: white;
+}
+
+.similarity-medium {
+    background: linear-gradient(45deg, #f59e0b, #d97706);
+    color: white;
 }
 
-/* Loading Spinner */
+.similarity-low {
+    background: linear-gradient(45deg, #ef4444, #dc2626);
+    color: white;
+}
+
+/* Loading Animation */
 .loading {
     display: inline-block;
     width: 1rem;
@@ -333,58 +384,46 @@ body {
     100% { transform: rotate(360deg); }
 }
 
-/* OCR Text Display */
-.ocr-text {
-    max-height: 300px;
-    overflow-y: auto;
-    background: #f8f9fa;
+/* Result Boxes */
+.result-box {
     padding: 1rem;
-    border-radius: 0.375rem;
-    border: 1px solid #dee2e6;
+    border-radius: 8px;
     font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-    line-height: 1.4;
-}
-
-/* Similarity Badges */
-.similarity-badge {
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border-left: 4px solid;
 }
 
-.similarity-high {
-    background-color: #d1e7dd;
-    color: #0f5132;
+.result-success {
+    background: #f0f9ff;
+    border-color: #0ea5e9;
+    color: #0c4a6e;
 }
 
-.similarity-medium {
-    background-color: #fff3cd;
-    color: #664d03;
+.result-error {
+    background: #fef2f2;
+    border-color: #ef4444;
+    color: #991b1b;
 }
 
-.similarity-low {
-    background-color: #f8d7da;
-    color: #842029;
+.result-warning {
+    background: #fffbeb;
+    border-color: #f59e0b;
+    color: #92400e;
 }
 
-/* Responsive adjustments */
+/* Responsive Design */
 @media (max-width: 768px) {
-    .header-content {
-        text-align: center;
-    }
-    
-    .header h1 {
-        font-size: 2rem;
+    .sidebar {
+        transform: translateX(-100%);
     }
     
-    .tabs {
-        flex-direction: column;
+    .main-content {
+        margin-left: 0;
     }
     
-    .tab-button {
-        text-align: center;
+    .sidebar.show {
+        transform: translateX(0);
     }
     
     .document-grid {
@@ -394,27 +433,22 @@ body {
     .category-buttons {
         justify-content: center;
     }
-    
-    .navbar-brand {
-        font-size: 1rem;
-    }
 }
 
-/* Custom scrollbar */
-.ocr-text::-webkit-scrollbar {
-    width: 8px;
+/* Custom Scrollbar */
+.sidebar::-webkit-scrollbar {
+    width: 6px;
 }
 
-.ocr-text::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 4px;
+.sidebar::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.1);
 }
 
-.ocr-text::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 4px;
+.sidebar::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.3);
+    border-radius: 3px;
 }
 
-.ocr-text::-webkit-scrollbar-thumb:hover {
-    background: #a8a8a8;
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255,255,255,0.5);
 }