Spaces:

Really-amin
/

Hoghoghi

Paused

App Files Files Community

Really-amin commited on Aug 4

Commit

120e2d5

verified ·

1 Parent(s): 4625a5e

Upload 14 files

Browse files

Files changed (14) hide show

app/static/dev/api-test.html +274 -0
app/static/dev/comprehensive-test.html +767 -0
app/static/dev/functional-test.html +885 -0
app/static/dev/integration-test.html +385 -0
app/static/dev/real-api-test.html +674 -0
app/static/dev/test_integration.html +164 -0
app/static/js/api-client.js +422 -0
app/static/js/api-connection-test.js +380 -0
app/static/js/chart.js +340 -0
app/static/js/core.js +388 -0
app/static/js/document-crud.js +386 -0
app/static/js/file-upload-handler.js +328 -0
app/static/js/notifications.js +617 -0
app/static/js/scraping-control.js +368 -0

app/static/dev/api-test.html ADDED Viewed

	@@ -0,0 +1,274 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Connection Test - Legal Dashboard</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: #10b981; }
+        .error { color: #ef4444; }
+        .info { color: #3b82f6; }
+        .warning { color: #f59e0b; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        pre {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .endpoint-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .endpoint-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            background: white;
+        }
+        .endpoint-card.success {
+            border-color: #10b981;
+            background: #f0fdf4;
+        }
+        .endpoint-card.error {
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+        .endpoint-card.warning {
+            border-color: #f59e0b;
+            background: #fffbeb;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-indicator.success { background: #10b981; }
+        .status-indicator.error { background: #ef4444; }
+        .status-indicator.warning { background: #f59e0b; }
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .stat-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔧 API Connection Test - Legal Dashboard</h1>
+    <div class="test-section">
+        <h2>📊 Test Summary</h2>
+        <div class="summary-stats" id="summaryStats">
+            <div class="stat-card">
+                <div class="stat-number" id="totalTests">0</div>
+                <div class="stat-label">Total Tests</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number success" id="passedTests">0</div>
+                <div class="stat-label">Passed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number error" id="failedTests">0</div>
+                <div class="stat-label">Failed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number info" id="successRate">0%</div>
+                <div class="stat-label">Success Rate</div>
+            </div>
+        </div>
+        <button type="button" onclick="runAllTests()">Run All API Tests</button>
+        <button type="button" onclick="testEndpointPatterns()">Test Endpoint Patterns</button>
+        <button type="button" onclick="clearResults()">Clear Results</button>
+    </div>
+    <div class="test-section">
+        <h2>🔍 Endpoint Test Results</h2>
+        <div class="endpoint-grid" id="endpointResults">
+            <!-- Results will be populated here -->
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>📋 Detailed Results</h2>
+        <div id="detailedResults">
+            <p class="info">Click "Run All API Tests" to start testing...</p>
+        </div>
+    </div>
+    <script src="js/api-connection-test.js"></script>
+    <script>
+        let testResults = [];
+        async function runAllTests() {
+            console.log('Starting comprehensive API tests...');
+            // Clear previous results
+            document.getElementById('endpointResults').innerHTML = '';
+            document.getElementById('detailedResults').innerHTML = '<p class="info">Running tests...</p>';
+            // Run the API tests
+            const results = await window.apiTester.runAllTests();
+            testResults = results;
+            // Update summary
+            updateSummary(results);
+            // Display detailed results
+            displayDetailedResults(results);
+            console.log('API tests completed');
+        }
+        async function testEndpointPatterns() {
+            console.log('Testing endpoint patterns...');
+            await window.apiTester.testEndpointPatterns();
+        }
+        function clearResults() {
+            document.getElementById('endpointResults').innerHTML = '';
+            document.getElementById('detailedResults').innerHTML = '<p class="info">Results cleared</p>';
+            updateSummary([]);
+        }
+        function updateSummary(results) {
+            const total = results.length;
+            const passed = results.filter(r => r.success).length;
+            const failed = total - passed;
+            const successRate = total > 0 ? ((passed / total) * 100).toFixed(1) : 0;
+            document.getElementById('totalTests').textContent = total;
+            document.getElementById('passedTests').textContent = passed;
+            document.getElementById('failedTests').textContent = failed;
+            document.getElementById('successRate').textContent = successRate + '%';
+        }
+        function displayDetailedResults(results) {
+            const container = document.getElementById('endpointResults');
+            const detailedContainer = document.getElementById('detailedResults');
+            // Clear containers
+            container.innerHTML = '';
+            detailedContainer.innerHTML = '';
+            // Group results by category
+            const categories = {};
+            results.forEach(result => {
+                if (!categories[result.category]) {
+                    categories[result.category] = [];
+                }
+                categories[result.category].push(result);
+            });
+            // Create endpoint cards
+            results.forEach(result => {
+                const card = document.createElement('div');
+                card.className = `endpoint-card ${result.success ? 'success' : 'error'}`;
+                const statusClass = result.success ? 'success' : 'error';
+                const statusText = result.success ? 'PASS' : 'FAIL';
+                card.innerHTML = `
+                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                        <span class="status-indicator ${statusClass}"></span>
+                        <strong>${result.name}</strong>
+                        <span style="margin-left: auto; font-size: 0.8rem; color: #666;">
+                            ${result.responseTime}ms
+                        </span>
+                    </div>
+                    <div style="font-size: 0.9rem; color: #666;">
+                        <div>URL: ${result.url}</div>
+                        <div>Method: ${result.method}</div>
+                        <div>Status: ${result.status}</div>
+                        ${result.error ? `<div style="color: #ef4444;">Error: ${result.error}</div>` : ''}
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+            // Create detailed results
+            let detailedHTML = '<h3>Test Results by Category</h3>';
+            Object.entries(categories).forEach(([category, categoryResults]) => {
+                const passed = categoryResults.filter(r => r.success).length;
+                const total = categoryResults.length;
+                const rate = ((passed / total) * 100).toFixed(1);
+                detailedHTML += `
+                    <div style="margin-bottom: 20px;">
+                        <h4>${category} (${passed}/${total} - ${rate}%)</h4>
+                        <ul>
+                            ${categoryResults.map(result => `
+                                <li class="${result.success ? 'success' : 'error'}">
+                                    ${result.name}: ${result.success ? 'PASS' : 'FAIL'}
+                                    (${result.responseTime}ms)
+                                    ${result.error ? ` - ${result.error}` : ''}
+                                </li>
+                            `).join('')}
+                        </ul>
+                    </div>
+                `;
+            });
+            detailedContainer.innerHTML = detailedHTML;
+        }
+        // Auto-run tests when page loads
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                console.log('Auto-running API tests...');
+                runAllTests();
+            }, 1000);
+        });
+    </script>
+</body>
+</html>

app/static/dev/comprehensive-test.html ADDED Viewed

	@@ -0,0 +1,767 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comprehensive Frontend Test - Legal Dashboard</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-inline-size: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: #10b981; }
+        .error { color: #ef4444; }
+        .info { color: #3b82f6; }
+        .warning { color: #f59e0b; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .page-test {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 10px 0;
+            background: white;
+        }
+        .page-test.success {
+            border-color: #10b981;
+            background: #f0fdf4;
+        }
+        .page-test.error {
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+        .page-test.testing {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+        .status-indicator {
+            display: inline-block;
+            inline-size: 12px;
+            block-size: 12px;
+            border-radius: 50%;
+            margin-inline-end: 8px;
+        }
+        .status-indicator.success { background: #10b981; }
+        .status-indicator.error { background: #ef4444; }
+        .status-indicator.warning { background: #f59e0b; }
+        .status-indicator.info { background: #3b82f6; }
+        .status-indicator.testing {
+            background: #3b82f6;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .test-results {
+            max-block-size: 400px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            background: #f8f9fa;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+        }
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin-block-end: 20px;
+        }
+        .stat-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-block-end: 5px;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .progress-bar {
+            inline-size: 100%;
+            block-size: 4px;
+            background: #e5e7eb;
+            border-radius: 2px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+        .progress-fill {
+            block-size: 100%;
+            background: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .progress-fill.initial {
+            inline-size: 0%;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔍 Comprehensive Frontend Test - Legal Dashboard</h1>
+    <div class="test-section">
+        <h2>📊 Test Summary</h2>
+        <div class="summary-stats">
+            <div class="stat-card">
+                <div class="stat-number" id="totalPages">0</div>
+                <div class="stat-label">Total Pages</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="passedPages">0</div>
+                <div class="stat-label">Passed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="failedPages">0</div>
+                <div class="stat-label">Failed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="successRate">0%</div>
+                <div class="stat-label">Success Rate</div>
+            </div>
+        </div>
+        <div class="progress-bar">
+            <div class="progress-fill initial" id="progressBar"></div>
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>🎛️ Test Controls</h2>
+        <button type="button" onclick="runAllTests()" id="runAllBtn">Run All Tests</button>
+        <button type="button" onclick="testCoreSystem()">Test Core System</button>
+        <button type="button" onclick="testAPIConnectivity()">Test API Connectivity</button>
+        <button type="button" onclick="testPageIntegration()">Test Page Integration</button>
+        <button type="button" onclick="clearResults()">Clear Results</button>
+        <button type="button" onclick="exportResults()">Export Results</button>
+    </div>
+    <div class="test-section">
+        <h2>📄 Page Tests</h2>
+        <div id="pageTests">
+            <!-- Page tests will be generated here -->
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>📋 Test Results</h2>
+        <div class="test-results" id="testResults">
+            <!-- Test results will be displayed here -->
+        </div>
+    </div>
+    <script src="../js/api-client.js"></script>
+    <script src="../js/core.js"></script>
+    <script src="../js/notifications.js"></script>
+    <script>
+        class ComprehensiveTester {
+            constructor() {
+                this.baseURL = window.location.origin;
+                this.results = [];
+                this.testStats = {
+                    total: 0,
+                    passed: 0,
+                    failed: 0,
+                    successRate: 0
+                };
+                this.isRunning = false;
+                this.pages = [
+                    {
+                        name: 'Main Dashboard',
+                        url: 'improved_legal_dashboard.html',
+                        description: 'Main dashboard with analytics and charts',
+                        tests: ['load', 'api', 'core', 'charts']
+                    },
+                    {
+                        name: 'Documents Page',
+                        url: 'documents.html',
+                        description: 'Document management and CRUD operations',
+                        tests: ['load', 'api', 'core', 'crud']
+                    },
+                    {
+                        name: 'Upload Page',
+                        url: 'upload.html',
+                        description: 'File upload and OCR processing',
+                        tests: ['load', 'api', 'core', 'upload']
+                    },
+                    {
+                        name: 'Scraping Page',
+                        url: 'scraping.html',
+                        description: 'Web scraping and content extraction',
+                        tests: ['load', 'api', 'core', 'scraping']
+                    },
+                    {
+                        name: 'Scraping Dashboard',
+                        url: 'scraping_dashboard.html',
+                        description: 'Scraping statistics and monitoring',
+                        tests: ['load', 'api', 'core', 'stats']
+                    },
+                    {
+                        name: 'Reports Page',
+                        url: 'reports.html',
+                        description: 'Analytics reports and insights',
+                        tests: ['load', 'api', 'core', 'reports']
+                    },
+                    {
+                        name: 'Index Page',
+                        url: 'index.html',
+                        description: 'Landing page and navigation',
+                        tests: ['load', 'api', 'core', 'navigation']
+                    }
+                ];
+                this.initialize();
+            }
+            initialize() {
+                this.createPageTests();
+                this.updateStats();
+            }
+            createPageTests() {
+                const container = document.getElementById('pageTests');
+                container.innerHTML = '';
+                this.pages.forEach((page, index) => {
+                    const testDiv = document.createElement('div');
+                    testDiv.className = 'page-test';
+                    testDiv.id = `page-${index}`;
+                    testDiv.innerHTML = `
+                        <div class="status-indicator"></div>
+                        <h3>${page.name}</h3>
+                        <p>${page.description}</p>
+                        <div style="font-size: 0.8rem; color: #666; margin: 5px 0;">
+                            File: ${page.url}
+                        </div>
+                        <div class="tests" id="tests-${index}">
+                            ${page.tests.map((test, testIndex) => `
+                                <div class="test" id="test-${index}-${testIndex}">
+                                    <span class="status-indicator"></span>
+                                    ${test.charAt(0).toUpperCase() + test.slice(1)} Test
+                                </div>
+                            `).join('')}
+                        </div>
+                        <button type="button" onclick="tester.testSinglePage(${index})" class="test-page-btn">
+                            Test Page
+                        </button>
+                    `;
+                    container.appendChild(testDiv);
+                });
+            }
+            async testSinglePage(pageIndex) {
+                const page = this.pages[pageIndex];
+                const testDiv = document.getElementById(`page-${pageIndex}`);
+                // Set testing state
+                testDiv.className = 'page-test testing';
+                testDiv.querySelector('.status-indicator').className = 'status-indicator testing';
+                testDiv.querySelector('.test-page-btn').disabled = true;
+                this.logResult({
+                    page: page.name,
+                    status: 'started',
+                    message: `Starting tests for ${page.name}`
+                });
+                let allTestsPassed = true;
+                for (let testIndex = 0; testIndex < page.tests.length; testIndex++) {
+                    const test = page.tests[testIndex];
+                    const testDiv = document.getElementById(`test-${pageIndex}-${testIndex}`);
+                    // Set test testing state
+                    testDiv.querySelector('.status-indicator').className = 'status-indicator testing';
+                    try {
+                        const result = await this.executeTest(test, page);
+                        if (result.success) {
+                            testDiv.querySelector('.status-indicator').className = 'status-indicator success';
+                            this.logResult({
+                                page: page.name,
+                                test: test,
+                                status: 'success',
+                                message: `${test} test passed for ${page.name}`
+                            });
+                        } else {
+                            testDiv.querySelector('.status-indicator').className = 'status-indicator error';
+                            allTestsPassed = false;
+                            this.logResult({
+                                page: page.name,
+                                test: test,
+                                status: 'error',
+                                message: `${test} test failed for ${page.name}: ${result.error}`
+                            });
+                        }
+                    } catch (error) {
+                        testDiv.querySelector('.status-indicator').className = 'status-indicator error';
+                        allTestsPassed = false;
+                        this.logResult({
+                            page: page.name,
+                            test: test,
+                            status: 'error',
+                            message: `${test} test failed for ${page.name}: ${error.message}`
+                        });
+                    }
+                    await this.delay(200); // Small delay between tests
+                }
+                // Update page status
+                testDiv.className = `page-test ${allTestsPassed ? 'success' : 'error'}`;
+                testDiv.querySelector('.status-indicator').className = `status-indicator ${allTestsPassed ? 'success' : 'error'}`;
+                testDiv.querySelector('.test-page-btn').disabled = false;
+                this.logResult({
+                    page: page.name,
+                    status: allTestsPassed ? 'completed' : 'failed',
+                    message: `${page.name} ${allTestsPassed ? 'completed successfully' : 'failed'}`
+                });
+                this.updateStats();
+            }
+            async executeTest(test, page) {
+                switch (test) {
+                    case 'load':
+                        return await this.testPageLoad(page);
+                    case 'api':
+                        return await this.testAPIConnectivity(page);
+                    case 'core':
+                        return await this.testCoreIntegration(page);
+                    case 'charts':
+                        return await this.testChartsFunctionality(page);
+                    case 'crud':
+                        return await this.testCRUDOperations(page);
+                    case 'upload':
+                        return await this.testUploadFunctionality(page);
+                    case 'scraping':
+                        return await this.testScrapingFunctionality(page);
+                    case 'stats':
+                        return await this.testStatisticsFunctionality(page);
+                    case 'reports':
+                        return await this.testReportsFunctionality(page);
+                    case 'navigation':
+                        return await this.testNavigationFunctionality(page);
+                    default:
+                        return { success: false, error: 'Unknown test' };
+                }
+            }
+            async testPageLoad(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/${page.url}`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testAPIConnectivity(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/health`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testCoreIntegration(page) {
+                try {
+                    // Check if core.js is loaded
+                    if (typeof dashboardCore === 'undefined') {
+                        return { success: false, error: 'Core module not loaded' };
+                    }
+                    // Check if core is initialized
+                    if (!dashboardCore.isInitialized) {
+                        return { success: false, error: 'Core module not initialized' };
+                    }
+                    return { success: true, error: null };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testChartsFunctionality(page) {
+                try {
+                    // Check if Chart.js is available
+                    if (typeof Chart === 'undefined') {
+                        return { success: false, error: 'Chart.js not loaded' };
+                    }
+                    return { success: true, error: null };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testCRUDOperations(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/documents`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testUploadFunctionality(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/ocr/status`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testScrapingFunctionality(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/health`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testStatisticsFunctionality(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/scrape/statistics`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testReportsFunctionality(page) {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/analytics/overview`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testNavigationFunctionality(page) {
+                try {
+                    // Check if navigation elements exist
+                    const response = await fetch(`${this.baseURL}/${page.url}`);
+                    const html = await response.text();
+                    // Check for navigation elements
+                    const hasNavigation = html.includes('nav') || html.includes('sidebar') || html.includes('menu');
+                    return { success: hasNavigation, error: hasNavigation ? null : 'No navigation found' };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async runAllTests() {
+                if (this.isRunning) return;
+                this.isRunning = true;
+                document.getElementById('runAllBtn').disabled = true;
+                document.getElementById('runAllBtn').textContent = 'Running...';
+                this.clearResults();
+                for (let i = 0; i < this.pages.length; i++) {
+                    await this.testSinglePage(i);
+                    await this.delay(500); // Delay between pages
+                }
+                this.isRunning = false;
+                document.getElementById('runAllBtn').disabled = false;
+                document.getElementById('runAllBtn').textContent = 'Run All Tests';
+            }
+            async testCoreSystem() {
+                this.logResult({
+                    test: 'Core System',
+                    status: 'started',
+                    message: 'Testing core system integration'
+                });
+                try {
+                    // Test core module loading
+                    if (typeof dashboardCore === 'undefined') {
+                        throw new Error('Core module not loaded');
+                    }
+                    // Test core initialization
+                    if (!dashboardCore.isInitialized) {
+                        throw new Error('Core module not initialized');
+                    }
+                    // Test API client
+                    if (!dashboardCore.apiClient) {
+                        throw new Error('API client not available');
+                    }
+                    this.logResult({
+                        test: 'Core System',
+                        status: 'success',
+                        message: 'Core system integration working correctly'
+                    });
+                } catch (error) {
+                    this.logResult({
+                        test: 'Core System',
+                        status: 'error',
+                        message: `Core system test failed: ${error.message}`
+                    });
+                }
+                this.updateStats();
+            }
+            async testAPIConnectivity() {
+                this.logResult({
+                    test: 'API Connectivity',
+                    status: 'started',
+                    message: 'Testing API connectivity'
+                });
+                const endpoints = [
+                    '/api/health',
+                    '/api/dashboard/summary',
+                    '/api/documents',
+                    '/api/ocr/status',
+                    '/api/scraping/health',
+                    '/api/analytics/overview'
+                ];
+                let successCount = 0;
+                let totalCount = endpoints.length;
+                for (const endpoint of endpoints) {
+                    try {
+                        const response = await fetch(`${this.baseURL}${endpoint}`);
+                        if (response.ok) {
+                            successCount++;
+                            this.logResult({
+                                test: 'API Connectivity',
+                                endpoint: endpoint,
+                                status: 'success',
+                                message: `${endpoint} - OK`
+                            });
+                        } else {
+                            this.logResult({
+                                test: 'API Connectivity',
+                                endpoint: endpoint,
+                                status: 'error',
+                                message: `${endpoint} - HTTP ${response.status}`
+                            });
+                        }
+                    } catch (error) {
+                        this.logResult({
+                            test: 'API Connectivity',
+                            endpoint: endpoint,
+                            status: 'error',
+                            message: `${endpoint} - ${error.message}`
+                        });
+                    }
+                }
+                const successRate = Math.round((successCount / totalCount) * 100);
+                this.logResult({
+                    test: 'API Connectivity',
+                    status: 'completed',
+                    message: `API connectivity test completed: ${successCount}/${totalCount} endpoints working (${successRate}%)`
+                });
+                this.updateStats();
+            }
+            async testPageIntegration() {
+                this.logResult({
+                    test: 'Page Integration',
+                    status: 'started',
+                    message: 'Testing page integration with core system'
+                });
+                try {
+                    // Test if pages can communicate with core
+                    if (typeof dashboardCore !== 'undefined') {
+                        // Test event broadcasting
+                        dashboardCore.broadcast('testIntegration', { test: true });
+                        // Test event listening
+                        let eventReceived = false;
+                        const unsubscribe = dashboardCore.listen('testIntegration', (data) => {
+                            eventReceived = true;
+                        });
+                        // Broadcast again to trigger the listener
+                        dashboardCore.broadcast('testIntegration', { test: true });
+                        // Clean up
+                        if (unsubscribe) unsubscribe();
+                        this.logResult({
+                            test: 'Page Integration',
+                            status: 'success',
+                            message: 'Page integration with core system working correctly'
+                        });
+                    } else {
+                        throw new Error('Core system not available');
+                    }
+                } catch (error) {
+                    this.logResult({
+                        test: 'Page Integration',
+                        status: 'error',
+                        message: `Page integration test failed: ${error.message}`
+                    });
+                }
+                this.updateStats();
+            }
+            logResult(result) {
+                this.results.push({
+                    ...result,
+                    timestamp: new Date().toISOString()
+                });
+                const resultsDiv = document.getElementById('testResults');
+                const resultEntry = document.createElement('div');
+                resultEntry.className = `test-result ${result.status === 'success' || result.status === 'completed' ? 'success' : 'error'}`;
+                resultEntry.innerHTML = `
+                    <strong>${result.page || result.test}</strong>${result.test && result.page ? ` - ${result.test}` : ''} -
+                    ${result.status.toUpperCase()} -
+                    ${result.message}
+                    <br><small>${new Date().toLocaleTimeString()}</small>
+                `;
+                resultsDiv.appendChild(resultEntry);
+                resultsDiv.scrollTop = resultsDiv.scrollHeight;
+            }
+            updateStats() {
+                const total = this.results.length;
+                const passed = this.results.filter(r =>
+                    r.status === 'success' || r.status === 'completed'
+                ).length;
+                const failed = total - passed;
+                const successRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+                this.testStats = { total, passed, failed, successRate };
+                document.getElementById('totalPages').textContent = total;
+                document.getElementById('passedPages').textContent = passed;
+                document.getElementById('failedPages').textContent = failed;
+                document.getElementById('successRate').textContent = successRate + '%';
+                const progressBar = document.getElementById('progressBar');
+                progressBar.style.width = successRate + '%';
+                progressBar.style.background = successRate >= 80 ? '#10b981' : successRate >= 60 ? '#f59e0b' : '#ef4444';
+            }
+            clearResults() {
+                this.results = [];
+                document.getElementById('testResults').innerHTML = '';
+                this.updateStats();
+                // Reset all page tests
+                this.pages.forEach((page, index) => {
+                    const testDiv = document.getElementById(`page-${index}`);
+                    testDiv.className = 'page-test';
+                    testDiv.querySelector('.status-indicator').className = 'status-indicator';
+                    testDiv.querySelector('.test-page-btn').disabled = false;
+                    page.tests.forEach((test, testIndex) => {
+                        const testDiv = document.getElementById(`test-${index}-${testIndex}`);
+                        testDiv.querySelector('.status-indicator').className = 'status-indicator';
+                    });
+                });
+            }
+            exportResults() {
+                const data = {
+                    timestamp: new Date().toISOString(),
+                    stats: this.testStats,
+                    results: this.results
+                };
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `comprehensive-test-results-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+            delay(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+        // Global tester instance
+        const tester = new ComprehensiveTester();
+        // Global functions for button clicks
+        function runAllTests() {
+            tester.runAllTests();
+        }
+        function testCoreSystem() {
+            tester.testCoreSystem();
+        }
+        function testAPIConnectivity() {
+            tester.testAPIConnectivity();
+        }
+        function testPageIntegration() {
+            tester.testPageIntegration();
+        }
+        function clearResults() {
+            tester.clearResults();
+        }
+        function exportResults() {
+            tester.exportResults();
+        }
+        console.log('🔍 Comprehensive Tester initialized');
+    </script>
+</body>
+</html>

app/static/dev/functional-test.html ADDED Viewed

	@@ -0,0 +1,885 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Functional Testing - Legal Dashboard</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: #10b981; }
+        .error { color: #ef4444; }
+        .info { color: #3b82f6; }
+        .warning { color: #f59e0b; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 14px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .workflow-test {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 10px 0;
+            background: white;
+        }
+        .workflow-test.success {
+            border-color: #10b981;
+            background: #f0fdf4;
+        }
+        .workflow-test.error {
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+        .workflow-test.testing {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+        .test-results {
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            background: #f8f9fa;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: #e5e7eb;
+            border-radius: 3px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+        .progress-fill {
+            height: 100%;
+            background: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .file-upload-area {
+            border: 2px dashed #ddd;
+            padding: 30px;
+            text-align: center;
+            border-radius: 8px;
+            margin: 20px 0;
+            background: #fafafa;
+        }
+        .file-upload-area.dragover {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-indicator.success { background: #10b981; }
+        .status-indicator.error { background: #ef4444; }
+        .status-indicator.warning { background: #f59e0b; }
+        .status-indicator.info { background: #3b82f6; }
+        .status-indicator.testing {
+            background: #3b82f6;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .stat-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔧 Functional Testing - Legal Dashboard</h1>
+    <div class="test-section">
+        <h2>📊 Test Summary</h2>
+        <div class="summary-stats">
+            <div class="stat-card">
+                <div class="stat-number" id="totalWorkflows">0</div>
+                <div class="stat-label">Total Workflows</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="passedWorkflows">0</div>
+                <div class="stat-label">Passed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="failedWorkflows">0</div>
+                <div class="stat-label">Failed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="successRate">0%</div>
+                <div class="stat-label">Success Rate</div>
+            </div>
+        </div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressBar" style="width: 0%"></div>
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>🎛️ Test Controls</h2>
+        <button type="button" onclick="runAllWorkflows()" id="runAllBtn">Run All Workflows</button>
+        <button type="button" onclick="testDocumentWorkflow()">Document Workflow</button>
+        <button type="button" onclick="testUploadWorkflow()">Upload Workflow</button>
+        <button type="button" onclick="testScrapingWorkflow()">Scraping Workflow</button>
+        <button type="button" onclick="testAnalyticsWorkflow()">Analytics Workflow</button>
+        <button type="button" onclick="clearResults()">Clear Results</button>
+        <button type="button" onclick="exportResults()">Export Results</button>
+    </div>
+    <div class="test-section">
+        <h2>📁 File Upload Test</h2>
+        <div class="file-upload-area" id="uploadZone">
+            <p><strong>Drag and drop a file here or click to select</strong></p>
+            <p>Supported formats: PDF, JPG, JPEG, PNG, TIFF</p>
+            <input type="file" id="testFileInput" accept=".pdf,.jpg,.jpeg,.png,.tiff" style="display: none;">
+            <button type="button" onclick="document.getElementById('testFileInput').click()">Select File</button>
+        </div>
+        <div id="uploadResults"></div>
+    </div>
+    <div class="test-section">
+        <h2>🔄 Workflow Tests</h2>
+        <div id="workflowTests">
+            <!-- Workflow tests will be generated here -->
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>📋 Test Results</h2>
+        <div class="test-results" id="testResults">
+            <!-- Test results will be displayed here -->
+        </div>
+    </div>
+    <script src="../js/api-client.js"></script>
+    <script>
+        class FunctionalTester {
+            constructor() {
+                this.baseURL = window.location.origin;
+                this.results = [];
+                this.testStats = {
+                    total: 0,
+                    passed: 0,
+                    failed: 0,
+                    successRate: 0
+                };
+                this.isRunning = false;
+                this.workflows = [
+                    {
+                        name: 'Document Management Workflow',
+                        description: 'Test complete document CRUD operations',
+                        steps: [
+                            { name: 'Get Documents List', action: 'getDocuments' },
+                            { name: 'Create Test Document', action: 'createDocument' },
+                            { name: 'Update Document', action: 'updateDocument' },
+                            { name: 'Search Documents', action: 'searchDocuments' },
+                            { name: 'Delete Test Document', action: 'deleteDocument' }
+                        ]
+                    },
+                    {
+                        name: 'File Upload & OCR Workflow',
+                        description: 'Test file upload and OCR processing',
+                        steps: [
+                            { name: 'Upload Test File', action: 'uploadFile' },
+                            { name: 'Process OCR', action: 'processOCR' },
+                            { name: 'Get OCR Status', action: 'getOCRStatus' },
+                            { name: 'Extract Text', action: 'extractText' }
+                        ]
+                    },
+                    {
+                        name: 'Dashboard Analytics Workflow',
+                        description: 'Test dashboard and analytics functionality',
+                        steps: [
+                            { name: 'Get Dashboard Summary', action: 'getDashboardSummary' },
+                            { name: 'Get Charts Data', action: 'getChartsData' },
+                            { name: 'Get AI Suggestions', action: 'getAISuggestions' },
+                            { name: 'Get Performance Metrics', action: 'getPerformanceMetrics' }
+                        ]
+                    },
+                    {
+                        name: 'Scraping & Rating Workflow',
+                        description: 'Test web scraping and content rating',
+                        steps: [
+                            { name: 'Get Scraping Status', action: 'getScrapingStatus' },
+                            { name: 'Get Scraping Statistics', action: 'getScrapingStatistics' },
+                            { name: 'Get Rating Summary', action: 'getRatingSummary' },
+                            { name: 'Check Scraping Health', action: 'getScrapingHealth' }
+                        ]
+                    },
+                    {
+                        name: 'Analytics & Reporting Workflow',
+                        description: 'Test advanced analytics and reporting',
+                        steps: [
+                            { name: 'Get Analytics Overview', action: 'getAnalyticsOverview' },
+                            { name: 'Get Performance Analytics', action: 'getPerformanceAnalytics' },
+                            { name: 'Get Entity Analysis', action: 'getEntityAnalysis' },
+                            { name: 'Get Quality Analysis', action: 'getQualityAnalysis' }
+                        ]
+                    }
+                ];
+                this.initialize();
+            }
+            initialize() {
+                this.createWorkflowTests();
+                this.setupFileUpload();
+                this.updateStats();
+            }
+            createWorkflowTests() {
+                const container = document.getElementById('workflowTests');
+                container.innerHTML = '';
+                this.workflows.forEach((workflow, index) => {
+                    const testDiv = document.createElement('div');
+                    testDiv.className = 'workflow-test';
+                    testDiv.id = `workflow-${index}`;
+                    testDiv.innerHTML = `
+                        <div class="status-indicator"></div>
+                        <h3>${workflow.name}</h3>
+                        <p>${workflow.description}</p>
+                        <div class="steps" id="steps-${index}">
+                            ${workflow.steps.map((step, stepIndex) => `
+                                <div class="step" id="step-${index}-${stepIndex}">
+                                    <span class="status-indicator"></span>
+                                    ${step.name}
+                                </div>
+                            `).join('')}
+                        </div>
+                        <button type="button" onclick="tester.runWorkflow(${index})" class="run-workflow-btn">
+                            Run Workflow
+                        </button>
+                    `;
+                    container.appendChild(testDiv);
+                });
+            }
+            setupFileUpload() {
+                const uploadZone = document.getElementById('uploadZone');
+                const fileInput = document.getElementById('testFileInput');
+                uploadZone.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadZone.classList.add('dragover');
+                });
+                uploadZone.addEventListener('dragleave', () => {
+                    uploadZone.classList.remove('dragover');
+                });
+                uploadZone.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    uploadZone.classList.remove('dragover');
+                    const files = e.dataTransfer.files;
+                    if (files.length > 0) {
+                        this.testFileUpload(files[0]);
+                    }
+                });
+                fileInput.addEventListener('change', (e) => {
+                    if (e.target.files.length > 0) {
+                        this.testFileUpload(e.target.files[0]);
+                    }
+                });
+            }
+            async runWorkflow(workflowIndex) {
+                const workflow = this.workflows[workflowIndex];
+                const testDiv = document.getElementById(`workflow-${workflowIndex}`);
+                // Set testing state
+                testDiv.className = 'workflow-test testing';
+                testDiv.querySelector('.status-indicator').className = 'status-indicator testing';
+                testDiv.querySelector('.run-workflow-btn').disabled = true;
+                this.logResult({
+                    workflow: workflow.name,
+                    status: 'started',
+                    message: `Starting ${workflow.name}`
+                });
+                let allStepsPassed = true;
+                for (let stepIndex = 0; stepIndex < workflow.steps.length; stepIndex++) {
+                    const step = workflow.steps[stepIndex];
+                    const stepDiv = document.getElementById(`step-${workflowIndex}-${stepIndex}`);
+                    // Set step testing state
+                    stepDiv.querySelector('.status-indicator').className = 'status-indicator testing';
+                    try {
+                        const result = await this.executeStep(step.action);
+                        if (result.success) {
+                            stepDiv.querySelector('.status-indicator').className = 'status-indicator success';
+                            this.logResult({
+                                workflow: workflow.name,
+                                step: step.name,
+                                status: 'success',
+                                message: `${step.name} completed successfully`
+                            });
+                        } else {
+                            stepDiv.querySelector('.status-indicator').className = 'status-indicator error';
+                            allStepsPassed = false;
+                            this.logResult({
+                                workflow: workflow.name,
+                                step: step.name,
+                                status: 'error',
+                                message: `${step.name} failed: ${result.error}`
+                            });
+                        }
+                    } catch (error) {
+                        stepDiv.querySelector('.status-indicator').className = 'status-indicator error';
+                        allStepsPassed = false;
+                        this.logResult({
+                            workflow: workflow.name,
+                            step: step.name,
+                            status: 'error',
+                            message: `${step.name} failed: ${error.message}`
+                        });
+                    }
+                    await this.delay(200); // Small delay between steps
+                }
+                // Update workflow status
+                testDiv.className = `workflow-test ${allStepsPassed ? 'success' : 'error'}`;
+                testDiv.querySelector('.status-indicator').className = `status-indicator ${allStepsPassed ? 'success' : 'error'}`;
+                testDiv.querySelector('.run-workflow-btn').disabled = false;
+                this.logResult({
+                    workflow: workflow.name,
+                    status: allStepsPassed ? 'completed' : 'failed',
+                    message: `${workflow.name} ${allStepsPassed ? 'completed successfully' : 'failed'}`
+                });
+                this.updateStats();
+            }
+            async executeStep(action) {
+                switch (action) {
+                    case 'getDocuments':
+                        return await this.testGetDocuments();
+                    case 'createDocument':
+                        return await this.testCreateDocument();
+                    case 'updateDocument':
+                        return await this.testUpdateDocument();
+                    case 'searchDocuments':
+                        return await this.testSearchDocuments();
+                    case 'deleteDocument':
+                        return await this.testDeleteDocument();
+                    case 'uploadFile':
+                        return await this.testUploadFile();
+                    case 'processOCR':
+                        return await this.testProcessOCR();
+                    case 'getOCRStatus':
+                        return await this.testGetOCRStatus();
+                    case 'extractText':
+                        return await this.testExtractText();
+                    case 'getDashboardSummary':
+                        return await this.testGetDashboardSummary();
+                    case 'getChartsData':
+                        return await this.testGetChartsData();
+                    case 'getAISuggestions':
+                        return await this.testGetAISuggestions();
+                    case 'getPerformanceMetrics':
+                        return await this.testGetPerformanceMetrics();
+                    case 'getScrapingStatus':
+                        return await this.testGetScrapingStatus();
+                    case 'getScrapingStatistics':
+                        return await this.testGetScrapingStatistics();
+                    case 'getRatingSummary':
+                        return await this.testGetRatingSummary();
+                    case 'getScrapingHealth':
+                        return await this.testGetScrapingHealth();
+                    case 'getAnalyticsOverview':
+                        return await this.testGetAnalyticsOverview();
+                    case 'getPerformanceAnalytics':
+                        return await this.testGetPerformanceAnalytics();
+                    case 'getEntityAnalysis':
+                        return await this.testGetEntityAnalysis();
+                    case 'getQualityAnalysis':
+                        return await this.testGetQualityAnalysis();
+                    default:
+                        return { success: false, error: 'Unknown action' };
+                }
+            }
+            // Individual step implementations
+            async testGetDocuments() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/documents`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testCreateDocument() {
+                try {
+                    const testDoc = {
+                        title: `Test Document ${Date.now()}`,
+                        content: 'This is a test document for functional testing',
+                        category: 'test',
+                        source: 'functional_test'
+                    };
+                    const response = await fetch(`${this.baseURL}/api/documents`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(testDoc)
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testUpdateDocument() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/documents/1`, {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ title: 'Updated Test Document' })
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testSearchDocuments() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/documents/search?q=test`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testDeleteDocument() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/documents/1`, {
+                        method: 'DELETE'
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testUploadFile() {
+                try {
+                    // Create a test file
+                    const testContent = 'This is a test file for functional testing';
+                    const blob = new Blob([testContent], { type: 'text/plain' });
+                    const file = new File([blob], 'test.txt', { type: 'text/plain' });
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const response = await fetch(`${this.baseURL}/api/ocr/upload`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testProcessOCR() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/ocr/process`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ file_id: 'test_file' })
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetOCRStatus() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/ocr/status`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testExtractText() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/ocr/extract`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ file_id: 'test_file' })
+                    });
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetDashboardSummary() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/dashboard/summary`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetChartsData() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/dashboard/charts-data`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetAISuggestions() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/dashboard/ai-suggestions`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetPerformanceMetrics() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/dashboard/performance-metrics`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetScrapingStatus() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/scrape/status`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetScrapingStatistics() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/scrape/statistics`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetRatingSummary() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/rating/summary`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetScrapingHealth() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/scraping/health`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetAnalyticsOverview() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/analytics/overview`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetPerformanceAnalytics() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/analytics/performance`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetEntityAnalysis() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/analytics/entities`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testGetQualityAnalysis() {
+                try {
+                    const response = await fetch(`${this.baseURL}/api/analytics/quality-analysis`);
+                    return { success: response.ok, error: response.ok ? null : `HTTP ${response.status}` };
+                } catch (error) {
+                    return { success: false, error: error.message };
+                }
+            }
+            async testFileUpload(file) {
+                const resultsDiv = document.getElementById('uploadResults');
+                resultsDiv.innerHTML = `<p>Testing file upload: ${file.name} (${file.size} bytes)</p>`;
+                try {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const startTime = Date.now();
+                    const response = await fetch(`${this.baseURL}/api/ocr/upload`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const responseTime = Date.now() - startTime;
+                    const responseData = await response.json();
+                    const success = response.ok;
+                    resultsDiv.innerHTML = `
+                        <div class="${success ? 'success' : 'error'}">
+                            <h4>File Upload Test Results</h4>
+                            <p><strong>File:</strong> ${file.name}</p>
+                            <p><strong>Size:</strong> ${file.size} bytes</p>
+                            <p><strong>Status:</strong> ${response.status} ${response.statusText}</p>
+                            <p><strong>Response Time:</strong> ${responseTime}ms</p>
+                            <div class="response-data">
+                                ${JSON.stringify(responseData, null, 2)}
+                            </div>
+                        </div>
+                    `;
+                    this.logResult({
+                        workflow: 'File Upload',
+                        status: success ? 'success' : 'error',
+                        message: `File upload ${success ? 'succeeded' : 'failed'}: ${file.name}`
+                    });
+                } catch (error) {
+                    resultsDiv.innerHTML = `
+                        <div class="error">
+                            <h4>File Upload Test Failed</h4>
+                            <p>Error: ${error.message}</p>
+                        </div>
+                    `;
+                    this.logResult({
+                        workflow: 'File Upload',
+                        status: 'error',
+                        message: `File upload failed: ${error.message}`
+                    });
+                }
+                this.updateStats();
+            }
+            async runAllWorkflows() {
+                if (this.isRunning) return;
+                this.isRunning = true;
+                document.getElementById('runAllBtn').disabled = true;
+                document.getElementById('runAllBtn').textContent = 'Running...';
+                this.clearResults();
+                for (let i = 0; i < this.workflows.length; i++) {
+                    await this.runWorkflow(i);
+                    await this.delay(500); // Delay between workflows
+                }
+                this.isRunning = false;
+                document.getElementById('runAllBtn').disabled = false;
+                document.getElementById('runAllBtn').textContent = 'Run All Workflows';
+            }
+            logResult(result) {
+                this.results.push({
+                    ...result,
+                    timestamp: new Date().toISOString()
+                });
+                const resultsDiv = document.getElementById('testResults');
+                const resultEntry = document.createElement('div');
+                resultEntry.className = `test-result ${result.status === 'success' || result.status === 'completed' ? 'success' : 'error'}`;
+                resultEntry.innerHTML = `
+                    <strong>${result.workflow}</strong>${result.step ? ` - ${result.step}` : ''} -
+                    ${result.status.toUpperCase()} -
+                    ${result.message}
+                    <br><small>${new Date().toLocaleTimeString()}</small>
+                `;
+                resultsDiv.appendChild(resultEntry);
+                resultsDiv.scrollTop = resultsDiv.scrollHeight;
+            }
+            updateStats() {
+                const total = this.results.length;
+                const passed = this.results.filter(r =>
+                    r.status === 'success' || r.status === 'completed'
+                ).length;
+                const failed = total - passed;
+                const successRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+                this.testStats = { total, passed, failed, successRate };
+                document.getElementById('totalWorkflows').textContent = total;
+                document.getElementById('passedWorkflows').textContent = passed;
+                document.getElementById('failedWorkflows').textContent = failed;
+                document.getElementById('successRate').textContent = successRate + '%';
+                const progressBar = document.getElementById('progressBar');
+                progressBar.style.width = successRate + '%';
+                progressBar.style.background = successRate >= 80 ? '#10b981' : successRate >= 60 ? '#f59e0b' : '#ef4444';
+            }
+            clearResults() {
+                this.results = [];
+                document.getElementById('testResults').innerHTML = '';
+                this.updateStats();
+                // Reset all workflow tests
+                this.workflows.forEach((workflow, index) => {
+                    const testDiv = document.getElementById(`workflow-${index}`);
+                    testDiv.className = 'workflow-test';
+                    testDiv.querySelector('.status-indicator').className = 'status-indicator';
+                    testDiv.querySelector('.run-workflow-btn').disabled = false;
+                    workflow.steps.forEach((step, stepIndex) => {
+                        const stepDiv = document.getElementById(`step-${index}-${stepIndex}`);
+                        stepDiv.querySelector('.status-indicator').className = 'status-indicator';
+                    });
+                });
+            }
+            exportResults() {
+                const data = {
+                    timestamp: new Date().toISOString(),
+                    stats: this.testStats,
+                    results: this.results
+                };
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `functional-test-results-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+            delay(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+        // Global tester instance
+        const tester = new FunctionalTester();
+        // Global functions for button clicks
+        function runAllWorkflows() {
+            tester.runAllWorkflows();
+        }
+        function testDocumentWorkflow() {
+            tester.runWorkflow(0);
+        }
+        function testUploadWorkflow() {
+            tester.runWorkflow(1);
+        }
+        function testScrapingWorkflow() {
+            tester.runWorkflow(3);
+        }
+        function testAnalyticsWorkflow() {
+            tester.runWorkflow(4);
+        }
+        function clearResults() {
+            tester.clearResults();
+        }
+        function exportResults() {
+            tester.exportResults();
+        }
+        console.log('🔧 Functional Tester initialized');
+    </script>
+</body>
+</html>

app/static/dev/integration-test.html ADDED Viewed

	@@ -0,0 +1,385 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Integration Test - Legal Dashboard</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-inline-size: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: #10b981; }
+        .error { color: #ef4444; }
+        .info { color: #3b82f6; }
+        .warning { color: #f59e0b; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        pre {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+            max-block-size: 300px;
+            overflow-y: auto;
+        }
+        .event-log {
+            background: #1a1a1a;
+            color: #00ff00;
+            padding: 15px;
+            border-radius: 8px;
+            font-family: 'Courier New', monospace;
+            max-block-size: 400px;
+            overflow-y: auto;
+        }
+        .status-indicator {
+            display: inline-block;
+            inline-size: 12px;
+            block-size: 12px;
+            border-radius: 50%;
+            margin-inline-end: 8px;
+        }
+        .status-indicator.success { background: #10b981; }
+        .status-indicator.error { background: #ef4444; }
+        .status-indicator.warning { background: #f59e0b; }
+        .status-indicator.info { background: #3b82f6; }
+    </style>
+</head>
+<body>
+    <h1>🔍 Integration Test - Legal Dashboard</h1>
+    <div class="test-section">
+        <h2>📦 Core Module Test</h2>
+        <button type="button" onclick="testCoreModule()">Test Core Module</button>
+        <div id="coreTestResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>🔌 API Connectivity Test</h2>
+        <button type="button" onclick="testAPIConnectivity()">Test API Connectivity</button>
+        <div id="apiTestResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>📡 Cross-Page Communication Test</h2>
+        <button type="button" onclick="testCrossPageCommunication()">Test Cross-Page Events</button>
+        <div id="communicationTestResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>📊 Event Log</h2>
+        <button type="button" onclick="clearEventLog()">Clear Log</button>
+        <div id="eventLog" class="event-log"></div>
+    </div>
+    <div class="test-section">
+        <h2>🔄 Real-time Updates Test</h2>
+        <button type="button" onclick="simulateDocumentUpload()">Simulate Document Upload</button>
+        <button type="button" onclick="simulateDocumentUpdate()">Simulate Document Update</button>
+        <button type="button" onclick="simulateDocumentDelete()">Simulate Document Delete</button>
+        <div id="realtimeTestResult"></div>
+    </div>
+    <script src="../js/api-client.js"></script>
+    <script src="../js/core.js"></script>
+    <script>
+        let eventLog = [];
+        function logEvent(message, type = 'info') {
+            const timestamp = new Date().toLocaleTimeString();
+            const logEntry = `[${timestamp}] ${message}`;
+            eventLog.push({ message: logEntry, type });
+            const eventLogElement = document.getElementById('eventLog');
+            eventLogElement.innerHTML = eventLog.map(entry =>
+                `<div class="${entry.type}">${entry.message}</div>`
+            ).join('');
+            eventLogElement.scrollTop = eventLogElement.scrollHeight;
+        }
+        function clearEventLog() {
+            eventLog = [];
+            document.getElementById('eventLog').innerHTML = '';
+        }
+        async function testCoreModule() {
+            const resultDiv = document.getElementById('coreTestResult');
+            resultDiv.innerHTML = '<p>Testing core module...</p>';
+            try {
+                // Test if core module is loaded
+                if (typeof dashboardCore === 'undefined') {
+                    throw new Error('Dashboard Core module not loaded');
+                }
+                // Test initialization
+                if (!dashboardCore.isInitialized) {
+                    throw new Error('Dashboard Core not initialized');
+                }
+                // Test API client
+                if (!dashboardCore.apiClient) {
+                    throw new Error('API client not initialized');
+                }
+                // Test event system
+                let eventReceived = false;
+                const unsubscribe = dashboardCore.listen('testEvent', (data) => {
+                    eventReceived = true;
+                    logEvent('✅ Test event received: ' + JSON.stringify(data), 'success');
+                });
+                dashboardCore.broadcast('testEvent', { test: true, timestamp: Date.now() });
+                setTimeout(() => {
+                    unsubscribe();
+                    if (eventReceived) {
+                        resultDiv.innerHTML = `
+                            <div class="success">
+                                <span class="status-indicator success"></span>
+                                ✅ Core module working correctly
+                                <ul>
+                                    <li>Module loaded: ✅</li>
+                                    <li>Initialized: ✅</li>
+                                    <li>API client: ✅</li>
+                                    <li>Event system: ✅</li>
+                                </ul>
+                            </div>
+                        `;
+                    } else {
+                        throw new Error('Event system not working');
+                    }
+                }, 100);
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="error">
+                        <span class="status-indicator error"></span>
+                        ❌ Core module test failed: ${error.message}
+                    </div>
+                `;
+                logEvent('❌ Core module test failed: ' + error.message, 'error');
+            }
+        }
+        async function testAPIConnectivity() {
+            const resultDiv = document.getElementById('apiTestResult');
+            resultDiv.innerHTML = '<p>Testing API connectivity...</p>';
+            const endpoints = [
+                '/api/health',
+                '/api/dashboard/summary',
+                '/api/documents',
+                '/api/ocr/status'
+            ];
+            const results = [];
+            for (const endpoint of endpoints) {
+                try {
+                    const response = await fetch(endpoint);
+                    const success = response.ok;
+                    results.push({
+                        endpoint,
+                        success,
+                        status: response.status,
+                        statusText: response.statusText
+                    });
+                    logEvent(`${success ? '✅' : '❌'} ${endpoint}: ${response.status}`, success ? 'success' : 'error');
+                } catch (error) {
+                    results.push({
+                        endpoint,
+                        success: false,
+                        error: error.message
+                    });
+                    logEvent(`❌ ${endpoint}: ${error.message}`, 'error');
+                }
+            }
+            const successCount = results.filter(r => r.success).length;
+            const totalCount = results.length;
+            const successRate = Math.round((successCount / totalCount) * 100);
+            resultDiv.innerHTML = `
+                <div class="${successRate >= 75 ? 'success' : successRate >= 50 ? 'warning' : 'error'}">
+                    <span class="status-indicator ${successRate >= 75 ? 'success' : successRate >= 50 ? 'warning' : 'error'}"></span>
+                    API Connectivity: ${successCount}/${totalCount} (${successRate}%)
+                    <ul>
+                        ${results.map(r => `
+                            <li class="${r.success ? 'success' : 'error'}">
+                                ${r.success ? '✅' : '❌'} ${r.endpoint}: ${r.status || r.error}
+                            </li>
+                        `).join('')}
+                    </ul>
+                </div>
+            `;
+        }
+        function testCrossPageCommunication() {
+            const resultDiv = document.getElementById('communicationTestResult');
+            resultDiv.innerHTML = '<p>Testing cross-page communication...</p>';
+            try {
+                // Test localStorage synchronization
+                const testData = { test: true, timestamp: Date.now() };
+                dashboardCore.storeEvent('testStorageEvent', testData);
+                // Verify event was stored
+                const events = JSON.parse(localStorage.getItem('dashboard_events') || '[]');
+                const lastEvent = events[events.length - 1];
+                if (lastEvent && lastEvent.name === 'testStorageEvent') {
+                    logEvent('✅ localStorage synchronization working', 'success');
+                } else {
+                    throw new Error('localStorage synchronization failed');
+                }
+                // Test event broadcasting
+                let eventReceived = false;
+                const unsubscribe = dashboardCore.listen('testCommunicationEvent', (data) => {
+                    eventReceived = true;
+                    logEvent('✅ Cross-page event received: ' + JSON.stringify(data), 'success');
+                });
+                dashboardCore.broadcast('testCommunicationEvent', {
+                    message: 'Test cross-page communication',
+                    timestamp: Date.now()
+                });
+                setTimeout(() => {
+                    unsubscribe();
+                    if (eventReceived) {
+                        resultDiv.innerHTML = `
+                            <div class="success">
+                                <span class="status-indicator success"></span>
+                                ✅ Cross-page communication working
+                                <ul>
+                                    <li>Event broadcasting: ✅</li>
+                                    <li>Event listening: ✅</li>
+                                    <li>localStorage sync: ✅</li>
+                                </ul>
+                            </div>
+                        `;
+                    } else {
+                        throw new Error('Event communication failed');
+                    }
+                }, 100);
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="error">
+                        <span class="status-indicator error"></span>
+                        ❌ Cross-page communication test failed: ${error.message}
+                    </div>
+                `;
+                logEvent('❌ Cross-page communication test failed: ' + error.message, 'error');
+            }
+        }
+        function simulateDocumentUpload() {
+            const testData = {
+                fileId: 'test_' + Date.now(),
+                fileName: 'test_document.pdf',
+                fileSize: 1024000,
+                status: 'uploaded'
+            };
+            dashboardCore.broadcast('documentUploaded', testData);
+            logEvent('📄 Simulated document upload: ' + testData.fileName, 'info');
+            document.getElementById('realtimeTestResult').innerHTML = `
+                <div class="success">
+                    ✅ Document upload event broadcasted
+                    <pre>${JSON.stringify(testData, null, 2)}</pre>
+                </div>
+            `;
+        }
+        function simulateDocumentUpdate() {
+            const testData = {
+                documentId: 'doc_' + Date.now(),
+                fileName: 'updated_document.pdf',
+                status: 'updated',
+                updatedAt: new Date().toISOString()
+            };
+            dashboardCore.broadcast('documentUpdated', testData);
+            logEvent('📝 Simulated document update: ' + testData.fileName, 'info');
+            document.getElementById('realtimeTestResult').innerHTML = `
+                <div class="success">
+                    ✅ Document update event broadcasted
+                    <pre>${JSON.stringify(testData, null, 2)}</pre>
+                </div>
+            `;
+        }
+        function simulateDocumentDelete() {
+            const testData = {
+                documentId: 'doc_' + Date.now(),
+                fileName: 'deleted_document.pdf',
+                status: 'deleted'
+            };
+            dashboardCore.broadcast('documentDeleted', testData);
+            logEvent('🗑️ Simulated document delete: ' + testData.fileName, 'info');
+            document.getElementById('realtimeTestResult').innerHTML = `
+                <div class="success">
+                    ✅ Document delete event broadcasted
+                    <pre>${JSON.stringify(testData, null, 2)}</pre>
+                </div>
+            `;
+        }
+        // Listen for all dashboard events
+        dashboardCore.listen('documentUploaded', (data) => {
+            logEvent('📄 Document upload event received: ' + data.fileName, 'success');
+        });
+        dashboardCore.listen('documentUpdated', (data) => {
+            logEvent('📝 Document update event received: ' + data.fileName, 'success');
+        });
+        dashboardCore.listen('documentDeleted', (data) => {
+            logEvent('🗑️ Document delete event received: ' + data.fileName, 'success');
+        });
+        dashboardCore.listen('healthUpdate', (data) => {
+            logEvent('💓 Health update: ' + data.status, 'info');
+        });
+        dashboardCore.listen('dashboardStatsUpdated', (data) => {
+            logEvent('📊 Dashboard stats updated', 'info');
+        });
+        // Initialize test page
+        document.addEventListener('DOMContentLoaded', () => {
+            logEvent('🚀 Integration test page loaded', 'info');
+            logEvent('📦 Dashboard Core module: ' + (typeof dashboardCore !== 'undefined' ? 'Loaded' : 'Not loaded'), 'info');
+        });
+    </script>
+</body>
+</html>

app/static/dev/real-api-test.html ADDED Viewed

	@@ -0,0 +1,674 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real API Testing - Legal Dashboard</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: #10b981; }
+        .error { color: #ef4444; }
+        .info { color: #3b82f6; }
+        .warning { color: #f59e0b; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .endpoint-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .endpoint-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            background: white;
+            position: relative;
+        }
+        .endpoint-card.success {
+            border-color: #10b981;
+            background: #f0fdf4;
+        }
+        .endpoint-card.error {
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+        .endpoint-card.warning {
+            border-color: #f59e0b;
+            background: #fffbeb;
+        }
+        .endpoint-card.testing {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-indicator.success { background: #10b981; }
+        .status-indicator.error { background: #ef4444; }
+        .status-indicator.warning { background: #f59e0b; }
+        .status-indicator.info { background: #3b82f6; }
+        .status-indicator.testing {
+            background: #3b82f6;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .response-data {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            max-height: 200px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+        .test-controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .stat-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 4px;
+            background: #e5e7eb;
+            border-radius: 2px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+        .progress-fill {
+            height: 100%;
+            background: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .file-upload-test {
+            border: 2px dashed #ddd;
+            padding: 20px;
+            text-align: center;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+        .file-upload-test.dragover {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+        .test-results {
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            background: #f8f9fa;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔍 Real API Testing - Legal Dashboard</h1>
+    <div class="test-section">
+        <h2>📊 Test Summary</h2>
+        <div class="summary-stats">
+            <div class="stat-card">
+                <div class="stat-number" id="totalTests">0</div>
+                <div class="stat-label">Total Tests</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="passedTests">0</div>
+                <div class="stat-label">Passed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="failedTests">0</div>
+                <div class="stat-label">Failed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="successRate">0%</div>
+                <div class="stat-label">Success Rate</div>
+            </div>
+        </div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressBar"></div>
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>🎛️ Test Controls</h2>
+        <div class="test-controls">
+            <button type="button" onclick="runAllTests()" id="runAllBtn">Run All Tests</button>
+            <button type="button" onclick="runHealthTests()">Health Tests Only</button>
+            <button type="button" onclick="runDashboardTests()">Dashboard Tests</button>
+            <button type="button" onclick="runDocumentTests()">Document Tests</button>
+            <button type="button" onclick="runOCRTests()">OCR Tests</button>
+            <button type="button" onclick="runScrapingTests()">Scraping Tests</button>
+            <button type="button" onclick="clearResults()">Clear Results</button>
+            <button type="button" onclick="exportResults()">Export Results</button>
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>📁 File Upload Test</h2>
+        <div class="file-upload-test" id="uploadZone">
+            <p>Drag and drop a file here or click to select</p>
+            <input type="file" id="testFileInput" accept=".pdf,.jpg,.jpeg,.png,.tiff" style="display: none;">
+            <button type="button" onclick="document.getElementById('testFileInput').click()">Select File</button>
+        </div>
+        <div id="uploadResults"></div>
+    </div>
+    <div class="test-section">
+        <h2>🔌 API Endpoint Tests</h2>
+        <div class="endpoint-grid" id="endpointGrid">
+            <!-- Endpoint cards will be generated here -->
+        </div>
+    </div>
+    <div class="test-section">
+        <h2>📋 Test Results</h2>
+        <div class="test-results" id="testResults">
+            <!-- Test results will be displayed here -->
+        </div>
+    </div>
+    <script src="../js/api-client.js"></script>
+    <script>
+        class RealAPITester {
+            constructor() {
+                this.baseURL = window.location.origin;
+                this.results = [];
+                this.testStats = {
+                    total: 0,
+                    passed: 0,
+                    failed: 0,
+                    successRate: 0
+                };
+                this.isRunning = false;
+                this.endpoints = [
+                    // Health & System Tests
+                    { name: 'Health Check', url: '/api/health', method: 'GET', category: 'Health', expectedStatus: 200 },
+                    { name: 'API Docs', url: '/api/docs', method: 'GET', category: 'Health', expectedStatus: 200 },
+                    // Dashboard Tests
+                    { name: 'Dashboard Summary', url: '/api/dashboard/summary', method: 'GET', category: 'Dashboard', expectedStatus: 200 },
+                    { name: 'Charts Data', url: '/api/dashboard/charts-data', method: 'GET', category: 'Dashboard', expectedStatus: 200 },
+                    { name: 'AI Suggestions', url: '/api/dashboard/ai-suggestions', method: 'GET', category: 'Dashboard', expectedStatus: 200 },
+                    { name: 'Performance Metrics', url: '/api/dashboard/performance-metrics', method: 'GET', category: 'Dashboard', expectedStatus: 200 },
+                    { name: 'Trends', url: '/api/dashboard/trends', method: 'GET', category: 'Dashboard', expectedStatus: 200 },
+                    // Documents Tests
+                    { name: 'Documents List', url: '/api/documents', method: 'GET', category: 'Documents', expectedStatus: 200 },
+                    { name: 'Document Categories', url: '/api/documents/categories', method: 'GET', category: 'Documents', expectedStatus: 200 },
+                    { name: 'Document Sources', url: '/api/documents/sources', method: 'GET', category: 'Documents', expectedStatus: 200 },
+                    { name: 'Document Search', url: '/api/documents/search?q=test', method: 'GET', category: 'Documents', expectedStatus: 200 },
+                    // OCR Tests
+                    { name: 'OCR Status', url: '/api/ocr/status', method: 'GET', category: 'OCR', expectedStatus: 200 },
+                    { name: 'OCR Models', url: '/api/ocr/models', method: 'GET', category: 'OCR', expectedStatus: 200 },
+                    // Scraping Tests
+                    { name: 'Scraping Statistics', url: '/api/scraping/scrape/statistics', method: 'GET', category: 'Scraping', expectedStatus: 200 },
+                    { name: 'Scraping Status', url: '/api/scraping/scrape/status', method: 'GET', category: 'Scraping', expectedStatus: 200 },
+                    { name: 'Rating Summary', url: '/api/scraping/rating/summary', method: 'GET', category: 'Scraping', expectedStatus: 200 },
+                    { name: 'Scraping Health', url: '/api/scraping/health', method: 'GET', category: 'Scraping', expectedStatus: 200 },
+                    // Analytics Tests (Expected to fail)
+                    { name: 'Analytics Overview', url: '/api/analytics/overview', method: 'GET', category: 'Analytics', expectedStatus: 404 },
+                    { name: 'Analytics Performance', url: '/api/analytics/performance', method: 'GET', category: 'Analytics', expectedStatus: 404 },
+                    { name: 'Analytics Entities', url: '/api/analytics/entities', method: 'GET', category: 'Analytics', expectedStatus: 404 },
+                    { name: 'Analytics Quality', url: '/api/analytics/quality-analysis', method: 'GET', category: 'Analytics', expectedStatus: 404 }
+                ];
+                this.initialize();
+            }
+            initialize() {
+                this.createEndpointCards();
+                this.setupFileUpload();
+                this.updateStats();
+            }
+            createEndpointCards() {
+                const grid = document.getElementById('endpointGrid');
+                grid.innerHTML = '';
+                this.endpoints.forEach((endpoint, index) => {
+                    const card = document.createElement('div');
+                    card.className = 'endpoint-card';
+                    card.id = `endpoint-${index}`;
+                    card.innerHTML = `
+                        <div class="status-indicator"></div>
+                        <strong>${endpoint.name}</strong>
+                        <div style="font-size: 0.8rem; color: #666; margin: 5px 0;">
+                            ${endpoint.method} ${endpoint.url}
+                        </div>
+                        <div class="response-data" id="response-${index}" style="display: none;"></div>
+                        <button onclick="tester.testSingleEndpoint(${index})" class="test-btn">
+                            Test
+                        </button>
+                    `;
+                    grid.appendChild(card);
+                });
+            }
+            setupFileUpload() {
+                const uploadZone = document.getElementById('uploadZone');
+                const fileInput = document.getElementById('testFileInput');
+                uploadZone.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadZone.classList.add('dragover');
+                });
+                uploadZone.addEventListener('dragleave', () => {
+                    uploadZone.classList.remove('dragover');
+                });
+                uploadZone.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    uploadZone.classList.remove('dragover');
+                    const files = e.dataTransfer.files;
+                    if (files.length > 0) {
+                        this.testFileUpload(files[0]);
+                    }
+                });
+                fileInput.addEventListener('change', (e) => {
+                    if (e.target.files.length > 0) {
+                        this.testFileUpload(e.target.files[0]);
+                    }
+                });
+            }
+            async testSingleEndpoint(index) {
+                const endpoint = this.endpoints[index];
+                const card = document.getElementById(`endpoint-${index}`);
+                const responseDiv = document.getElementById(`response-${index}`);
+                // Set testing state
+                card.className = 'endpoint-card testing';
+                card.querySelector('.status-indicator').className = 'status-indicator testing';
+                card.querySelector('.test-btn').disabled = true;
+                const startTime = Date.now();
+                try {
+                    const response = await fetch(`${this.baseURL}${endpoint.url}`, {
+                        method: endpoint.method,
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    });
+                    const responseTime = Date.now() - startTime;
+                    const responseText = await response.text();
+                    let responseData;
+                    try {
+                        responseData = JSON.parse(responseText);
+                    } catch {
+                        responseData = responseText;
+                    }
+                    const success = response.status === endpoint.expectedStatus;
+                    // Update card
+                    card.className = `endpoint-card ${success ? 'success' : 'error'}`;
+                    card.querySelector('.status-indicator').className = `status-indicator ${success ? 'success' : 'error'}`;
+                    card.querySelector('.test-btn').disabled = false;
+                    // Show response data
+                    responseDiv.style.display = 'block';
+                    responseDiv.innerHTML = `
+Status: ${response.status} ${response.statusText}
+Time: ${responseTime}ms
+Size: ${responseText.length} bytes
+Response:
+${JSON.stringify(responseData, null, 2)}
+                    `;
+                    // Log result
+                    this.logResult({
+                        endpoint: endpoint.name,
+                        url: endpoint.url,
+                        method: endpoint.method,
+                        status: response.status,
+                        expectedStatus: endpoint.expectedStatus,
+                        success: success,
+                        responseTime: responseTime,
+                        responseSize: responseText.length,
+                        responseData: responseData
+                    });
+                } catch (error) {
+                    card.className = 'endpoint-card error';
+                    card.querySelector('.status-indicator').className = 'status-indicator error';
+                    card.querySelector('.test-btn').disabled = false;
+                    responseDiv.style.display = 'block';
+                    responseDiv.innerHTML = `Error: ${error.message}`;
+                    this.logResult({
+                        endpoint: endpoint.name,
+                        url: endpoint.url,
+                        method: endpoint.method,
+                        status: 0,
+                        expectedStatus: endpoint.expectedStatus,
+                        success: false,
+                        error: error.message
+                    });
+                }
+                this.updateStats();
+            }
+            async testFileUpload(file) {
+                const resultsDiv = document.getElementById('uploadResults');
+                resultsDiv.innerHTML = `<p>Testing file upload: ${file.name} (${file.size} bytes)</p>`;
+                try {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const startTime = Date.now();
+                    const response = await fetch(`${this.baseURL}/api/ocr/upload`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const responseTime = Date.now() - startTime;
+                    const responseData = await response.json();
+                    const success = response.ok;
+                    resultsDiv.innerHTML = `
+                        <div class="${success ? 'success' : 'error'}">
+                            <h4>File Upload Test Results</h4>
+                            <p><strong>File:</strong> ${file.name}</p>
+                            <p><strong>Size:</strong> ${file.size} bytes</p>
+                            <p><strong>Status:</strong> ${response.status} ${response.statusText}</p>
+                            <p><strong>Response Time:</strong> ${responseTime}ms</p>
+                            <div class="response-data">
+                                ${JSON.stringify(responseData, null, 2)}
+                            </div>
+                        </div>
+                    `;
+                    this.logResult({
+                        endpoint: 'File Upload',
+                        url: '/api/ocr/upload',
+                        method: 'POST',
+                        status: response.status,
+                        success: success,
+                        responseTime: responseTime,
+                        fileSize: file.size,
+                        fileName: file.name,
+                        responseData: responseData
+                    });
+                } catch (error) {
+                    resultsDiv.innerHTML = `
+                        <div class="error">
+                            <h4>File Upload Test Failed</h4>
+                            <p>Error: ${error.message}</p>
+                        </div>
+                    `;
+                    this.logResult({
+                        endpoint: 'File Upload',
+                        url: '/api/ocr/upload',
+                        method: 'POST',
+                        status: 0,
+                        success: false,
+                        error: error.message,
+                        fileName: file.name
+                    });
+                }
+                this.updateStats();
+            }
+            async runAllTests() {
+                if (this.isRunning) return;
+                this.isRunning = true;
+                document.getElementById('runAllBtn').disabled = true;
+                document.getElementById('runAllBtn').textContent = 'Running...';
+                this.clearResults();
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    await this.testSingleEndpoint(i);
+                    await this.delay(100); // Small delay between tests
+                }
+                this.isRunning = false;
+                document.getElementById('runAllBtn').disabled = false;
+                document.getElementById('runAllBtn').textContent = 'Run All Tests';
+            }
+            async runHealthTests() {
+                const healthEndpoints = this.endpoints.filter(e => e.category === 'Health');
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    if (this.endpoints[i].category === 'Health') {
+                        await this.testSingleEndpoint(i);
+                        await this.delay(100);
+                    }
+                }
+            }
+            async runDashboardTests() {
+                const dashboardEndpoints = this.endpoints.filter(e => e.category === 'Dashboard');
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    if (this.endpoints[i].category === 'Dashboard') {
+                        await this.testSingleEndpoint(i);
+                        await this.delay(100);
+                    }
+                }
+            }
+            async runDocumentTests() {
+                const documentEndpoints = this.endpoints.filter(e => e.category === 'Documents');
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    if (this.endpoints[i].category === 'Documents') {
+                        await this.testSingleEndpoint(i);
+                        await this.delay(100);
+                    }
+                }
+            }
+            async runOCRTests() {
+                const ocrEndpoints = this.endpoints.filter(e => e.category === 'OCR');
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    if (this.endpoints[i].category === 'OCR') {
+                        await this.testSingleEndpoint(i);
+                        await this.delay(100);
+                    }
+                }
+            }
+            async runScrapingTests() {
+                const scrapingEndpoints = this.endpoints.filter(e => e.category === 'Scraping');
+                for (let i = 0; i < this.endpoints.length; i++) {
+                    if (this.endpoints[i].category === 'Scraping') {
+                        await this.testSingleEndpoint(i);
+                        await this.delay(100);
+                    }
+                }
+            }
+            logResult(result) {
+                this.results.push({
+                    ...result,
+                    timestamp: new Date().toISOString()
+                });
+                const resultsDiv = document.getElementById('testResults');
+                const resultEntry = document.createElement('div');
+                resultEntry.className = `test-result ${result.success ? 'success' : 'error'}`;
+                resultEntry.innerHTML = `
+                    <strong>${result.endpoint}</strong> -
+                    ${result.success ? '✅ PASS' : '❌ FAIL'}
+                    (${result.status || 'ERROR'}) -
+                    ${result.responseTime ? result.responseTime + 'ms' : 'N/A'}
+                    <br><small>${new Date().toLocaleTimeString()}</small>
+                `;
+                resultsDiv.appendChild(resultEntry);
+                resultsDiv.scrollTop = resultsDiv.scrollHeight;
+            }
+            updateStats() {
+                const total = this.results.length;
+                const passed = this.results.filter(r => r.success).length;
+                const failed = total - passed;
+                const successRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+                this.testStats = { total, passed, failed, successRate };
+                document.getElementById('totalTests').textContent = total;
+                document.getElementById('passedTests').textContent = passed;
+                document.getElementById('failedTests').textContent = failed;
+                document.getElementById('successRate').textContent = successRate + '%';
+                const progressBar = document.getElementById('progressBar');
+                progressBar.style.width = successRate + '%';
+                progressBar.style.background = successRate >= 80 ? '#10b981' : successRate >= 60 ? '#f59e0b' : '#ef4444';
+            }
+            clearResults() {
+                this.results = [];
+                document.getElementById('testResults').innerHTML = '';
+                this.updateStats();
+                // Reset all endpoint cards
+                this.endpoints.forEach((endpoint, index) => {
+                    const card = document.getElementById(`endpoint-${index}`);
+                    card.className = 'endpoint-card';
+                    card.querySelector('.status-indicator').className = 'status-indicator';
+                    card.querySelector('.test-btn').disabled = false;
+                    document.getElementById(`response-${index}`).style.display = 'none';
+                });
+            }
+            exportResults() {
+                const data = {
+                    timestamp: new Date().toISOString(),
+                    stats: this.testStats,
+                    results: this.results
+                };
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `api-test-results-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+            delay(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+        // Global tester instance
+        const tester = new RealAPITester();
+        // Global functions for button clicks
+        function runAllTests() {
+            tester.runAllTests();
+        }
+        function runHealthTests() {
+            tester.runHealthTests();
+        }
+        function runDashboardTests() {
+            tester.runDashboardTests();
+        }
+        function runDocumentTests() {
+            tester.runDocumentTests();
+        }
+        function runOCRTests() {
+            tester.runOCRTests();
+        }
+        function runScrapingTests() {
+            tester.runScrapingTests();
+        }
+        function clearResults() {
+            tester.clearResults();
+        }
+        function exportResults() {
+            tester.exportResults();
+        }
+        console.log('🔍 Real API Tester initialized');
+    </script>
+</body>
+</html>

app/static/dev/test_integration.html ADDED Viewed

	@@ -0,0 +1,164 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تست اتصال فرانت‌اند و بک‌اند</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .success { color: green; }
+        .error { color: red; }
+        .info { color: blue; }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        pre {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>تست اتصال فرانت‌اند و بک‌اند</h1>
+    <div class="test-section">
+        <h2>تست اتصال API</h2>
+        <button onclick="testConnection()">تست اتصال</button>
+        <div id="connectionResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>تست دریافت آمار داشبورد</h2>
+        <button onclick="testDashboardSummary()">دریافت آمار</button>
+        <div id="dashboardResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>تست دریافت اسناد</h2>
+        <button onclick="testDocuments()">دریافت اسناد</button>
+        <div id="documentsResult"></div>
+    </div>
+    <div class="test-section">
+        <h2>تست شروع جمع‌آوری</h2>
+        <button onclick="testScraping()">شروع جمع‌آوری</button>
+        <div id="scrapingResult"></div>
+    </div>
+    <script>
+        const API_BASE = 'http://localhost:8000';
+        async function testConnection() {
+            const resultDiv = document.getElementById('connectionResult');
+            resultDiv.innerHTML = '<p class="info">در حال تست اتصال...</p>';
+            try {
+                const response = await fetch(`${API_BASE}/api/dashboard-summary`);
+                if (response.ok) {
+                    resultDiv.innerHTML = '<p class="success">✅ اتصال موفق! سرور در دسترس است.</p>';
+                } else {
+                    resultDiv.innerHTML = `<p class="error">❌ خطا در اتصال: ${response.status} ${response.statusText}</p>`;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ خطا در اتصال: ${error.message}</p>`;
+            }
+        }
+        async function testDashboardSummary() {
+            const resultDiv = document.getElementById('dashboardResult');
+            resultDiv.innerHTML = '<p class="info">در حال دریافت آمار...</p>';
+            try {
+                const response = await fetch(`${API_BASE}/api/dashboard-summary`);
+                if (response.ok) {
+                    const data = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="success">✅ آمار دریافت شد:</p>
+                        <pre>${JSON.stringify(data, null, 2)}</pre>
+                    `;
+                } else {
+                    resultDiv.innerHTML = `<p class="error">❌ خطا در دریافت آمار: ${response.status}</p>`;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ خطا در دریافت آمار: ${error.message}</p>`;
+            }
+        }
+        async function testDocuments() {
+            const resultDiv = document.getElementById('documentsResult');
+            resultDiv.innerHTML = '<p class="info">در حال دریافت اسناد...</p>';
+            try {
+                const response = await fetch(`${API_BASE}/api/documents?limit=5`);
+                if (response.ok) {
+                    const data = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="success">✅ اسناد دریافت شد (${data.length} سند):</p>
+                        <pre>${JSON.stringify(data, null, 2)}</pre>
+                    `;
+                } else {
+                    resultDiv.innerHTML = `<p class="error">❌ خطا در دریافت اسناد: ${response.status}</p>`;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ خطا در دریافت اسناد: ${error.message}</p>`;
+            }
+        }
+        async function testScraping() {
+            const resultDiv = document.getElementById('scrapingResult');
+            resultDiv.innerHTML = '<p class="info">در حال شروع جمع‌آوری...</p>';
+            try {
+                const response = await fetch(`${API_BASE}/api/scrape-trigger`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ manual_trigger: true })
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="success">✅ جمع‌آوری شروع شد:</p>
+                        <pre>${JSON.stringify(data, null, 2)}</pre>
+                    `;
+                } else {
+                    resultDiv.innerHTML = `<p class="error">❌ خطا در شروع جمع‌آوری: ${response.status}</p>`;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ خطا در شروع جمع‌آوری: ${error.message}</p>`;
+            }
+        }
+        // Auto-test on page load
+        window.addEventListener('load', () => {
+            setTimeout(testConnection, 1000);
+        });
+    </script>
+</body>
+</html>

app/static/js/api-client.js ADDED Viewed

	@@ -0,0 +1,422 @@

+/**
+ * Legal Dashboard API Client
+ * =========================
+ *
+ * JavaScript client for communicating with the Legal Dashboard backend API.
+ * Handles all HTTP requests and data transformation between frontend and backend.
+ */
+class LegalDashboardAPI {
+    constructor(baseUrl = '') {
+        this.baseUrl = baseUrl || window.location.origin;
+        this.apiBase = `${this.baseUrl}/api`;
+        // Request interceptor for common headers
+        this.defaultHeaders = {
+            'Content-Type': 'application/json',
+        };
+    }
+    /**
+     * Generic HTTP request handler with error handling
+     */
+    async request(endpoint, options = {}) {
+        const url = `${this.apiBase}${endpoint}`;
+        const config = {
+            ...options,
+            headers: {
+                ...this.defaultHeaders,
+                ...options.headers
+            }
+        };
+        try {
+            const response = await fetch(url, config);
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.detail || `HTTP ${response.status}: ${response.statusText}`);
+            }
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                return await response.json();
+            }
+            return await response.text();
+        } catch (error) {
+            console.error(`API Request failed: ${endpoint}`, error);
+            throw error;
+        }
+    }
+    /**
+     * Health check - verify backend is running
+     */
+    async healthCheck() {
+        return this.request('/health');
+    }
+    // ==================== DASHBOARD API ====================
+    /**
+     * Get dashboard summary statistics
+     */
+    async getDashboardSummary() {
+        const response = await this.request('/dashboard/summary');
+        return response.data;
+    }
+    /**
+     * Get processing trends for charts
+     */
+    async getProcessingTrends(period = 'weekly') {
+        const response = await this.request(`/dashboard/charts/processing-trends?period=${period}`);
+        return response.data;
+    }
+    /**
+     * Get status distribution for pie chart
+     */
+    async getStatusDistribution() {
+        const response = await this.request('/dashboard/charts/status-distribution');
+        return response.data;
+    }
+    /**
+     * Get category distribution for pie chart
+     */
+    async getCategoryDistribution() {
+        const response = await this.request('/dashboard/charts/category-distribution');
+        return response.data;
+    }
+    // ==================== DOCUMENTS API ====================
+    /**
+     * Get paginated list of documents with filtering
+     */
+    async getDocuments(params = {}) {
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                searchParams.append(key, value);
+            }
+        });
+        const endpoint = `/documents/?${searchParams.toString()}`;
+        return this.request(endpoint);
+    }
+    /**
+     * Get single document by ID
+     */
+    async getDocument(documentId) {
+        return this.request(`/documents/${documentId}`);
+    }
+    /**
+     * Delete document by ID
+     */
+    async deleteDocument(documentId) {
+        return this.request(`/documents/${documentId}`, {
+            method: 'DELETE'
+        });
+    }
+    // ==================== OCR API ====================
+    /**
+     * Upload files for OCR processing
+     */
+    async uploadFiles(files) {
+        const formData = new FormData();
+        // Add files to form data
+        files.forEach(file => {
+            formData.append('files', file);
+        });
+        return this.request('/ocr/upload', {
+            method: 'POST',
+            headers: {}, // Remove Content-Type to let browser set it for FormData
+            body: formData
+        });
+    }
+    /**
+     * Extract text from PDF immediately (for testing)
+     */
+    async extractTextImmediate(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        return this.request('/ocr/extract', {
+            method: 'POST',
+            headers: {},
+            body: formData
+        });
+    }
+    // ==================== SCRAPING API ====================
+    /**
+     * Scrape content from website
+     */
+    async scrapeWebsite(scrapingRequest) {
+        return this.request('/scraping/scrape', {
+            method: 'POST',
+            body: JSON.stringify(scrapingRequest)
+        });
+    }
+    /**
+     * Get scraping history
+     */
+    async getScrapingHistory(skip = 0, limit = 50) {
+        const response = await this.request(`/scraping/scrape/history?skip=${skip}&limit=${limit}`);
+        return response.data;
+    }
+    // ==================== ANALYTICS API ====================
+    /**
+     * Calculate similarity between two documents
+     */
+    async calculateSimilarity(doc1Id, doc2Id) {
+        const response = await this.request(`/analytics/similarity?doc1_id=${doc1Id}&doc2_id=${doc2Id}`);
+        return response.data;
+    }
+    /**
+     * Get quality analysis
+     */
+    async getQualityAnalysis() {
+        const response = await this.request('/analytics/quality-analysis');
+        return response.data;
+    }
+    /**
+     * Get performance metrics
+     */
+    async getPerformanceMetrics() {
+        const response = await this.request('/analytics/performance-metrics');
+        return response.data;
+    }
+}
+// ==================== DATA MODELS ====================
+/**
+ * Document model to match backend structure
+ */
+class DocumentModel {
+    constructor(backendData) {
+        this.id = backendData.id;
+        this.filename = backendData.filename;
+        this.original_filename = backendData.original_filename;
+        this.file_size = backendData.file_size;
+        this.file_path = backendData.file_path;
+        this.category = backendData.category;
+        this.quality_score = backendData.quality_score || 0;
+        this.confidence_score = backendData.confidence_score || 0;
+        this.status = backendData.status;
+        this.created_at = backendData.created_at;
+        this.processed_at = backendData.processed_at;
+        this.ocr_text = backendData.ocr_text;
+        this.summary = backendData.summary;
+        this.keywords = backendData.keywords || [];
+        this.extracted_entities = backendData.extracted_entities || [];
+        this.processing_time = backendData.processing_time || 0;
+        this.importance_score = backendData.importance_score || 0;
+        this.similarity_scores = backendData.similarity_scores || {};
+        this.legal_references = backendData.legal_references || [];
+    }
+    /**
+     * Format file size for display
+     */
+    getFormattedFileSize() {
+        return formatFileSize(this.file_size);
+    }
+    /**
+     * Get creation date formatted for Persian locale
+     */
+    getFormattedDate() {
+        return formatDate(this.created_at);
+    }
+    /**
+     * Get quality class for styling
+     */
+    getQualityClass() {
+        if (this.quality_score >= 8.5) return 'quality-excellent';
+        if (this.quality_score >= 6.5) return 'quality-good';
+        if (this.quality_score >= 4.5) return 'quality-average';
+        return 'quality-poor';
+    }
+    /**
+     * Get status text in Persian
+     */
+    getStatusText() {
+        const statusMap = {
+            'processed': 'پردازش شده',
+            'processing': 'در حال پردازش',
+            'uploaded': 'آپلود شده',
+            'pending': 'در انتظار',
+            'error': 'خطا'
+        };
+        return statusMap[this.status] || this.status;
+    }
+    /**
+     * Get status icon
+     */
+    getStatusIcon() {
+        const iconMap = {
+            'processed': 'check-circle',
+            'processing': 'spinner fa-spin',
+            'uploaded': 'cloud-upload-alt',
+            'pending': 'clock',
+            'error': 'exclamation-triangle'
+        };
+        return iconMap[this.status] || 'question-circle';
+    }
+}
+/**
+ * Scraping result model
+ */
+class ScrapingResultModel {
+    constructor(backendData) {
+        this.success = backendData.success;
+        this.url = backendData.url;
+        this.title = backendData.title;
+        this.content_length = backendData.content_length;
+        this.processing_time = backendData.processing_time;
+        this.data = backendData.data;
+        this.error = backendData.error;
+    }
+    isSuccessful() {
+        return this.success && !this.error;
+    }
+    getFormattedProcessingTime() {
+        return `${this.processing_time.toFixed(2)} ثانیه`;
+    }
+}
+// ==================== UTILITY FUNCTIONS ====================
+/**
+ * Format file size in bytes to human readable format
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 بایت';
+    const k = 1024;
+    const sizes = ['بایت', 'کیلوبایت', 'مگابایت', 'گیگابایت'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+/**
+ * Format date for Persian locale
+ */
+function formatDate(dateString) {
+    if (!dateString) return 'نامشخص';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('fa-IR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info', title = 'اعلان') {
+    const toastContainer = document.getElementById('toastContainer');
+    if (!toastContainer) return;
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    const icons = {
+        success: 'check-circle',
+        error: 'exclamation-triangle',
+        warning: 'exclamation-circle',
+        info: 'info-circle'
+    };
+    toast.innerHTML = `
+        <div class="toast-icon">
+            <i class="fas fa-${icons[type]}"></i>
+        </div>
+        <div class="toast-content">
+            <div class="toast-title">${title}</div>
+            <div class="toast-message">${message}</div>
+        </div>
+        <button type="button" class="toast-close" onclick="this.parentElement.remove()">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    toastContainer.appendChild(toast);
+    // Show toast
+    setTimeout(() => toast.classList.add('show'), 100);
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+        if (toast.parentElement) {
+            toast.classList.remove('show');
+            setTimeout(() => {
+                if (toast.parentElement) {
+                    toast.remove();
+                }
+            }, 300);
+        }
+    }, 5000);
+}
+/**
+ * Debounce function for search inputs
+ */
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+// ==================== GLOBAL API INSTANCE ====================
+// Create global API instance
+window.legalAPI = new LegalDashboardAPI();
+// Test connection on load
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        await window.legalAPI.healthCheck();
+        console.log('✅ Backend connection successful');
+    } catch (error) {
+        console.warn('⚠️ Backend connection failed, using fallback mode:', error.message);
+        showToast('اتصال به سرور برقرار نشد. حالت آفلاین فعال است.', 'warning', 'هشدار اتصال');
+    }
+});
+console.log('🔗 Legal Dashboard API Client loaded');

app/static/js/api-connection-test.js ADDED Viewed

	@@ -0,0 +1,380 @@

+/**
+ * API Connection Test Script
+ * =========================
+ *
+ * Automated test script to validate all backend API endpoints
+ * and provide detailed reporting on frontend-backend integration.
+ */
+class APIConnectionTester {
+    constructor() {
+        this.baseURL = window.location.origin;
+        this.results = [];
+        this.startTime = null;
+        this.endTime = null;
+    }
+    /**
+     * Run comprehensive API tests
+     */
+    async runAllTests() {
+        console.log('🚀 Starting API Connection Tests...');
+        this.startTime = Date.now();
+        const tests = [
+            // System Health Tests
+            { name: 'Health Check', url: '/api/health', method: 'GET', category: 'System' },
+            // Dashboard Tests
+            { name: 'Dashboard Summary', url: '/api/dashboard/summary', method: 'GET', category: 'Dashboard' },
+            { name: 'Charts Data', url: '/api/dashboard/charts-data', method: 'GET', category: 'Dashboard' },
+            { name: 'AI Suggestions', url: '/api/dashboard/ai-suggestions', method: 'GET', category: 'Dashboard' },
+            { name: 'Performance Metrics', url: '/api/dashboard/performance-metrics', method: 'GET', category: 'Dashboard' },
+            { name: 'Trends', url: '/api/dashboard/trends', method: 'GET', category: 'Dashboard' },
+            // Documents Tests
+            { name: 'Documents List', url: '/api/documents?limit=5', method: 'GET', category: 'Documents' },
+            { name: 'Document Categories', url: '/api/documents/categories/', method: 'GET', category: 'Documents' },
+            { name: 'Document Sources', url: '/api/documents/sources/', method: 'GET', category: 'Documents' },
+            { name: 'Document Search', url: '/api/documents/search/?q=test', method: 'GET', category: 'Documents' },
+            // OCR Tests
+            { name: 'OCR Status', url: '/api/ocr/status', method: 'GET', category: 'OCR' },
+            { name: 'OCR Models', url: '/api/ocr/models', method: 'GET', category: 'OCR' },
+            // Analytics Tests
+            { name: 'Analytics Overview', url: '/api/analytics/overview', method: 'GET', category: 'Analytics' },
+            { name: 'Analytics Performance', url: '/api/analytics/performance', method: 'GET', category: 'Analytics' },
+            { name: 'Analytics Entities', url: '/api/analytics/entities?limit=10', method: 'GET', category: 'Analytics' },
+            { name: 'Analytics Quality', url: '/api/analytics/quality-analysis', method: 'GET', category: 'Analytics' },
+            // Scraping Tests
+            { name: 'Scraping Statistics', url: '/api/scraping/statistics', method: 'GET', category: 'Scraping' },
+            { name: 'Scraping Status', url: '/api/scraping/status', method: 'GET', category: 'Scraping' },
+            { name: 'Rating Summary', url: '/api/scraping/rating/summary', method: 'GET', category: 'Scraping' },
+            { name: 'Scraping Health', url: '/api/scraping/health', method: 'GET', category: 'Scraping' },
+            // Phase 2 - File Upload Tests
+            { name: 'OCR Upload', url: '/api/ocr/upload', method: 'POST', category: 'File Upload' },
+            { name: 'OCR Process', url: '/api/ocr/process', method: 'POST', category: 'File Upload' },
+            { name: 'OCR Quality Metrics', url: '/api/ocr/quality-metrics', method: 'GET', category: 'File Upload' },
+            // Phase 2 - Document Management Tests
+            { name: 'Create Document', url: '/api/documents', method: 'POST', category: 'Document Management' },
+            { name: 'Update Document', url: '/api/documents/1', method: 'PUT', category: 'Document Management' },
+            { name: 'Delete Document', url: '/api/documents/1', method: 'DELETE', category: 'Document Management' },
+            // Phase 2 - Advanced Scraping Tests
+            { name: 'Scraping Start', url: '/api/scraping/start', method: 'POST', category: 'Advanced Scraping' },
+            { name: 'Scraping Stop', url: '/api/scraping/stop', method: 'POST', category: 'Advanced Scraping' },
+            { name: 'Scraping Results', url: '/api/scraping/results', method: 'GET', category: 'Advanced Scraping' }
+        ];
+        console.log(`📋 Running ${tests.length} API tests...`);
+        for (const test of tests) {
+            await this.runSingleTest(test);
+            // Small delay to avoid overwhelming the server
+            await this.delay(100);
+        }
+        this.endTime = Date.now();
+        this.generateReport();
+    }
+    /**
+     * Run a single API test
+     */
+    async runSingleTest(test) {
+        const startTime = Date.now();
+        let result = {
+            name: test.name,
+            category: test.category,
+            url: test.url,
+            method: test.method,
+            success: false,
+            status: null,
+            responseTime: 0,
+            data: null,
+            error: null,
+            timestamp: new Date().toISOString()
+        };
+        try {
+            const response = await fetch(test.url, {
+                method: test.method,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            result.status = response.status;
+            result.responseTime = Date.now() - startTime;
+            if (response.ok) {
+                result.success = true;
+                try {
+                    result.data = await response.json();
+                } catch (e) {
+                    result.data = 'Non-JSON response';
+                }
+            } else {
+                result.error = `${response.status}: ${response.statusText}`;
+            }
+        } catch (error) {
+            result.error = error.message;
+            result.responseTime = Date.now() - startTime;
+        }
+        this.results.push(result);
+        // Log result
+        const status = result.success ? '✅' : '❌';
+        console.log(`${status} ${test.name}: ${result.success ? 'PASS' : 'FAIL'} (${result.responseTime}ms)`);
+        return result;
+    }
+    /**
+     * Generate comprehensive test report
+     */
+    generateReport() {
+        const totalTests = this.results.length;
+        const passedTests = this.results.filter(r => r.success).length;
+        const failedTests = totalTests - passedTests;
+        const totalTime = this.endTime - this.startTime;
+        const avgResponseTime = this.results.reduce((sum, r) => sum + r.responseTime, 0) / totalTests;
+        console.log('\n📊 API Connection Test Report');
+        console.log('='.repeat(50));
+        console.log(`Total Tests: ${totalTests}`);
+        console.log(`Passed: ${passedTests} ✅`);
+        console.log(`Failed: ${failedTests} ❌`);
+        console.log(`Success Rate: ${((passedTests / totalTests) * 100).toFixed(1)}%`);
+        console.log(`Total Time: ${totalTime}ms`);
+        console.log(`Average Response Time: ${avgResponseTime.toFixed(0)}ms`);
+        // Group results by category
+        const categories = {};
+        this.results.forEach(result => {
+            if (!categories[result.category]) {
+                categories[result.category] = [];
+            }
+            categories[result.category].push(result);
+        });
+        console.log('\n📈 Results by Category:');
+        Object.entries(categories).forEach(([category, results]) => {
+            const passed = results.filter(r => r.success).length;
+            const total = results.length;
+            const rate = ((passed / total) * 100).toFixed(1);
+            console.log(`${category}: ${passed}/${total} (${rate}%)`);
+        });
+        // Show failed tests
+        const failedTests = this.results.filter(r => !r.success);
+        if (failedTests.length > 0) {
+            console.log('\n❌ Failed Tests:');
+            failedTests.forEach(test => {
+                console.log(`  - ${test.name}: ${test.error}`);
+            });
+        }
+        // Show slow tests
+        const slowTests = this.results.filter(r => r.responseTime > 1000);
+        if (slowTests.length > 0) {
+            console.log('\n🐌 Slow Tests (>1s):');
+            slowTests.forEach(test => {
+                console.log(`  - ${test.name}: ${test.responseTime}ms`);
+            });
+        }
+        this.displayResultsInUI();
+    }
+    /**
+     * Display results in the UI
+     */
+    displayResultsInUI() {
+        const container = document.getElementById('apiTestResults');
+        if (!container) {
+            console.warn('No #apiTestResults container found');
+            return;
+        }
+        const totalTests = this.results.length;
+        const passedTests = this.results.filter(r => r.success).length;
+        const failedTests = totalTests - passedTests;
+        const successRate = ((passedTests / totalTests) * 100).toFixed(1);
+        container.innerHTML = `
+            <div class="test-report">
+                <h3>API Connection Test Results</h3>
+                <div class="test-summary">
+                    <div class="test-stat">
+                        <span class="stat-label">Total Tests:</span>
+                        <span class="stat-value">${totalTests}</span>
+                    </div>
+                    <div class="test-stat">
+                        <span class="stat-label">Passed:</span>
+                        <span class="stat-value success">${passedTests} ✅</span>
+                    </div>
+                    <div class="test-stat">
+                        <span class="stat-label">Failed:</span>
+                        <span class="stat-value error">${failedTests} ❌</span>
+                    </div>
+                    <div class="test-stat">
+                        <span class="stat-label">Success Rate:</span>
+                        <span class="stat-value">${successRate}%</span>
+                    </div>
+                </div>
+                <div class="test-details">
+                    <h4>Test Details:</h4>
+                    <div class="test-list">
+                        ${this.results.map(result => `
+                            <div class="test-item ${result.success ? 'success' : 'error'}">
+                                <span class="test-name">${result.name}</span>
+                                <span class="test-status">${result.success ? 'PASS' : 'FAIL'}</span>
+                                <span class="test-time">${result.responseTime}ms</span>
+                                ${result.error ? `<span class="test-error">${result.error}</span>` : ''}
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    /**
+     * Test specific endpoint patterns
+     */
+    async testEndpointPatterns() {
+        console.log('\n🔍 Testing Endpoint Patterns...');
+        const patterns = [
+            // Test the broken endpoints that frontend is trying to call
+            { name: 'Frontend Dashboard Summary (BROKEN)', url: '/api/dashboard-summary', expected: false },
+            { name: 'Frontend Charts Data (BROKEN)', url: '/api/charts-data', expected: false },
+            { name: 'Frontend AI Suggestions (BROKEN)', url: '/api/ai-suggestions', expected: false },
+            { name: 'Frontend Train AI (BROKEN)', url: '/api/train-ai', expected: false },
+            { name: 'Frontend Scrape Trigger (BROKEN)', url: '/api/scrape-trigger', expected: false },
+            // Test the correct endpoints
+            { name: 'Backend Dashboard Summary (CORRECT)', url: '/api/dashboard/summary', expected: true },
+            { name: 'Backend Charts Data (CORRECT)', url: '/api/dashboard/charts-data', expected: true },
+            { name: 'Backend AI Suggestions (CORRECT)', url: '/api/dashboard/ai-suggestions', expected: true },
+            { name: 'Backend AI Feedback (CORRECT)', url: '/api/dashboard/ai-feedback', expected: true },
+            { name: 'Backend Scrape (CORRECT)', url: '/api/scraping/scrape', expected: true }
+        ];
+        for (const pattern of patterns) {
+            try {
+                const response = await fetch(pattern.url);
+                const actual = response.ok;
+                const status = actual === pattern.expected ? '✅' : '❌';
+                console.log(`${status} ${pattern.name}: ${actual ? 'EXISTS' : 'MISSING'} (Expected: ${pattern.expected ? 'EXISTS' : 'MISSING'})`);
+            } catch (error) {
+                const status = pattern.expected ? '❌' : '✅';
+                console.log(`${status} ${pattern.name}: MISSING (Expected: ${pattern.expected ? 'EXISTS' : 'MISSING'})`);
+            }
+        }
+    }
+    /**
+     * Test file upload functionality
+     */
+    async testFileUpload() {
+        console.log('\n📁 Testing File Upload...');
+        // Create a test file
+        const testFile = new File(['Test PDF content'], 'test.pdf', { type: 'application/pdf' });
+        const formData = new FormData();
+        formData.append('file', testFile);
+        formData.append('title', 'Test Document');
+        formData.append('source', 'Test');
+        formData.append('category', 'Test');
+        try {
+            const response = await fetch('/api/ocr/process-and-save', {
+                method: 'POST',
+                body: formData
+            });
+            if (response.ok) {
+                console.log('✅ File upload endpoint is accessible');
+                const result = await response.json();
+                console.log('📄 Upload response:', result);
+            } else {
+                console.log('❌ File upload failed:', response.status, response.statusText);
+            }
+        } catch (error) {
+            console.log('❌ File upload error:', error.message);
+        }
+    }
+    /**
+     * Utility function for delays
+     */
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+}
+// Global instance
+window.apiTester = new APIConnectionTester();
+// Auto-run tests when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('🔧 API Connection Tester loaded');
+    // Add test button if not exists
+    if (!document.getElementById('runAPITests')) {
+        const testButton = document.createElement('button');
+        testButton.id = 'runAPITests';
+        testButton.textContent = 'Run API Tests';
+        testButton.style.cssText = `
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            z-index: 10000;
+            padding: 10px 20px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        `;
+        testButton.onclick = () => {
+            window.apiTester.runAllTests();
+        };
+        document.body.appendChild(testButton);
+    }
+    // Add results container if not exists
+    if (!document.getElementById('apiTestResults')) {
+        const resultsContainer = document.createElement('div');
+        resultsContainer.id = 'apiTestResults';
+        resultsContainer.style.cssText = `
+            position: fixed;
+            top: 60px;
+            right: 10px;
+            width: 400px;
+            max-height: 500px;
+            overflow-y: auto;
+            background: white;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 15px;
+            z-index: 10000;
+            display: none;
+        `;
+        document.body.appendChild(resultsContainer);
+    }
+});
+// Export for use in other scripts
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = APIConnectionTester;
+}

app/static/js/chart.js ADDED Viewed

	@@ -0,0 +1,340 @@

+/**
+ * Chart Manager for Legal Dashboard
+ * مدیریت کامل Chart.js و نمودارها
+ */
+class ChartManager {
+    constructor() {
+        this.charts = {};
+        this.isChartJSLoaded = false;
+        this.loadingAttempts = 0;
+        this.maxLoadingAttempts = 10;
+        // Wait for Chart.js to load
+        this.waitForChartJS();
+    }
+    /**
+     * Wait for Chart.js to be available
+     */
+    async waitForChartJS() {
+        console.log('📊 Waiting for Chart.js to load...');
+        const checkInterval = setInterval(() => {
+            this.loadingAttempts++;
+            if (typeof Chart !== 'undefined') {
+                this.isChartJSLoaded = true;
+                clearInterval(checkInterval);
+                console.log('✅ Chart.js loaded successfully');
+                this.onChartJSReady();
+            } else if (this.loadingAttempts >= this.maxLoadingAttempts) {
+                clearInterval(checkInterval);
+                console.warn('⚠️ Chart.js failed to load after maximum attempts');
+                this.onChartJSFailed();
+            }
+        }, 500);
+    }
+    /**
+     * Called when Chart.js is ready
+     */
+    onChartJSReady() {
+        // Hide placeholders and show canvases
+        this.showChartCanvases();
+        // Initialize charts
+        this.initializeAllCharts();
+        // Notify other components
+        if (window.notifications) {
+            window.notifications.show('نمودارها بارگذاری شدند', 'success', 'Chart.js');
+        }
+    }
+    /**
+     * Called when Chart.js fails to load
+     */
+    onChartJSFailed() {
+        console.error('❌ Chart.js could not be loaded');
+        this.showChartPlaceholders();
+        if (window.notifications) {
+            window.notifications.show('Chart.js بارگذاری نشد - نمودارها غیرفعال', 'warning', 'هشدار');
+        }
+    }
+    /**
+     * Show chart canvases and hide placeholders
+     */
+    showChartCanvases() {
+        // Hide all placeholders
+        document.querySelectorAll('.chart-placeholder').forEach(placeholder => {
+            placeholder.style.display = 'none';
+        });
+        // Show all canvases
+        document.querySelectorAll('canvas[id$="Canvas"]').forEach(canvas => {
+            canvas.style.display = 'block';
+        });
+    }
+    /**
+     * Show placeholders when Chart.js fails
+     */
+    showChartPlaceholders() {
+        document.querySelectorAll('.chart-placeholder').forEach(placeholder => {
+            placeholder.innerHTML = `
+                <i class="fas fa-exclamation-triangle" style="color: #f59e0b;"></i>
+                <p>Chart.js بارگذاری نشد</p>
+                <small>نمودارها در دسترس نیستند</small>
+            `;
+        });
+    }
+    /**
+     * Initialize all charts
+     */
+    initializeAllCharts() {
+        if (!this.isChartJSLoaded) {
+            console.warn('Chart.js not loaded, cannot initialize charts');
+            return;
+        }
+        try {
+            // Performance Chart
+            this.initializePerformanceChart();
+            // Status Chart
+            this.initializeStatusChart();
+            console.log('📊 All charts initialized successfully');
+        } catch (error) {
+            console.error('❌ Error initializing charts:', error);
+        }
+    }
+    /**
+     * Initialize performance chart
+     */
+    initializePerformanceChart() {
+        const ctx = document.getElementById('performanceChartCanvas');
+        if (!ctx) return;
+        this.charts.performance = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                datasets: [
+                    {
+                        label: 'زمان پاسخ (ms)',
+                        data: [120, 190, 300, 250, 200, 350, 180],
+                        borderColor: '#10b981',
+                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                        tension: 0.4,
+                        borderWidth: 3,
+                        pointRadius: 6,
+                        pointHoverRadius: 8
+                    },
+                    {
+                        label: 'CPU Usage (%)',
+                        data: [25, 35, 45, 40, 30, 50, 28],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4,
+                        borderWidth: 3,
+                        pointRadius: 6,
+                        pointHoverRadius: 8
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 20,
+                            font: {
+                                family: 'Vazirmatn',
+                                size: 12
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
+                        },
+                        ticks: {
+                            font: {
+                                family: 'Vazirmatn'
+                            }
+                        }
+                    },
+                    x: {
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
+                        },
+                        ticks: {
+                            font: {
+                                family: 'Vazirmatn'
+                            }
+                        }
+                    }
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                }
+            }
+        });
+    }
+    /**
+     * Initialize status chart
+     */
+    initializeStatusChart() {
+        const ctx = document.getElementById('statusChartCanvas');
+        if (!ctx) return;
+        this.charts.status = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['API آنلاین', 'OCR آماده', 'PDF فعال', 'Cache فعال'],
+                datasets: [{
+                    data: [1, 1, 1, 1],
+                    backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444'],
+                    borderColor: '#ffffff',
+                    borderWidth: 3,
+                    hoverBorderWidth: 5
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 15,
+                            font: {
+                                family: 'Vazirmatn',
+                                size: 11
+                            }
+                        }
+                    }
+                },
+                cutout: '60%'
+            }
+        });
+    }
+    /**
+     * Update performance chart
+     */
+    updatePerformanceChart(period) {
+        if (!this.isChartJSLoaded || !this.charts.performance) {
+            if (window.notifications) {
+                window.notifications.show('نمودارها در دسترس نیستند', 'warning', 'هشدار');
+            }
+            return;
+        }
+        const data = {
+            daily: {
+                labels: ['ساعت 6', 'ساعت 9', 'ساعت 12', 'ساعت 15', 'ساعت 18', 'ساعت 21', 'ساعت 24'],
+                responseTime: [120, 150, 200, 180, 160, 140, 130],
+                cpuUsage: [25, 30, 45, 40, 35, 28, 22]
+            },
+            weekly: {
+                labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                responseTime: [120, 190, 300, 250, 200, 350, 180],
+                cpuUsage: [25, 35, 45, 40, 30, 50, 28]
+            },
+            monthly: {
+                labels: ['هفته 1', 'هفته 2', 'هفته 3', 'هفته 4'],
+                responseTime: [180, 220, 190, 210],
+                cpuUsage: [35, 42, 38, 40]
+            }
+        };
+        const selectedData = data[period] || data.weekly;
+        this.charts.performance.data.labels = selectedData.labels;
+        this.charts.performance.data.datasets[0].data = selectedData.responseTime;
+        this.charts.performance.data.datasets[1].data = selectedData.cpuUsage;
+        this.charts.performance.update('active');
+        if (window.notifications) {
+            const periodText = period === 'daily' ? 'روزانه' : period === 'weekly' ? 'هفتگی' : 'ماهانه';
+            window.notifications.show(`نمودار به حالت ${periodText} تغییر کرد`, 'info', 'بروزرسانی');
+        }
+    }
+    /**
+     * Update status chart
+     */
+    updateStatusChart(type) {
+        if (!this.isChartJSLoaded || !this.charts.status) {
+            if (window.notifications) {
+                window.notifications.show('نمودارها در دسترس نیستند', 'warning', 'هشدار');
+            }
+            return;
+        }
+        const data = {
+            services: {
+                labels: ['API آنلاین', 'OCR آماده', 'PDF فعال', 'Cache فعال'],
+                data: [1, 1, 1, 1],
+                colors: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444']
+            },
+            endpoints: {
+                labels: ['/health', '/api/ocr/*', '/system/status', '/api/docs'],
+                data: [1, 1, 1, 1],
+                colors: ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6']
+            }
+        };
+        const selectedData = data[type] || data.services;
+        this.charts.status.data.labels = selectedData.labels;
+        this.charts.status.data.datasets[0].data = selectedData.data;
+        this.charts.status.data.datasets[0].backgroundColor = selectedData.colors;
+        this.charts.status.update('active');
+        if (window.notifications) {
+            const typeText = type === 'services' ? 'سرویس‌ها' : 'endpoint ها';
+            window.notifications.show(`نمودار به حالت ${typeText} تغییر کرد`, 'info', 'بروزرسانی');
+        }
+    }
+    /**
+     * Destroy all charts
+     */
+    destroyAllCharts() {
+        Object.values(this.charts).forEach(chart => {
+            if (chart && typeof chart.destroy === 'function') {
+                chart.destroy();
+            }
+        });
+        this.charts = {};
+    }
+    /**
+     * Check if charts are ready
+     */
+    areChartsReady() {
+        return this.isChartJSLoaded && Object.keys(this.charts).length > 0;
+    }
+}
+// Create global instance
+window.chartManager = new ChartManager();
+console.log('📊 Chart Manager loaded');

app/static/js/core.js ADDED Viewed

	@@ -0,0 +1,388 @@

+/**
+ * Legal Dashboard Core Module
+ * ==========================
+ *
+ * Shared core functionality for cross-page communication and data synchronization.
+ * This module provides event-driven updates and shared state management across all pages.
+ */
+class DashboardCore {
+    constructor() {
+        this.eventBus = new EventTarget();
+        this.cache = new Map();
+        this.apiClient = null;
+        this.isInitialized = false;
+        // Initialize when DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.initialize());
+        } else {
+            this.initialize();
+        }
+    }
+    /**
+     * Initialize the core module
+     */
+    initialize() {
+        if (this.isInitialized) return;
+        console.log('🚀 Initializing Dashboard Core...');
+        // Initialize API client
+        this.apiClient = new LegalDashboardAPI();
+        // Set up localStorage synchronization
+        this.setupLocalStorageSync();
+        // Set up periodic health checks
+        this.setupHealthChecks();
+        // Set up cross-page event listeners
+        this.setupEventListeners();
+        this.isInitialized = true;
+        console.log('✅ Dashboard Core initialized');
+        // Broadcast initialization event
+        this.broadcast('coreInitialized', { timestamp: Date.now() });
+    }
+    /**
+     * Broadcast events across pages
+     */
+    broadcast(eventName, data = {}) {
+        const event = new CustomEvent(eventName, {
+            detail: {
+                ...data,
+                timestamp: Date.now(),
+                source: window.location.pathname
+            }
+        });
+        this.eventBus.dispatchEvent(event);
+        // Also store in localStorage for cross-tab communication
+        this.storeEvent(eventName, data);
+        console.log(`📡 Broadcast: ${eventName}`, data);
+    }
+    /**
+     * Listen for cross-page events
+     */
+    listen(eventName, callback) {
+        const wrappedCallback = (event) => {
+            callback(event.detail);
+        };
+        this.eventBus.addEventListener(eventName, wrappedCallback);
+        // Return unsubscribe function
+        return () => {
+            this.eventBus.removeEventListener(eventName, wrappedCallback);
+        };
+    }
+    /**
+     * Store event in localStorage for cross-tab communication
+     */
+    storeEvent(eventName, data) {
+        try {
+            const events = JSON.parse(localStorage.getItem('dashboard_events') || '[]');
+            events.push({
+                name: eventName,
+                data: data,
+                timestamp: Date.now(),
+                source: window.location.pathname
+            });
+            // Keep only last 50 events
+            if (events.length > 50) {
+                events.splice(0, events.length - 50);
+            }
+            localStorage.setItem('dashboard_events', JSON.stringify(events));
+        } catch (error) {
+            console.warn('Failed to store event in localStorage:', error);
+        }
+    }
+    /**
+     * Setup localStorage synchronization
+     */
+    setupLocalStorageSync() {
+        // Listen for storage changes (cross-tab communication)
+        window.addEventListener('storage', (event) => {
+            if (event.key === 'dashboard_events') {
+                try {
+                    const events = JSON.parse(event.newValue || '[]');
+                    const latestEvent = events[events.length - 1];
+                    if (latestEvent && latestEvent.source !== window.location.pathname) {
+                        // Re-broadcast event from other tab
+                        this.eventBus.dispatchEvent(new CustomEvent(latestEvent.name, {
+                            detail: latestEvent.data
+                        }));
+                    }
+                } catch (error) {
+                    console.warn('Failed to process storage event:', error);
+                }
+            }
+        });
+    }
+    /**
+     * Setup periodic health checks
+     */
+    setupHealthChecks() {
+        // Check API health every 30 seconds
+        setInterval(async () => {
+            try {
+                const health = await this.apiClient.healthCheck();
+                this.broadcast('healthUpdate', health);
+            } catch (error) {
+                this.broadcast('healthUpdate', { status: 'unhealthy', error: error.message });
+            }
+        }, 30000);
+    }
+    /**
+     * Setup common event listeners
+     */
+    setupEventListeners() {
+        // Listen for document uploads
+        this.listen('documentUploaded', (data) => {
+            this.handleDocumentUpload(data);
+        });
+        // Listen for document updates
+        this.listen('documentUpdated', (data) => {
+            this.handleDocumentUpdate(data);
+        });
+        // Listen for document deletions
+        this.listen('documentDeleted', (data) => {
+            this.handleDocumentDelete(data);
+        });
+        // Listen for scraping updates
+        this.listen('scrapingUpdate', (data) => {
+            this.handleScrapingUpdate(data);
+        });
+        // Listen for system health updates
+        this.listen('healthUpdate', (data) => {
+            this.handleHealthUpdate(data);
+        });
+    }
+    /**
+     * Handle document upload events
+     */
+    handleDocumentUpload(data) {
+        console.log('📄 Document uploaded:', data);
+        // Update cache
+        this.cache.set(`document_${data.fileId}`, data);
+        // Refresh document lists on relevant pages
+        if (window.location.pathname.includes('documents.html') ||
+            window.location.pathname.includes('improved_legal_dashboard.html')) {
+            this.refreshDocumentList();
+        }
+        // Update dashboard stats
+        this.updateDashboardStats();
+        // Show notification
+        showToast(`فایل "${data.fileName}" با موفقیت آپلود شد`, 'success');
+    }
+    /**
+     * Handle document update events
+     */
+    handleDocumentUpdate(data) {
+        console.log('📝 Document updated:', data);
+        // Update cache
+        this.cache.set(`document_${data.documentId}`, data);
+        // Refresh document lists
+        this.refreshDocumentList();
+        // Show notification
+        showToast('سند با موفقیت به‌روزرسانی شد', 'success');
+    }
+    /**
+     * Handle document delete events
+     */
+    handleDocumentDelete(data) {
+        console.log('🗑️ Document deleted:', data);
+        // Remove from cache
+        this.cache.delete(`document_${data.documentId}`);
+        // Refresh document lists
+        this.refreshDocumentList();
+        // Update dashboard stats
+        this.updateDashboardStats();
+        // Show notification
+        showToast('سند با موفقیت حذف شد', 'info');
+    }
+    /**
+     * Handle scraping update events
+     */
+    handleScrapingUpdate(data) {
+        console.log('🕷️ Scraping update:', data);
+        // Update scraping dashboard if on that page
+        if (window.location.pathname.includes('scraping_dashboard.html')) {
+            this.refreshScrapingDashboard();
+        }
+        // Show notification
+        showToast(`وضعیت scraping: ${data.status}`, 'info');
+    }
+    /**
+     * Handle health update events
+     */
+    handleHealthUpdate(data) {
+        console.log('💓 Health update:', data);
+        // Update health indicators on all pages
+        this.updateHealthIndicators(data);
+    }
+    /**
+     * Refresh document list (if function exists)
+     */
+    refreshDocumentList() {
+        if (typeof loadDocuments === 'function') {
+            loadDocuments();
+        }
+        if (typeof refreshDocumentTable === 'function') {
+            refreshDocumentTable();
+        }
+    }
+    /**
+     * Update dashboard statistics
+     */
+    async updateDashboardStats() {
+        try {
+            const summary = await this.apiClient.getDashboardSummary();
+            this.broadcast('dashboardStatsUpdated', summary);
+            // Update dashboard if on dashboard page
+            if (window.location.pathname.includes('improved_legal_dashboard.html')) {
+                if (typeof updateDashboardStats === 'function') {
+                    updateDashboardStats(summary);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to update dashboard stats:', error);
+        }
+    }
+    /**
+     * Refresh scraping dashboard
+     */
+    refreshScrapingDashboard() {
+        if (typeof loadScrapingData === 'function') {
+            loadScrapingData();
+        }
+        if (typeof updateScrapingStatus === 'function') {
+            updateScrapingStatus();
+        }
+    }
+    /**
+     * Update health indicators
+     */
+    updateHealthIndicators(healthData) {
+        const healthElements = document.querySelectorAll('.health-indicator');
+        healthElements.forEach(element => {
+            const status = healthData.status || 'unknown';
+            element.className = `health-indicator ${status}`;
+            element.textContent = status === 'healthy' ? '🟢' : '🔴';
+        });
+    }
+    /**
+     * Get cached data
+     */
+    getCachedData(key) {
+        return this.cache.get(key);
+    }
+    /**
+     * Set cached data
+     */
+    setCachedData(key, data) {
+        this.cache.set(key, data);
+    }
+    /**
+     * Clear cache
+     */
+    clearCache() {
+        this.cache.clear();
+    }
+    /**
+     * Get API client
+     */
+    getApiClient() {
+        return this.apiClient;
+    }
+    /**
+     * Force refresh all data
+     */
+    async forceRefresh() {
+        console.log('🔄 Force refreshing all data...');
+        try {
+            // Clear cache
+            this.clearCache();
+            // Refresh document list
+            this.refreshDocumentList();
+            // Update dashboard stats
+            await this.updateDashboardStats();
+            // Refresh scraping data
+            this.refreshScrapingDashboard();
+            this.broadcast('dataRefreshed', { timestamp: Date.now() });
+            showToast('داده‌ها با موفقیت به‌روزرسانی شدند', 'success');
+        } catch (error) {
+            console.error('Failed to force refresh:', error);
+            showToast('خطا در به‌روزرسانی داده‌ها', 'error');
+        }
+    }
+}
+// Global instance
+const dashboardCore = new DashboardCore();
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = DashboardCore;
+}
+// Make available globally
+window.dashboardCore = dashboardCore;
+console.log('📦 Dashboard Core module loaded');

app/static/js/document-crud.js ADDED Viewed

	@@ -0,0 +1,386 @@

+/**
+ * Document CRUD Handler for Legal Dashboard
+ * Manages Create, Read, Update, Delete operations for documents
+ */
+class DocumentCRUDHandler {
+    constructor() {
+        this.baseEndpoint = '/api/documents';
+        this.documents = [];
+        this.currentEditId = null;
+        this.searchQuery = '';
+        this.filters = {
+            status: 'all',
+            category: 'all',
+            dateFrom: '',
+            dateTo: ''
+        };
+        this.initializeEventListeners();
+        this.loadDocuments();
+    }
+    initializeEventListeners() {
+        // Create document button
+        const createBtn = document.getElementById('createDocumentBtn');
+        if (createBtn) {
+            createBtn.addEventListener('click', () => this.showCreateModal());
+        }
+        // Search input
+        const searchInput = document.getElementById('documentSearch');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                this.searchQuery = e.target.value;
+                this.filterDocuments();
+            });
+        }
+        // Filter selects
+        const statusFilter = document.getElementById('statusFilter');
+        if (statusFilter) {
+            statusFilter.addEventListener('change', (e) => {
+                this.filters.status = e.target.value;
+                this.filterDocuments();
+            });
+        }
+        const categoryFilter = document.getElementById('categoryFilter');
+        if (categoryFilter) {
+            categoryFilter.addEventListener('change', (e) => {
+                this.filters.category = e.target.value;
+                this.filterDocuments();
+            });
+        }
+        // Date filters
+        const dateFromFilter = document.getElementById('dateFromFilter');
+        if (dateFromFilter) {
+            dateFromFilter.addEventListener('change', (e) => {
+                this.filters.dateFrom = e.target.value;
+                this.filterDocuments();
+            });
+        }
+        const dateToFilter = document.getElementById('dateToFilter');
+        if (dateToFilter) {
+            dateToFilter.addEventListener('change', (e) => {
+                this.filters.dateTo = e.target.value;
+                this.filterDocuments();
+            });
+        }
+    }
+    async loadDocuments() {
+        try {
+            const response = await fetchWithErrorHandling(this.baseEndpoint);
+            this.documents = response.documents || [];
+            this.renderDocuments();
+        } catch (error) {
+            console.error('Failed to load documents:', error);
+            this.showToast('خطا در بارگذاری اسناد', 'error');
+        }
+    }
+    async createDocument(documentData) {
+        try {
+            const response = await fetchWithErrorHandling(this.baseEndpoint, {
+                method: 'POST',
+                body: JSON.stringify(documentData)
+            });
+            this.showToast('سند با موفقیت ایجاد شد', 'success');
+            this.loadDocuments();
+            return response;
+        } catch (error) {
+            this.showToast(`خطا در ایجاد سند: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+    async updateDocument(id, documentData) {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/${id}`, {
+                method: 'PUT',
+                body: JSON.stringify(documentData)
+            });
+            this.showToast('سند با موفقیت به‌روزرسانی شد', 'success');
+            this.loadDocuments();
+            return response;
+        } catch (error) {
+            this.showToast(`خطا در به‌روزرسانی سند: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+    async deleteDocument(id) {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/${id}`, {
+                method: 'DELETE'
+            });
+            this.showToast('سند با موفقیت حذف شد', 'success');
+            this.loadDocuments();
+            return response;
+        } catch (error) {
+            this.showToast(`خطا در حذف سند: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+    async searchDocuments(query) {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/search?q=${encodeURIComponent(query)}`);
+            return response.results || [];
+        } catch (error) {
+            console.error('Search failed:', error);
+            return [];
+        }
+    }
+    renderDocuments() {
+        const container = document.getElementById('documentsList');
+        if (!container) return;
+        if (this.documents.length === 0) {
+            container.innerHTML = '<p class="no-documents">هیچ سندی یافت نشد</p>';
+            return;
+        }
+        const documentsHTML = this.documents.map(doc => this.renderDocumentItem(doc)).join('');
+        container.innerHTML = documentsHTML;
+    }
+    renderDocumentItem(doc) {
+        const statusClass = this.getStatusClass(doc.status);
+        const qualityColor = this.getQualityColor(doc.quality);
+        return `
+            <div class="document-item" data-id="${doc.id}">
+                <div class="document-header">
+                    <h4 class="document-title" data-id="${doc.id}">${doc.title}</h4>
+                    <div class="document-actions">
+                        <button class="btn-edit" onclick="documentCRUDHandler.editDocument(${doc.id})">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="btn-delete" onclick="documentCRUDHandler.confirmDelete(${doc.id})">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="document-details">
+                    <div class="document-info">
+                        <span class="document-status ${statusClass}">${this.getStatusText(doc.status)}</span>
+                        <span class="document-quality" style="color: ${qualityColor}">
+                            کیفیت: ${(doc.quality || 0).toFixed(1)}%
+                        </span>
+                        <span class="document-date">${this.formatDate(doc.created_at)}</span>
+                    </div>
+                    <div class="document-content">
+                        <p class="document-description">${doc.description || 'توضیحات موجود نیست'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    showCreateModal() {
+        const modal = document.getElementById('createDocumentModal');
+        if (modal) {
+            modal.style.display = 'block';
+            this.resetCreateForm();
+        }
+    }
+    hideCreateModal() {
+        const modal = document.getElementById('createDocumentModal');
+        if (modal) {
+            modal.style.display = 'none';
+        }
+    }
+    resetCreateForm() {
+        const form = document.getElementById('createDocumentForm');
+        if (form) {
+            form.reset();
+        }
+    }
+    async handleCreateDocument(event) {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const documentData = {
+            title: formData.get('title'),
+            description: formData.get('description'),
+            category: formData.get('category'),
+            status: 'pending'
+        };
+        try {
+            await this.createDocument(documentData);
+            this.hideCreateModal();
+        } catch (error) {
+            console.error('Create document failed:', error);
+        }
+    }
+    editDocument(id) {
+        const document = this.documents.find(doc => doc.id === id);
+        if (!document) return;
+        this.currentEditId = id;
+        this.showEditModal(document);
+    }
+    showEditModal(document) {
+        const modal = document.getElementById('editDocumentModal');
+        if (modal) {
+            // Populate form fields
+            const titleInput = modal.querySelector('#editTitle');
+            const descriptionInput = modal.querySelector('#editDescription');
+            const categoryInput = modal.querySelector('#editCategory');
+            const statusInput = modal.querySelector('#editStatus');
+            if (titleInput) titleInput.value = document.title;
+            if (descriptionInput) descriptionInput.value = document.description || '';
+            if (categoryInput) categoryInput.value = document.category || '';
+            if (statusInput) statusInput.value = document.status || 'pending';
+            modal.style.display = 'block';
+        }
+    }
+    hideEditModal() {
+        const modal = document.getElementById('editDocumentModal');
+        if (modal) {
+            modal.style.display = 'none';
+            this.currentEditId = null;
+        }
+    }
+    async handleEditDocument(event) {
+        event.preventDefault();
+        if (!this.currentEditId) return;
+        const formData = new FormData(event.target);
+        const documentData = {
+            title: formData.get('title'),
+            description: formData.get('description'),
+            category: formData.get('category'),
+            status: formData.get('status')
+        };
+        try {
+            await this.updateDocument(this.currentEditId, documentData);
+            this.hideEditModal();
+        } catch (error) {
+            console.error('Update document failed:', error);
+        }
+    }
+    confirmDelete(id) {
+        const document = this.documents.find(doc => doc.id === id);
+        if (!document) return;
+        const confirmed = confirm(`آیا از حذف سند "${document.title}" اطمینان دارید؟`);
+        if (confirmed) {
+            this.deleteDocument(id);
+        }
+    }
+    filterDocuments() {
+        let filtered = this.documents;
+        // Apply search filter
+        if (this.searchQuery) {
+            filtered = filtered.filter(doc =>
+                doc.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+                (doc.description && doc.description.toLowerCase().includes(this.searchQuery.toLowerCase()))
+            );
+        }
+        // Apply status filter
+        if (this.filters.status !== 'all') {
+            filtered = filtered.filter(doc => doc.status === this.filters.status);
+        }
+        // Apply category filter
+        if (this.filters.category !== 'all') {
+            filtered = filtered.filter(doc => doc.category === this.filters.category);
+        }
+        // Apply date filters
+        if (this.filters.dateFrom) {
+            filtered = filtered.filter(doc =>
+                new Date(doc.created_at) >= new Date(this.filters.dateFrom)
+            );
+        }
+        if (this.filters.dateTo) {
+            filtered = filtered.filter(doc =>
+                new Date(doc.created_at) <= new Date(this.filters.dateTo)
+            );
+        }
+        this.renderFilteredDocuments(filtered);
+    }
+    renderFilteredDocuments(filtered) {
+        const container = document.getElementById('documentsList');
+        if (!container) return;
+        if (filtered.length === 0) {
+            container.innerHTML = '<p class="no-results">هیچ نتیجه‌ای یافت نشد</p>';
+            return;
+        }
+        const documentsHTML = filtered.map(doc => this.renderDocumentItem(doc)).join('');
+        container.innerHTML = documentsHTML;
+    }
+    getStatusClass(status) {
+        const statusMap = {
+            'pending': 'status-pending',
+            'processing': 'status-processing',
+            'completed': 'status-completed',
+            'error': 'status-error'
+        };
+        return statusMap[status] || 'status-unknown';
+    }
+    getStatusText(status) {
+        const statusMap = {
+            'pending': 'در انتظار',
+            'processing': 'در حال پردازش',
+            'completed': 'تکمیل شده',
+            'error': 'خطا'
+        };
+        return statusMap[status] || 'نامشخص';
+    }
+    getQualityColor(quality) {
+        if (quality >= 80) return '#28a745';
+        if (quality >= 60) return '#ffc107';
+        return '#dc3545';
+    }
+    formatDate(dateString) {
+        if (!dateString) return 'نامشخص';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('fa-IR');
+    }
+    showToast(message, type = 'info') {
+        if (typeof showToast === 'function') {
+            showToast(message, type);
+        } else {
+            console.log(`${type.toUpperCase()}: ${message}`);
+        }
+    }
+}
+// Initialize document CRUD handler
+const documentCRUDHandler = new DocumentCRUDHandler();

app/static/js/file-upload-handler.js ADDED Viewed

	@@ -0,0 +1,328 @@

+/**
+ * File Upload Handler for Legal Dashboard
+ * Manages document uploads, OCR processing, and real-time progress
+ */
+class FileUploadHandler {
+    constructor() {
+        this.uploadEndpoint = '/api/ocr/upload';
+        this.processEndpoint = '/api/ocr/process';
+        this.maxFileSize = 10 * 1024 * 1024; // 10MB
+        this.allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
+        this.currentUpload = null;
+        this.uploadQueue = [];
+        this.initializeEventListeners();
+    }
+    initializeEventListeners() {
+        // File input change
+        const fileInput = document.getElementById('documentUpload');
+        if (fileInput) {
+            fileInput.addEventListener('change', (e) => this.handleFileSelection(e));
+        }
+        // Upload button
+        const uploadBtn = document.getElementById('uploadButton');
+        if (uploadBtn) {
+            uploadBtn.addEventListener('click', () => this.startUpload());
+        }
+        // Drag and drop
+        const dropZone = document.getElementById('uploadDropZone');
+        if (dropZone) {
+            dropZone.addEventListener('dragover', (e) => this.handleDragOver(e));
+            dropZone.addEventListener('drop', (e) => this.handleDrop(e));
+            dropZone.addEventListener('dragleave', (e) => this.handleDragLeave(e));
+        }
+    }
+    handleFileSelection(event) {
+        const files = event.target.files;
+        if (files.length > 0) {
+            this.validateAndQueueFiles(files);
+        }
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+        event.currentTarget.classList.add('drag-over');
+    }
+    handleDragLeave(event) {
+        event.preventDefault();
+        event.currentTarget.classList.remove('drag-over');
+    }
+    handleDrop(event) {
+        event.preventDefault();
+        event.currentTarget.classList.remove('drag-over');
+        const files = event.dataTransfer.files;
+        if (files.length > 0) {
+            this.validateAndQueueFiles(files);
+        }
+    }
+    validateAndQueueFiles(files) {
+        const validFiles = [];
+        const errors = [];
+        for (let file of files) {
+            // Check file size
+            if (file.size > this.maxFileSize) {
+                errors.push(`${file.name}: File too large (max 10MB)`);
+                continue;
+            }
+            // Check file type
+            if (!this.allowedTypes.includes(file.type)) {
+                errors.push(`${file.name}: Unsupported file type`);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        // Show errors if any
+        if (errors.length > 0) {
+            this.showErrors(errors);
+        }
+        // Queue valid files
+        if (validFiles.length > 0) {
+            this.uploadQueue.push(...validFiles);
+            this.updateUploadQueue();
+        }
+    }
+    updateUploadQueue() {
+        const queueContainer = document.getElementById('uploadQueue');
+        if (!queueContainer) return;
+        if (this.uploadQueue.length === 0) {
+            queueContainer.innerHTML = '<p class="no-files">هیچ فایلی برای آپلود انتخاب نشده</p>';
+            return;
+        }
+        const queueHTML = this.uploadQueue.map((file, index) => `
+            <div class="queue-item" data-index="${index}">
+                <div class="file-info">
+                    <span class="file-name">${file.name}</span>
+                    <span class="file-size">${this.formatFileSize(file.size)}</span>
+                </div>
+                <div class="file-actions">
+                    <button class="remove-file" onclick="fileUploadHandler.removeFromQueue(${index})">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+        queueContainer.innerHTML = queueHTML;
+    }
+    removeFromQueue(index) {
+        this.uploadQueue.splice(index, 1);
+        this.updateUploadQueue();
+    }
+    async startUpload() {
+        if (this.uploadQueue.length === 0) {
+            this.showToast('لطفاً فایلی برای آپلود انتخاب کنید', 'warning');
+            return;
+        }
+        if (this.currentUpload) {
+            this.showToast('آپلود در حال انجام است، لطفاً صبر کنید', 'warning');
+            return;
+        }
+        this.currentUpload = true;
+        this.showUploadProgress();
+        try {
+            for (let i = 0; i < this.uploadQueue.length; i++) {
+                const file = this.uploadQueue[i];
+                await this.uploadFile(file, i + 1, this.uploadQueue.length);
+            }
+            this.showToast('تمام فایل‌ها با موفقیت آپلود شدند', 'success');
+            this.refreshDocumentsList();
+        } catch (error) {
+            this.showToast(`خطا در آپلود: ${error.message}`, 'error');
+        } finally {
+            this.currentUpload = false;
+            this.hideUploadProgress();
+            this.uploadQueue = [];
+            this.updateUploadQueue();
+        }
+    }
+    async uploadFile(file, current, total) {
+        return new Promise((resolve, reject) => {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('filename', file.name);
+            const xhr = new XMLHttpRequest();
+            // Progress tracking
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percentComplete = (e.loaded / e.total) * 100;
+                    this.updateProgress(percentComplete, current, total);
+                }
+            });
+            // Response handling
+            xhr.addEventListener('load', () => {
+                if (xhr.status === 200) {
+                    try {
+                        const response = JSON.parse(xhr.responseText);
+                        this.handleUploadSuccess(response, file);
+                        resolve(response);
+                    } catch (error) {
+                        reject(new Error('Invalid response format'));
+                    }
+                } else {
+                    reject(new Error(`Upload failed: ${xhr.status} ${xhr.statusText}`));
+                }
+            });
+            xhr.addEventListener('error', () => {
+                reject(new Error('Network error during upload'));
+            });
+            xhr.addEventListener('abort', () => {
+                reject(new Error('Upload cancelled'));
+            });
+            // Start upload
+            xhr.open('POST', this.uploadEndpoint);
+            xhr.send(formData);
+        });
+    }
+    handleUploadSuccess(response, file) {
+        // Update dashboard stats
+        this.updateDashboardStats();
+        // Show success message
+        this.showToast(`${file.name} با موفقیت آپلود شد`, 'success');
+        // Process OCR if needed
+        if (response.document_id) {
+            this.processOCR(response.document_id, file.name);
+        }
+    }
+    async processOCR(documentId, fileName) {
+        try {
+            const response = await fetch(this.processEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    document_id: documentId,
+                    filename: fileName
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`OCR processing failed: ${response.status}`);
+            }
+            const result = await response.json();
+            this.showOCRResult(result, fileName);
+        } catch (error) {
+            this.showToast(`خطا در پردازش OCR: ${error.message}`, 'error');
+        }
+    }
+    showOCRResult(result, fileName) {
+        const ocrResultsContainer = document.getElementById('ocrResults');
+        if (!ocrResultsContainer) return;
+        const resultHTML = `
+            <div class="ocr-result">
+                <h4>نتایج OCR - ${fileName}</h4>
+                <div class="ocr-content">
+                    <p><strong>کیفیت:</strong> ${(result.quality || 0).toFixed(2)}%</p>
+                    <p><strong>متن استخراج شده:</strong></p>
+                    <div class="extracted-text">
+                        ${result.text || 'متنی استخراج نشد'}
+                    </div>
+                </div>
+            </div>
+        `;
+        ocrResultsContainer.insertAdjacentHTML('afterbegin', resultHTML);
+    }
+    updateProgress(percent, current, total) {
+        const progressBar = document.getElementById('uploadProgressBar');
+        const progressText = document.getElementById('uploadProgressText');
+        if (progressBar) {
+            progressBar.style.width = `${percent}%`;
+        }
+        if (progressText) {
+            progressText.textContent = `آپلود فایل ${current} از ${total} (${Math.round(percent)}%)`;
+        }
+    }
+    showUploadProgress() {
+        const progressContainer = document.getElementById('uploadProgress');
+        if (progressContainer) {
+            progressContainer.style.display = 'block';
+        }
+    }
+    hideUploadProgress() {
+        const progressContainer = document.getElementById('uploadProgress');
+        if (progressContainer) {
+            progressContainer.style.display = 'none';
+        }
+    }
+    updateDashboardStats() {
+        // Trigger dashboard stats refresh
+        if (typeof loadDashboardStats === 'function') {
+            loadDashboardStats();
+        }
+    }
+    refreshDocumentsList() {
+        // Trigger documents list refresh
+        if (typeof loadDocumentsList === 'function') {
+            loadDocumentsList();
+        }
+    }
+    showErrors(errors) {
+        const errorMessage = errors.join('\n');
+        this.showToast(errorMessage, 'error');
+    }
+    showToast(message, type = 'info') {
+        if (typeof showToast === 'function') {
+            showToast(message, type);
+        } else {
+            console.log(`${type.toUpperCase()}: ${message}`);
+        }
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+}
+// Initialize file upload handler
+const fileUploadHandler = new FileUploadHandler();

app/static/js/notifications.js ADDED Viewed

	@@ -0,0 +1,617 @@

+/**
+ * Notification System for Legal Dashboard
+ * ======================================
+ *
+ * Handles real-time notifications, WebSocket connections, and notification management.
+ */
+class NotificationManager {
+    constructor() {
+        this.websocket = null;
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = 5;
+        this.reconnectDelay = 1000;
+        this.notifications = [];
+        this.unreadCount = 0;
+        this.isConnected = false;
+        this.userId = null;
+        // Initialize notification elements
+        this.initElements();
+        // Start WebSocket connection
+        this.connectWebSocket();
+        // Set up periodic cleanup
+        setInterval(() => this.cleanupExpiredNotifications(), 60000); // Every minute
+    }
+    initElements() {
+        // Create notification container if it doesn't exist
+        if (!document.getElementById('notification-container')) {
+            const container = document.createElement('div');
+            container.id = 'notification-container';
+            container.className = 'notification-container';
+            document.body.appendChild(container);
+        }
+        // Create notification bell if it doesn't exist
+        if (!document.getElementById('notification-bell')) {
+            const bell = document.createElement('div');
+            bell.id = 'notification-bell';
+            bell.className = 'notification-bell';
+            bell.innerHTML = `
+                <i class="fas fa-bell"></i>
+                <span class="notification-badge" id="notification-badge">0</span>
+            `;
+            bell.addEventListener('click', () => this.toggleNotificationPanel());
+            document.body.appendChild(bell);
+        }
+        // Create notification panel if it doesn't exist
+        if (!document.getElementById('notification-panel')) {
+            const panel = document.createElement('div');
+            panel.id = 'notification-panel';
+            panel.className = 'notification-panel hidden';
+            panel.innerHTML = `
+                <div class="notification-header">
+                    <h3>Notifications</h3>
+                    <button class="close-btn" onclick="notificationManager.closeNotificationPanel()">×</button>
+                </div>
+                <div class="notification-list" id="notification-list"></div>
+                <div class="notification-footer">
+                    <button onclick="notificationManager.markAllAsRead()">Mark All as Read</button>
+                    <button onclick="notificationManager.clearAll()">Clear All</button>
+                </div>
+            `;
+            document.body.appendChild(panel);
+        }
+        // Add CSS styles
+        this.addStyles();
+    }
+    addStyles() {
+        if (!document.getElementById('notification-styles')) {
+            const styles = document.createElement('style');
+            styles.id = 'notification-styles';
+            styles.textContent = `
+                .notification-container {
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    z-index: 10000;
+                    max-width: 400px;
+                }
+                .notification-bell {
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    background: #007bff;
+                    color: white;
+                    padding: 10px;
+                    border-radius: 50%;
+                    cursor: pointer;
+                    z-index: 10001;
+                    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+                    transition: all 0.3s ease;
+                }
+                .notification-bell:hover {
+                    transform: scale(1.1);
+                    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+                }
+                .notification-badge {
+                    position: absolute;
+                    top: -5px;
+                    right: -5px;
+                    background: #dc3545;
+                    color: white;
+                    border-radius: 50%;
+                    padding: 2px 6px;
+                    font-size: 12px;
+                    min-width: 18px;
+                    text-align: center;
+                }
+                .notification-panel {
+                    position: fixed;
+                    top: 70px;
+                    right: 20px;
+                    width: 350px;
+                    max-height: 500px;
+                    background: white;
+                    border-radius: 8px;
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+                    z-index: 10002;
+                    overflow: hidden;
+                    transition: all 0.3s ease;
+                }
+                .notification-panel.hidden {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+                .notification-header {
+                    padding: 15px;
+                    border-bottom: 1px solid #eee;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .notification-header h3 {
+                    margin: 0;
+                    color: #333;
+                }
+                .close-btn {
+                    background: none;
+                    border: none;
+                    font-size: 20px;
+                    cursor: pointer;
+                    color: #666;
+                }
+                .notification-list {
+                    max-height: 350px;
+                    overflow-y: auto;
+                }
+                .notification-item {
+                    padding: 15px;
+                    border-bottom: 1px solid #f0f0f0;
+                    cursor: pointer;
+                    transition: background-color 0.2s ease;
+                }
+                .notification-item:hover {
+                    background-color: #f8f9fa;
+                }
+                .notification-item.unread {
+                    background-color: #e3f2fd;
+                    border-left: 4px solid #2196f3;
+                }
+                .notification-title {
+                    font-weight: bold;
+                    margin-bottom: 5px;
+                    color: #333;
+                }
+                .notification-message {
+                    color: #666;
+                    font-size: 14px;
+                    margin-bottom: 5px;
+                }
+                .notification-meta {
+                    font-size: 12px;
+                    color: #999;
+                    display: flex;
+                    justify-content: space-between;
+                }
+                .notification-footer {
+                    padding: 15px;
+                    border-top: 1px solid #eee;
+                    display: flex;
+                    gap: 10px;
+                }
+                .notification-footer button {
+                    flex: 1;
+                    padding: 8px;
+                    border: 1px solid #ddd;
+                    background: white;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    font-size: 12px;
+                }
+                .notification-footer button:hover {
+                    background: #f8f9fa;
+                }
+                .notification-toast {
+                    background: white;
+                    border-radius: 8px;
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+                    margin-bottom: 10px;
+                    padding: 15px;
+                    border-left: 4px solid #007bff;
+                    animation: slideIn 0.3s ease;
+                }
+                .notification-toast.success {
+                    border-left-color: #28a745;
+                }
+                .notification-toast.warning {
+                    border-left-color: #ffc107;
+                }
+                .notification-toast.error {
+                    border-left-color: #dc3545;
+                }
+                @keyframes slideIn {
+                    from {
+                        transform: translateX(100%);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                }
+                .notification-type-icon {
+                    margin-right: 8px;
+                }
+                .notification-type-icon.info { color: #007bff; }
+                .notification-type-icon.success { color: #28a745; }
+                .notification-type-icon.warning { color: #ffc107; }
+                .notification-type-icon.error { color: #dc3545; }
+            `;
+            document.head.appendChild(styles);
+        }
+    }
+    connectWebSocket() {
+        try {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = `${protocol}//${window.location.host}/api/notifications/ws`;
+            this.websocket = new WebSocket(wsUrl);
+            this.websocket.onopen = () => {
+                console.log('WebSocket connected');
+                this.isConnected = true;
+                this.reconnectAttempts = 0;
+                // Send user authentication if available
+                const token = localStorage.getItem('auth_token');
+                if (token) {
+                    this.websocket.send(JSON.stringify({
+                        type: 'auth',
+                        token: token
+                    }));
+                }
+            };
+            this.websocket.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    this.handleNotification(data);
+                } catch (error) {
+                    console.error('Error parsing WebSocket message:', error);
+                }
+            };
+            this.websocket.onclose = () => {
+                console.log('WebSocket disconnected');
+                this.isConnected = false;
+                this.handleReconnect();
+            };
+            this.websocket.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                this.isConnected = false;
+            };
+        } catch (error) {
+            console.error('Error connecting to WebSocket:', error);
+            this.handleReconnect();
+        }
+    }
+    handleReconnect() {
+        if (this.reconnectAttempts < this.maxReconnectAttempts) {
+            this.reconnectAttempts++;
+            console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+            setTimeout(() => {
+                this.connectWebSocket();
+            }, this.reconnectDelay * this.reconnectAttempts);
+        } else {
+            console.error('Max reconnection attempts reached');
+            this.showToast('Connection lost. Please refresh the page.', 'error');
+        }
+    }
+    handleNotification(data) {
+        if (data.type === 'connection_established') {
+            console.log('Notification service connected');
+            this.userId = data.user_id;
+            return;
+        }
+        // Add notification to list
+        const notification = {
+            id: data.id || Date.now(),
+            type: data.type || 'info',
+            title: data.title || 'Notification',
+            message: data.message || '',
+            priority: data.priority || 'medium',
+            created_at: data.created_at || new Date().toISOString(),
+            metadata: data.metadata || {},
+            read: false
+        };
+        this.notifications.unshift(notification);
+        this.unreadCount++;
+        this.updateBadge();
+        this.showToast(notification);
+        this.updateNotificationPanel();
+        // Play notification sound if enabled
+        this.playNotificationSound();
+    }
+    showToast(notification) {
+        const container = document.getElementById('notification-container');
+        const toast = document.createElement('div');
+        toast.className = `notification-toast ${notification.type}`;
+        const icon = this.getNotificationIcon(notification.type);
+        toast.innerHTML = `
+            <div class="notification-title">
+                <i class="fas ${icon} notification-type-icon ${notification.type}"></i>
+                ${notification.title}
+            </div>
+            <div class="notification-message">${notification.message}</div>
+            <div class="notification-meta">
+                <span>${this.formatTime(notification.created_at)}</span>
+                <span>${notification.priority}</span>
+            </div>
+        `;
+        container.appendChild(toast);
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 5000);
+    }
+    getNotificationIcon(type) {
+        const icons = {
+            'info': 'fa-info-circle',
+            'success': 'fa-check-circle',
+            'warning': 'fa-exclamation-triangle',
+            'error': 'fa-times-circle',
+            'upload_complete': 'fa-upload',
+            'ocr_complete': 'fa-file-text',
+            'scraping_complete': 'fa-spider',
+            'system_error': 'fa-exclamation-circle',
+            'user_activity': 'fa-user'
+        };
+        return icons[type] || 'fa-bell';
+    }
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        const now = new Date();
+        const diff = now - date;
+        if (diff < 60000) { // Less than 1 minute
+            return 'Just now';
+        } else if (diff < 3600000) { // Less than 1 hour
+            const minutes = Math.floor(diff / 60000);
+            return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+        } else if (diff < 86400000) { // Less than 1 day
+            const hours = Math.floor(diff / 3600000);
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        } else {
+            return date.toLocaleDateString();
+        }
+    }
+    updateBadge() {
+        const badge = document.getElementById('notification-badge');
+        if (badge) {
+            badge.textContent = this.unreadCount;
+            badge.style.display = this.unreadCount > 0 ? 'block' : 'none';
+        }
+    }
+    toggleNotificationPanel() {
+        const panel = document.getElementById('notification-panel');
+        if (panel) {
+            panel.classList.toggle('hidden');
+            if (!panel.classList.contains('hidden')) {
+                this.updateNotificationPanel();
+            }
+        }
+    }
+    closeNotificationPanel() {
+        const panel = document.getElementById('notification-panel');
+        if (panel) {
+            panel.classList.add('hidden');
+        }
+    }
+    updateNotificationPanel() {
+        const list = document.getElementById('notification-list');
+        if (!list) return;
+        list.innerHTML = '';
+        this.notifications.slice(0, 20).forEach(notification => {
+            const item = document.createElement('div');
+            item.className = `notification-item ${notification.read ? '' : 'unread'}`;
+            item.onclick = () => this.markAsRead(notification.id);
+            const icon = this.getNotificationIcon(notification.type);
+            item.innerHTML = `
+                <div class="notification-title">
+                    <i class="fas ${icon} notification-type-icon ${notification.type}"></i>
+                    ${notification.title}
+                </div>
+                <div class="notification-message">${notification.message}</div>
+                <div class="notification-meta">
+                    <span>${this.formatTime(notification.created_at)}</span>
+                    <span>${notification.priority}</span>
+                </div>
+            `;
+            list.appendChild(item);
+        });
+    }
+    markAsRead(notificationId) {
+        const notification = this.notifications.find(n => n.id === notificationId);
+        if (notification && !notification.read) {
+            notification.read = true;
+            this.unreadCount = Math.max(0, this.unreadCount - 1);
+            this.updateBadge();
+            this.updateNotificationPanel();
+            // Send to server
+            this.sendToServer('mark_read', { notification_id: notificationId });
+        }
+    }
+    markAllAsRead() {
+        this.notifications.forEach(notification => {
+            notification.read = true;
+        });
+        this.unreadCount = 0;
+        this.updateBadge();
+        this.updateNotificationPanel();
+        // Send to server
+        this.sendToServer('mark_all_read', {});
+    }
+    clearAll() {
+        this.notifications = [];
+        this.unreadCount = 0;
+        this.updateBadge();
+        this.updateNotificationPanel();
+        // Send to server
+        this.sendToServer('clear_all', {});
+    }
+    sendToServer(action, data) {
+        if (this.websocket && this.isConnected) {
+            this.websocket.send(JSON.stringify({
+                action: action,
+                ...data
+            }));
+        }
+    }
+    playNotificationSound() {
+        // Create audio context for notification sound
+        try {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+            oscillator.frequency.setValueAtTime(600, audioContext.currentTime + 0.1);
+            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.2);
+        } catch (error) {
+            console.log('Could not play notification sound:', error);
+        }
+    }
+    cleanupExpiredNotifications() {
+        const now = new Date();
+        const expired = this.notifications.filter(notification => {
+            const created = new Date(notification.created_at);
+            const diff = now - created;
+            return diff > 24 * 60 * 60 * 1000; // 24 hours
+        });
+        expired.forEach(notification => {
+            const index = this.notifications.indexOf(notification);
+            if (index > -1) {
+                this.notifications.splice(index, 1);
+            }
+        });
+        this.updateNotificationPanel();
+    }
+    // Public methods for external use
+    showInfo(title, message, duration = 5000) {
+        this.showCustomNotification('info', title, message, duration);
+    }
+    showSuccess(title, message, duration = 5000) {
+        this.showCustomNotification('success', title, message, duration);
+    }
+    showWarning(title, message, duration = 5000) {
+        this.showCustomNotification('warning', title, message, duration);
+    }
+    showError(title, message, duration = 5000) {
+        this.showCustomNotification('error', title, message, duration);
+    }
+    showCustomNotification(type, title, message, duration) {
+        const notification = {
+            id: Date.now(),
+            type: type,
+            title: title,
+            message: message,
+            priority: 'medium',
+            created_at: new Date().toISOString(),
+            metadata: {},
+            read: false
+        };
+        this.notifications.unshift(notification);
+        this.unreadCount++;
+        this.updateBadge();
+        this.showToast(notification);
+        this.updateNotificationPanel();
+        if (duration > 0) {
+            setTimeout(() => {
+                const index = this.notifications.indexOf(notification);
+                if (index > -1) {
+                    this.notifications.splice(index, 1);
+                    this.updateNotificationPanel();
+                }
+            }, duration);
+        }
+    }
+}
+// Initialize notification manager when DOM is loaded
+let notificationManager;
+document.addEventListener('DOMContentLoaded', () => {
+    notificationManager = new NotificationManager();
+});
+// Global function for external use
+window.showNotification = (type, title, message) => {
+    if (notificationManager) {
+        notificationManager.showCustomNotification(type, title, message);
+    }
+};

app/static/js/scraping-control.js ADDED Viewed

	@@ -0,0 +1,368 @@

+/**
+ * Scraping Control Panel for Legal Dashboard
+ * Manages web scraping operations, real-time monitoring, and results display
+ */
+class ScrapingControlPanel {
+    constructor() {
+        this.baseEndpoint = '/api/scraping';
+        this.currentJob = null;
+        this.isRunning = false;
+        this.statusInterval = null;
+        this.logs = [];
+        this.initializeEventListeners();
+        this.loadScrapingStatus();
+    }
+    initializeEventListeners() {
+        // Start scraping button
+        const startBtn = document.getElementById('startScrapingBtn');
+        if (startBtn) {
+            startBtn.addEventListener('click', () => this.startScraping());
+        }
+        // Stop scraping button
+        const stopBtn = document.getElementById('stopScrapingBtn');
+        if (stopBtn) {
+            stopBtn.addEventListener('click', () => this.stopScraping());
+        }
+        // Refresh results button
+        const refreshBtn = document.getElementById('refreshResultsBtn');
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', () => this.loadScrapingResults());
+        }
+        // Clear logs button
+        const clearLogsBtn = document.getElementById('clearLogsBtn');
+        if (clearLogsBtn) {
+            clearLogsBtn.addEventListener('click', () => this.clearLogs());
+        }
+    }
+    async startScraping() {
+        if (this.isRunning) {
+            this.showToast('اسکرپینگ در حال انجام است', 'warning');
+            return;
+        }
+        const scrapingConfig = this.getScrapingConfig();
+        if (!scrapingConfig.url) {
+            this.showToast('لطفاً URL را وارد کنید', 'error');
+            return;
+        }
+        try {
+            this.isRunning = true;
+            this.updateStartButton(true);
+            this.addLog('شروع اسکرپینگ...', 'info');
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/start`, {
+                method: 'POST',
+                body: JSON.stringify(scrapingConfig)
+            });
+            this.currentJob = response.job_id;
+            this.showToast('اسکرپینگ شروع شد', 'success');
+            this.addLog(`شغل اسکرپینگ ایجاد شد: ${this.currentJob}`, 'success');
+            // Start monitoring
+            this.startStatusMonitoring();
+        } catch (error) {
+            this.showToast(`خطا در شروع اسکرپینگ: ${error.message}`, 'error');
+            this.addLog(`خطا در شروع اسکرپینگ: ${error.message}`, 'error');
+            this.isRunning = false;
+            this.updateStartButton(false);
+        }
+    }
+    async stopScraping() {
+        if (!this.isRunning) {
+            this.showToast('هیچ اسکرپینگی در حال انجام نیست', 'warning');
+            return;
+        }
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/stop`, {
+                method: 'POST',
+                body: JSON.stringify({ job_id: this.currentJob })
+            });
+            this.showToast('اسکرپینگ متوقف شد', 'success');
+            this.addLog('اسکرپینگ متوقف شد', 'info');
+            this.isRunning = false;
+            this.currentJob = null;
+            this.updateStartButton(false);
+            this.stopStatusMonitoring();
+        } catch (error) {
+            this.showToast(`خطا در توقف اسکرپینگ: ${error.message}`, 'error');
+            this.addLog(`خطا در توقف اسکرپینگ: ${error.message}`, 'error');
+        }
+    }
+    async loadScrapingStatus() {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/status`);
+            this.updateStatusDisplay(response);
+        } catch (error) {
+            console.error('Failed to load scraping status:', error);
+        }
+    }
+    async loadScrapingResults() {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/results`);
+            this.renderResults(response);
+        } catch (error) {
+            console.error('Failed to load scraping results:', error);
+            this.showToast('خطا در بارگذاری نتایج', 'error');
+        }
+    }
+    async loadScrapingStatistics() {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/statistics`);
+            this.renderStatistics(response);
+        } catch (error) {
+            console.error('Failed to load scraping statistics:', error);
+        }
+    }
+    startStatusMonitoring() {
+        this.statusInterval = setInterval(async () => {
+            if (this.isRunning) {
+                await this.updateScrapingStatus();
+            }
+        }, 5000); // Update every 5 seconds
+    }
+    stopStatusMonitoring() {
+        if (this.statusInterval) {
+            clearInterval(this.statusInterval);
+            this.statusInterval = null;
+        }
+    }
+    async updateScrapingStatus() {
+        try {
+            const response = await fetchWithErrorHandling(`${this.baseEndpoint}/status`);
+            this.updateStatusDisplay(response);
+            // Check if scraping is complete
+            if (response.status === 'completed' || response.status === 'failed') {
+                this.isRunning = false;
+                this.currentJob = null;
+                this.updateStartButton(false);
+                this.stopStatusMonitoring();
+                if (response.status === 'completed') {
+                    this.addLog('اسکرپینگ تکمیل شد', 'success');
+                    this.loadScrapingResults();
+                } else {
+                    this.addLog('اسکرپینگ با خطا مواجه شد', 'error');
+                }
+            }
+        } catch (error) {
+            console.error('Failed to update scraping status:', error);
+        }
+    }
+    updateStatusDisplay(status) {
+        const statusElement = document.getElementById('scrapingStatus');
+        const progressElement = document.getElementById('scrapingProgress');
+        const statsElement = document.getElementById('scrapingStats');
+        if (statusElement) {
+            statusElement.textContent = this.getStatusText(status.status);
+            statusElement.className = `status-indicator ${this.getStatusClass(status.status)}`;
+        }
+        if (progressElement && status.progress) {
+            progressElement.style.width = `${status.progress}%`;
+            progressElement.textContent = `${status.progress}%`;
+        }
+        if (statsElement) {
+            statsElement.innerHTML = `
+                <div class="stat-item">
+                    <span class="stat-label">صفحات پردازش شده:</span>
+                    <span class="stat-value">${status.pages_processed || 0}</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">نتایج یافت شده:</span>
+                    <span class="stat-value">${status.items_found || 0}</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">زمان سپری شده:</span>
+                    <span class="stat-value">${status.elapsed_time || '0s'}</span>
+                </div>
+            `;
+        }
+    }
+    renderResults(results) {
+        const container = document.getElementById('scrapingResults');
+        if (!container) return;
+        if (!results.items || results.items.length === 0) {
+            container.innerHTML = '<p class="no-results">هیچ نتیجه‌ای یافت نشد</p>';
+            return;
+        }
+        const resultsHTML = results.items.map(item => `
+            <div class="scraping-item">
+                <div class="item-header">
+                    <h4 class="item-title">${item.title || 'بدون عنوان'}</h4>
+                    <span class="item-rating">امتیاز: ${item.rating || 0}</span>
+                </div>
+                <div class="item-content">
+                    <p class="item-url">
+                        <a href="${item.url}" target="_blank">${item.url}</a>
+                    </p>
+                    <p class="item-description">${item.description || 'توضیحات موجود نیست'}</p>
+                    <div class="item-meta">
+                        <span class="item-date">${this.formatDate(item.date)}</span>
+                        <span class="item-category">${item.category || 'نامشخص'}</span>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+        container.innerHTML = resultsHTML;
+    }
+    renderStatistics(stats) {
+        const container = document.getElementById('scrapingStatistics');
+        if (!container) return;
+        const statsHTML = `
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-number">${stats.total_scraped || 0}</div>
+                    <div class="stat-label">کل نتایج</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">${stats.success_rate || 0}%</div>
+                    <div class="stat-label">نرخ موفقیت</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">${stats.average_speed || 0}</div>
+                    <div class="stat-label">سرعت متوسط (صفحه/دقیقه)</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">${stats.average_rating || 0}</div>
+                    <div class="stat-label">امتیاز متوسط</div>
+                </div>
+            </div>
+        `;
+        container.innerHTML = statsHTML;
+    }
+    getScrapingConfig() {
+        const urlInput = document.getElementById('scrapingUrl');
+        const depthInput = document.getElementById('scrapingDepth');
+        const maxPagesInput = document.getElementById('maxPages');
+        const filtersInput = document.getElementById('scrapingFilters');
+        return {
+            url: urlInput ? urlInput.value : '',
+            depth: depthInput ? parseInt(depthInput.value) : 1,
+            max_pages: maxPagesInput ? parseInt(maxPagesInput.value) : 100,
+            filters: filtersInput ? filtersInput.value : ''
+        };
+    }
+    updateStartButton(isRunning) {
+        const startBtn = document.getElementById('startScrapingBtn');
+        const stopBtn = document.getElementById('stopScrapingBtn');
+        if (startBtn) {
+            startBtn.disabled = isRunning;
+            startBtn.textContent = isRunning ? 'در حال اجرا...' : 'شروع اسکرپینگ';
+        }
+        if (stopBtn) {
+            stopBtn.disabled = !isRunning;
+            stopBtn.style.display = isRunning ? 'inline-block' : 'none';
+        }
+    }
+    addLog(message, type = 'info') {
+        const timestamp = new Date().toLocaleTimeString('fa-IR');
+        const logEntry = {
+            timestamp,
+            message,
+            type
+        };
+        this.logs.unshift(logEntry);
+        this.renderLogs();
+        // Keep only last 100 logs
+        if (this.logs.length > 100) {
+            this.logs = this.logs.slice(0, 100);
+        }
+    }
+    renderLogs() {
+        const container = document.getElementById('scrapingLogs');
+        if (!container) return;
+        const logsHTML = this.logs.map(log => `
+            <div class="log-entry ${log.type}">
+                <span class="log-timestamp">${log.timestamp}</span>
+                <span class="log-message">${log.message}</span>
+            </div>
+        `).join('');
+        container.innerHTML = logsHTML;
+    }
+    clearLogs() {
+        this.logs = [];
+        this.renderLogs();
+        this.showToast('لاگ‌ها پاک شدند', 'info');
+    }
+    getStatusClass(status) {
+        const statusMap = {
+            'idle': 'status-idle',
+            'running': 'status-running',
+            'completed': 'status-completed',
+            'failed': 'status-failed',
+            'stopped': 'status-stopped'
+        };
+        return statusMap[status] || 'status-unknown';
+    }
+    getStatusText(status) {
+        const statusMap = {
+            'idle': 'آماده',
+            'running': 'در حال اجرا',
+            'completed': 'تکمیل شده',
+            'failed': 'ناموفق',
+            'stopped': 'متوقف شده'
+        };
+        return statusMap[status] || 'نامشخص';
+    }
+    formatDate(dateString) {
+        if (!dateString) return 'نامشخص';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('fa-IR');
+    }
+    showToast(message, type = 'info') {
+        if (typeof showToast === 'function') {
+            showToast(message, type);
+        } else {
+            console.log(`${type.toUpperCase()}: ${message}`);
+        }
+    }
+}
+// Initialize scraping control panel
+const scrapingControlPanel = new ScrapingControlPanel();