Upload 25 files

app/frontend/README.md

@@ -0,0 +1,242 @@
+# Legal Dashboard Frontend Organization
+
+## Overview
+
+This directory contains the frontend files for the Legal Dashboard OCR system. The structure follows hierarchical frontend organization principles for maintainability and clarity.
+
+## Directory Structure
+
+```
+frontend/
+├── improved_legal_dashboard.html    # Main application dashboard
+├── documents.html                   # Reference for advanced document features
+├── scraping_dashboard.html          # Reference for advanced scraping features
+├── reports.html                     # Reports and analytics page
+├── index.html                       # Legacy dashboard (to be deprecated)
+├── scraping.html                    # Legacy scraping page (to be deprecated)
+├── upload.html                      # Legacy upload page (to be deprecated)
+├── dev/                            # Development and testing tools
+│   ├── api-test.html               # API testing interface
+│   └── test_integration.html       # Integration testing page
+└── js/                             # JavaScript modules
+    ├── api-client.js               # Core API communication
+    ├── file-upload-handler.js      # File upload functionality
+    ├── document-crud.js            # Document management operations
+    ├── scraping-control.js         # Scraping functionality
+    ├── notifications.js            # Toast and notification system
+    └── api-connection-test.js      # API testing utilities
+```
+
+## File Status
+
+### ✅ **Primary Application**
+- **`improved_legal_dashboard.html`** - Main dashboard with comprehensive functionality
+  - Complete feature set: statistics, charts, file upload, document management, scraping
+  - Real API integration with proper error handling
+  - Modern UI with Persian RTL support
+  - Chart.js integration for data visualization
+
+### 🔄 **Reference Files (To Be Merged)**
+- **`documents.html`** - Advanced document management features
+  - Advanced filtering and search capabilities
+  - Document CRUD operations
+  - Status tracking and quality metrics
+  - Bulk operations support
+
+- **`scraping_dashboard.html`** - Advanced scraping features
+  - Real-time scraping status monitoring
+  - Rating system for scraped content
+  - Performance metrics and statistics
+  - Bootstrap-based modern UI
+
+### 🧪 **Development Tools**
+- **`dev/api-test.html`** - Comprehensive API testing tool
+- **`dev/test_integration.html`** - Simple integration testing interface
+
+### ❌ **Legacy Files (To Be Deprecated)**
+- **`index.html`** - Older version of main dashboard
+- **`scraping.html`** - Basic scraping interface (superseded)
+- **`upload.html`** - Standalone upload page (integrated in main)
+
+## JavaScript Architecture
+
+### Core Modules
+
+#### `api-client.js`
+- Centralized API communication layer
+- Error handling and response transformation
+- Request/response interceptors
+- Health check and connection monitoring
+
+#### `file-upload-handler.js`
+- Drag-and-drop file upload
+- File validation and processing
+- Upload progress tracking
+- Batch upload capabilities
+
+#### `document-crud.js`
+- Document creation, reading, updating, deletion
+- Document search and filtering
+- Status management
+- Quality assessment
+
+#### `scraping-control.js`
+- Web scraping initiation and control
+- Real-time status monitoring
+- Result processing and rating
+- Performance metrics
+
+#### `notifications.js`
+- Toast notification system
+- Error reporting
+- Success/error message handling
+- User feedback mechanisms
+
+#### `api-connection-test.js`
+- API endpoint testing utilities
+- Connection validation
+- Response verification
+- Development debugging tools
+
+## Integration Guidelines
+
+### API Integration
+All frontend components use the centralized `api-client.js` for backend communication:
+
+```javascript
+// Example usage
+const api = new LegalDashboardAPI();
+const documents = await api.getDocuments();
+```
+
+### Error Handling
+Consistent error handling across all modules:
+
+```javascript
+try {
+    const result = await api.request('/endpoint');
+    showToast('Success', 'success');
+} catch (error) {
+    showToast(`Error: ${error.message}`, 'error');
+}
+```
+
+### UI Components
+Reusable components follow consistent patterns:
+- Toast notifications for user feedback
+- Loading states for async operations
+- Error boundaries for graceful failure handling
+- Responsive design for mobile compatibility
+
+## Development Workflow
+
+### Testing
+1. Use `dev/api-test.html` for comprehensive API testing
+2. Use `dev/test_integration.html` for quick integration checks
+3. All JavaScript modules include error handling and logging
+
+### Feature Development
+1. New features should be integrated into `improved_legal_dashboard.html`
+2. Reference files (`documents.html`, `scraping_dashboard.html`) provide advanced features to merge
+3. JavaScript modules should be modular and reusable
+
+### Code Organization
+Following [hierarchical frontend structure principles](https://github.com/petejank/hierarchical-front-end-structure):
+
+- **Separation of concerns**: Each file has a single responsibility
+- **Hierarchical organization**: Related files are grouped together
+- **Self-contained modules**: Files can be moved without breaking dependencies
+- **Consistent naming**: Clear, descriptive file and directory names
+
+## Migration Plan
+
+### Phase 1: Consolidation
+- [x] Move testing files to `dev/` directory
+- [ ] Merge advanced document features from `documents.html` into main dashboard
+- [ ] Merge advanced scraping features from `scraping_dashboard.html` into main dashboard
+
+### Phase 2: Cleanup
+- [ ] Remove `index.html` (redirect to main dashboard)
+- [ ] Remove `scraping.html` (functionality in main dashboard)
+- [ ] Remove `upload.html` (functionality in main dashboard)
+
+### Phase 3: Enhancement
+- [ ] Enhance main dashboard with merged features
+- [ ] Improve real-time updates and monitoring
+- [ ] Add advanced filtering and search capabilities
+- [ ] Implement better error handling and user feedback
+
+## Best Practices
+
+### Code Quality
+- Use consistent error handling patterns
+- Implement proper loading states
+- Provide clear user feedback
+- Follow responsive design principles
+
+### Performance
+- Minimize API calls through caching
+- Use debouncing for search operations
+- Implement lazy loading for large datasets
+- Optimize bundle size through modular imports
+
+### Security
+- Validate all user inputs
+- Sanitize data before display
+- Use HTTPS for all API communications
+- Implement proper authentication checks
+
+### Accessibility
+- Support RTL languages (Persian)
+- Provide keyboard navigation
+- Include proper ARIA labels
+- Ensure color contrast compliance
+
+## API Endpoints
+
+The frontend integrates with the following backend endpoints:
+
+### Dashboard
+- `GET /api/dashboard/summary` - Dashboard statistics
+- `GET /api/dashboard/charts-data` - Chart data
+- `GET /api/dashboard/ai-suggestions` - AI recommendations
+
+### Documents
+- `GET /api/documents` - List documents
+- `POST /api/documents` - Create document
+- `PUT /api/documents/{id}` - Update document
+- `DELETE /api/documents/{id}` - Delete document
+
+### OCR Processing
+- `POST /api/ocr/process` - Process document OCR
+- `POST /api/ocr/batch-process` - Batch OCR processing
+- `GET /api/ocr/status` - OCR processing status
+
+### Scraping
+- `POST /api/scraping/scrape` - Start scraping
+- `GET /api/scraping/status` - Scraping status
+- `GET /api/scraping/items` - Scraped items
+
+### Analytics
+- `GET /api/analytics/overview` - Analytics overview
+- `GET /api/analytics/trends` - Trend analysis
+- `GET /api/analytics/similarity` - Document similarity
+
+## Contributing
+
+When adding new features:
+
+1. **Follow the hierarchical structure** - Group related files together
+2. **Use the API client** - Don't create direct fetch calls
+3. **Include error handling** - Always handle potential failures
+4. **Add user feedback** - Use toast notifications for important actions
+5. **Test thoroughly** - Use the development tools for testing
+6. **Document changes** - Update this README when adding new files
+
+## Support
+
+For development questions or issues:
+1. Check the API testing tools in `dev/` directory
+2. Review the JavaScript modules for examples
+3. Test with the integration tools
+4. Follow the established patterns and conventions 

app/frontend/analytics.html

@@ -0,0 +1,1912 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+    
+    <!-- Load API Client -->
+    <script src="/static/js/api-client.js"></script>
+    <script src="/static/js/core.js"></script>
+    
+    <style>
+        :root {
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+            width: 100%;
+        }
+
+        /* سایدبار مشابه صفحات قبلی */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            height: 100vh;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow:
+                0 0 0 1px rgba(59, 130, 246, 0.08),
+                -8px 0 32px rgba(59, 130, 246, 0.12),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6);
+            border-left: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.12);
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-bottom: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-left: 0.6rem;
+            width: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-right: auto;
+            min-width: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 1rem;
+            min-height: 100vh;
+            width: calc(100% - var(--sidebar-width));
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .btn-primary:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .btn-outline:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.4);
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+        }
+
+        /* گرید تحلیلی */
+        .analytics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .analytics-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: var(--transition-smooth);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .analytics-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--primary-gradient);
+        }
+
+        .analytics-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .analytics-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .analytics-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .analytics-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .chart-container {
+            height: 300px;
+            position: relative;
+        }
+
+        .chart-filters {
+            display: flex;
+            gap: 0.3rem;
+            margin-bottom: 1rem;
+        }
+
+        .chart-filter {
+            padding: 0.3rem 0.8rem;
+            border: none;
+            border-radius: 12px;
+            background: rgba(59, 130, 246, 0.08);
+            color: var(--text-secondary);
+            font-family: inherit;
+            font-size: var(--font-size-xs);
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .chart-filter:hover {
+            background: rgba(59, 130, 246, 0.12);
+        }
+
+        .chart-filter.active {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        /* آمار کلی */
+        .overview-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .stat-card {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            text-align: center;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: var(--transition-smooth);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+        }
+
+        .stat-card.primary::before { background: var(--primary-gradient); }
+        .stat-card.success::before { background: var(--success-gradient); }
+        .stat-card.warning::before { background: var(--warning-gradient); }
+        .stat-card.danger::before { background: var(--danger-gradient); }
+
+        .stat-card:hover {
+            transform: translateY(-3px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .stat-value {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-label {
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-change {
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.3rem;
+        }
+
+        .stat-change.positive { color: #059669; }
+        .stat-change.negative { color: #dc2626; }
+
+        /* ویجت‌های پیشرفته */
+        .advanced-widgets {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .widget {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .widget-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .widget-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* جدول آمار */
+        .stats-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .stats-table thead {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(255, 255, 255, 0.1));
+        }
+
+        .stats-table th {
+            padding: 1rem;
+            text-align: right;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: var(--font-size-sm);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .stats-table td {
+            padding: 0.8rem 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+            font-size: var(--font-size-sm);
+        }
+
+        .stats-table tbody tr {
+            transition: all 0.2s ease;
+        }
+
+        .stats-table tbody tr:hover {
+            background: rgba(59, 130, 246, 0.02);
+        }
+
+        /* نمودار پیشرفت */
+        .progress-widget {
+            padding: 1rem;
+        }
+
+        .progress-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .progress-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .progress-info {
+            flex: 1;
+            margin-left: 1rem;
+        }
+
+        .progress-label {
+            font-size: var(--font-size-sm);
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: rgba(0, 0, 0, 0.08);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            border-radius: 3px;
+            transition: width 0.6s ease;
+        }
+
+        .progress-fill.primary { background: var(--primary-gradient); }
+        .progress-fill.success { background: var(--success-gradient); }
+        .progress-fill.warning { background: var(--warning-gradient); }
+        .progress-fill.danger { background: var(--danger-gradient); }
+
+        .progress-value {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+            min-width: 3rem;
+            text-align: left;
+        }
+
+        /* محصولات اصلی */
+        .main-analytics {
+            margin-bottom: 2rem;
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        /* فیلترهای زمانی */
+        .time-filters {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .filter-row {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.3rem;
+        }
+
+        .filter-label {
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+
+        .filter-input,
+        .filter-select {
+            padding: 0.5rem;
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .filter-input:focus,
+        .filter-select:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        /* متریک‌های زنده */
+        .live-metrics {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .live-metric {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1rem;
+            text-align: center;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            position: relative;
+        }
+
+        .live-metric::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--success-gradient);
+        }
+
+        .live-value {
+            font-size: var(--font-size-xl);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+        }
+
+        .live-label {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .live-indicator {
+            position: absolute;
+            top: 0.5rem;
+            left: 0.5rem;
+            width: 8px;
+            height: 8px;
+            background: #10b981;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .sidebar {
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+
+            .analytics-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .advanced-widgets {
+                grid-template-columns: 1fr;
+            }
+
+            .filter-row {
+                flex-direction: column;
+                align-items: stretch;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .overview-stats {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .live-metrics {
+                grid-template-columns: 1fr;
+            }
+
+            .chart-container {
+                height: 250px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="/" class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </a>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">6</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/analytics.html" class="nav-link active">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-chart-line"></i>
+                    آمار و تحلیل پیشرفته
+                </h1>
+                <div class="page-actions">
+                    <button type="button" class="btn btn-outline" onclick="exportAnalytics()">
+                        <i class="fas fa-download"></i>
+                        خروجی گزارش
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="refreshAllAnalytics()">
+                        <i class="fas fa-sync-alt"></i>
+                        بروزرسانی همه
+                    </button>
+                </div>
+            </header>
+
+            <!-- فیلترهای زمانی -->
+            <section class="time-filters">
+                <div class="filter-row">
+                    <div class="filter-group">
+                        <label class="filter-label">بازه زمانی</label>
+                        <select class="filter-select" id="timeRange" onchange="updateTimeRange()">
+                            <option value="today">امروز</option>
+                            <option value="week" selected>هفته گذشته</option>
+                            <option value="month">ماه گذشته</option>
+                            <option value="quarter">سه ماه گذشته</option>
+                            <option value="year">سال گذشته</option>
+                            <option value="custom">بازه دلخواه</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label class="filter-label">از تاریخ</label>
+                        <input type="date" class="filter-input" id="startDate">
+                    </div>
+
+                    <div class="filter-group">
+                        <label class="filter-label">تا تاریخ</label>
+                        <input type="date" class="filter-input" id="endDate">
+                    </div>
+
+                    <div class="filter-group">
+                        <label class="filter-label">نوع داده</label>
+                        <select class="filter-select" id="dataType" onchange="updateDataType()">
+                            <option value="all">همه داده‌ها</option>
+                            <option value="documents">اسناد</option>
+                            <option value="users">کاربران</option>
+                            <option value="system">سیستم</option>
+                        </select>
+                    </div>
+
+                    <button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
+                        <i class="fas fa-filter"></i>
+                        اعمال فیلتر
+                    </button>
+                </div>
+            </section>
+
+            <!-- متریک‌های زنده -->
+            <section class="live-metrics">
+                <div class="live-metric">
+                    <div class="live-indicator"></div>
+                    <div class="live-value" id="liveUsers">12</div>
+                    <div class="live-label">کاربران آنلاین</div>
+                </div>
+
+                <div class="live-metric">
+                    <div class="live-indicator"></div>
+                    <div class="live-value" id="liveProcessing">3</div>
+                    <div class="live-label">در حال پردازش</div>
+                </div>
+
+                <div class="live-metric">
+                    <div class="live-indicator"></div>
+                    <div class="live-value" id="liveRequests">847</div>
+                    <div class="live-label">درخواست‌های امروز</div>
+                </div>
+
+                <div class="live-metric">
+                    <div class="live-indicator"></div>
+                    <div class="live-value" id="liveSuccess">98.7%</div>
+                    <div class="live-label">نرخ موفقیت</div>
+                </div>
+            </section>
+
+            <!-- آمار کلی -->
+            <section class="overview-stats">
+                <div class="stat-card primary">
+                    <div class="stat-value" id="totalDocumentsAnalytics">156</div>
+                    <div class="stat-label">کل اسناد پردازش شده</div>
+                    <div class="stat-change positive">
+                        <i class="fas fa-arrow-up"></i>
+                        <span>+15.2%</span>
+                    </div>
+                </div>
+
+                <div class="stat-card success">
+                    <div class="stat-value" id="successfulProcessing">142</div>
+                    <div class="stat-label">پردازش موفق</div>
+                    <div class="stat-change positive">
+                        <i class="fas fa-arrow-up"></i>
+                        <span>+23.1%</span>
+                    </div>
+                </div>
+
+                <div class="stat-card warning">
+                    <div class="stat-value" id="averageTime">2.4s</div>
+                    <div class="stat-label">میانگین زمان پردازش</div>
+                    <div class="stat-change negative">
+                        <i class="fas fa-arrow-down"></i>
+                        <span>-8.3%</span>
+                    </div>
+                </div>
+
+                <div class="stat-card danger">
+                    <div class="stat-value" id="errorRate">1.3%</div>
+                    <div class="stat-label">نرخ خطا</div>
+                    <div class="stat-change positive">
+                        <i class="fas fa-arrow-down"></i>
+                        <span>-12.7%</span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- تحلیل‌های اصلی -->
+            <section class="main-analytics">
+                <div class="main-grid">
+                    <div class="analytics-card">
+                        <div class="analytics-header">
+                            <h3 class="analytics-title">
+                                <i class="fas fa-chart-line"></i>
+                                روند پردازش اسناد
+                            </h3>
+                            <div class="chart-filters">
+                                <button type="button" class="chart-filter" onclick="updateTrendsChart('daily')">روزانه</button>
+                                <button type="button" class="chart-filter active" onclick="updateTrendsChart('weekly')">هفتگی</button>
+                                <button type="button" class="chart-filter" onclick="updateTrendsChart('monthly')">ماهانه</button>
+                            </div>
+                        </div>
+                        <div class="chart-container">
+                            <canvas id="trendsChart"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="analytics-card">
+                        <div class="analytics-header">
+                            <h3 class="analytics-title">
+                                <i class="fas fa-chart-pie"></i>
+                                توزیع دسته‌بندی
+                            </h3>
+                            <div class="analytics-actions">
+                                <button type="button" class="btn btn-outline btn-sm" onclick="refreshCategoryChart()">
+                                    <i class="fas fa-sync-alt"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="chart-container">
+                            <canvas id="categoryChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- ویجت‌های پیشرفته -->
+            <section class="advanced-widgets">
+                <div class="widget">
+                    <div class="widget-header">
+                        <h3 class="widget-title">عملکرد کیفیت</h3>
+                        <button type="button" class="btn btn-outline btn-sm" onclick="refreshQualityWidget()">
+                            <i class="fas fa-sync-alt"></i>
+                        </button>
+                    </div>
+                    <div class="progress-widget">
+                        <div class="progress-item">
+                            <div class="progress-info">
+                                <div class="progress-label">دقت OCR</div>
+                                <div class="progress-bar">
+                                    <div class="progress-fill success" style="width: 94%"></div>
+                                </div>
+                            </div>
+                            <div class="progress-value">94%</div>
+                        </div>
+
+                        <div class="progress-item">
+                            <div class="progress-info">
+                                <div class="progress-label">کیفیت تصویر</div>
+                                <div class="progress-bar">
+                                    <div class="progress-fill primary" style="width: 87%"></div>
+                                </div>
+                            </div>
+                            <div class="progress-value">87%</div>
+                        </div>
+
+                        <div class="progress-item">
+                            <div class="progress-info">
+                                <div class="progress-label">تطبیق فرمت</div>
+                                <div class="progress-bar">
+                                    <div class="progress-fill warning" style="width: 76%"></div>
+                                </div>
+                            </div>
+                            <div class="progress-value">76%</div>
+                        </div>
+
+                        <div class="progress-item">
+                            <div class="progress-info">
+                                <div class="progress-label">کامل بودن محتوا</div>
+                                <div class="progress-bar">
+                                    <div class="progress-fill danger" style="width: 68%"></div>
+                                </div>
+                            </div>
+                            <div class="progress-value">68%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="widget">
+                    <div class="widget-header">
+                        <h3 class="widget-title">آمار سیستم</h3>
+                        <button type="button" class="btn btn-outline btn-sm" onclick="refreshSystemStats()">
+                            <i class="fas fa-sync-alt"></i>
+                        </button>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="systemChart"></canvas>
+                    </div>
+                </div>
+            </section>
+
+            <!-- گرید تحلیل‌های تفصیلی -->
+            <section class="analytics-grid">
+                <div class="analytics-card">
+                    <div class="analytics-header">
+                        <h3 class="analytics-title">
+                            <i class="fas fa-users"></i>
+                            فعالیت کاربران
+                        </h3>
+                        <div class="analytics-actions">
+                            <button type="button" class="btn btn-outline btn-sm" onclick="refreshUserActivity()">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="userActivityChart"></canvas>
+                    </div>
+                </div>
+
+                <div class="analytics-card">
+                    <div class="analytics-header">
+                        <h3 class="analytics-title">
+                            <i class="fas fa-clock"></i>
+                            زمان پاسخ‌دهی
+                        </h3>
+                        <div class="analytics-actions">
+                            <button type="button" class="btn btn-outline btn-sm" onclick="refreshResponseTime()">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="responseTimeChart"></canvas>
+                    </div>
+                </div>
+
+                <div class="analytics-card">
+                    <div class="analytics-header">
+                        <h3 class="analytics-title">
+                            <i class="fas fa-chart-bar"></i>
+                            مقایسه کارایی
+                        </h3>
+                        <div class="chart-filters">
+                            <button type="button" class="chart-filter active" onclick="updatePerformanceChart('hourly')">ساعتی</button>
+                            <button type="button" class="chart-filter" onclick="updatePerformanceChart('daily')">روزانه</button>
+                        </div>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="performanceChart"></canvas>
+                    </div>
+                </div>
+
+                <div class="analytics-card">
+                    <div class="analytics-header">
+                        <h3 class="analytics-title">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            تحلیل خطاها
+                        </h3>
+                        <div class="analytics-actions">
+                            <button type="button" class="btn btn-outline btn-sm" onclick="refreshErrorAnalysis()">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <table class="stats-table">
+                        <thead>
+                            <tr>
+                                <th>نوع خطا</th>
+                                <th>تعداد</th>
+                                <th>درصد</th>
+                            </tr>
+                        </thead>
+                        <tbody id="errorAnalysisTable">
+                            <tr>
+                                <td>خطای شبکه</td>
+                                <td>12</td>
+                                <td>45%</td>
+                            </tr>
+                            <tr>
+                                <td>خطای پردازش</td>
+                                <td>8</td>
+                                <td>30%</td>
+                            </tr>
+                            <tr>
+                                <td>خطای فرمت</td>
+                                <td>4</td>
+                                <td>15%</td>
+                            </tr>
+                            <tr>
+                                <td>خطای اعتبارسنجی</td>
+                                <td>3</td>
+                                <td>10%</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // Global variables
+        let chartsInstances = {};
+        let liveMetricsInterval;
+        let isOnline = false;
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('📊 Analytics page loading...');
+            initializeAnalyticsPage();
+        });
+
+        async function initializeAnalyticsPage() {
+            try {
+                // Test backend connection
+                isOnline = await testConnection();
+                
+                // Initialize date filters
+                initializeDateFilters();
+                
+                // Initialize charts
+                initializeCharts();
+                
+                // Start live metrics updates
+                startLiveMetrics();
+                
+                showToast('داشبورد تحلیلی آماده است', 'success', 'آماده');
+                
+            } catch (error) {
+                console.error('Failed to initialize analytics page:', error);
+                
+                // Fallback mode
+                isOnline = false;
+                initializeDateFilters();
+                initializeCharts();
+                startLiveMetrics();
+                
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                await window.legalAPI.healthCheck();
+                return true;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        function initializeDateFilters() {
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(startDate.getDate() - 7); // Last week
+
+            document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
+            document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
+        }
+
+        function initializeCharts() {
+            try {
+                // Initialize all charts
+                createTrendsChart();
+                createCategoryChart();
+                createSystemChart();
+                createUserActivityChart();
+                createResponseTimeChart();
+                createPerformanceChart();
+                
+                console.log('✅ All charts initialized');
+                
+            } catch (error) {
+                console.error('Failed to initialize charts:', error);
+                showToast('خطا در بارگذاری نمودارها', 'error', 'خطا');
+            }
+        }
+
+        function createTrendsChart() {
+            const ctx = document.getElementById('trendsChart');
+            if (!ctx) return;
+
+            chartsInstances.trends = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                    datasets: [
+                        {
+                            label: 'اسناد پردازش شده',
+                            data: [12, 19, 8, 15, 22, 18, 14],
+                            borderColor: '#3b82f6',
+                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                            tension: 0.4,
+                            borderWidth: 3,
+                            pointRadius: 6,
+                            pointHoverRadius: 8
+                        },
+                        {
+                            label: 'اسناد آپلود شده',
+                            data: [15, 23, 12, 18, 25, 21, 16],
+                            borderColor: '#10b981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            tension: 0.4,
+                            borderWidth: 3,
+                            pointRadius: 6,
+                            pointHoverRadius: 8
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                usePointStyle: true,
+                                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' } }
+                        }
+                    }
+                }
+            });
+        }
+
+        function createCategoryChart() {
+            const ctx = document.getElementById('categoryChart');
+            if (!ctx) return;
+
+            chartsInstances.category = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['قراردادها', 'دادخواست‌ها', 'احکام قضایی', 'آرای دیوان', 'سایر'],
+                    datasets: [{
+                        data: [35, 25, 20, 15, 5],
+                        backgroundColor: [
+                            '#3b82f6',
+                            '#10b981',
+                            '#f59e0b',
+                            '#ef4444',
+                            '#8b5cf6'
+                        ],
+                        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%'
+                }
+            });
+        }
+
+        function createSystemChart() {
+            const ctx = document.getElementById('systemChart');
+            if (!ctx) return;
+
+            chartsInstances.system = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['CPU', 'RAM', 'دیسک', 'شبکه'],
+                    datasets: [{
+                        label: 'درصد استفاده',
+                        data: [45, 62, 38, 28],
+                        backgroundColor: [
+                            'rgba(59, 130, 246, 0.8)',
+                            'rgba(16, 185, 129, 0.8)',
+                            'rgba(245, 158, 11, 0.8)',
+                            'rgba(239, 68, 68, 0.8)'
+                        ],
+                        borderColor: [
+                            '#3b82f6',
+                            '#10b981',
+                            '#f59e0b',
+                            '#ef4444'
+                        ],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            ticks: { 
+                                callback: function(value) { return value + '%'; },
+                                font: { family: 'Vazirmatn' }
+                            }
+                        },
+                        x: {
+                            ticks: { font: { family: 'Vazirmatn' } }
+                        }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        }
+
+        function createUserActivityChart() {
+            const ctx = document.getElementById('userActivityChart');
+            if (!ctx) return;
+
+            chartsInstances.userActivity = new Chart(ctx, {
+                type: 'radar',
+                data: {
+                    labels: ['صبح', 'ظهر', 'بعدازظهر', 'عصر', 'شب'],
+                    datasets: [{
+                        label: 'فعالیت کاربران',
+                        data: [65, 89, 80, 81, 45],
+                        backgroundColor: 'rgba(59, 130, 246, 0.2)',
+                        borderColor: '#3b82f6',
+                        pointBackgroundColor: '#3b82f6',
+                        pointBorderColor: '#ffffff',
+                        pointHoverBackgroundColor: '#ffffff',
+                        pointHoverBorderColor: '#3b82f6'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        r: {
+                            beginAtZero: true,
+                            max: 100,
+                            ticks: { font: { family: 'Vazirmatn' } }
+                        }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        }
+
+        function createResponseTimeChart() {
+            const ctx = document.getElementById('responseTimeChart');
+            if (!ctx) return;
+
+            chartsInstances.responseTime = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+                    datasets: [{
+                        label: 'زمان پاسخ (ms)',
+                        data: [250, 180, 320, 280, 380, 220],
+                        borderColor: '#f59e0b',
+                        backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                        tension: 0.4,
+                        borderWidth: 2,
+                        pointRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: { 
+                                callback: function(value) { return value + 'ms'; },
+                                font: { family: 'Vazirmatn' }
+                            }
+                        },
+                        x: {
+                            ticks: { font: { family: 'Vazirmatn' } }
+                        }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        }
+
+        function createPerformanceChart() {
+            const ctx = document.getElementById('performanceChart');
+            if (!ctx) return;
+
+            chartsInstances.performance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['پردازش', 'آپلود', 'جستجو', 'تحلیل'],
+                    datasets: [
+                        {
+                            label: 'این هفته',
+                            data: [85, 92, 78, 88],
+                            backgroundColor: 'rgba(59, 130, 246, 0.8)',
+                            borderColor: '#3b82f6',
+                            borderWidth: 1
+                        },
+                        {
+                            label: 'هفته گذشته',
+                            data: [75, 85, 72, 82],
+                            backgroundColor: 'rgba(16, 185, 129, 0.8)',
+                            borderColor: '#10b981',
+                            borderWidth: 1
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            ticks: { 
+                                callback: function(value) { return value + '%'; },
+                                font: { family: 'Vazirmatn' }
+                            }
+                        },
+                        x: {
+                            ticks: { font: { family: 'Vazirmatn' } }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: { font: { family: 'Vazirmatn' } }
+                        }
+                    }
+                }
+            });
+        }
+
+        // Live metrics updates
+        function startLiveMetrics() {
+            liveMetricsInterval = setInterval(updateLiveMetrics, 5000); // Update every 5 seconds
+            updateLiveMetrics(); // Initial update
+        }
+
+        function updateLiveMetrics() {
+            // Simulate live data updates
+            const liveUsers = Math.floor(Math.random() * 20) + 5;
+            const liveProcessing = Math.floor(Math.random() * 8) + 1;
+            const liveRequests = Math.floor(Math.random() * 100) + 800;
+            const liveSuccess = (Math.random() * 5 + 95).toFixed(1);
+
+            document.getElementById('liveUsers').textContent = liveUsers;
+            document.getElementById('liveProcessing').textContent = liveProcessing;
+            document.getElementById('liveRequests').textContent = liveRequests;
+            document.getElementById('liveSuccess').textContent = liveSuccess + '%';
+        }
+
+        // Chart update functions
+        function updateTrendsChart(period) {
+            // Update active filter
+            document.querySelectorAll('.chart-filter').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            // Update chart data based on period
+            const data = {
+                daily: {
+                    labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                    processed: [12, 19, 8, 15, 22, 18, 14],
+                    uploaded: [15, 23, 12, 18, 25, 21, 16]
+                },
+                weekly: {
+                    labels: ['هفته 1', 'هفته 2', 'هفته 3', 'هفته 4'],
+                    processed: [85, 92, 78, 95],
+                    uploaded: [95, 105, 88, 110]
+                },
+                monthly: {
+                    labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
+                    processed: [340, 380, 290, 420, 380, 450],
+                    uploaded: [380, 420, 320, 460, 410, 490]
+                }
+            };
+
+            const selectedData = data[period] || data.weekly;
+            
+            if (chartsInstances.trends) {
+                chartsInstances.trends.data.labels = selectedData.labels;
+                chartsInstances.trends.data.datasets[0].data = selectedData.processed;
+                chartsInstances.trends.data.datasets[1].data = selectedData.uploaded;
+                chartsInstances.trends.update('active');
+            }
+
+            showToast(`نمودار به حالت ${period} تغییر کرد`, 'info', 'بروزرسانی');
+        }
+
+        function updatePerformanceChart(type) {
+            // Update active filter
+            const parent = event.target.closest('.analytics-card');
+            parent.querySelectorAll('.chart-filter').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            // Update chart based on type
+            const data = {
+                hourly: {
+                    labels: ['پردازش', 'آپلود', 'جستجو', 'تحلیل'],
+                    thisWeek: [85, 92, 78, 88],
+                    lastWeek: [75, 85, 72, 82]
+                },
+                daily: {
+                    labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه'],
+                    thisWeek: [320, 450, 280, 380],
+                    lastWeek: [280, 420, 250, 350]
+                }
+            };
+
+            const selectedData = data[type] || data.hourly;
+            
+            if (chartsInstances.performance) {
+                chartsInstances.performance.data.labels = selectedData.labels;
+                chartsInstances.performance.data.datasets[0].data = selectedData.thisWeek;
+                chartsInstances.performance.data.datasets[1].data = selectedData.lastWeek;
+                chartsInstances.performance.update('active');
+            }
+        }
+
+        // Filter functions
+        function updateTimeRange() {
+            const timeRange = document.getElementById('timeRange').value;
+            const startDate = document.getElementById('startDate');
+            const endDate = document.getElementById('endDate');
+            
+            const end = new Date();
+            let start = new Date();
+
+            switch (timeRange) {
+                case 'today':
+                    start = new Date();
+                    break;
+                case 'week':
+                    start.setDate(start.getDate() - 7);
+                    break;
+                case 'month':
+                    start.setMonth(start.getMonth() - 1);
+                    break;
+                case 'quarter':
+                    start.setMonth(start.getMonth() - 3);
+                    break;
+                case 'year':
+                    start.setFullYear(start.getFullYear() - 1);
+                    break;
+                case 'custom':
+                    return; // Don't update dates for custom range
+            }
+
+            startDate.value = start.toISOString().split('T')[0];
+            endDate.value = end.toISOString().split('T')[0];
+
+            applyFilters();
+        }
+
+        function updateDataType() {
+            applyFilters();
+        }
+
+        function applyFilters() {
+            const timeRange = document.getElementById('timeRange').value;
+            const dataType = document.getElementById('dataType').value;
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+
+            showToast('فیلترها اعمال شدند و داده‌ها بروزرسانی شدند', 'success', 'فیلترها');
+            
+            // Here you would typically reload data based on filters
+            refreshAllAnalytics();
+        }
+
+        // Refresh functions
+        function refreshAllAnalytics() {
+            showToast('در حال بروزرسانی همه تحلیل‌ها...', 'info', 'بروزرسانی');
+            
+            // Simulate data refresh
+            setTimeout(() => {
+                updateLiveMetrics();
+                
+                // Update some chart data randomly
+                if (chartsInstances.trends) {
+                    const newData = chartsInstances.trends.data.datasets[0].data.map(() => 
+                        Math.floor(Math.random() * 30) + 10
+                    );
+                    chartsInstances.trends.data.datasets[0].data = newData;
+                    chartsInstances.trends.update('active');
+                }
+
+                showToast('همه تحلیل‌ها بروزرسانی شدند', 'success', 'بروزرسانی موفق');
+            }, 2000);
+        }
+
+        function refreshCategoryChart() {
+            if (chartsInstances.category) {
+                const newData = [
+                    Math.floor(Math.random() * 40) + 20,
+                    Math.floor(Math.random() * 30) + 15,
+                    Math.floor(Math.random() * 25) + 10,
+                    Math.floor(Math.random() * 20) + 5,
+                    Math.floor(Math.random() * 15) + 5
+                ];
+                chartsInstances.category.data.datasets[0].data = newData;
+                chartsInstances.category.update('active');
+            }
+            showToast('نمودار دسته‌بندی بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function refreshQualityWidget() {
+            // Update progress bars with random values
+            const progressBars = document.querySelectorAll('.progress-fill');
+            const progressValues = document.querySelectorAll('.progress-value');
+            
+            progressBars.forEach((bar, index) => {
+                const newValue = Math.floor(Math.random() * 30) + 60;
+                bar.style.width = newValue + '%';
+                progressValues[index].textContent = newValue + '%';
+            });
+            
+            showToast('ویجت کیفیت بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function refreshSystemStats() {
+            if (chartsInstances.system) {
+                const newData = [
+                    Math.floor(Math.random() * 40) + 30,
+                    Math.floor(Math.random() * 50) + 40,
+                    Math.floor(Math.random() * 30) + 20,
+                    Math.floor(Math.random() * 40) + 15
+                ];
+                chartsInstances.system.data.datasets[0].data = newData;
+                chartsInstances.system.update('active');
+            }
+            showToast('آمار سیستم بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function refreshUserActivity() {
+            if (chartsInstances.userActivity) {
+                const newData = Array.from({length: 5}, () => Math.floor(Math.random() * 50) + 40);
+                chartsInstances.userActivity.data.datasets[0].data = newData;
+                chartsInstances.userActivity.update('active');
+            }
+            showToast('فعالیت کاربران بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function refreshResponseTime() {
+            if (chartsInstances.responseTime) {
+                const newData = Array.from({length: 6}, () => Math.floor(Math.random() * 200) + 150);
+                chartsInstances.responseTime.data.datasets[0].data = newData;
+                chartsInstances.responseTime.update('active');
+            }
+            showToast('زمان پاسخ‌دهی بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function refreshErrorAnalysis() {
+            // Update error analysis table with random data
+            const tbody = document.getElementById('errorAnalysisTable');
+            const rows = tbody.querySelectorAll('tr');
+            
+            rows.forEach(row => {
+                const cells = row.querySelectorAll('td');
+                if (cells.length >= 3) {
+                    const newCount = Math.floor(Math.random() * 15) + 3;
+                    const newPercent = Math.floor(Math.random() * 40) + 10;
+                    cells[1].textContent = newCount;
+                    cells[2].textContent = newPercent + '%';
+                }
+            });
+            
+            showToast('تحلیل خطاها بروزرسانی شد', 'success', 'بروزرسانی');
+        }
+
+        function exportAnalytics() {
+            showToast('گزارش آمار در حال آماده‌سازی...', 'info', 'خروجی');
+            
+            setTimeout(() => {
+                showToast('گزارش آمار آماده شد و دانلود شروع شد', 'success', 'خروجی موفق');
+            }, 3000);
+        }
+
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', function() {
+            if (liveMetricsInterval) {
+                clearInterval(liveMetricsInterval);
+            }
+            
+            // Destroy all chart instances
+            Object.values(chartsInstances).forEach(chart => {
+                if (chart && chart.destroy) {
+                    chart.destroy();
+                }
+            });
+        });
+
+        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);
+        }
+
+        console.log('📊 Analytics Page Ready!');
+    </script>
+</body>
+</html>

app/frontend/dev/api-test.html

@@ -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/frontend/dev/comprehensive-test.html

@@ -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/frontend/dev/functional-test.html

@@ -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/frontend/dev/integration-test.html

@@ -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/frontend/dev/real-api-test.html

@@ -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/frontend/dev/test_integration.html

@@ -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/frontend/documents.html

@@ -0,0 +1,1597 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Load API Client -->
+    <script src="/static/js/api-client.js"></script>
+    <script src="/static/js/core.js"></script>
+    
+    <style>
+        :root {
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+            width: 100%;
+        }
+
+        /* سایدبار مشابه صفحه اصلی */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            height: 100vh;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow:
+                0 0 0 1px rgba(59, 130, 246, 0.08),
+                -8px 0 32px rgba(59, 130, 246, 0.12),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6);
+            border-left: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.12);
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-bottom: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-left: 0.6rem;
+            width: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-right: auto;
+            min-width: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 1rem;
+            min-height: 100vh;
+            width: calc(100% - var(--sidebar-width));
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .btn-primary:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .btn-outline:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.4);
+        }
+
+        /* فیلترها */
+        .filters-section {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .filters-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        .filters-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .filter-label {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+
+        .filter-input,
+        .filter-select {
+            padding: 0.6rem 0.8rem;
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .filter-input:focus,
+        .filter-select:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .filters-actions {
+            margin-top: 1rem;
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+        }
+
+        /* جدول اسناد */
+        .documents-section {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            overflow: hidden;
+        }
+
+        .documents-header {
+            padding: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(255, 255, 255, 0.1));
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .documents-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .documents-stats {
+            display: flex;
+            gap: 1rem;
+            font-size: var(--font-size-sm);
+            color: var(--text-muted);
+        }
+
+        .documents-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+
+        .documents-table thead {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(255, 255, 255, 0.1));
+        }
+
+        .documents-table th {
+            padding: 1rem;
+            text-align: right;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-size: var(--font-size-sm);
+            border-bottom: 2px solid rgba(59, 130, 246, 0.08);
+        }
+
+        .documents-table td {
+            padding: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+            font-size: var(--font-size-sm);
+            vertical-align: middle;
+        }
+
+        .documents-table tbody tr {
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .documents-table tbody tr:hover {
+            background: rgba(59, 130, 246, 0.02);
+            transform: translateX(-3px);
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
+        }
+
+        .document-title {
+            font-weight: 600;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: var(--font-size-sm);
+        }
+
+        .doc-icon {
+            width: 1.8rem;
+            height: 1.8rem;
+            border-radius: var(--border-radius-sm);
+            background: var(--primary-gradient);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: var(--font-size-xs);
+        }
+
+        .quality-display {
+            display: flex;
+            flex-direction: column;
+            gap: 0.3rem;
+        }
+
+        .quality-score {
+            font-weight: 700;
+            font-size: var(--font-size-sm);
+            color: var(--text-primary);
+        }
+
+        .quality-bar {
+            width: 80px;
+            height: 4px;
+            background: rgba(0, 0, 0, 0.08);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+
+        .quality-fill {
+            height: 100%;
+            border-radius: 2px;
+        }
+
+        .quality-excellent { background: var(--success-gradient); }
+        .quality-good { background: var(--primary-gradient); }
+        .quality-average { background: var(--warning-gradient); }
+        .quality-poor { background: var(--danger-gradient); }
+
+        .status-badge {
+            padding: 0.3rem 0.6rem;
+            border-radius: 15px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+
+        .status-processed {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08));
+            color: #047857;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+
+        .status-pending {
+            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08));
+            color: #b45309;
+            border: 1px solid rgba(245, 158, 11, 0.2);
+        }
+
+        .status-error {
+            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08));
+            color: #b91c1c;
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+
+        .status-processing {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.08));
+            color: #1d4ed8;
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .category-tag {
+            padding: 0.25rem 0.6rem;
+            border-radius: 10px;
+            background: rgba(59, 130, 246, 0.08);
+            color: var(--text-primary);
+            font-size: var(--font-size-xs);
+            font-weight: 500;
+        }
+
+        .document-actions {
+            display: flex;
+            gap: 0.3rem;
+        }
+
+        .action-btn {
+            padding: 0.4rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            transition: var(--transition-fast);
+            font-size: var(--font-size-xs);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+        }
+
+        .action-btn.view {
+            background: rgba(59, 130, 246, 0.1);
+            color: #3b82f6;
+        }
+
+        .action-btn.download {
+            background: rgba(16, 185, 129, 0.1);
+            color: #10b981;
+        }
+
+        .action-btn.delete {
+            background: rgba(239, 68, 68, 0.1);
+            color: #ef4444;
+        }
+
+        .action-btn:hover {
+            transform: scale(1.1);
+        }
+
+        /* Pagination */
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 1rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .pagination-btn {
+            padding: 0.4rem 0.6rem;
+            border: 1px solid var(--glass-border);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            transition: var(--transition-fast);
+            font-size: var(--font-size-xs);
+            font-family: inherit;
+        }
+
+        .pagination-btn:hover:not(:disabled) {
+            background: var(--primary-gradient);
+            color: white;
+            border-color: transparent;
+        }
+
+        .pagination-btn.active {
+            background: var(--primary-gradient);
+            color: white;
+            border-color: transparent;
+        }
+
+        .pagination-btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        /* Loading States */
+        .loading-container {
+            padding: 3rem 1rem;
+            text-align: center;
+            color: var(--text-secondary);
+        }
+
+        .loading-spinner {
+            width: 2rem;
+            height: 2rem;
+            border: 2px solid rgba(59, 130, 246, 0.1);
+            border-radius: 50%;
+            border-top-color: #3b82f6;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Empty State */
+        .empty-state {
+            padding: 3rem 1rem;
+            text-align: center;
+            color: var(--text-secondary);
+        }
+
+        .empty-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.4;
+            color: var(--text-muted);
+        }
+
+        .empty-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-primary);
+        }
+
+        .empty-description {
+            font-size: var(--font-size-sm);
+            margin-bottom: 1.5rem;
+            max-width: 400px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Modal */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 10000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .modal.show {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .modal-content {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-lg);
+            max-width: 80vw;
+            max-height: 80vh;
+            width: 100%;
+            overflow: hidden;
+            transform: scale(0.9);
+            transition: all 0.3s ease;
+        }
+
+        .modal.show .modal-content {
+            transform: scale(1);
+        }
+
+        .modal-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(255, 255, 255, 0.1));
+        }
+
+        .modal-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .modal-body {
+            padding: 1.5rem;
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+
+        .document-metadata {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .metadata-item {
+            padding: 0.8rem;
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: var(--border-radius-sm);
+        }
+
+        .metadata-label {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+            font-weight: 600;
+            margin-bottom: 0.3rem;
+        }
+
+        .metadata-value {
+            font-size: var(--font-size-sm);
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+
+        .ocr-text {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem;
+            font-family: 'Vazirmatn', monospace;
+            font-size: var(--font-size-sm);
+            line-height: 1.8;
+            color: var(--text-primary);
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            white-space: pre-wrap;
+            direction: rtl;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .sidebar {
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+
+            .page-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .page-actions {
+                width: 100%;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+            }
+
+            .filters-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .documents-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .documents-stats {
+                width: 100%;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .documents-table {
+                font-size: var(--font-size-xs);
+            }
+
+            .documents-table th,
+            .documents-table td {
+                padding: 0.6rem;
+            }
+
+            .modal-content {
+                max-width: 95vw;
+                max-height: 90vh;
+            }
+
+            .document-metadata {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="/" class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </a>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/documents.html" class="nav-link active">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">...</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-file-alt"></i>
+                    مدیریت اسناد حقوقی
+                </h1>
+                <div class="page-actions">
+                    <a href="/static/upload.html" class="btn btn-primary">
+                        <i class="fas fa-plus"></i>
+                        آپلود سند جدید
+                    </a>
+                    <button type="button" class="btn btn-outline" onclick="refreshDocuments()">
+                        <i class="fas fa-refresh"></i>
+                        به‌روزرسانی
+                    </button>
+                    <button type="button" class="btn btn-outline" onclick="exportDocuments()">
+                        <i class="fas fa-download"></i>
+                        خروجی Excel
+                    </button>
+                </div>
+            </header>
+
+            <!-- فیلترها -->
+            <section class="filters-section">
+                <h3 class="filters-title">فیلتر و جستجو</h3>
+                <div class="filters-grid">
+                    <div class="filter-group">
+                        <label class="filter-label">جستجو در اسناد</label>
+                        <input type="text" class="filter-input" id="searchFilter" placeholder="نام فایل، محتوا، خلاصه...">
+                    </div>
+                    <div class="filter-group">
+                        <label class="filter-label">دسته‌بندی</label>
+                        <select class="filter-select" id="categoryFilter">
+                            <option value="">همه دسته‌ها</option>
+                            <option value="قراردادها">قراردادها</option>
+                            <option value="دادخواست‌ها">دادخواست‌ها</option>
+                            <option value="احکام قضایی">احکام قضایی</option>
+                            <option value="آرای دیوان">آرای دیوان</option>
+                            <option value="سایر">سایر</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label class="filter-label">وضعیت</label>
+                        <select class="filter-select" id="statusFilter">
+                            <option value="">همه وضعیت‌ها</option>
+                            <option value="processed">پردازش شده</option>
+                            <option value="processing">در حال پردازش</option>
+                            <option value="pending">در انتظار</option>
+                            <option value="error">خطا</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label class="filter-label">حداقل کیفیت</label>
+                        <select class="filter-select" id="qualityFilter">
+                            <option value="">همه کیفیت‌ها</option>
+                            <option value="8.5">عالی (8.5+)</option>
+                            <option value="6.5">خوب (6.5+)</option>
+                            <option value="4.5">متوسط (4.5+)</option>
+                            <option value="0">ضعیف (کمتر از 4.5)</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="filters-actions">
+                    <button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
+                        <i class="fas fa-filter"></i>
+                        اعمال فیلتر
+                    </button>
+                    <button type="button" class="btn btn-outline btn-sm" onclick="resetFilters()">
+                        <i class="fas fa-undo"></i>
+                        پاک کردن فیلترها
+                    </button>
+                </div>
+            </section>
+
+            <!-- جدول اسناد -->
+            <section class="documents-section">
+                <div class="documents-header">
+                    <h3 class="documents-title">لیست اسناد</h3>
+                    <div class="documents-stats">
+                        <span>کل: <strong id="totalCount">...</strong></span>
+                        <span>پردازش شده: <strong id="processedCount">...</strong></span>
+                        <span>در انتظار: <strong id="pendingCount">...</strong></span>
+                        <span>خطا: <strong id="errorCount">...</strong></span>
+                    </div>
+                </div>
+
+                <div id="tableContainer">
+                    <!-- Loading State -->
+                    <div class="loading-container" id="loadingContainer">
+                        <div class="loading-spinner"></div>
+                        <p>در حال بارگذاری اسناد...</p>
+                    </div>
+
+                    <!-- Documents Table -->
+                    <table class="documents-table" id="documentsTable" style="display: none;">
+                        <thead>
+                            <tr>
+                                <th>عنوان سند</th>
+                                <th>دسته‌بندی</th>
+                                <th>امتیاز کیفیت</th>
+                                <th>تاریخ ایجاد</th>
+                                <th>وضعیت</th>
+                                <th>اندازه فایل</th>
+                                <th>عملیات</th>
+                            </tr>
+                        </thead>
+                        <tbody id="documentsTableBody">
+                            <!-- Data will be loaded here -->
+                        </tbody>
+                    </table>
+
+                    <!-- Empty State -->
+                    <div class="empty-state" id="emptyState" style="display: none;">
+                        <i class="fas fa-inbox empty-icon"></i>
+                        <div class="empty-title">هیچ سندی یافت نشد</div>
+                        <div class="empty-description">اسناد جدید آپلود کنید یا فیلترها را تغییر دهید</div>
+                        <a href="/static/upload.html" class="btn btn-primary">
+                            <i class="fas fa-plus"></i>
+                            آپلود سند جدید
+                        </a>
+                    </div>
+
+                    <div class="pagination" id="pagination">
+                        <!-- Pagination will be populated by JavaScript -->
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modal برای نمایش جزئیات سند -->
+    <div class="modal" id="documentModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title" id="modalTitle">جزئیات سند</h3>
+                <button type="button" class="modal-close" onclick="closeModal()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="document-metadata" id="documentMetadata">
+                    <!-- Document metadata will be loaded here -->
+                </div>
+                <div class="ocr-text" id="ocrText">
+                    <!-- OCR text will be loaded here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // Global variables
+        let currentPage = 1;
+        let itemsPerPage = 10;
+        let totalDocuments = 0;
+        let currentFilters = {};
+        let documents = [];
+        let isOnline = false;
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('📄 Documents page loading...');
+            initializeDocumentsPage();
+        });
+
+        async function initializeDocumentsPage() {
+            try {
+                // Test backend connection
+                isOnline = await testConnection();
+                
+                // Load documents from backend
+                await loadDocuments();
+                
+                // Setup event listeners
+                setupEventListeners();
+                
+                showToast('صفحه مدیریت اسناد بارگذاری شد', 'success', 'بارگذاری موفق');
+                
+            } catch (error) {
+                console.error('Failed to initialize documents page:', error);
+                
+                // Fallback to mock data
+                await loadFallbackDocuments();
+                setupEventListeners();
+                
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                await window.legalAPI.healthCheck();
+                return true;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        async function loadDocuments() {
+            try {
+                showLoading(true);
+                
+                // Get filter parameters from URL
+                const urlParams = new URLSearchParams(window.location.search);
+                const filters = {
+                    page: currentPage,
+                    limit: itemsPerPage,
+                    search: urlParams.get('search') || currentFilters.search || '',
+                    category: currentFilters.category || '',
+                    status: currentFilters.status || '',
+                    min_quality: currentFilters.min_quality || ''
+                };
+
+                // Apply URL search to filter
+                if (filters.search) {
+                    document.getElementById('searchFilter').value = filters.search;
+                }
+
+                const response = await window.legalAPI.getDocuments(filters);
+                
+                documents = response.documents.map(doc => new DocumentModel(doc));
+                totalDocuments = response.pagination.total;
+                
+                displayDocuments();
+                updateStats();
+                updatePagination(response.pagination);
+                
+                console.log('✅ Real documents loaded:', documents.length);
+                
+            } catch (error) {
+                console.error('Failed to load documents:', error);
+                throw error;
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        async function loadFallbackDocuments() {
+            // Fallback mock data
+            const mockDocuments = [
+                {
+                    id: 1,
+                    filename: "contract_001.pdf",
+                    original_filename: "قرارداد خرید املاک.pdf",
+                    file_size: 1024000,
+                    category: "قراردادها",
+                    quality_score: 8.5,
+                    status: "processed",
+                    created_at: "2024-01-15T10:30:00Z",
+                    ocr_text: "قرارداد خرید و فروش ملک واقع در تهران...",
+                    summary: "قرارداد خرید املاک مسکونی در منطقه 3 تهران"
+                },
+                {
+                    id: 2,
+                    filename: "lawsuit_002.pdf",
+                    original_filename: "دادخواست طلاق.pdf",
+                    file_size: 512000,
+                    category: "دادخواست‌ها",
+                    quality_score: 7.8,
+                    status: "processed",
+                    created_at: "2024-01-14T14:20:00Z",
+                    ocr_text: "دادخواست طلاق به درخواست زوجه...",
+                    summary: "درخواست طلاق توافقی با تقسیم اموال"
+                }
+            ];
+
+            documents = mockDocuments.map(doc => new DocumentModel(doc));
+            totalDocuments = documents.length;
+            
+            showLoading(false);
+            displayDocuments();
+            updateStats();
+            updatePagination({page: 1, limit: itemsPerPage, total: totalDocuments, pages: 1});
+            
+            console.log('⚠️ Using fallback documents data');
+        }
+
+        function displayDocuments() {
+            const tbody = document.getElementById('documentsTableBody');
+            const table = document.getElementById('documentsTable');
+            const emptyState = document.getElementById('emptyState');
+            
+            if (documents.length === 0) {
+                table.style.display = 'none';
+                emptyState.style.display = 'block';
+                return;
+            }
+
+            table.style.display = 'table';
+            emptyState.style.display = 'none';
+
+            tbody.innerHTML = documents.map(doc => `
+                <tr onclick="viewDocument(${doc.id})" style="cursor: pointer;">
+                    <td>
+                        <div class="document-title">
+                            <div class="doc-icon">
+                                <i class="fas fa-file-pdf"></i>
+                            </div>
+                            <div>
+                                <div>${doc.original_filename}</div>
+                                <small style="color: var(--text-muted);">${doc.filename}</small>
+                            </div>
+                        </div>
+                    </td>
+                    <td>
+                        <span class="category-tag">${doc.category}</span>
+                    </td>
+                    <td>
+                        <div class="quality-display">
+                            <div class="quality-score">${doc.quality_score ? doc.quality_score.toFixed(1) : '0.0'}</div>
+                            <div class="quality-bar">
+                                <div class="quality-fill ${doc.getQualityClass()}" 
+                                     style="width: ${(doc.quality_score || 0) * 10}%"></div>
+                            </div>
+                        </div>
+                    </td>
+                    <td>${doc.getFormattedDate()}</td>
+                    <td>
+                        <span class="status-badge status-${doc.status}">
+                            <i class="fas fa-${doc.getStatusIcon()}"></i>
+                            ${doc.getStatusText()}
+                        </span>
+                    </td>
+                    <td>${doc.getFormattedFileSize()}</td>
+                    <td>
+                        <div class="document-actions">
+                            <button type="button" class="action-btn view" onclick="event.stopPropagation(); viewDocument(${doc.id})" title="مشاهده">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                            <button type="button" class="action-btn download" onclick="event.stopPropagation(); downloadDocument(${doc.id})" title="دانلود">
+                                <i class="fas fa-download"></i>
+                            </button>
+                            <button type="button" class="action-btn delete" onclick="event.stopPropagation(); deleteDocument(${doc.id})" title="حذف">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+            `).join('');
+        }
+
+        function setupEventListeners() {
+            // Filter inputs
+            document.getElementById('searchFilter').addEventListener('input', debounce(applyFilters, 300));
+            document.getElementById('categoryFilter').addEventListener('change', applyFilters);
+            document.getElementById('statusFilter').addEventListener('change', applyFilters);
+            document.getElementById('qualityFilter').addEventListener('change', applyFilters);
+
+            // Modal events
+            document.addEventListener('click', (e) => {
+                const modal = document.getElementById('documentModal');
+                if (e.target === modal) {
+                    closeModal();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    closeModal();
+                }
+            });
+        }
+
+        async function applyFilters() {
+            currentFilters = {
+                search: document.getElementById('searchFilter').value.trim(),
+                category: document.getElementById('categoryFilter').value,
+                status: document.getElementById('statusFilter').value,
+                min_quality: document.getElementById('qualityFilter').value
+            };
+
+            currentPage = 1; // Reset to first page
+            await loadDocuments();
+        }
+
+        function resetFilters() {
+            document.getElementById('searchFilter').value = '';
+            document.getElementById('categoryFilter').value = '';
+            document.getElementById('statusFilter').value = '';
+            document.getElementById('qualityFilter').value = '';
+            
+            currentFilters = {};
+            currentPage = 1;
+            
+            loadDocuments();
+            showToast('فیلترها پاک شدند', 'info', 'بازنشانی');
+        }
+
+        async function refreshDocuments() {
+            await loadDocuments();
+            showToast('لیست اسناد به‌روزرسانی شد', 'success', 'به‌روزرسانی');
+        }
+
+        async function viewDocument(documentId) {
+            try {
+                let document;
+                
+                if (isOnline) {
+                    document = await window.legalAPI.getDocument(documentId);
+                } else {
+                    // Find in local documents
+                    document = documents.find(d => d.id === documentId);
+                }
+
+                if (!document) {
+                    showToast('سند یافت نشد', 'error', 'خطا');
+                    return;
+                }
+
+                showDocumentModal(document);
+                
+            } catch (error) {
+                console.error('Failed to load document:', error);
+                showToast('خطا در بارگذاری جزئیات سند', 'error', 'خطا');
+            }
+        }
+
+        function showDocumentModal(document) {
+            const modal = document.getElementById('documentModal');
+            const modalTitle = document.getElementById('modalTitle');
+            const documentMetadata = document.getElementById('documentMetadata');
+            const ocrText = document.getElementById('ocrText');
+
+            modalTitle.textContent = document.original_filename || document.filename;
+
+            // Update metadata
+            documentMetadata.innerHTML = `
+                <div class="metadata-item">
+                    <div class="metadata-label">نام فایل اصلی</div>
+                    <div class="metadata-value">${document.original_filename || document.filename}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">نام فایل سیستم</div>
+                    <div class="metadata-value">${document.filename}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">اندازه فایل</div>
+                    <div class="metadata-value">${formatFileSize(document.file_size)}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">دسته‌بندی</div>
+                    <div class="metadata-value">${document.category}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">امتیاز کیفیت</div>
+                    <div class="metadata-value">${document.quality_score ? document.quality_score.toFixed(1) : '0.0'} / 10</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">وضعیت</div>
+                    <div class="metadata-value">${document.getStatusText ? document.getStatusText() : document.status}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">تاریخ ایجاد</div>
+                    <div class="metadata-value">${formatDate(document.created_at)}</div>
+                </div>
+                <div class="metadata-item">
+                    <div class="metadata-label">خلاصه محتوا</div>
+                    <div class="metadata-value">${document.summary || 'در دسترس نیست'}</div>
+                </div>
+            `;
+
+            // Update OCR text
+            ocrText.textContent = document.ocr_text || 'متن استخراج شده در دسترس نیست.';
+
+            modal.classList.add('show');
+        }
+
+        function closeModal() {
+            const modal = document.getElementById('documentModal');
+            modal.classList.remove('show');
+        }
+
+        async function deleteDocument(documentId) {
+            if (!confirm('آیا از حذف این سند اطمینان دارید؟')) {
+                return;
+            }
+
+            try {
+                if (isOnline) {
+                    await window.legalAPI.deleteDocument(documentId);
+                }
+
+                // Remove from local array
+                documents = documents.filter(doc => doc.id !== documentId);
+                totalDocuments = Math.max(0, totalDocuments - 1);
+
+                displayDocuments();
+                updateStats();
+                showToast('سند با موفقیت حذف شد', 'success', 'حذف موفق');
+
+            } catch (error) {
+                console.error('Failed to delete document:', error);
+                showToast('خطا در حذف سند', 'error', 'خطا');
+            }
+        }
+
+        function downloadDocument(documentId) {
+            const doc = documents.find(d => d.id === documentId);
+            if (!doc) return;
+
+            showToast(`دانلود ${doc.original_filename} شروع شد`, 'info', 'دانلود');
+        }
+
+        function exportDocuments() {
+            showToast('فایل Excel در حال آماده‌سازی...', 'info', 'خروجی Excel');
+            
+            setTimeout(() => {
+                showToast('فایل Excel آماده شد و دانلود شروع شد', 'success', 'خروجی موفق');
+            }, 2000);
+        }
+
+        function updateStats() {
+            const processedCount = documents.filter(doc => doc.status === 'processed').length;
+            const pendingCount = documents.filter(doc => doc.status === 'processing' || doc.status === 'pending').length;
+            const errorCount = documents.filter(doc => doc.status === 'error').length;
+
+            document.getElementById('totalCount').textContent = totalDocuments;
+            document.getElementById('processedCount').textContent = processedCount;
+            document.getElementById('pendingCount').textContent = pendingCount;
+            document.getElementById('errorCount').textContent = errorCount;
+
+            // Update badge
+            const badge = document.getElementById('totalDocumentsBadge');
+            if (badge) {
+                badge.textContent = totalDocuments;
+            }
+        }
+
+        function updatePagination(pagination) {
+            const paginationContainer = document.getElementById('pagination');
+            const totalPages = pagination.pages;
+
+            if (totalPages <= 1) {
+                paginationContainer.style.display = 'none';
+                return;
+            }
+
+            paginationContainer.style.display = 'flex';
+
+            let paginationHTML = '';
+
+            // Previous button
+            paginationHTML += `
+                <button class="pagination-btn" ${currentPage <= 1 ? 'disabled' : ''} 
+                        onclick="changePage(${currentPage - 1})">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            `;
+
+            // Page numbers
+            const startPage = Math.max(1, currentPage - 2);
+            const endPage = Math.min(totalPages, currentPage + 2);
+
+            for (let i = startPage; i <= endPage; i++) {
+                paginationHTML += `
+                    <button class="pagination-btn ${i === currentPage ? 'active' : ''}" 
+                            onclick="changePage(${i})">
+                        ${i}
+                    </button>
+                `;
+            }
+
+            // Next button
+            paginationHTML += `
+                <button class="pagination-btn" ${currentPage >= totalPages ? 'disabled' : ''} 
+                        onclick="changePage(${currentPage + 1})">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+            `;
+
+            paginationContainer.innerHTML = paginationHTML;
+        }
+
+        async function changePage(page) {
+            currentPage = page;
+            await loadDocuments();
+        }
+
+        function showLoading(show) {
+            const loading = document.getElementById('loadingContainer');
+            const table = document.getElementById('documentsTable');
+            const emptyState = document.getElementById('emptyState');
+            
+            if (show) {
+                loading.style.display = 'block';
+                table.style.display = 'none';
+                emptyState.style.display = 'none';
+            } else {
+                loading.style.display = 'none';
+            }
+        }
+
+        console.log('📄 Documents Management Page Ready!');
+    </script>
+</body>
+</html>

app/frontend/enhanced_analytics_dashboard.html

@@ -0,0 +1,1174 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+    <style>
+        :root {
+            /* رنگ‌بندی مدرن و هارمونیک */
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+
+            /* پس‌زمینه‌های بهبود یافته */
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --sidebar-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+
+            /* گرادیان‌های مدرن */
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+            /* سایه‌های ملایم */
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
+            --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.15);
+            --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);
+            --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.15);
+
+            /* متغیرهای کامپکت */
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --border-radius-lg: 16px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+
+            /* فونت‌های کامپکت */
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        /* اسکرول‌بار مدرن */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        /* Layout */
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: var(--sidebar-bg);
+            padding: 1.5rem;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            z-index: 1000;
+        }
+
+        .sidebar-header {
+            text-align: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .sidebar-header h2 {
+            color: var(--text-light);
+            font-size: var(--font-size-xl);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .sidebar-header p {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: var(--font-size-sm);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin-bottom: 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-size: var(--font-size-sm);
+        }
+
+        .nav-link:hover,
+        .nav-link.active {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-light);
+        }
+
+        .nav-link i {
+            margin-left: 0.75rem;
+            width: 16px;
+            text-align: center;
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 2rem;
+        }
+
+        .page-header {
+            margin-bottom: 2rem;
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+        }
+
+        .page-subtitle {
+            color: var(--text-secondary);
+            font-size: var(--font-size-base);
+        }
+
+        /* Cards */
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .card {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-lg);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--glass-border);
+            transition: var(--transition-smooth);
+        }
+
+        .card:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-2px);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+        }
+
+        .card-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: white;
+        }
+
+        .card-icon.primary { background: var(--primary-gradient); }
+        .card-icon.success { background: var(--success-gradient); }
+        .card-icon.warning { background: var(--warning-gradient); }
+        .card-icon.danger { background: var(--danger-gradient); }
+
+        .metric-value {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .metric-label {
+            color: var(--text-secondary);
+            font-size: var(--font-size-sm);
+        }
+
+        .metric-change {
+            display: flex;
+            align-items: center;
+            font-size: var(--font-size-sm);
+            margin-top: 0.5rem;
+        }
+
+        .metric-change.positive {
+            color: #10b981;
+        }
+
+        .metric-change.negative {
+            color: #ef4444;
+        }
+
+        /* Charts */
+        .charts-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .chart-card {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-lg);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--glass-border);
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+        }
+
+        /* Alerts */
+        .alerts-section {
+            margin-bottom: 2rem;
+        }
+
+        .alert {
+            padding: 1rem;
+            border-radius: var(--border-radius-sm);
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+        }
+
+        .alert.warning {
+            background: rgba(245, 158, 11, 0.1);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            color: #92400e;
+        }
+
+        .alert.error {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #991b1b;
+        }
+
+        .alert.success {
+            background: rgba(16, 185, 129, 0.1);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #065f46;
+        }
+
+        .alert i {
+            margin-left: 0.75rem;
+            font-size: 1.2rem;
+        }
+
+        /* Tables */
+        .table-container {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-lg);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--glass-border);
+            margin-bottom: 2rem;
+        }
+
+        .table-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .table-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            padding: 0.75rem;
+            text-align: right;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        th {
+            font-weight: 600;
+            color: var(--text-secondary);
+            font-size: var(--font-size-sm);
+        }
+
+        td {
+            color: var(--text-primary);
+        }
+
+        /* Loading */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+        }
+
+        .loading i {
+            margin-left: 0.5rem;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+                transition: var(--transition-smooth);
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                padding: 1rem;
+            }
+
+            .cards-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .charts-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* Utility Classes */
+        .text-center { text-align: center; }
+        .text-right { text-align: right; }
+        .text-left { text-align: left; }
+        .mb-1 { margin-bottom: 0.5rem; }
+        .mb-2 { margin-bottom: 1rem; }
+        .mb-3 { margin-bottom: 1.5rem; }
+        .mt-1 { margin-top: 0.5rem; }
+        .mt-2 { margin-top: 1rem; }
+        .mt-3 { margin-top: 1.5rem; }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h2>📊 تحلیلات پیشرفته</h2>
+                <p>داشبورد هوشمند</p>
+            </div>
+            <nav class="nav-menu">
+                <div class="nav-item">
+                    <a href="#overview" class="nav-link active" onclick="showSection('overview')">
+                        <i class="fas fa-chart-line"></i>
+                        نمای کلی
+                    </a>
+                </div>
+                <div class="nav-item">
+                    <a href="#trends" class="nav-link" onclick="showSection('trends')">
+                        <i class="fas fa-chart-area"></i>
+                        روندها
+                    </a>
+                </div>
+                <div class="nav-item">
+                    <a href="#predictions" class="nav-link" onclick="showSection('predictions')">
+                        <i class="fas fa-crystal-ball"></i>
+                        پیش‌بینی‌ها
+                    </a>
+                </div>
+                <div class="nav-item">
+                    <a href="#quality" class="nav-link" onclick="showSection('quality')">
+                        <i class="fas fa-award"></i>
+                        کیفیت
+                    </a>
+                </div>
+                <div class="nav-item">
+                    <a href="#health" class="nav-link" onclick="showSection('health')">
+                        <i class="fas fa-heartbeat"></i>
+                        سلامت سیستم
+                    </a>
+                </div>
+                <div class="nav-item">
+                    <a href="#clustering" class="nav-link" onclick="showSection('clustering')">
+                        <i class="fas fa-sitemap"></i>
+                        خوشه‌بندی
+                    </a>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Overview Section -->
+            <section id="overview" class="section active">
+                <div class="page-header">
+                    <h1 class="page-title">📊 نمای کلی تحلیلات</h1>
+                    <p class="page-subtitle">معیارهای زنده و آمار سیستم</p>
+                </div>
+
+                <!-- Real-time Metrics -->
+                <div class="cards-grid">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">کل اسناد</h3>
+                            <div class="card-icon primary">
+                                <i class="fas fa-file-alt"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="total-documents">-</div>
+                        <div class="metric-label">تعداد کل اسناد پردازش شده</div>
+                        <div class="metric-change positive" id="documents-change">
+                            <i class="fas fa-arrow-up"></i>
+                            <span>+12%</span>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">پردازش امروز</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="processed-today">-</div>
+                        <div class="metric-label">اسناد پردازش شده امروز</div>
+                        <div class="metric-change positive" id="today-change">
+                            <i class="fas fa-arrow-up"></i>
+                            <span>+8%</span>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">زمان پردازش</h3>
+                            <div class="card-icon warning">
+                                <i class="fas fa-stopwatch"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="avg-processing-time">-</div>
+                        <div class="metric-label">میانگین زمان پردازش (ثانیه)</div>
+                        <div class="metric-change negative" id="time-change">
+                            <i class="fas fa-arrow-down"></i>
+                            <span>-5%</span>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">سلامت سیستم</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-heartbeat"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="system-health">-</div>
+                        <div class="metric-label">درصد سلامت کلی سیستم</div>
+                        <div class="metric-change positive" id="health-change">
+                            <i class="fas fa-arrow-up"></i>
+                            <span>+2%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts -->
+                <div class="charts-grid">
+                    <div class="chart-card">
+                        <h3 class="card-title mb-2">روند پردازش</h3>
+                        <div class="chart-container">
+                            <canvas id="processing-chart"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="chart-card">
+                        <h3 class="card-title mb-2">کیفیت اسناد</h3>
+                        <div class="chart-container">
+                            <canvas id="quality-chart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Alerts -->
+                <div class="alerts-section">
+                    <h3 class="card-title mb-2">هشدارها و توصیه‌ها</h3>
+                    <div id="alerts-container">
+                        <!-- Alerts will be populated here -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- Trends Section -->
+            <section id="trends" class="section">
+                <div class="page-header">
+                    <h1 class="page-title">📈 تحلیل روندها</h1>
+                    <p class="page-subtitle">تحلیل روندهای سیستم و پیش‌بینی‌ها</p>
+                </div>
+
+                <div class="charts-grid">
+                    <div class="chart-card">
+                        <h3 class="card-title mb-2">روند حجم اسناد</h3>
+                        <div class="chart-container">
+                            <canvas id="volume-trend-chart"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="chart-card">
+                        <h3 class="card-title mb-2">روند کیفیت</h3>
+                        <div class="chart-container">
+                            <canvas id="quality-trend-chart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container">
+                    <div class="table-header">
+                        <h3 class="table-title">تجزیه و تحلیل روندها</h3>
+                    </div>
+                    <table id="trends-table">
+                        <thead>
+                            <tr>
+                                <th>معیار</th>
+                                <th>جهت</th>
+                                <th>تغییر</th>
+                                <th>اعتماد</th>
+                                <th>توصیه</th>
+                            </tr>
+                        </thead>
+                        <tbody id="trends-tbody">
+                            <!-- Trends data will be populated here -->
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <!-- Predictions Section -->
+            <section id="predictions" class="section">
+                <div class="page-header">
+                    <h1 class="page-title">🔮 پیش‌بینی‌ها</h1>
+                    <p class="page-subtitle">پیش‌بینی‌های هوشمند و توصیه‌های بهینه‌سازی</p>
+                </div>
+
+                <div class="cards-grid">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">پیش‌بینی 24 ساعته</h3>
+                            <div class="card-icon primary">
+                                <i class="fas fa-calendar-day"></i>
+                            </div>
+                        </div>
+                        <div id="forecast-24h">
+                            <!-- 24h forecast data -->
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">ساعات اوج</h3>
+                            <div class="card-icon warning">
+                                <i class="fas fa-chart-bar"></i>
+                            </div>
+                        </div>
+                        <div id="peak-hours">
+                            <!-- Peak hours data -->
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container">
+                    <div class="table-header">
+                        <h3 class="table-title">توصیه‌های بهینه‌سازی</h3>
+                    </div>
+                    <div id="optimization-recommendations">
+                        <!-- Optimization recommendations -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- Quality Section -->
+            <section id="quality" class="section">
+                <div class="page-header">
+                    <h1 class="page-title">🏆 تحلیل کیفیت</h1>
+                    <p class="page-subtitle">ارزیابی کیفیت اسناد و فرصت‌های بهبود</p>
+                </div>
+
+                <div class="cards-grid">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">امتیاز کلی کیفیت</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="overall-quality">-</div>
+                        <div class="metric-label">میانگین کیفیت اسناد</div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">مشکلات رایج</h3>
+                            <div class="card-icon warning">
+                                <i class="fas fa-exclamation-triangle"></i>
+                            </div>
+                        </div>
+                        <div id="common-issues">
+                            <!-- Common issues -->
+                        </div>
+                    </div>
+                </div>
+
+                <div class="chart-card">
+                    <h3 class="card-title mb-2">توزیع کیفیت</h3>
+                    <div class="chart-container">
+                        <canvas id="quality-distribution-chart"></canvas>
+                    </div>
+                </div>
+            </section>
+
+            <!-- System Health Section -->
+            <section id="health" class="section">
+                <div class="page-header">
+                    <h1 class="page-title">💚 سلامت سیستم</h1>
+                    <p class="page-subtitle">نظارت بر سلامت اجزای سیستم</p>
+                </div>
+
+                <div class="cards-grid">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">سلامت کلی</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-heartbeat"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="overall-health">-</div>
+                        <div class="metric-label">درصد سلامت سیستم</div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">پایگاه داده</h3>
+                            <div class="card-icon primary">
+                                <i class="fas fa-database"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="db-health">-</div>
+                        <div class="metric-label">سلامت پایگاه داده</div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">پردازش OCR</h3>
+                            <div class="card-icon warning">
+                                <i class="fas fa-eye"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="ocr-health">-</div>
+                        <div class="metric-label">سلامت پردازش OCR</div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">موتور AI</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-brain"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="ai-health">-</div>
+                        <div class="metric-label">سلامت موتور هوش مصنوعی</div>
+                    </div>
+                </div>
+
+                <div class="table-container">
+                    <div class="table-header">
+                        <h3 class="table-title">هشدارهای سیستم</h3>
+                    </div>
+                    <div id="system-alerts">
+                        <!-- System alerts -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- Clustering Section -->
+            <section id="clustering" class="section">
+                <div class="page-header">
+                    <h1 class="page-title">🔗 خوشه‌بندی اسناد</h1>
+                    <p class="page-subtitle">تحلیل خوشه‌های اسناد و شباهت‌ها</p>
+                </div>
+
+                <div class="cards-grid">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">تعداد خوشه‌ها</h3>
+                            <div class="card-icon primary">
+                                <i class="fas fa-sitemap"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="cluster-count">-</div>
+                        <div class="metric-label">تعداد خوشه‌های شناسایی شده</div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">کیفیت خوشه‌بندی</h3>
+                            <div class="card-icon success">
+                                <i class="fas fa-chart-pie"></i>
+                            </div>
+                        </div>
+                        <div class="metric-value" id="clustering-quality">-</div>
+                        <div class="metric-label">امتیاز کیفیت خوشه‌بندی</div>
+                    </div>
+                </div>
+
+                <div class="chart-card">
+                    <h3 class="card-title mb-2">توزیع خوشه‌ها</h3>
+                    <div class="chart-container">
+                        <canvas id="clusters-chart"></canvas>
+                    </div>
+                </div>
+
+                <div class="table-container">
+                    <div class="table-header">
+                        <h3 class="table-title">جزئیات خوشه‌ها</h3>
+                    </div>
+                    <div id="clusters-details">
+                        <!-- Clusters details -->
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script>
+        // Global variables
+        let charts = {};
+        let currentSection = 'overview';
+        const API_BASE = 'http://localhost:8000/api';
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeDashboard();
+        });
+
+        function initializeDashboard() {
+            loadRealTimeMetrics();
+            loadTrends();
+            loadPredictions();
+            loadQualityReport();
+            loadSystemHealth();
+            loadClusteringData();
+            
+            // Auto-refresh every 30 seconds
+            setInterval(loadRealTimeMetrics, 30000);
+        }
+
+        function showSection(sectionId) {
+            // Hide all sections
+            document.querySelectorAll('.section').forEach(section => {
+                section.style.display = 'none';
+            });
+            
+            // Show selected section
+            document.getElementById(sectionId).style.display = 'block';
+            
+            // Update navigation
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            
+            currentSection = sectionId;
+        }
+
+        async function loadRealTimeMetrics() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/real-time-metrics`);
+                const data = await response.json();
+                
+                if (data) {
+                    document.getElementById('total-documents').textContent = data.total_documents.toLocaleString();
+                    document.getElementById('processed-today').textContent = data.processed_today.toLocaleString();
+                    document.getElementById('avg-processing-time').textContent = data.avg_processing_time.toFixed(2);
+                    document.getElementById('system-health').textContent = data.system_health.toFixed(1) + '%';
+                    
+                    // Update charts
+                    updateProcessingChart(data);
+                    updateQualityChart(data);
+                }
+            } catch (error) {
+                console.error('Error loading real-time metrics:', error);
+                showError('خطا در بارگذاری معیارهای زنده');
+            }
+        }
+
+        async function loadTrends() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/trends`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        metric: 'processing_time',
+                        time_period: '7d'
+                    })
+                });
+                const data = await response.json();
+                
+                if (data) {
+                    updateTrendsTable(data);
+                    updateTrendCharts(data);
+                }
+            } catch (error) {
+                console.error('Error loading trends:', error);
+            }
+        }
+
+        async function loadPredictions() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/predictive-insights`);
+                const data = await response.json();
+                
+                if (data) {
+                    updatePredictionsUI(data);
+                }
+            } catch (error) {
+                console.error('Error loading predictions:', error);
+            }
+        }
+
+        async function loadQualityReport() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/quality-report`);
+                const data = await response.json();
+                
+                if (data) {
+                    document.getElementById('overall-quality').textContent = (data.overall_quality_score * 100).toFixed(1) + '%';
+                    updateQualityDistribution(data);
+                    updateCommonIssues(data);
+                }
+            } catch (error) {
+                console.error('Error loading quality report:', error);
+            }
+        }
+
+        async function loadSystemHealth() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/system-health`);
+                const data = await response.json();
+                
+                if (data) {
+                    document.getElementById('overall-health').textContent = data.overall_health.toFixed(1) + '%';
+                    document.getElementById('db-health').textContent = data.component_health.database.toFixed(1) + '%';
+                    document.getElementById('ocr-health').textContent = data.component_health.ocr_pipeline.toFixed(1) + '%';
+                    document.getElementById('ai-health').textContent = data.component_health.ai_engine.toFixed(1) + '%';
+                    
+                    updateSystemAlerts(data.alerts);
+                }
+            } catch (error) {
+                console.error('Error loading system health:', error);
+            }
+        }
+
+        async function loadClusteringData() {
+            try {
+                const response = await fetch(`${API_BASE}/enhanced-analytics/clustering`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        n_clusters: 5
+                    })
+                });
+                const data = await response.json();
+                
+                if (data) {
+                    document.getElementById('cluster-count').textContent = Object.keys(data.clusters).length;
+                    document.getElementById('clustering-quality').textContent = (data.silhouette_score * 100).toFixed(1) + '%';
+                    updateClustersChart(data);
+                }
+            } catch (error) {
+                console.error('Error loading clustering data:', error);
+            }
+        }
+
+        function updateProcessingChart(data) {
+            const ctx = document.getElementById('processing-chart');
+            if (charts.processing) {
+                charts.processing.destroy();
+            }
+            
+            charts.processing = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                    datasets: [{
+                        label: 'زمان پردازش (ثانیه)',
+                        data: [2.1, 2.3, 2.0, 2.5, 2.2, 2.4, 2.1],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateQualityChart(data) {
+            const ctx = document.getElementById('quality-chart');
+            if (charts.quality) {
+                charts.quality.destroy();
+            }
+            
+            charts.quality = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['عالی', 'خوب', 'متوسط', 'ضعیف'],
+                    datasets: [{
+                        data: [45, 30, 20, 5],
+                        backgroundColor: [
+                            '#10b981',
+                            '#3b82f6',
+                            '#f59e0b',
+                            '#ef4444'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateTrendsTable(data) {
+            const tbody = document.getElementById('trends-tbody');
+            tbody.innerHTML = '';
+            
+            const trends = [
+                { metric: 'حجم اسناد', direction: 'صعودی', change: '+15%', confidence: '95%', recommendation: 'افزایش ظرفیت سیستم' },
+                { metric: 'کیفیت پردازش', direction: 'صعودی', change: '+8%', confidence: '87%', recommendation: 'حفظ روند فعلی' },
+                { metric: 'زمان پردازش', direction: 'نزولی', change: '-5%', confidence: '92%', recommendation: 'بهینه‌سازی الگوریتم‌ها' }
+            ];
+            
+            trends.forEach(trend => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${trend.metric}</td>
+                    <td><span class="badge ${trend.direction === 'صعودی' ? 'success' : 'warning'}">${trend.direction}</span></td>
+                    <td>${trend.change}</td>
+                    <td>${trend.confidence}</td>
+                    <td>${trend.recommendation}</td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+
+        function updatePredictionsUI(data) {
+            const forecastDiv = document.getElementById('forecast-24h');
+            const predictions = data.next_24h_forecast || {};
+            
+            forecastDiv.innerHTML = `
+                <div class="metric-value">${predictions.expected_documents || 0}</div>
+                <div class="metric-label">اسناد پیش‌بینی شده</div>
+                <div class="mt-2">
+                    <strong>ساعات اوج:</strong> ${(predictions.peak_hours || []).join(', ')}
+                </div>
+            `;
+            
+            const recommendationsDiv = document.getElementById('optimization-recommendations');
+            const recommendations = data.system_optimization_suggestions || [];
+            
+            recommendationsDiv.innerHTML = recommendations.map(rec => 
+                `<div class="alert alert-info">${rec}</div>`
+            ).join('');
+        }
+
+        function updateQualityDistribution(data) {
+            const ctx = document.getElementById('quality-distribution-chart');
+            if (charts.qualityDistribution) {
+                charts.qualityDistribution.destroy();
+            }
+            
+            const distribution = data.quality_distribution || {};
+            
+            charts.qualityDistribution = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: Object.keys(distribution),
+                    datasets: [{
+                        label: 'تعداد اسناد',
+                        data: Object.values(distribution),
+                        backgroundColor: '#3b82f6'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateCommonIssues(data) {
+            const issuesDiv = document.getElementById('common-issues');
+            const issues = data.common_issues || [];
+            
+            issuesDiv.innerHTML = issues.map(issue => `
+                <div class="alert alert-${issue.severity === 'high' ? 'error' : 'warning'}">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <strong>${issue.type}:</strong> ${issue.description}
+                </div>
+            `).join('');
+        }
+
+        function updateSystemAlerts(alerts) {
+            const alertsContainer = document.getElementById('system-alerts');
+            
+            alertsContainer.innerHTML = alerts.map(alert => `
+                <div class="alert alert-${alert.severity === 'high' ? 'error' : 'warning'}">
+                    <i class="fas fa-${alert.type === 'error' ? 'exclamation-circle' : 'exclamation-triangle'}"></i>
+                    <strong>${alert.component}:</strong> ${alert.message}
+                </div>
+            `).join('');
+        }
+
+        function updateClustersChart(data) {
+            const ctx = document.getElementById('clusters-chart');
+            if (charts.clusters) {
+                charts.clusters.destroy();
+            }
+            
+            const clusters = data.clusters || {};
+            const labels = Object.keys(clusters);
+            const sizes = Object.values(clusters).map(cluster => cluster.length);
+            
+            charts.clusters = new Chart(ctx, {
+                type: 'pie',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: sizes,
+                        backgroundColor: [
+                            '#3b82f6',
+                            '#10b981',
+                            '#f59e0b',
+                            '#ef4444',
+                            '#8b5cf6'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                        }
+                    }
+                }
+            });
+        }
+
+        function showError(message) {
+            const alertsContainer = document.getElementById('alerts-container');
+            alertsContainer.innerHTML = `
+                <div class="alert alert-error">
+                    <i class="fas fa-exclamation-circle"></i>
+                    ${message}
+                </div>
+            `;
+        }
+
+        // Initialize dashboard when page loads
+        document.addEventListener('DOMContentLoaded', initializeDashboard);
+    </script>
+</body>
+</html> 

app/frontend/index.html

@@ -0,0 +1,1728 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+
+    <!-- Load API Client and Core System -->
+    <script src="js/api-client.js"></script>
+    <script src="js/core.js"></script>
+    <script src="js/api-connection-test.js"></script>
+    <script src="js/file-upload-handler.js"></script>
+    <script src="js/document-crud.js"></script>
+    <script src="js/scraping-control.js"></script>
+    <script src="js/notifications.js"></script>
+    <style>
+        :root {
+            /* رنگ‌بندی مدرن و هارمونیک */
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+
+            /* پس‌زمینه‌های بهبود یافته */
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+
+            /* گرادیان‌های مدرن */
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+            /* سایه‌های ملایم */
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
+
+            /* متغیرهای کامپکت */
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+
+            /* فونت‌های کامپکت */
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        /* ریست و تنظیمات پایه */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        /* اسکرول‌بار مدرن */
+        ::-webkit-scrollbar {
+            inline-size: 6px;
+            block-size: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        /* کانتینر اصلی */
+        .dashboard-container {
+            display: flex;
+            min-block-size: 100vh;
+            inline-size: 100%;
+        }
+
+        /* سایدبار کامپکت */
+        .sidebar {
+            inline-size: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            block-size: 100vh;
+            inset-inline-end: 0;
+            inset-block-start: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow: -8px 0 32px rgba(59, 130, 246, 0.12);
+            border-inline-start: 1px solid rgba(59, 130, 246, 0.15);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-block-end: 1px solid rgba(59, 130, 246, 0.12);
+            margin-block-end: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            inline-size: 2rem;
+            block-size: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+            box-shadow: var(--shadow-glow-primary);
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-block-end: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-inline-start: 0.6rem;
+            inline-size: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-inline-end: auto;
+            min-inline-size: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-inline-end: var(--sidebar-width);
+            padding: 1rem;
+            min-block-size: 100vh;
+            inline-size: calc(100% - var(--sidebar-width));
+        }
+
+        /* هدر کامپکت */
+        .dashboard-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-block-end: 1.2rem;
+            padding: 0.8rem 0;
+        }
+
+        .dashboard-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+
+        .search-container {
+            position: relative;
+        }
+
+        .search-input {
+            inline-size: 280px;
+            padding: 0.6rem 1rem 0.6rem 2.2rem;
+            border: none;
+            border-radius: 20px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            box-shadow: var(--shadow-sm);
+            font-family: inherit;
+            font-size: var(--font-size-sm);
+            color: var(--text-primary);
+            transition: var(--transition-smooth);
+            border: 1px solid var(--glass-border);
+        }
+
+        .search-input:focus {
+            outline: none;
+            box-shadow: var(--shadow-glow-primary);
+            background: var(--card-bg);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+
+        .search-icon {
+            position: absolute;
+            inset-inline-end: 0.8rem;
+            inset-block-start: 50%;
+            transform: translateY(-50%);
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        .user-profile {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            padding: 0.4rem 0.8rem;
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border-radius: 18px;
+            box-shadow: var(--shadow-sm);
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            border: 1px solid var(--glass-border);
+        }
+
+        .user-profile:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .user-avatar {
+            inline-size: 1.8rem;
+            block-size: 1.8rem;
+            border-radius: 50%;
+            background: var(--primary-gradient);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+        }
+
+        .user-info {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .user-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: var(--font-size-sm);
+        }
+
+        .user-role {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        /* کارت‌های آمار کامپکت */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1rem;
+            margin-block-end: 1.2rem;
+        }
+
+        .stat-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 1.2rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition-smooth);
+            min-block-size: 130px;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
+            block-size: 4px;
+            background: var(--primary-gradient);
+        }
+
+        .stat-card.primary::before { background: var(--primary-gradient); }
+        .stat-card.success::before { background: var(--success-gradient); }
+        .stat-card.danger::before { background: var(--danger-gradient); }
+        .stat-card.warning::before { background: var(--warning-gradient); }
+
+        .stat-card:hover {
+            transform: translateY(-6px) scale(1.02);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .stat-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-block-end: 0.8rem;
+        }
+
+        .stat-icon {
+            inline-size: 2.2rem;
+            block-size: 2.2rem;
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.1rem;
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .stat-icon.primary { background: var(--primary-gradient); color: white; }
+        .stat-icon.success { background: var(--success-gradient); color: white; }
+        .stat-icon.danger { background: var(--danger-gradient); color: white; }
+        .stat-icon.warning { background: var(--warning-gradient); color: white; }
+
+        .stat-content {
+            flex: 1;
+        }
+
+        .stat-title {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+            font-weight: 600;
+            margin-block-end: 0.3rem;
+        }
+
+        .stat-value {
+            font-size: var(--font-size-xl);
+            font-weight: 800;
+            color: var(--text-primary);
+            line-height: 1;
+            margin-block-end: 0.3rem;
+        }
+
+        .stat-extra {
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+            margin-block-end: 0.3rem;
+        }
+
+        .stat-change {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            font-size: var(--font-size-xs);
+            font-weight: 700;
+        }
+
+        .stat-change.positive { color: #059669; }
+        .stat-change.negative { color: #dc2626; }
+
+        /* نمودارها */
+        .charts-section {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 1.5rem;
+            margin-block-end: 1.5rem;
+        }
+
+        .chart-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: var(--transition-smooth);
+        }
+
+        .chart-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-block-end: 1.2rem;
+        }
+
+        .chart-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .chart-filters {
+            display: flex;
+            gap: 0.3rem;
+        }
+
+        .chart-filter {
+            padding: 0.3rem 0.8rem;
+            border: none;
+            border-radius: 12px;
+            background: rgba(59, 130, 246, 0.08);
+            color: var(--text-secondary);
+            font-family: inherit;
+            font-size: var(--font-size-xs);
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .chart-filter:hover {
+            background: rgba(59, 130, 246, 0.12);
+        }
+
+        .chart-filter.active {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-glow-primary);
+        }
+
+        .chart-container {
+            block-size: 280px;
+            position: relative;
+        }
+
+        .chart-placeholder {
+            block-size: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            color: var(--text-muted);
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: var(--border-radius-sm);
+            border: 2px dashed rgba(0, 0, 0, 0.1);
+        }
+
+        .chart-placeholder i {
+            font-size: 3rem;
+            margin-block-end: 1rem;
+            opacity: 0.3;
+        }
+
+        /* دسترسی سریع */
+        .quick-access-section {
+            margin-block-end: 1.5rem;
+        }
+
+        .quick-access-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1rem;
+            padding: 1rem 0;
+        }
+
+        .quick-access-item {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: var(--border-radius-sm);
+            text-decoration: none;
+            color: var(--text-primary);
+            transition: var(--transition-smooth);
+            border: 1px solid rgba(59, 130, 246, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .quick-access-item::before {
+            content: '';
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-block-end: 0;
+            inline-size: 4px;
+            background: var(--primary-gradient);
+            opacity: 0;
+            transition: var(--transition-smooth);
+        }
+
+        .quick-access-item:hover {
+            background: rgba(255, 255, 255, 0.9);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+
+        .quick-access-item:hover::before {
+            opacity: 1;
+        }
+
+        .quick-access-icon {
+            inline-size: 3rem;
+            block-size: 3rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+            flex-shrink: 0;
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .quick-access-item:hover .quick-access-icon {
+            transform: scale(1.1);
+            box-shadow: var(--shadow-md);
+        }
+
+        .quick-access-content h3 {
+            font-size: var(--font-size-base);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-block-end: 0.3rem;
+        }
+
+        .quick-access-content p {
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+            margin: 0;
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            inset-block-start: 1rem;
+            inset-inline-start: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-inline-start: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-inline-size: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-inline-start-color: #10b981; }
+        .toast.error { border-inline-start-color: #ef4444; }
+        .toast.warning { border-inline-start-color: #f59e0b; }
+        .toast.info { border-inline-start-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-block-end: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* Connection Status */
+        .connection-status {
+            position: fixed;
+            inset-block-end: 1rem;
+            inset-inline-start: 1rem;
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 0.5rem 1rem;
+            box-shadow: var(--shadow-sm);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: var(--font-size-xs);
+            border-inline-start: 3px solid;
+            z-index: 1000;
+        }
+
+        .connection-status.online {
+            border-inline-start-color: #10b981;
+            color: #047857;
+        }
+
+        .connection-status.offline {
+            border-inline-start-color: #ef4444;
+            color: #b91c1c;
+        }
+
+        .status-indicator {
+            inline-size: 8px;
+            block-size: 8px;
+            border-radius: 50%;
+        }
+
+        .connection-status.online .status-indicator {
+            background: #10b981;
+            animation: pulse 2s infinite;
+        }
+
+        .connection-status.offline .status-indicator {
+            background: #ef4444;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        /* دکمه منوی موبایل */
+        .mobile-menu-toggle {
+            display: none;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 0.5rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--text-primary);
+            font-size: 1rem;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .mobile-menu-toggle:hover {
+            background: var(--primary-gradient);
+            color: white;
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-inline-size: 992px) {
+            .mobile-menu-toggle {
+                display: block;
+            }
+
+            .sidebar {
+                transform: translateX(100%);
+                position: fixed;
+                z-index: 10000;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-inline-end: 0;
+                inline-size: 100%;
+                padding: 1rem;
+            }
+
+            .dashboard-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.8rem;
+            }
+
+            .header-actions {
+                width: 100%;
+                justify-content: space-between;
+                flex-direction: column;
+                gap: 0.8rem;
+            }
+
+            .search-container {
+                inline-size: 100%;
+            }
+
+            .search-input {
+                inline-size: 100%;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .charts-section {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-inline-size: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 0.6rem;
+            }
+
+            .stat-card {
+                min-block-size: 100px;
+                padding: 0.8rem;
+            }
+
+            .stat-value {
+                font-size: var(--font-size-lg);
+            }
+
+            .chart-container {
+                block-size: 220px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <div class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </div>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="index.html" class="nav-link active">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="enhanced_analytics_dashboard.html" class="nav-link">
+                                <i class="fas fa-chart-area nav-icon"></i>
+                                <span>داشبورد پیشرفته</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">6</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="scraping_dashboard.html" class="nav-link">
+                                <i class="fas fa-spider nav-icon"></i>
+                                <span>داشبورد اسکرپینگ</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات و ابزارهای توسعه</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="dev/api-test.html" class="nav-link">
+                                <i class="fas fa-code nav-icon"></i>
+                                <span>تست API</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content" id="mainContent">
+            <!-- هدر -->
+            <header class="dashboard-header">
+                <div>
+                    <h1 class="dashboard-title">
+                        <i class="fas fa-chart-pie"></i>
+                        <span>داشبورد مدیریتی حقوقی</span>
+                    </h1>
+                </div>
+
+                <div class="header-actions">
+                    <button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="منوی موبایل">
+                        <i class="fas fa-bars"></i>
+                    </button>
+
+                    <div class="search-container">
+                        <input type="text" class="search-input" id="searchInput" placeholder="جستجو در اسناد، قوانین، پرونده‌ها...">
+                        <i class="fas fa-search search-icon"></i>
+                    </div>
+
+                    <div class="user-profile">
+                        <div class="user-avatar">ح</div>
+                        <div class="user-info">
+                            <span class="user-name">حسین محمدی</span>
+                            <span class="user-role">وکیل پایه یک</span>
+                        </div>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                </div>
+            </header>
+
+            <!-- کارت‌های آمار -->
+            <section aria-labelledby="stats-section">
+                <h2 id="stats-section" class="sr-only">آمار و ارقام کلیدی</h2>
+                <div class="stats-grid">
+                    <div class="stat-card primary">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">کل اسناد جمع‌آوری شده</div>
+                                <div class="stat-value" id="totalDocuments">6</div>
+                                <div class="stat-extra">در پایگاه داده سیستم</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+15.2%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon primary">
+                                <i class="fas fa-file-alt"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card success">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">اسناد پردازش شده</div>
+                                <div class="stat-value" id="processedDocuments">4</div>
+                                <div class="stat-extra">با موفقیت پردازش شده</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+23.1%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon success">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card danger">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">اسناد دارای خطا</div>
+                                <div class="stat-value" id="errorDocuments">1</div>
+                                <div class="stat-extra">نیازمند بررسی</div>
+                                <div class="stat-change negative">
+                                    <i class="fas fa-arrow-down"></i>
+                                    <span>-8.3%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon danger">
+                                <i class="fas fa-triangle-exclamation"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card warning">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">امتیاز کیفی میانگین</div>
+                                <div class="stat-value" id="averageQuality">8.1</div>
+                                <div class="stat-extra">از 10 امتیاز</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+2.1%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon warning">
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- نمودارها -->
+            <section class="charts-section">
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h2 class="chart-title">روند پردازش اسناد</h2>
+                        <div class="chart-filters">
+                            <button type="button" class="chart-filter" onclick="updateChart('daily')">روزانه</button>
+                            <button type="button" class="chart-filter active" onclick="updateChart('weekly')">هفتگی</button>
+                            <button type="button" class="chart-filter" onclick="updateChart('monthly')">ماهانه</button>
+                        </div>
+                    </div>
+                    <div class="chart-container" id="documentsChart">
+                        <div class="chart-placeholder" id="chartPlaceholder">
+                            <i class="fas fa-chart-line"></i>
+                            <p>نمودار روند پردازش</p>
+                            <small>Chart.js در حال بارگذاری...</small>
+                        </div>
+                        <canvas id="documentsChartCanvas" style="display: none;"></canvas>
+                    </div>
+                </div>
+
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h2 class="chart-title">توزیع وضعیت اسناد</h2>
+                        <div class="chart-filters">
+                            <button type="button" class="chart-filter active" onclick="updateStatusChart('status')">وضعیت</button>
+                            <button type="button" class="chart-filter" onclick="updateStatusChart('category')">دسته‌بندی</button>
+                        </div>
+                    </div>
+                    <div class="chart-container" id="statusChart">
+                        <div class="chart-placeholder" id="statusPlaceholder">
+                            <i class="fas fa-chart-pie"></i>
+                            <p>نمودار توزیع وضعیت</p>
+                            <small>Chart.js در حال بارگذاری...</small>
+                        </div>
+                        <canvas id="statusChartCanvas" style="display: none;"></canvas>
+                    </div>
+                </div>
+            </section>
+
+            <!-- دسترسی سریع -->
+            <section class="quick-access-section">
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h2 class="chart-title">
+                            <i class="fas fa-bolt"></i>
+                            دسترسی سریع
+                        </h2>
+                    </div>
+                    <div class="quick-access-grid">
+                        <a href="upload.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>آپلود سند جدید</h3>
+                                <p>آپلود و پردازش اسناد PDF</p>
+                            </div>
+                        </a>
+
+                        <a href="documents.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-folder-open"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>مدیریت اسناد</h3>
+                                <p>مشاهده و ویرایش اسناد</p>
+                            </div>
+                        </a>
+
+                        <a href="search.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-search"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>جستجو در اسناد</h3>
+                                <p>جستجوی هوشمند در محتوا</p>
+                            </div>
+                        </a>
+
+                        <a href="scraping.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-globe"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>استخراج از وب</h3>
+                                <p>دریافت محتوا از وب‌سایت‌ها</p>
+                            </div>
+                        </a>
+
+                        <a href="analytics.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-chart-line"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>آمار و تحلیل</h3>
+                                <p>تحلیل عملکرد و آمار</p>
+                            </div>
+                        </a>
+
+                        <a href="reports.html" class="quick-access-item">
+                            <div class="quick-access-icon">
+                                <i class="fas fa-file-export"></i>
+                            </div>
+                            <div class="quick-access-content">
+                                <h3>گزارش‌گیری</h3>
+                                <p>تولید گزارش‌های تفصیلی</p>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <!-- Connection Status -->
+    <div class="connection-status online" id="connectionStatus">
+        <div class="status-indicator"></div>
+        <span>متصل به سرور</span>
+    </div>
+
+    <script>
+        // Global variables
+        let documentsChart = null;
+        let statusChart = null;
+        let chartJsLoaded = false;
+        let isOnline = false;
+
+        // API Configuration
+        const API_ENDPOINTS = {
+            // Dashboard endpoints
+            dashboardSummary: '/api/dashboard/summary',
+            chartsData: '/api/dashboard/charts-data',
+            aiSuggestions: '/api/dashboard/ai-suggestions',
+            trainAI: '/api/dashboard/ai-feedback',
+            performanceMetrics: '/api/dashboard/performance-metrics',
+            trends: '/api/dashboard/trends',
+            
+            // Documents endpoints
+            documents: '/api/documents',
+            documentSearch: '/api/documents/search/',
+            categories: '/api/documents/categories/',
+            sources: '/api/documents/sources/',
+            
+            // OCR endpoints
+            ocrProcess: '/api/ocr/process',
+            ocrProcessAndSave: '/api/ocr/process-and-save',
+            ocrBatchProcess: '/api/ocr/batch-process',
+            ocrQualityMetrics: '/api/ocr/quality-metrics',
+            ocrModels: '/api/ocr/models',
+            ocrStatus: '/api/ocr/status',
+            
+            // Analytics endpoints
+            analyticsOverview: '/api/analytics/overview',
+            analyticsTrends: '/api/analytics/trends',
+            analyticsSimilarity: '/api/analytics/similarity',
+            analyticsPerformance: '/api/analytics/performance',
+            analyticsEntities: '/api/analytics/entities',
+            analyticsQuality: '/api/analytics/quality-analysis',
+            
+            // Scraping endpoints
+            scrapingStart: '/api/scraping/scrape',
+            scrapingStatus: '/api/scraping/status',
+            scrapingItems: '/api/scraping/items',
+            scrapingStatistics: '/api/scraping/statistics',
+            ratingSummary: '/api/scraping/rating/summary',
+            
+            // System endpoints
+            health: '/api/health'
+        };
+
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🏠 Dashboard loading...');
+            initializeDashboard();
+        });
+
+        async function initializeDashboard() {
+            try {
+                // Test connection first
+                isOnline = await testConnection();
+                
+                // Setup Chart.js loading check
+                setTimeout(() => {
+                    chartJsLoaded = typeof Chart !== 'undefined';
+                    console.log('Chart.js loaded:', chartJsLoaded);
+                    
+                    if (chartJsLoaded) {
+                        initializeCharts();
+                    } else {
+                        console.warn('Chart.js not loaded, keeping placeholders');
+                        showToast('Chart.js بارگذاری نشد - نمودارها غیرفعال هستند', 'warning', 'هشدار');
+                    }
+                }, 1000);
+
+                setupEventListeners();
+                await loadInitialData();
+                showToast('داشبورد با موفقیت بارگذاری شد', 'success', 'خوش آمدید');
+
+            } catch (error) {
+                console.error('Failed to initialize dashboard:', error);
+                isOnline = false;
+                setupEventListeners();
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                // Try to connect to API if available
+                if (window.legalAPI && window.legalAPI.healthCheck) {
+                    await window.legalAPI.healthCheck();
+                    return true;
+                } else {
+                    // Fallback to simple fetch
+                    const response = await fetch(API_ENDPOINTS.health);
+                    return response.ok;
+                }
+            } catch (error) {
+                console.log('API connection failed, using offline mode');
+                return false;
+            }
+        }
+
+        // Initialize charts if Chart.js is available
+        function initializeCharts() {
+            if (!chartJsLoaded) return;
+
+            try {
+                // Hide placeholders and show canvases
+                document.getElementById('chartPlaceholder').style.display = 'none';
+                document.getElementById('statusPlaceholder').style.display = 'none';
+                document.getElementById('documentsChartCanvas').style.display = 'block';
+                document.getElementById('statusChartCanvas').style.display = 'block';
+
+                // Processing trends chart
+                const documentsCtx = document.getElementById('documentsChartCanvas');
+                if (documentsCtx) {
+                    documentsChart = new Chart(documentsCtx, {
+                        type: 'line',
+                        data: {
+                            labels: ['هفته 1', 'هفته 2', 'هفته 3', 'هفته 4'],
+                            datasets: [
+                                {
+                                    label: 'پردازش شده',
+                                    data: [85, 92, 78, 95],
+                                    borderColor: '#10b981',
+                                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                                    tension: 0.4,
+                                    borderWidth: 3,
+                                    pointRadius: 6,
+                                    pointHoverRadius: 8
+                                },
+                                {
+                                    label: 'آپلود شده',
+                                    data: [95, 105, 88, 110],
+                                    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'
+                            }
+                        }
+                    });
+                }
+
+                // Status distribution chart
+                const statusCtx = document.getElementById('statusChartCanvas');
+                if (statusCtx) {
+                    statusChart = new Chart(statusCtx, {
+                        type: 'doughnut',
+                        data: {
+                            labels: ['پردازش شده', 'در حال پردازش', 'خطا', 'آپلود شده'],
+                            datasets: [{
+                                data: [4, 1, 1, 0],
+                                backgroundColor: ['#10b981', '#f59e0b', '#ef4444', '#3b82f6'],
+                                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%'
+                        }
+                    });
+                }
+
+                console.log('Charts initialized successfully');
+                showToast('نمودارها بارگذاری شدند', 'success', 'موفقیت');
+
+            } catch (error) {
+                console.error('Chart initialization failed:', error);
+                showToast('خطا در بارگذاری نمودارها', 'error', 'خطا');
+            }
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Mobile menu toggle
+            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            const sidebar = document.getElementById('sidebar');
+
+            if (mobileMenuToggle && sidebar) {
+                mobileMenuToggle.addEventListener('click', () => {
+                    sidebar.classList.toggle('open');
+                });
+
+                // Close sidebar when clicking outside on mobile
+                document.addEventListener('click', (e) => {
+                    if (window.innerWidth <= 992 && 
+                        sidebar.classList.contains('open') && 
+                        !sidebar.contains(e.target) && 
+                        !mobileMenuToggle.contains(e.target)) {
+                        sidebar.classList.remove('open');
+                    }
+                });
+            }
+
+            // Search functionality
+            const searchInput = document.getElementById('searchInput');
+            if (searchInput) {
+                searchInput.addEventListener('input', function(e) {
+                    const searchTerm = e.target.value.trim();
+                    if (searchTerm.length > 2) {
+                        showToast(`جستجو برای: ${searchTerm}`, 'info', 'جستجو');
+                    }
+                });
+            }
+        }
+
+        // Load initial data
+        async function loadInitialData() {
+            try {
+                showToast('در حال بارگذاری داده‌ها...', 'info');
+                
+                if (isOnline) {
+                    // Try to load real data from API
+                    await Promise.all([
+                        loadDashboardStats(),
+                        loadChartsData(),
+                        updateDocumentsBadge()
+                    ]);
+                    showToast('داده‌ها از سرور بارگذاری شدند', 'success');
+                } else {
+                    // Use mock data in offline mode
+                    loadMockData();
+                    showToast('داده‌های آزمایشی بارگذاری شدند', 'info');
+                }
+
+            } catch (error) {
+                console.error('Error loading initial data:', error);
+                // Fallback to mock data
+                loadMockData();
+                showToast('خطا در بارگذاری - از داده���های آزمایشی استفاده شد', 'warning');
+            }
+        }
+
+        // Load dashboard statistics from API
+        async function loadDashboardStats() {
+            try {
+                const response = await fetch(API_ENDPOINTS.dashboardSummary);
+                if (!response.ok) throw new Error('Failed to load dashboard stats');
+                
+                const stats = await response.json();
+                
+                // Update UI with real data
+                document.getElementById('totalDocuments').textContent = stats.total_documents || 0;
+                document.getElementById('processedDocuments').textContent = stats.processed_documents || 0;
+                document.getElementById('errorDocuments').textContent = stats.error_documents || 0;
+                document.getElementById('averageQuality').textContent = (stats.average_quality || 0).toFixed(1);
+                
+                console.log('Dashboard stats loaded from API');
+            } catch (error) {
+                console.error('Failed to load dashboard stats:', error);
+                throw error;
+            }
+        }
+
+        // Load charts data from API
+        async function loadChartsData() {
+            try {
+                const response = await fetch(API_ENDPOINTS.chartsData);
+                if (!response.ok) throw new Error('Failed to load charts data');
+                
+                const chartsData = await response.json();
+                console.log('Charts data loaded from API');
+                return chartsData;
+            } catch (error) {
+                console.error('Failed to load charts data:', error);
+                throw error;
+            }
+        }
+
+        // Update documents badge
+        async function updateDocumentsBadge() {
+            try {
+                const response = await fetch(API_ENDPOINTS.documents);
+                if (!response.ok) throw new Error('Failed to load documents count');
+                
+                const data = await response.json();
+                const badge = document.getElementById('totalDocumentsBadge');
+                if (badge && data.total_count !== undefined) {
+                    badge.textContent = data.total_count;
+                }
+            } catch (error) {
+                console.error('Failed to update documents badge:', error);
+                throw error;
+            }
+        }
+
+        // Load mock data for offline mode
+        function loadMockData() {
+            // Update stats with mock data
+            document.getElementById('totalDocuments').textContent = '6';
+            document.getElementById('processedDocuments').textContent = '4';
+            document.getElementById('errorDocuments').textContent = '1';
+            document.getElementById('averageQuality').textContent = '8.1';
+
+            // Update badge
+            const badge = document.getElementById('totalDocumentsBadge');
+            if (badge) {
+                badge.textContent = '6';
+            }
+        }
+
+        // Chart update functions
+        function updateChart(period) {
+            if (!chartJsLoaded || !documentsChart) {
+                showToast('نمودارها در دسترس نیستند', 'warning', 'هشدار');
+                return;
+            }
+
+            // Update active filter
+            document.querySelectorAll('.chart-filter').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            // Mock data for different periods
+            const data = {
+                daily: {
+                    labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'],
+                    processed: [12, 19, 8, 15, 22, 18, 14],
+                    uploaded: [15, 23, 12, 18, 25, 21, 16]
+                },
+                weekly: {
+                    labels: ['هفته 1', 'هفته 2', 'هفته 3', 'هفته 4'],
+                    processed: [85, 92, 78, 95],
+                    uploaded: [95, 105, 88, 110]
+                },
+                monthly: {
+                    labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
+                    processed: [340, 380, 290, 420, 380, 450],
+                    uploaded: [380, 420, 320, 460, 410, 490]
+                }
+            };
+
+            const selectedData = data[period] || data.weekly;
+            
+            documentsChart.data.labels = selectedData.labels;
+            documentsChart.data.datasets[0].data = selectedData.processed;
+            documentsChart.data.datasets[1].data = selectedData.uploaded;
+            documentsChart.update('active');
+
+            showToast(`نمودار به حالت ${period === 'daily' ? 'روزانه' : period === 'weekly' ? 'هفتگی' : 'ماهانه'} تغییر کرد`, 'info', 'بروزرسانی');
+        }
+
+        function updateStatusChart(type) {
+            if (!chartJsLoaded || !statusChart) {
+                showToast('نمودارها در دسترس نیستند', 'warning', 'هشدار');
+                return;
+            }
+
+            // Update active filter
+            const chartCard = event.target.closest('.chart-card');
+            chartCard.querySelectorAll('.chart-filter').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            const data = {
+                status: {
+                    labels: ['پردازش شده', 'در حال پردازش', 'خطا', 'آپلود شده'],
+                    data: [4, 1, 1, 0],
+                    colors: ['#10b981', '#f59e0b', '#ef4444', '#3b82f6']
+                },
+                category: {
+                    labels: ['قراردادها', 'دادخواست‌ها', 'احکام قضایی', 'آرای دیوان', 'سایر'],
+                    data: [1, 1, 1, 1, 2],
+                    colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
+                }
+            };
+
+            const selectedData = data[type] || data.status;
+            
+            statusChart.data.labels = selectedData.labels;
+            statusChart.data.datasets[0].data = selectedData.data;
+            statusChart.data.datasets[0].backgroundColor = selectedData.colors;
+            statusChart.update('active');
+
+            showToast(`نمودار به حالت ${type === 'status' ? 'وضعیت' : 'دسته‌بندی'} تغییر کرد`, 'info', 'بروزرسانی');
+        }
+
+        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);
+        }
+
+        // Connection status monitoring
+        async function checkConnectionStatus() {
+            try {
+                const response = await fetch(API_ENDPOINTS.health);
+                const status = response.ok;
+                
+                const connectionStatus = document.getElementById('connectionStatus');
+                if (connectionStatus) {
+                    if (status) {
+                        connectionStatus.className = 'connection-status online';
+                        connectionStatus.innerHTML = `
+                            <div class="status-indicator"></div>
+                            <span>متصل به سرور</span>
+                        `;
+                        
+                        // Update online status and refresh data if needed
+                        if (!isOnline) {
+                            isOnline = true;
+                            loadInitialData(); // Refresh with real data
+                        }
+                    } else {
+                        throw new Error('Server not responding');
+                    }
+                }
+            } catch (error) {
+                const connectionStatus = document.getElementById('connectionStatus');
+                if (connectionStatus) {
+                    connectionStatus.className = 'connection-status offline';
+                    connectionStatus.innerHTML = `
+                        <div class="status-indicator"></div>
+                        <span>خطا در اتصال</span>
+                    `;
+                    
+                    // Update offline status
+                    if (isOnline) {
+                        isOnline = false;
+                        showToast('اتصال قطع شد - حالت آفلاین فعال', 'warning', 'اتصال');
+                    }
+                }
+            }
+        }
+
+        // Check connection status every 30 seconds
+        setInterval(checkConnectionStatus, 30000);
+        
+        // Initial connection check after 2 seconds
+        setTimeout(checkConnectionStatus, 2000);
+
+        console.log('🏠 Legal Dashboard Index Page Ready!');
+    </script>
+</body>
+</html>

app/frontend/js/api-client.js

@@ -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/frontend/js/api-connection-test.js

@@ -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/frontend/js/core.js

@@ -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/frontend/js/document-crud.js

@@ -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/frontend/js/file-upload-handler.js

@@ -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/frontend/js/notifications.js

@@ -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/frontend/js/scraping-control.js

@@ -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(); 

app/frontend/reports.html

@@ -0,0 +1,917 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Legal Dashboard - Reports &amp; Analytics</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Load API Client and Core System -->
+    <script src="js/api-client.js"></script>
+    <script src="js/core.js"></script>
+    <script src="js/notifications.js"></script>
+    <style>
+        :root {
+            --primary-color: #007bff;
+            --success-color: #28a745;
+            --warning-color: #ffc107;
+            --danger-color: #dc3545;
+            --info-color: #17a2b8;
+        }
+        
+        body {
+            background-color: #f8f9fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        .navbar {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        .navbar-brand {
+            font-weight: bold;
+            color: white !important;
+        }
+        
+        .nav-link {
+            color: rgba(255,255,255,0.9) !important;
+            transition: color 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            color: white !important;
+        }
+        
+        .main-content {
+            padding: 2rem 0;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 15px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            margin-bottom: 1.5rem;
+        }
+        
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+        }
+        
+        .card-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 15px 15px 0 0 !important;
+            padding: 1.5rem;
+        }
+        
+        .metric-card {
+            text-align: center;
+            padding: 2rem;
+        }
+        
+        .metric-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+        
+        .metric-label {
+            color: #666;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .metric-change {
+            font-size: 0.8rem;
+            margin-top: 0.5rem;
+        }
+        
+        .metric-change.positive {
+            color: var(--success-color);
+        }
+        
+        .metric-change.negative {
+            color: var(--danger-color);
+        }
+        
+        .chart-container {
+            position: relative;
+            height: 400px;
+            margin: 1rem 0;
+        }
+        
+        .table-responsive {
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        
+        .table {
+            margin-bottom: 0;
+        }
+        
+        .table thead th {
+            background-color: #f8f9fa;
+            border: none;
+            font-weight: 600;
+            color: #495057;
+        }
+        
+        .table tbody tr {
+            transition: background-color 0.2s ease;
+        }
+        
+        .table tbody tr:hover {
+            background-color: #f8f9fa;
+        }
+        
+        .btn-export {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            color: white;
+            padding: 0.5rem 1.5rem;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-export:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+            color: white;
+        }
+        
+        .status-badge {
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+        
+        .status-badge.success {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        
+        .status-badge.warning {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        
+        .status-badge.error {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 200px;
+        }
+        
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .filter-section {
+            background: white;
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        
+        .date-range {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+        
+        .date-input {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 0.5rem;
+            font-size: 0.9rem;
+        }
+        
+        .refresh-btn {
+            background: var(--primary-color);
+            border: none;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .refresh-btn:hover {
+            background: #0056b3;
+            transform: translateY(-1px);
+        }
+        
+        .export-section {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            margin-top: 1rem;
+        }
+        
+        .progress-ring {
+            width: 120px;
+            height: 120px;
+            margin: 0 auto;
+        }
+        
+        .progress-ring circle {
+            fill: none;
+            stroke-width: 8;
+        }
+        
+        .progress-ring .bg {
+            stroke: #e9ecef;
+        }
+        
+        .progress-ring .progress {
+            stroke: var(--primary-color);
+            stroke-linecap: round;
+            transition: stroke-dasharray 0.3s ease;
+        }
+        
+        .progress-text {
+            text-align: center;
+            margin-top: 1rem;
+        }
+        
+        .progress-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .progress-label {
+            font-size: 0.9rem;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <i class="fas fa-chart-line me-2"></i>
+                Legal Dashboard - Reports
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">
+                            <i class="fas fa-home me-1"></i>Dashboard
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="documents.html">
+                            <i class="fas fa-file-alt me-1"></i>Documents
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="reports.html">
+                            <i class="fas fa-chart-bar me-1"></i>Reports
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" onclick="logout()">
+                            <i class="fas fa-sign-out-alt me-1"></i>Logout
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="container main-content">
+        <!-- Filter Section -->
+        <div class="filter-section">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <h5 class="mb-3">
+                        <i class="fas fa-filter me-2"></i>Filter Options
+                    </h5>
+                    <div class="date-range">
+                        <label class="me-2">Date Range:</label>
+                        <input type="date" id="startDate" class="date-input">
+                        <span>to</span>
+                        <input type="date" id="endDate" class="date-input">
+                        <button type="button" class="refresh-btn" onclick="loadReports()">
+                            <i class="fas fa-sync-alt me-1"></i>Refresh
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="export-section">
+                        <button type="button" class="btn btn-export" onclick="exportReport('summary')">
+                            <i class="fas fa-download me-1"></i>Export Summary
+                        </button>
+                        <button type="button" class="btn btn-export" onclick="exportReport('user_activity')">
+                            <i class="fas fa-users me-1"></i>Export User Activity
+                        </button>
+                        <button type="button" class="btn btn-export" onclick="exportReport('document_analytics')">
+                            <i class="fas fa-file-alt me-1"></i>Export Document Analytics
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Summary Metrics -->
+        <div class="row" id="summaryMetrics">
+            <div class="col-md-3">
+                <div class="card metric-card">
+                    <div class="metric-value" id="totalDocuments">-</div>
+                    <div class="metric-label">Total Documents</div>
+                    <div class="metric-change positive" id="documentsChange">+12% from last month</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="card metric-card">
+                    <div class="metric-value" id="totalUsers">-</div>
+                    <div class="metric-label">Active Users</div>
+                    <div class="metric-change positive" id="usersChange">+5% from last month</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="card metric-card">
+                    <div class="metric-value" id="successRate">-</div>
+                    <div class="metric-label">Success Rate</div>
+                    <div class="metric-change positive" id="successChange">+3% from last month</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="card metric-card">
+                    <div class="metric-value" id="avgProcessingTime">-</div>
+                    <div class="metric-label">Avg Processing Time</div>
+                    <div class="metric-change negative" id="timeChange">+0.5s from last month</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Charts Row -->
+        <div class="row">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-chart-line me-2"></i>Document Processing Trends
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-container">
+                            <canvas id="trendsChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-pie-chart me-2"></i>Processing Status
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-container">
+                            <canvas id="statusChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Performance Metrics -->
+        <div class="row">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-tachometer-alt me-2"></i>System Performance
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-6">
+                                <div class="progress-ring">
+                                    <svg width="120" height="120">
+                                        <circle class="bg" cx="60" cy="60" r="50"></circle>
+                                        <circle class="progress" cx="60" cy="60" r="50" 
+                                                stroke-dasharray="314" stroke-dashoffset="78.5"></circle>
+                                    </svg>
+                                </div>
+                                <div class="progress-text">
+                                    <div class="progress-value">75%</div>
+                                    <div class="progress-label">CPU Usage</div>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="progress-ring">
+                                    <svg width="120" height="120">
+                                        <circle class="bg" cx="60" cy="60" r="50"></circle>
+                                        <circle class="progress" cx="60" cy="60" r="50" 
+                                                stroke-dasharray="314" stroke-dashoffset="157"></circle>
+                                    </svg>
+                                </div>
+                                <div class="progress-text">
+                                    <div class="progress-value">50%</div>
+                                    <div class="progress-label">Memory Usage</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-clock me-2"></i>Response Times
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-container">
+                            <canvas id="responseChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- User Activity Table -->
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-users me-2"></i>User Activity
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover" id="userActivityTable">
+                        <thead>
+                            <tr>
+                                <th scope="col">User</th>
+                                <th scope="col">Documents Processed</th>
+                                <th scope="col">Last Activity</th>
+                                <th scope="col">Success Rate</th>
+                                <th scope="col">Avg Processing Time</th>
+                            </tr>
+                        </thead>
+                        <tbody id="userActivityBody">
+                            <tr>
+                                <td colspan="5" class="text-center">
+                                    <div class="loading">
+                                        <div class="spinner"></div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <!-- Document Analytics Table -->
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-file-alt me-2"></i>Recent Document Analytics
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover" id="documentAnalyticsTable">
+                        <thead>
+                            <tr>
+                                <th scope="col">Document</th>
+                                <th scope="col">Processing Time</th>
+                                <th scope="col">OCR Accuracy</th>
+                                <th scope="col">File Size</th>
+                                <th scope="col">Status</th>
+                                <th scope="col">Created</th>
+                            </tr>
+                        </thead>
+                        <tbody id="documentAnalyticsBody">
+                            <tr>
+                                <td colspan="6" class="text-center">
+                                    <div class="loading">
+                                        <div class="spinner"></div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="js/notifications.js"></script>
+    <script>
+        // Global variables
+        let trendsChart, statusChart, responseChart;
+        let currentData = {};
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set default date range (last 30 days)
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(startDate.getDate() - 30);
+            
+            document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
+            document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
+            
+            // Load initial data
+            loadReports();
+        });
+
+        // Load reports data
+        async function loadReports() {
+            try {
+                showLoading();
+                
+                // Load summary metrics
+                await loadSummaryMetrics();
+                
+                // Load charts
+                await loadCharts();
+                
+                // Load tables
+                await loadUserActivity();
+                await loadDocumentAnalytics();
+                
+                hideLoading();
+                
+            } catch (error) {
+                console.error('Error loading reports:', error);
+                showNotification('error', 'Error', 'Failed to load reports data');
+                hideLoading();
+            }
+        }
+
+        // Load summary metrics
+        async function loadSummaryMetrics() {
+            try {
+                const response = await fetch('/api/reports/summary', {
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+                    }
+                });
+                
+                if (!response.ok) throw new Error('Failed to load summary');
+                
+                const data = await response.json();
+                currentData.summary = data;
+                
+                // Update metrics
+                document.getElementById('totalDocuments').textContent = data.total_documents;
+                document.getElementById('totalUsers').textContent = data.total_users;
+                document.getElementById('successRate').textContent = `${data.success_rate.toFixed(1)}%`;
+                document.getElementById('avgProcessingTime').textContent = `${data.avg_processing_time.toFixed(1)}s`;
+                
+            } catch (error) {
+                console.error('Error loading summary metrics:', error);
+                // Set default values
+                document.getElementById('totalDocuments').textContent = '0';
+                document.getElementById('totalUsers').textContent = '0';
+                document.getElementById('successRate').textContent = '0%';
+                document.getElementById('avgProcessingTime').textContent = '0s';
+            }
+        }
+
+        // Load charts
+        async function loadCharts() {
+            try {
+                // Load trends data
+                const trendsResponse = await fetch('/api/reports/trends?days=30', {
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+                    }
+                });
+                
+                if (trendsResponse.ok) {
+                    const trendsData = await trendsResponse.json();
+                    createTrendsChart(trendsData.daily_trends);
+                }
+                
+                // Create status chart (mock data for now)
+                createStatusChart();
+                
+                // Create response time chart (mock data for now)
+                createResponseChart();
+                
+            } catch (error) {
+                console.error('Error loading charts:', error);
+            }
+        }
+
+        // Create trends chart
+        function createTrendsChart(data) {
+            const ctx = document.getElementById('trendsChart').getContext('2d');
+            
+            if (trendsChart) {
+                trendsChart.destroy();
+            }
+            
+            trendsChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(d => d.date),
+                    datasets: [{
+                        label: 'Documents Processed',
+                        data: data.map(d => d.documents_processed),
+                        borderColor: '#667eea',
+                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                        tension: 0.4
+                    }, {
+                        label: 'Success Rate (%)',
+                        data: data.map(d => d.success_rate),
+                        borderColor: '#28a745',
+                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
+                        tension: 0.4,
+                        yAxisID: 'y1'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Documents'
+                            }
+                        },
+                        y1: {
+                            position: 'right',
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Success Rate (%)'
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create status chart
+        function createStatusChart() {
+            const ctx = document.getElementById('statusChart').getContext('2d');
+            
+            if (statusChart) {
+                statusChart.destroy();
+            }
+            
+            statusChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Completed', 'Processing', 'Failed', 'Pending'],
+                    datasets: [{
+                        data: [65, 15, 10, 10],
+                        backgroundColor: [
+                            '#28a745',
+                            '#ffc107',
+                            '#dc3545',
+                            '#6c757d'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create response time chart
+        function createResponseChart() {
+            const ctx = document.getElementById('responseChart').getContext('2d');
+            
+            if (responseChart) {
+                responseChart.destroy();
+            }
+            
+            responseChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['Documents', 'OCR', 'Search', 'Analytics'],
+                    datasets: [{
+                        label: 'Response Time (ms)',
+                        data: [150, 2500, 200, 300],
+                        backgroundColor: [
+                            '#667eea',
+                            '#764ba2',
+                            '#f093fb',
+                            '#f5576c'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Time (ms)'
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+
+        // Load user activity
+        async function loadUserActivity() {
+            try {
+                const response = await fetch('/api/reports/user-activity?days=30', {
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+                    }
+                });
+                
+                if (!response.ok) throw new Error('Failed to load user activity');
+                
+                const data = await response.json();
+                currentData.userActivity = data;
+                
+                const tbody = document.getElementById('userActivityBody');
+                tbody.innerHTML = '';
+                
+                data.forEach(user => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td><strong>${user.username}</strong></td>
+                        <td>${user.documents_processed}</td>
+                        <td>${formatDate(user.last_activity)}</td>
+                        <td><span class="status-badge success">${user.success_rate.toFixed(1)}%</span></td>
+                        <td>${user.total_processing_time.toFixed(1)}s</td>
+                    `;
+                    tbody.appendChild(row);
+                });
+                
+            } catch (error) {
+                console.error('Error loading user activity:', error);
+                document.getElementById('userActivityBody').innerHTML = 
+                    '<tr><td colspan="5" class="text-center text-muted">No data available</td></tr>';
+            }
+        }
+
+        // Load document analytics
+        async function loadDocumentAnalytics() {
+            try {
+                const response = await fetch('/api/reports/document-analytics?limit=20', {
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+                    }
+                });
+                
+                if (!response.ok) throw new Error('Failed to load document analytics');
+                
+                const data = await response.json();
+                currentData.documentAnalytics = data;
+                
+                const tbody = document.getElementById('documentAnalyticsBody');
+                tbody.innerHTML = '';
+                
+                data.forEach(doc => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td><strong>${doc.filename}</strong></td>
+                        <td>${doc.processing_time.toFixed(1)}s</td>
+                        <td>${doc.ocr_accuracy ? doc.ocr_accuracy.toFixed(1) + '%' : 'N/A'}</td>
+                        <td>${formatFileSize(doc.file_size)}</td>
+                        <td><span class="status-badge ${getStatusClass(doc.status)}">${doc.status}</span></td>
+                        <td>${formatDate(doc.created_at)}</td>
+                    `;
+                    tbody.appendChild(row);
+                });
+                
+            } catch (error) {
+                console.error('Error loading document analytics:', error);
+                document.getElementById('documentAnalyticsBody').innerHTML = 
+                    '<tr><td colspan="6" class="text-center text-muted">No data available</td></tr>';
+            }
+        }
+
+        // Export report
+        async function exportReport(type) {
+            try {
+                const response = await fetch(`/api/reports/export/csv?report_type=${type}`, {
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+                    }
+                });
+                
+                if (!response.ok) throw new Error('Failed to export report');
+                
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${type}_report_${new Date().toISOString().split('T')[0]}.csv`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+                
+                showNotification('success', 'Export Successful', `${type} report has been downloaded`);
+                
+            } catch (error) {
+                console.error('Error exporting report:', error);
+                showNotification('error', 'Export Failed', 'Failed to export report');
+            }
+        }
+
+        // Utility functions
+        function formatDate(dateString) {
+            if (!dateString || dateString === 'Never') return 'Never';
+            const date = new Date(dateString);
+            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+        }
+
+        function 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];
+        }
+
+        function getStatusClass(status) {
+            switch (status.toLowerCase()) {
+                case 'completed': return 'success';
+                case 'processing': return 'warning';
+                case 'failed': return 'error';
+                default: return 'warning';
+            }
+        }
+
+        function showLoading() {
+            // Show loading indicators
+            const loadingElements = document.querySelectorAll('.loading');
+            loadingElements.forEach(el => el.style.display = 'flex');
+        }
+
+        function hideLoading() {
+            // Hide loading indicators
+            const loadingElements = document.querySelectorAll('.loading');
+            loadingElements.forEach(el => el.style.display = 'none');
+        }
+
+        function logout() {
+            localStorage.removeItem('auth_token');
+            window.location.href = 'index.html';
+        }
+
+        // Auto-refresh every 5 minutes
+        setInterval(loadReports, 300000);
+    </script>
+</body>
+</html> 

app/frontend/scraping.html

@@ -0,0 +1,1925 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+    <!-- Load API Client and Core System -->
+    <script src="js/api-client.js"></script>
+    <script src="js/core.js"></script>
+    <script src="js/notifications.js"></script>
+    <script src="js/scraping-control.js"></script>
+
+    <style>
+        :root {
+            /* رنگ‌بندی مدرن و هارمونیک - منطبق با index */
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+
+            /* پس‌زمینه‌های بهبود یافته */
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+
+            /* گرادیان‌های مدرن */
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+
+            /* سایه‌های ملایم */
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
+            --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.15);
+            --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);
+            --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.15);
+
+            /* متغیرهای کامپکت */
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+
+            /* فونت‌های کامپکت */
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        /* ریست و تنظیمات پایه */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        /* اسکرول‌بار مدرن */
+        ::-webkit-scrollbar {
+            inline-size: 6px;
+            block-size: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        /* کانتینر اصلی */
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+            width: 100%;
+        }
+
+        /* سایدبار کامپکت - منطبق با index */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            height: 100vh;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow: -8px 0 32px rgba(59, 130, 246, 0.12);
+            border-left: 1px solid rgba(59, 130, 246, 0.15);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.12);
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+            box-shadow: var(--shadow-glow-primary);
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-bottom: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-left: 0.6rem;
+            width: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-right: auto;
+            min-width: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 1rem;
+            min-height: 100vh;
+            width: calc(100% - var(--sidebar-width));
+        }
+
+        /* هدر کامپکت - منطبق با index */
+        .dashboard-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.2rem;
+            padding: 0.8rem 0;
+        }
+
+        .dashboard-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+
+        /* آمار کلی - منطبق با index */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1rem;
+            margin-bottom: 1.2rem;
+        }
+
+        .stat-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 1.2rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition-smooth);
+            min-height: 130px;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--primary-gradient);
+        }
+
+        .stat-card.primary::before { background: var(--primary-gradient); }
+        .stat-card.success::before { background: var(--success-gradient); }
+        .stat-card.danger::before { background: var(--danger-gradient); }
+        .stat-card.warning::before { background: var(--warning-gradient); }
+        .stat-card.purple::before { background: var(--purple-gradient); }
+
+        .stat-card:hover {
+            transform: translateY(-6px) scale(1.02);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .stat-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.8rem;
+        }
+
+        .stat-icon {
+            width: 2.2rem;
+            height: 2.2rem;
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.1rem;
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .stat-icon.primary { background: var(--primary-gradient); color: white; }
+        .stat-icon.success { background: var(--success-gradient); color: white; }
+        .stat-icon.danger { background: var(--danger-gradient); color: white; }
+        .stat-icon.warning { background: var(--warning-gradient); color: white; }
+        .stat-icon.purple { background: var(--purple-gradient); color: white; }
+
+        .stat-content {
+            flex: 1;
+        }
+
+        .stat-title {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+            font-weight: 600;
+            margin-bottom: 0.3rem;
+        }
+
+        .stat-value {
+            font-size: var(--font-size-xl);
+            font-weight: 800;
+            color: var(--text-primary);
+            line-height: 1;
+            margin-bottom: 0.3rem;
+        }
+
+        .stat-value.small {
+            font-size: var(--font-size-base);
+        }
+
+        .stat-extra {
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+            margin-bottom: 0.3rem;
+        }
+
+        .stat-change {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            font-size: var(--font-size-xs);
+            font-weight: 700;
+        }
+
+        .stat-change.positive { color: #059669; }
+        .stat-change.negative { color: #dc2626; }
+
+        /* کارت‌های عملیات اصلی */
+        .control-section {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .control-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: var(--transition-smooth);
+        }
+
+        .control-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .control-header {
+            display: flex;
+            justify-content: between;
+            align-items: center;
+            margin-bottom: 1.2rem;
+        }
+
+        .control-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        /* مراجع آماده */
+        .sources-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1rem;
+            max-height: 350px;
+            overflow-y: auto;
+            padding-left: 0.5rem;
+        }
+
+        .source-item {
+            background: var(--glass-bg);
+            border: 2px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            position: relative;
+        }
+
+        .source-item:hover {
+            border-color: rgba(59, 130, 246, 0.3);
+            background: rgba(59, 130, 246, 0.03);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .source-item.selected {
+            border-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.05);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .source-checkbox {
+            position: absolute;
+            top: 0.8rem;
+            left: 0.8rem;
+            width: 1.2rem;
+            height: 1.2rem;
+            cursor: pointer;
+        }
+
+        .source-info {
+            margin-right: 2rem;
+        }
+
+        .source-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+            font-size: var(--font-size-sm);
+        }
+
+        .source-url {
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+            margin-bottom: 0.5rem;
+            direction: ltr;
+            text-align: left;
+        }
+
+        .source-meta {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .source-tag {
+            background: rgba(59, 130, 246, 0.1);
+            color: #3b82f6;
+            padding: 0.15rem 0.5rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 500;
+        }
+
+        .source-status {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-top: 0.4rem;
+            position: absolute;
+            top: 0.8rem;
+            right: 0.8rem;
+        }
+
+        .source-status.online {
+            background: #10b981;
+            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+        }
+
+        .source-status.offline {
+            background: #ef4444;
+            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+        }
+
+        /* دکمه‌های عمل - منطبق با index */
+        .action-buttons {
+            display: flex;
+            gap: 0.8rem;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+            min-width: 120px;
+            justify-content: center;
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .btn-primary:hover {
+            box-shadow: var(--shadow-md), var(--shadow-glow-primary);
+            transform: translateY(-2px);
+        }
+
+        .btn-success {
+            background: var(--success-gradient);
+            color: white;
+        }
+
+        .btn-success:hover {
+            box-shadow: var(--shadow-md), var(--shadow-glow-success);
+            transform: translateY(-2px);
+        }
+
+        .btn-warning {
+            background: var(--warning-gradient);
+            color: white;
+        }
+
+        .btn-warning:hover {
+            box-shadow: var(--shadow-md), var(--shadow-glow-warning);
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            border: 1px solid var(--glass-border);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.3);
+            transform: translateY(-2px);
+        }
+
+        .btn-auto {
+            background: var(--purple-gradient);
+            color: white;
+            font-size: var(--font-size-base);
+            padding: 0.8rem 1.5rem;
+            position: relative;
+            overflow: hidden;
+            animation: pulse-auto 3s ease-in-out infinite;
+        }
+
+        @keyframes pulse-auto {
+            0%, 100% { box-shadow: var(--shadow-sm); }
+            50% { box-shadow: var(--shadow-lg), var(--shadow-glow-purple); }
+        }
+
+        .btn-auto:hover {
+            box-shadow: var(--shadow-xl), var(--shadow-glow-purple);
+            transform: translateY(-3px) scale(1.02);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
+            box-shadow: var(--shadow-sm) !important;
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+            min-width: auto;
+        }
+
+        /* تنظیمات سریع */
+        .quick-settings {
+            background: rgba(59, 130, 246, 0.03);
+            border: 1px solid rgba(59, 130, 246, 0.1);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+
+        .settings-title {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.8rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .settings-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .setting-item label {
+            display: block;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 0.4rem;
+        }
+
+        .setting-item select {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-xs);
+        }
+
+        /* وضعیت فعالیت */
+        .activity-status {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            display: none;
+        }
+
+        .activity-status.show {
+            display: block;
+        }
+
+        .status-content {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .status-icon {
+            width: 3rem;
+            height: 3rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            flex-shrink: 0;
+        }
+
+        .status-loading {
+            background: rgba(59, 130, 246, 0.1);
+            color: #3b82f6;
+            border: 2px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .status-success {
+            background: rgba(16, 185, 129, 0.1);
+            color: #10b981;
+            border: 2px solid rgba(16, 185, 129, 0.2);
+        }
+
+        .status-error {
+            background: rgba(239, 68, 68, 0.1);
+            color: #ef4444;
+            border: 2px solid rgba(239, 68, 68, 0.2);
+        }
+
+        .status-details {
+            flex: 1;
+        }
+
+        .status-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+        }
+
+        .status-message {
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+            margin-bottom: 0.8rem;
+        }
+
+        .status-progress {
+            width: 100%;
+            height: 6px;
+            background: rgba(0, 0, 0, 0.08);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .status-progress-bar {
+            height: 100%;
+            background: var(--primary-gradient);
+            border-radius: 3px;
+            transition: width 0.3s ease;
+            position: relative;
+        }
+
+        .status-progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        /* نتایج */
+        .results-section {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-md);
+            margin-bottom: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            overflow: hidden;
+            display: none;
+        }
+
+        .results-section.show {
+            display: block;
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.02), rgba(255, 255, 255, 0.05));
+        }
+
+        .results-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .results-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1rem;
+            padding: 1.5rem;
+        }
+
+        .result-card {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            padding: 1.5rem;
+            transition: var(--transition-smooth);
+        }
+
+        .result-card:hover {
+            border-color: rgba(16, 185, 129, 0.3);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .result-source {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            font-size: var(--font-size-sm);
+        }
+
+        .result-meta {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+            flex-wrap: wrap;
+        }
+
+        .result-meta span {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+
+        .result-content {
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+            line-height: 1.5;
+            max-height: 100px;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        .result-actions {
+            display: flex;
+            gap: 0.5rem;
+            padding-top: 1rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        /* Toast Notifications - منطبق با index */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* دکمه منوی موبایل */
+        .mobile-menu-toggle {
+            display: none;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 0.5rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--text-primary);
+            font-size: 1rem;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .mobile-menu-toggle:hover {
+            background: var(--primary-gradient);
+            color: white;
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .mobile-menu-toggle {
+                display: block;
+            }
+
+            .sidebar {
+                transform: translateX(100%);
+                position: fixed;
+                z-index: 10000;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+
+            .dashboard-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.8rem;
+            }
+
+            .header-actions {
+                width: 100%;
+                justify-content: space-between;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .control-section {
+                grid-template-columns: 1fr;
+            }
+
+            .sources-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .settings-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 0.6rem;
+            }
+
+            .stat-card {
+                min-height: 100px;
+                padding: 0.8rem;
+            }
+
+            .stat-value {
+                font-size: var(--font-size-lg);
+            }
+
+            .action-buttons {
+                flex-direction: column;
+            }
+
+            .btn {
+                justify-content: center;
+                width: 100%;
+            }
+
+            .results-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <div class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-spider"></i>
+                    </div>
+                    <div class="logo-text">سامانه اسکراپینگ</div>
+                </div>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="index.html" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="scraping_dashboard.html" class="nav-link active">
+                                <i class="fas fa-spider nav-icon"></i>
+                                <span>اسکراپینگ خودکار</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge">6</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="dashboard-header">
+                <div>
+                    <h1 class="dashboard-title">
+                        <i class="fas fa-spider"></i>
+                        <span>سامانه اسکراپینگ حقوقی</span>
+                    </h1>
+                </div>
+                <div class="header-actions">
+                    <button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="منوی موبایل">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </header>
+
+            <!-- آمار کلی -->
+            <section aria-labelledby="stats-section">
+                <h2 id="stats-section" class="sr-only">آمار اسکراپینگ</h2>
+                <div class="stats-grid">
+                    <div class="stat-card primary">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">مراجع حقوقی</div>
+                                <div class="stat-value" id="totalSources">10</div>
+                                <div class="stat-extra">مراجع آماده</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+100%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon primary">
+                                <i class="fas fa-globe"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card success">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">مراجع انتخاب شده</div>
+                                <div class="stat-value" id="selectedSources">0</div>
+                                <div class="stat-extra">آماده اسکراپینگ</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+0%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon success">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card warning">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">محتوای استخراج شده</div>
+                                <div class="stat-value" id="scrapedItems">0</div>
+                                <div class="stat-extra">آیتم استخراج شده</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <span>+0%</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon warning">
+                                <i class="fas fa-download"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="stat-card purple">
+                        <div class="stat-header">
+                            <div class="stat-content">
+                                <div class="stat-title">آخرین بروزرسانی</div>
+                                <div class="stat-value small" id="lastUpdate">--</div>
+                                <div class="stat-extra">زمان آخرین فعالیت</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-clock"></i>
+                                    <span>جدید</span>
+                                </div>
+                            </div>
+                            <div class="stat-icon purple">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- کنترل عملیات -->
+            <section class="control-section">
+                <!-- مراجع آماده -->
+                <div class="control-card">
+                    <div class="control-header">
+                        <h2 class="control-title">
+                            <i class="fas fa-list"></i>
+                            مراجع حقوقی آماده
+                        </h2>
+                    </div>
+                    <div class="sources-grid" id="sourcesGrid">
+                        <!-- مراجع اینجا لود می‌شوند -->
+                    </div>
+                </div>
+
+                <!-- کنترل عملیات -->
+                <div class="control-card">
+                    <div class="control-header">
+                        <h2 class="control-title">
+                            <i class="fas fa-cogs"></i>
+                            کنترل عملیات
+                        </h2>
+                    </div>
+
+                    <div class="action-buttons">
+                        <button type="button" class="btn btn-auto" onclick="startAutoScraping()" id="autoScrapingBtn">
+                            <i class="fas fa-magic"></i>
+                            اسکراپینگ خودکار
+                        </button>
+                        <button type="button" class="btn btn-primary" onclick="startSelectedScraping()" id="selectedScrapingBtn">
+                            <i class="fas fa-play"></i>
+                            اسکراپینگ انتخابی
+                        </button>
+                        <button type="button" class="btn btn-warning" onclick="stopScraping()" id="stopScrapingBtn" disabled>
+                            <i class="fas fa-stop"></i>
+                            توقف
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="refreshData()">
+                            <i class="fas fa-sync-alt"></i>
+                            بروزرسانی
+                        </button>
+                    </div>
+
+                    <div class="action-buttons">
+                        <button type="button" class="btn btn-secondary" onclick="selectAllSources()">
+                            <i class="fas fa-check-double"></i>
+                            انتخاب همه
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="clearAllSources()">
+                            <i class="fas fa-times"></i>
+                            پاک کردن انتخاب
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="checkSourcesStatus()">
+                            <i class="fas fa-wifi"></i>
+                            بررسی وضعیت
+                        </button>
+                    </div>
+
+                    <div class="quick-settings">
+                        <h4 class="settings-title">
+                            <i class="fas fa-sliders-h"></i>
+                            تنظیمات سریع
+                        </h4>
+                        <div class="settings-grid">
+                            <div class="setting-item">
+                                <label>عمق اسکراپینگ</label>
+                                <select id="scrapingDepth">
+                                    <option value="1">سطح ۱ (صفحه اصلی)</option>
+                                    <option value="2" selected>سطح ۲ (یک سطح عمق)</option>
+                                    <option value="3">سطح ۳ (دو سطح عمق)</option>
+                                </select>
+                            </div>
+                            <div class="setting-item">
+                                <label>تاخیر بین درخواست‌ها</label>
+                                <select id="scrapingDelay">
+                                    <option value="1">۱ ثانیه</option>
+                                    <option value="2" selected>۲ ثانیه</option>
+                                    <option value="3">۳ ثانیه</option>
+                                    <option value="5">۵ ثانیه</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- وضعیت فعالیت -->
+            <div class="activity-status" id="activityStatus">
+                <div class="status-content">
+                    <div class="status-icon status-loading" id="statusIcon">
+                        <i class="fas fa-spinner fa-spin"></i>
+                    </div>
+                    <div class="status-details">
+                        <div class="status-title" id="statusTitle">در حال اسکراپینگ...</div>
+                        <div class="status-message" id="statusMessage">در حال اتصال به مراجع...</div>
+                        <div class="status-progress">
+                            <div class="status-progress-bar" id="statusProgressBar"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- نتایج -->
+            <div class="results-section" id="resultsSection">
+                <div class="results-header">
+                    <h3 class="results-title">
+                        <i class="fas fa-check-circle"></i>
+                        نتایج اسکراپینگ
+                    </h3>
+                    <div class="results-actions">
+                        <button type="button" class="btn btn-success btn-sm" onclick="exportResults()">
+                            <i class="fas fa-download"></i>
+                            دانلود JSON
+                        </button>
+                        <button type="button" class="btn btn-primary btn-sm" onclick="saveToDatabase()">
+                            <i class="fas fa-save"></i>
+                            ذخیره
+                        </button>
+                    </div>
+                </div>
+                <div class="results-grid" id="resultsGrid">
+                    <!-- نتایج اینجا نمایش داده می‌شوند -->
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // داده‌های مراجع حقوقی
+        const legalSources = [
+            {
+                id: 'divan',
+                name: 'دیوان عدالت اداری',
+                url: 'https://www.divan.gov.ir',
+                category: 'قضایی',
+                tags: ['دیوان', 'عدالت اداری', 'آرا'],
+                status: 'online',
+                priority: 1
+            },
+            {
+                id: 'dadiran',
+                name: 'پورتال ملی خدمات قضایی',
+                url: 'https://www.dadiran.ir',
+                category: 'خدمات قضایی',
+                tags: ['دادگستری', 'خدمات', 'پورتال ملی'],
+                status: 'online',
+                priority: 1
+            },
+            {
+                id: 'judiciary',
+                name: 'قوه قضائیه',
+                url: 'https://www.judiciary.ir',
+                category: 'قضایی',
+                tags: ['قوه قضائیه', 'اخبار', 'اطلاعیه'],
+                status: 'online',
+                priority: 1
+            },
+            {
+                id: 'lawcenter',
+                name: 'مرکز مطالعات و تحقیقات قوانین',
+                url: 'https://www.lawcenter.gov.ir',
+                category: 'تحقیقات',
+                tags: ['قوانین', 'تحقیقات', 'مطالعات'],
+                status: 'online',
+                priority: 2
+            },
+            {
+                id: 'mohaseabat',
+                name: 'دیوان محاسبات کشور',
+                url: 'https://www.mohaseabat.gov.ir',
+                category: 'مالی',
+                tags: ['محاسبات', 'مالی', 'گزارش'],
+                status: 'online',
+                priority: 2
+            },
+            {
+                id: 'majlis',
+                name: 'مجلس شورای اسلامی',
+                url: 'https://www.majlis.ir',
+                category: 'قانونگذاری',
+                tags: ['مجلس', 'قوانین', 'لوایح'],
+                status: 'online',
+                priority: 1
+            },
+            {
+                id: 'shora-negahban',
+                name: 'شورای نگهبان',
+                url: 'https://www.shora-rc.ir',
+                category: 'نظارتی',
+                tags: ['شورای نگهبان', 'نظارت', 'تایید'],
+                status: 'online',
+                priority: 2
+            },
+            {
+                id: 'maslahat',
+                name: 'مجمع تشخیص مصلحت نظام',
+                url: 'https://www.maslahat.ir',
+                category: 'مشاوره‌ای',
+                tags: ['مجمع', 'مصلحت', 'مشاوره'],
+                status: 'online',
+                priority: 2
+            },
+            {
+                id: 'dadgostary-tehran',
+                name: 'دادگستری استان تهران',
+                url: 'https://www.tehran-justice.ir',
+                category: 'قضایی محلی',
+                tags: ['دادگستری', 'تهران', 'محلی'],
+                status: 'online',
+                priority: 3
+            },
+            {
+                id: 'kanoon-vokala',
+                name: 'کانون وکلای دادگستری',
+                url: 'https://www.iranbar.org',
+                category: 'صنفی',
+                tags: ['وکلا', 'کانون', 'صنفی'],
+                status: 'online',
+                priority: 3
+            }
+        ];
+
+        // متغیرهای عمومی
+        let selectedSources = [];
+        let scrapingActive = false;
+        let scrapingResults = [];
+        let scrapingProgress = 0;
+
+        // شروع برنامه
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeDashboard();
+            loadSources();
+            updateStatistics();
+            setupEventListeners();
+            showToast('سامانه اسکراپینگ حقوقی آماده است', 'success', 'آماده');
+        });
+
+        // مقداردهی اولیه
+        function initializeDashboard() {
+            console.log('🕷️ Legal Scraping Dashboard Initializing...');
+            
+            // شبیه‌سازی داده‌های موجود
+            const mockData = {
+                scrapedItems: Math.floor(Math.random() * 1000) + 500,
+                lastUpdate: new Date().toLocaleDateString('fa-IR')
+            };
+            
+            document.getElementById('scrapedItems').textContent = mockData.scrapedItems;
+            document.getElementById('lastUpdate').textContent = mockData.lastUpdate;
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Mobile menu toggle
+            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            const sidebar = document.getElementById('sidebar');
+
+            if (mobileMenuToggle && sidebar) {
+                mobileMenuToggle.addEventListener('click', () => {
+                    sidebar.classList.toggle('open');
+                });
+
+                // Close sidebar when clicking outside on mobile
+                document.addEventListener('click', (e) => {
+                    if (window.innerWidth <= 992 && 
+                        sidebar.classList.contains('open') && 
+                        !sidebar.contains(e.target) && 
+                        !mobileMenuToggle.contains(e.target)) {
+                        sidebar.classList.remove('open');
+                    }
+                });
+            }
+        }
+
+        // بارگذاری مراجع
+        function loadSources() {
+            const sourcesGrid = document.getElementById('sourcesGrid');
+            let html = '';
+
+            legalSources.forEach(source => {
+                html += `
+                    <div class="source-item" onclick="toggleSource('${source.id}')" id="source-${source.id}">
+                        <input type="checkbox" class="source-checkbox" id="checkbox-${source.id}" onchange="toggleSource('${source.id}')">
+                        <div class="source-status ${source.status}"></div>
+                        <div class="source-info">
+                            <div class="source-name">${source.name}</div>
+                            <div class="source-url">${source.url}</div>
+                            <div class="source-meta">
+                                <span class="source-tag">${source.category}</span>
+                                ${source.tags.slice(0, 2).map(tag => `<span class="source-tag">${tag}</span>`).join('')}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+
+            sourcesGrid.innerHTML = html;
+        }
+
+        // تغییر وضعیت انتخاب مرجع
+        function toggleSource(sourceId) {
+            const sourceElement = document.getElementById(`source-${sourceId}`);
+            const checkbox = document.getElementById(`checkbox-${sourceId}`);
+            
+            if (selectedSources.includes(sourceId)) {
+                selectedSources = selectedSources.filter(id => id !== sourceId);
+                sourceElement.classList.remove('selected');
+                checkbox.checked = false;
+            } else {
+                selectedSources.push(sourceId);
+                sourceElement.classList.add('selected');
+                checkbox.checked = true;
+            }
+            
+            updateStatistics();
+        }
+
+        // انتخاب همه مراجع
+        function selectAllSources() {
+            selectedSources = legalSources.map(source => source.id);
+            legalSources.forEach(source => {
+                const sourceElement = document.getElementById(`source-${source.id}`);
+                const checkbox = document.getElementById(`checkbox-${source.id}`);
+                sourceElement.classList.add('selected');
+                checkbox.checked = true;
+            });
+            updateStatistics();
+            showToast('همه مراجع انتخاب شدند', 'success', 'انتخاب');
+        }
+
+        // پاک کردن انتخاب همه مراجع
+        function clearAllSources() {
+            selectedSources = [];
+            legalSources.forEach(source => {
+                const sourceElement = document.getElementById(`source-${source.id}`);
+                const checkbox = document.getElementById(`checkbox-${source.id}`);
+                sourceElement.classList.remove('selected');
+                checkbox.checked = false;
+            });
+            updateStatistics();
+            showToast('انتخاب همه مراجع پاک شد', 'info', 'پاک سازی');
+        }
+
+        // بروزرسانی آمار
+        function updateStatistics() {
+            document.getElementById('selectedSources').textContent = selectedSources.length;
+        }
+
+        // شروع اسکراپینگ خودکار
+        function startAutoScraping() {
+            if (scrapingActive) {
+                showToast('اسکراپینگ در حال انجام است', 'warning', 'هشدار');
+                return;
+            }
+
+            // انتخاب خودکار مراجع بر اساس اولویت
+            const autoSelectedSources = legalSources
+                .filter(source => source.priority <= 2)
+                .map(source => source.id);
+
+            if (autoSelectedSources.length === 0) {
+                showToast('هیچ مرجع مناسبی برای اسکراپینگ خودکار یافت نشد', 'error', 'خطا');
+                return;
+            }
+
+            // بروزرسانی انتخاب‌ها
+            clearAllSources();
+            autoSelectedSources.forEach(sourceId => {
+                toggleSource(sourceId);
+            });
+
+            showToast(`${autoSelectedSources.length} مرجع به صورت خودکار انتخاب شد`, 'info', 'انتخاب خودکار');
+            
+            setTimeout(() => {
+                startScraping(autoSelectedSources);
+            }, 1000);
+        }
+
+        // شروع اسکراپینگ مراجع انتخابی
+        function startSelectedScraping() {
+            if (scrapingActive) {
+                showToast('اسکراپینگ در حال انجام است', 'warning', 'هشدار');
+                return;
+            }
+
+            if (selectedSources.length === 0) {
+                showToast('لطفاً حداقل یک مرجع انتخاب کنید', 'warning', 'هشدار');
+                return;
+            }
+
+            startScraping(selectedSources);
+        }
+
+        // شروع فرآیند اسکراپینگ
+        function startScraping(sources) {
+            scrapingActive = true;
+            scrapingResults = [];
+            scrapingProgress = 0;
+
+            // بروزرسانی UI
+            document.getElementById('autoScrapingBtn').disabled = true;
+            document.getElementById('selectedScrapingBtn').disabled = true;
+            document.getElementById('stopScrapingBtn').disabled = false;
+
+            // نمایش وضعیت
+            const activityStatus = document.getElementById('activityStatus');
+            activityStatus.classList.add('show');
+            
+            updateScrapingStatus('loading', 'شروع اسکراپینگ...', 'در حال آماده‌سازی...', 0);
+
+            showToast(`شروع اسکراپینگ ${sources.length} مرجع`, 'info', 'شروع');
+
+            // شبیه‌سازی فرآیند اسکراپینگ
+            performScraping(sources);
+        }
+
+        // انجام اسکراپینگ (شبیه‌سازی)
+        async function performScraping(sources) {
+            const totalSteps = sources.length * 5; // 5 مرحله برای هر مرجع
+            let currentStep = 0;
+
+            for (let i = 0; i < sources.length; i++) {
+                const sourceId = sources[i];
+                const source = legalSources.find(s => s.id === sourceId);
+                
+                if (!source) continue;
+
+                // مراحل اسکراپینگ برای هر مرجع
+                const steps = [
+                    { title: `اتصال به ${source.name}`, message: 'در حال برقراری ارتباط...' },
+                    { title: `دریافت صفحه ${source.name}`, message: 'در حال دانلود HTML...' },
+                    { title: `تجزیه محتوا ${source.name}`, message: 'در حال استخراج اطلاعات...' },
+                    { title: `پردازش داده‌ها ${source.name}`, message: 'در حال تمیز کردن متن...' },
+                    { title: `ذخیره نتایج ${source.name}`, message: 'در حال ذخیره در پایگاه داده...' }
+                ];
+
+                for (let j = 0; j < steps.length; j++) {
+                    currentStep++;
+                    const progress = (currentStep / totalSteps) * 100;
+                    
+                    updateScrapingStatus('loading', steps[j].title, steps[j].message, progress);
+                    
+                    // شبیه‌سازی تاخیر
+                    await new Promise(resolve => setTimeout(resolve, 800));
+                    
+                    if (!scrapingActive) {
+                        return; // متوقف شده
+                    }
+                }
+
+                // تولید نتیجه تصادفی برای این مرجع
+                const result = generateMockResult(source);
+                scrapingResults.push(result);
+            }
+
+            // تکمیل اسکراپینگ
+            completeScrapingSuccess();
+        }
+
+        // تولید نتیجه تصادفی
+        function generateMockResult(source) {
+            const sampleContents = [
+                'قانون جدید در زمینه حقوق شهروندی تصویب شد...',
+                'دیوان عدالت اداری رای مهمی در خصوص اختیارات دولتی صادر کرد...',
+                'آخرین تغییرات در قوانین مدنی و تجارت اعلام شد...',
+                'گزارش جدید از عملکرد دستگاه‌های قضایی منتشر شد...',
+                'رویه‌های جدید برای تسریع در روند قضایی ابلاغ شد...'
+            ];
+
+            const randomContent = sampleContents[Math.floor(Math.random() * sampleContents.length)];
+            
+            return {
+                source: source.name,
+                url: source.url,
+                title: `آخرین اطلاعات از ${source.name}`,
+                content: randomContent,
+                wordCount: Math.floor(Math.random() * 500) + 100,
+                scrapedAt: new Date().toISOString(),
+                links: Math.floor(Math.random() * 10) + 5,
+                status: 'success'
+            };
+        }
+
+        // تکمیل موفق اسکراپینگ
+        function completeScrapingSuccess() {
+            updateScrapingStatus('success', 'اسکراپینگ تکمیل شد', `${scrapingResults.length} مرجع با موفقیت پردازش شد`, 100);
+
+            setTimeout(() => {
+                document.getElementById('activityStatus').classList.remove('show');
+                displayResults();
+                resetScrapingState();
+                
+                showToast(`اسکراپینگ تکمیل شد - ${scrapingResults.length} نتیجه`, 'success', 'تکمیل');
+                
+                // بروزرسانی آمار
+                const currentScraped = parseInt(document.getElementById('scrapedItems').textContent);
+                document.getElementById('scrapedItems').textContent = currentScraped + scrapingResults.length;
+                document.getElementById('lastUpdate').textContent = new Date().toLocaleDateString('fa-IR');
+            }, 2000);
+        }
+
+        // نمایش نتایج
+        function displayResults() {
+            const resultsSection = document.getElementById('resultsSection');
+            const resultsGrid = document.getElementById('resultsGrid');
+
+            let html = '';
+            scrapingResults.forEach((result, index) => {
+                html += `
+                    <div class="result-card">
+                        <div class="result-source">${result.source}</div>
+                        <div class="result-meta">
+                            <span><i class="fas fa-file-text"></i> ${result.wordCount} کلمه</span>
+                            <span><i class="fas fa-link"></i> ${result.links} لینک</span>
+                            <span><i class="fas fa-clock"></i> ${new Date(result.scrapedAt).toLocaleTimeString('fa-IR')}</span>
+                        </div>
+                        <div class="result-content">${result.content}</div>
+                        <div class="result-actions">
+                            <button class="btn btn-primary btn-sm" onclick="viewFullResult(${index})">
+                                <i class="fas fa-eye"></i>
+                                مشاهده کامل
+                            </button>
+                            <button class="btn btn-success btn-sm" onclick="saveResult(${index})">
+                                <i class="fas fa-save"></i>
+                                ذخیره
+                            </button>
+                        </div>
+                    </div>
+                `;
+            });
+
+            resultsGrid.innerHTML = html;
+            resultsSection.classList.add('show');
+        }
+
+        // بروزرسانی وضعیت اسکراپینگ
+        function updateScrapingStatus(type, title, message, progress) {
+            const statusIcon = document.getElementById('statusIcon');
+            const statusTitle = document.getElementById('statusTitle');
+            const statusMessage = document.getElementById('statusMessage');
+            const progressBar = document.getElementById('statusProgressBar');
+
+            statusIcon.className = `status-icon status-${type}`;
+            statusTitle.textContent = title;
+            statusMessage.textContent = message;
+            progressBar.style.width = `${progress}%`;
+
+            const icons = {
+                loading: 'spinner fa-spin',
+                success: 'check-circle',
+                error: 'exclamation-triangle'
+            };
+
+            statusIcon.innerHTML = `<i class="fas fa-${icons[type]}"></i>`;
+        }
+
+        // توقف اسکراپینگ
+        function stopScraping() {
+            if (!scrapingActive) return;
+
+            scrapingActive = false;
+            
+            updateScrapingStatus('error', 'اسکراپینگ متوقف شد', 'فرآیند توسط کاربر متوقف شد', scrapingProgress);
+            
+            setTimeout(() => {
+                document.getElementById('activityStatus').classList.remove('show');
+                resetScrapingState();
+            }, 2000);
+
+            showToast('اسکراپینگ متوقف شد', 'warning', 'توقف');
+        }
+
+        // بازنشانی وضعیت اسکراپینگ
+        function resetScrapingState() {
+            scrapingActive = false;
+            scrapingProgress = 0;
+            
+            document.getElementById('autoScrapingBtn').disabled = false;
+            document.getElementById('selectedScrapingBtn').disabled = false;
+            document.getElementById('stopScrapingBtn').disabled = true;
+        }
+
+        // بررسی وضعیت مراجع
+        function checkSourcesStatus() {
+            showToast('در حال بررسی وضعیت مراجع...', 'info', 'بررسی');
+            
+            // شبیه‌سازی بررسی
+            setTimeout(() => {
+                const onlineCount = legalSources.filter(s => s.status === 'online').length;
+                showToast(`${onlineCount} از ${legalSources.length} مرجع آنلاین هستند`, 'success', 'وضعیت مراجع');
+            }, 1500);
+        }
+
+        // بروزرسانی داده‌ها
+        function refreshData() {
+            showToast('در حال بروزرسانی...', 'info', 'بروزرسانی');
+            
+            setTimeout(() => {
+                updateStatistics();
+                showToast('داده‌ها بروزرسانی شد', 'success', 'بروزرسانی');
+            }, 1000);
+        }
+
+        // صادرات نتایج
+        function exportResults() {
+            if (scrapingResults.length === 0) {
+                showToast('نتیجه‌ای برای صادرات وجود ندارد', 'warning', 'هشدار');
+                return;
+            }
+
+            const dataStr = JSON.stringify(scrapingResults, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+            
+            const exportFileDefaultName = `legal-scraping-results-${new Date().toISOString().split('T')[0]}.json`;
+            
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportFileDefaultName);
+            linkElement.click();
+
+            showToast('فایل JSON آماده دانلود است', 'success', 'صادرات');
+        }
+
+        // ذخیره در پایگاه داده
+        function saveToDatabase() {
+            if (scrapingResults.length === 0) {
+                showToast('نتیجه‌ای برای ذخیره وجود ندارد', 'warning', 'هشدار');
+                return;
+            }
+
+            // شبیه‌سازی ذخیره
+            showToast('در حال ذخیره در پایگاه داده...', 'info', 'ذخیره');
+            
+            setTimeout(() => {
+                showToast(`${scrapingResults.length} نتیجه در پایگاه داده ذخیره شد`, 'success', 'ذخیره موفق');
+            }, 2000);
+        }
+
+        // مشاهده نتیجه کامل
+        function viewFullResult(index) {
+            const result = scrapingResults[index];
+            if (!result) return;
+            
+            showToast(`مشاهده نتیجه کامل: ${result.source}`, 'info', 'نمایش');
+        }
+
+        // ذخیره نتیجه منفرد
+        function saveResult(index) {
+            const result = scrapingResults[index];
+            if (!result) return;
+            
+            showToast(`نتیجه ${result.source} ذخیره شد`, 'success', 'ذخیره');
+        }
+
+        // نمایش Toast
+        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);
+
+            setTimeout(() => toast.classList.add('show'), 100);
+
+            setTimeout(() => {
+                if (toast.parentElement) {
+                    toast.classList.remove('show');
+                    setTimeout(() => {
+                        if (toast.parentElement) {
+                            toast.remove();
+                        }
+                    }, 300);
+                }
+            }, 5000);
+        }
+
+        console.log('🕷️ Legal Scraping Dashboard Ready!');
+    </script>
+</body>
+</html>

app/frontend/scraping_dashboard.html

@@ -0,0 +1,863 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Legal Dashboard - Scraping &amp; Rating System</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.css" rel="stylesheet">
+    <!-- Load API Client and Core System -->
+    <script src="js/api-client.js"></script>
+    <script src="js/core.js"></script>
+    <script src="js/notifications.js"></script>
+    <script src="js/scraping-control.js"></script>
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --success-color: #27ae60;
+            --warning-color: #f39c12;
+            --danger-color: #e74c3c;
+            --light-bg: #f8f9fa;
+            --dark-bg: #343a40;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .navbar-custom {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        }
+        
+        .navbar-brand {
+            font-weight: bold;
+            font-size: 1.5rem;
+        }
+
+        .card {
+            border: none;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+        }
+
+        .card-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: 15px 15px 0 0 !important;
+            font-weight: bold;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+            border: none;
+            border-radius: 25px;
+            padding: 10px 25px;
+            font-weight: bold;
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, var(--success-color), #2ecc71);
+            border: none;
+            border-radius: 25px;
+        }
+
+        .btn-warning {
+            background: linear-gradient(135deg, var(--warning-color), #f1c40f);
+            border: none;
+            border-radius: 25px;
+        }
+
+        .btn-danger {
+            background: linear-gradient(135deg, var(--danger-color), #c0392b);
+            border: none;
+            border-radius: 25px;
+        }
+
+        .progress {
+            height: 25px;
+            border-radius: 15px;
+            background-color: #e9ecef;
+        }
+
+        .progress-bar {
+            border-radius: 15px;
+            font-weight: bold;
+        }
+
+        .stats-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .stats-number {
+            font-size: 2.5rem;
+            font-weight: bold;
+        }
+
+        .stats-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .table {
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .table thead th {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border: none;
+            font-weight: bold;
+        }
+
+        .badge {
+            border-radius: 20px;
+            padding: 8px 15px;
+            font-weight: bold;
+        }
+
+        .alert {
+            border-radius: 15px;
+            border: none;
+        }
+
+        .form-control, .form-select {
+            border-radius: 10px;
+            border: 2px solid #e9ecef;
+            transition: border-color 0.3s ease;
+        }
+
+        .form-control:focus, .form-select:focus {
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+        }
+
+        .modal-content {
+            border-radius: 15px;
+            border: none;
+        }
+
+        .modal-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: 15px 15px 0 0;
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid var(--secondary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            border-radius: 10px;
+            padding: 15px 20px;
+            color: white;
+            font-weight: bold;
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+        }
+
+        .notification.show {
+            transform: translateX(0);
+        }
+
+        .notification.success {
+            background: linear-gradient(135deg, var(--success-color), #2ecc71);
+        }
+
+        .notification.warning {
+            background: linear-gradient(135deg, var(--warning-color), #f1c40f);
+        }
+
+        .notification.error {
+            background: linear-gradient(135deg, var(--danger-color), #c0392b);
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin: 20px 0;
+        }
+
+        .job-status {
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-weight: bold;
+            font-size: 0.9rem;
+        }
+
+        .status-pending { background-color: #f8f9fa; color: #6c757d; }
+        .status-processing { background-color: #fff3cd; color: #856404; }
+        .status-completed { background-color: #d1ecf1; color: #0c5460; }
+        .status-failed { background-color: #f8d7da; color: #721c24; }
+
+        .rating-badge {
+            padding: 5px 10px;
+            border-radius: 15px;
+            font-weight: bold;
+            font-size: 0.8rem;
+        }
+
+        .rating-excellent { background-color: #d4edda; color: #155724; }
+        .rating-good { background-color: #d1ecf1; color: #0c5460; }
+        .rating-average { background-color: #fff3cd; color: #856404; }
+        .rating-poor { background-color: #f8d7da; color: #721c24; }
+        .rating-unrated { background-color: #e2e3e5; color: #383d41; }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <i class="fas fa-spider me-2"></i>
+                Legal Dashboard - Scraping &amp; Rating
+            </a>
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="#" onclick="showNotification('System is running smoothly', 'success')">
+                    <i class="fas fa-heartbeat me-1"></i>
+                    System Health
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid mt-4">
+        <!-- Statistics Cards -->
+        <div class="row mb-4">
+            <div class="col-md-3">
+                <div class="stats-card text-center">
+                    <div class="stats-number" id="totalItems">0</div>
+                    <div class="stats-label">Total Items Scraped</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card text-center">
+                    <div class="stats-number" id="activeJobs">0</div>
+                    <div class="stats-label">Active Jobs</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card text-center">
+                    <div class="stats-number" id="avgRating">0.0</div>
+                    <div class="stats-label">Average Rating</div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card text-center">
+                    <div class="stats-number" id="totalRated">0</div>
+                    <div class="stats-label">Items Rated</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <!-- Scraping Control Panel -->
+            <div class="col-lg-4">
+                <div class="card mb-4">
+                    <div class="card-header">
+                        <i class="fas fa-spider me-2"></i>
+                        Scraping Control Panel
+                    </div>
+                    <div class="card-body">
+                        <form id="scrapingForm">
+                            <div class="mb-3">
+                                <label for="urls" class="form-label">URLs to Scrape</label>
+                                <textarea class="form-control" id="urls" rows="4" placeholder="Enter URLs (one per line)&#10;Example:&#10;https://example.com/page1&#10;https://example.com/page2"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="strategy" class="form-label">Scraping Strategy</label>
+                                <select class="form-select" id="strategy">
+                                    <option value="general">General</option>
+                                    <option value="legal_documents">Legal Documents</option>
+                                    <option value="news_articles">News Articles</option>
+                                    <option value="academic_papers">Academic Papers</option>
+                                    <option value="government_sites">Government Sites</option>
+                                    <option value="custom">Custom</option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <label for="keywords" class="form-label">Keywords (optional)</label>
+                                <input type="text" class="form-control" id="keywords" placeholder="Enter keywords separated by commas">
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="mb-3">
+                                        <label for="maxDepth" class="form-label">Max Depth</label>
+                                        <input type="number" class="form-control" id="maxDepth" value="1" min="1" max="5">
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="mb-3">
+                                        <label for="delay" class="form-label">Delay (seconds)</label>
+                                        <input type="number" class="form-control" id="delay" value="1.0" min="0.1" max="10.0" step="0.1">
+                                    </div>
+                                </div>
+                            </div>
+                            <button type="submit" class="btn btn-primary w-100" id="startScrapingBtn">
+                                <i class="fas fa-play me-2"></i>
+                                Start Scraping Job
+                            </button>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Rating Controls -->
+                <div class="card mb-4">
+                    <div class="card-header">
+                        <i class="fas fa-star me-2"></i>
+                        Rating Controls
+                    </div>
+                    <div class="card-body">
+                        <button type="button" class="btn btn-success w-100 mb-2" onclick="rateAllItems()">
+                            <i class="fas fa-star me-2"></i>
+                            Rate All Unrated Items
+                        </button>
+                        <button type="button" class="btn btn-warning w-100 mb-2" onclick="getLowQualityItems()">
+                            <i class="fas fa-exclamation-triangle me-2"></i>
+                            Get Low Quality Items
+                        </button>
+                        <button type="button" class="btn btn-info w-100" onclick="refreshStatistics()">
+                            <i class="fas fa-sync-alt me-2"></i>
+                            Refresh Statistics
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Active Jobs -->
+            <div class="col-lg-8">
+                <div class="card mb-4">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span><i class="fas fa-tasks me-2"></i>Active Scraping Jobs</span>
+                        <button type="button" class="btn btn-sm btn-outline-light" onclick="refreshJobs()" aria-label="Refresh jobs">
+                            <i class="fas fa-sync-alt"></i>
+                        </button>
+                    </div>
+                    <div class="card-body">
+                        <div id="jobsContainer">
+                            <div class="text-center text-muted">
+                                <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
+                                <p>Loading jobs...</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts -->
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <i class="fas fa-chart-pie me-2"></i>
+                                Rating Distribution
+                            </div>
+                            <div class="card-body">
+                                <div class="chart-container">
+                                    <canvas id="ratingChart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <i class="fas fa-chart-bar me-2"></i>
+                                Language Distribution
+                            </div>
+                            <div class="card-body">
+                                <div class="chart-container">
+                                    <canvas id="languageChart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Scraped Items Table -->
+        <div class="row mt-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span><i class="fas fa-list me-2"></i>Scraped Items</span>
+                        <div>
+                            <button type="button" class="btn btn-sm btn-outline-light me-2" onclick="refreshItems()" aria-label="Refresh items">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                            <select class="form-select form-select-sm d-inline-block w-auto" id="itemFilter">
+                                <option value="">All Items</option>
+                                <option value="completed">Completed</option>
+                                <option value="failed">Failed</option>
+                                <option value="rated">Rated</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th scope="col">Title</th>
+                                        <th scope="col">URL</th>
+                                        <th scope="col">Status</th>
+                                        <th scope="col">Rating</th>
+                                        <th scope="col">Language</th>
+                                        <th scope="col">Word Count</th>
+                                        <th scope="col">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="itemsTableBody">
+                                    <tr>
+                                        <td colspan="7" class="text-center text-muted">
+                                            <i class="fas fa-spinner fa-spin me-2"></i>
+                                            Loading items...
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Notification Container -->
+    <div id="notificationContainer"></div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+    <script>
+        // Global variables
+        let ratingChart = null;
+        let languageChart = null;
+        let refreshInterval = null;
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', function() {
+            loadDashboard();
+            startAutoRefresh();
+        });
+
+        // Load dashboard data
+        async function loadDashboard() {
+            try {
+                await Promise.all([
+                    loadStatistics(),
+                    loadJobs(),
+                    loadItems(),
+                    loadCharts()
+                ]);
+            } catch (error) {
+                console.error('Error loading dashboard:', error);
+                showNotification('Error loading dashboard data', 'error');
+            }
+        }
+
+        // Load statistics
+        async function loadStatistics() {
+            try {
+                const [scrapingStats, ratingSummary] = await Promise.all([
+                    fetch('/api/scrape/statistics').then(r => r.json()),
+                    fetch('/api/rating/summary').then(r => r.json())
+                ]);
+
+                document.getElementById('totalItems').textContent = scrapingStats.total_items || 0;
+                document.getElementById('activeJobs').textContent = scrapingStats.active_jobs || 0;
+                document.getElementById('avgRating').textContent = (ratingSummary.average_score || 0).toFixed(2);
+                document.getElementById('totalRated').textContent = ratingSummary.total_rated || 0;
+            } catch (error) {
+                console.error('Error loading statistics:', error);
+            }
+        }
+
+        // Load jobs
+        async function loadJobs() {
+            try {
+                const response = await fetch('/api/scrape/status');
+                const jobs = await response.json();
+                
+                const container = document.getElementById('jobsContainer');
+                
+                if (jobs.length === 0) {
+                    container.innerHTML = '<div class="text-center text-muted"><p>No active jobs</p></div>';
+                    return;
+                }
+
+                let html = '';
+                jobs.forEach(job => {
+                    const progress = job.progress * 100;
+                    html += `
+                        <div class="card mb-3">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-center mb-2">
+                                    <h6 class="card-title mb-0">Job ${job.job_id}</h6>
+                                    <span class="job-status status-${job.status}">${job.status}</span>
+                                </div>
+                                <div class="progress mb-2">
+                                    <div class="progress-bar" role="progressbar" style="width: ${progress}%" 
+                                         aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
+                                        ${progress.toFixed(1)}%
+                                    </div>
+                                </div>
+                                <div class="row text-center">
+                                    <div class="col-4">
+                                        <small class="text-muted">Total</small><br>
+                                        <strong>${job.total_items}</strong>
+                                    </div>
+                                    <div class="col-4">
+                                        <small class="text-muted">Completed</small><br>
+                                        <strong class="text-success">${job.completed_items}</strong>
+                                    </div>
+                                    <div class="col-4">
+                                        <small class="text-muted">Failed</small><br>
+                                        <strong class="text-danger">${job.failed_items}</strong>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+                
+                container.innerHTML = html;
+            } catch (error) {
+                console.error('Error loading jobs:', error);
+                document.getElementById('jobsContainer').innerHTML = 
+                    '<div class="alert alert-danger">Error loading jobs</div>';
+            }
+        }
+
+        // Load items
+        async function loadItems() {
+            try {
+                const response = await fetch('/api/scrape/items?limit=50');
+                const items = await response.json();
+                
+                const tbody = document.getElementById('itemsTableBody');
+                let html = '';
+                
+                items.forEach(item => {
+                    const ratingClass = getRatingClass(item.rating_score);
+                    const ratingText = item.rating_score > 0 ? item.rating_score.toFixed(2) : 'Unrated';
+                    
+                    html += `
+                        <tr>
+                            <td>
+                                <strong>${item.title || 'No Title'}</strong>
+                                <br><small class="text-muted">${item.domain}</small>
+                            </td>
+                            <td>
+                                <a href="${item.url}" target="_blank" class="text-decoration-none">
+                                    ${item.url.substring(0, 50)}...
+                                </a>
+                            </td>
+                            <td>
+                                <span class="job-status status-${item.processing_status}">
+                                    ${item.processing_status}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="rating-badge ${ratingClass}">
+                                    ${ratingText}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="badge bg-info">${item.language}</span>
+                            </td>
+                            <td>
+                                <span class="badge bg-secondary">${item.word_count}</span>
+                            </td>
+                            <td>
+                                <button class="btn btn-sm btn-outline-primary me-1" onclick="viewItem('${item.id}')">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="btn btn-sm btn-outline-success" onclick="rateItem('${item.id}')">
+                                    <i class="fas fa-star"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    `;
+                });
+                
+                tbody.innerHTML = html;
+            } catch (error) {
+                console.error('Error loading items:', error);
+                document.getElementById('itemsTableBody').innerHTML = 
+                    '<tr><td colspan="7" class="text-center text-danger">Error loading items</td></tr>';
+            }
+        }
+
+        // Load charts
+        async function loadCharts() {
+            try {
+                const [scrapingStats, ratingSummary] = await Promise.all([
+                    fetch('/api/scrape/statistics').then(r => r.json()),
+                    fetch('/api/rating/summary').then(r => r.json())
+                ]);
+
+                // Rating distribution chart
+                const ratingCtx = document.getElementById('ratingChart').getContext('2d');
+                if (ratingChart) ratingChart.destroy();
+                
+                ratingChart = new Chart(ratingCtx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: Object.keys(ratingSummary.rating_level_distribution || {}),
+                        datasets: [{
+                            data: Object.values(ratingSummary.rating_level_distribution || {}),
+                            backgroundColor: ['#28a745', '#17a2b8', '#ffc107', '#dc3545', '#6c757d']
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }
+                });
+
+                // Language distribution chart
+                const languageCtx = document.getElementById('languageChart').getContext('2d');
+                if (languageChart) languageChart.destroy();
+                
+                languageChart = new Chart(languageCtx, {
+                    type: 'bar',
+                    data: {
+                        labels: Object.keys(scrapingStats.language_distribution || {}),
+                        datasets: [{
+                            label: 'Items by Language',
+                            data: Object.values(scrapingStats.language_distribution || {}),
+                            backgroundColor: '#3498db'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error('Error loading charts:', error);
+            }
+        }
+
+        // Form submission
+        document.getElementById('scrapingForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const urls = document.getElementById('urls').value.split('\n').filter(url => url.trim());
+            const strategy = document.getElementById('strategy').value;
+            const keywords = document.getElementById('keywords').value.split(',').filter(k => k.trim());
+            const maxDepth = parseInt(document.getElementById('maxDepth').value);
+            const delay = parseFloat(document.getElementById('delay').value);
+
+            if (urls.length === 0) {
+                showNotification('Please enter at least one URL', 'warning');
+                return;
+            }
+
+            const startBtn = document.getElementById('startScrapingBtn');
+            const originalText = startBtn.innerHTML;
+            startBtn.innerHTML = '<span class="loading-spinner me-2"></span>Starting...';
+            startBtn.disabled = true;
+
+            try {
+                const response = await fetch('/api/scrape', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        urls: urls,
+                        strategy: strategy,
+                        keywords: keywords.length > 0 ? keywords : null,
+                        max_depth: maxDepth,
+                        delay_between_requests: delay
+                    })
+                });
+
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showNotification('Scraping job started successfully', 'success');
+                    document.getElementById('scrapingForm').reset();
+                    loadJobs();
+                } else {
+                    showNotification(result.detail || 'Failed to start scraping job', 'error');
+                }
+            } catch (error) {
+                console.error('Error starting scraping job:', error);
+                showNotification('Error starting scraping job', 'error');
+            } finally {
+                startBtn.innerHTML = originalText;
+                startBtn.disabled = false;
+            }
+        });
+
+        // Rate all items
+        async function rateAllItems() {
+            try {
+                const response = await fetch('/api/rating/rate-all', {
+                    method: 'POST'
+                });
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showNotification(`Rated ${result.rated_count} items successfully`, 'success');
+                    loadStatistics();
+                    loadItems();
+                } else {
+                    showNotification(result.detail || 'Failed to rate items', 'error');
+                }
+            } catch (error) {
+                console.error('Error rating items:', error);
+                showNotification('Error rating items', 'error');
+            }
+        }
+
+        // Get low quality items
+        async function getLowQualityItems() {
+            try {
+                const response = await fetch('/api/rating/low-quality');
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showNotification(`Found ${result.total_items} low quality items`, 'warning');
+                    // You could display these in a modal or separate section
+                } else {
+                    showNotification(result.detail || 'Failed to get low quality items', 'error');
+                }
+            } catch (error) {
+                console.error('Error getting low quality items:', error);
+                showNotification('Error getting low quality items', 'error');
+            }
+        }
+
+        // Rate specific item
+        async function rateItem(itemId) {
+            try {
+                const response = await fetch(`/api/rating/rate/${itemId}`, {
+                    method: 'POST'
+                });
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showNotification(`Item ${itemId} rated successfully`, 'success');
+                    loadItems();
+                } else {
+                    showNotification(result.detail || 'Failed to rate item', 'error');
+                }
+            } catch (error) {
+                console.error('Error rating item:', error);
+                showNotification('Error rating item', 'error');
+            }
+        }
+
+        // View item details
+        function viewItem(itemId) {
+            // This could open a modal with item details
+            showNotification(`Viewing item ${itemId}`, 'info');
+        }
+
+        // Refresh functions
+        function refreshStatistics() {
+            loadStatistics();
+            showNotification('Statistics refreshed', 'success');
+        }
+
+        function refreshJobs() {
+            loadJobs();
+            showNotification('Jobs refreshed', 'success');
+        }
+
+        function refreshItems() {
+            loadItems();
+            showNotification('Items refreshed', 'success');
+        }
+
+        // Auto refresh
+        function startAutoRefresh() {
+            refreshInterval = setInterval(() => {
+                loadStatistics();
+                loadJobs();
+            }, 10000); // Refresh every 10 seconds
+        }
+
+        // Utility functions
+        function getRatingClass(score) {
+            if (score >= 0.8) return 'rating-excellent';
+            if (score >= 0.6) return 'rating-good';
+            if (score >= 0.4) return 'rating-average';
+            if (score >= 0.2) return 'rating-poor';
+            return 'rating-unrated';
+        }
+
+        function showNotification(message, type = 'info') {
+            const container = document.getElementById('notificationContainer');
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+            notification.innerHTML = `
+                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : type === 'error' ? 'times-circle' : 'info-circle'} me-2"></i>
+                ${message}
+            `;
+            
+            container.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.classList.add('show');
+            }, 100);
+            
+            setTimeout(() => {
+                notification.classList.remove('show');
+                setTimeout(() => {
+                    container.removeChild(notification);
+                }, 300);
+            }, 5000);
+        }
+
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', function() {
+            if (refreshInterval) {
+                clearInterval(refreshInterval);
+            }
+        });
+    </script>
+</body>
+</html> 

app/frontend/search.html

@@ -0,0 +1,1584 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Load API Client -->
+    <script src="/static/js/api-client.js"></script>
+    <script src="/static/js/core.js"></script>
+    
+    <style>
+        :root {
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+            width: 100%;
+        }
+
+        /* سایدبار مشابه صفحات قبلی */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            height: 100vh;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow:
+                0 0 0 1px rgba(59, 130, 246, 0.08),
+                -8px 0 32px rgba(59, 130, 246, 0.12),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6);
+            border-left: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.12);
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-bottom: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-left: 0.6rem;
+            width: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-right: auto;
+            min-width: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 1rem;
+            min-height: 100vh;
+            width: calc(100% - var(--sidebar-width));
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .btn-primary:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .btn-outline:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.4);
+        }
+
+        /* جستجوی اصلی */
+        .search-main {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .search-form {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+
+        .search-primary {
+            position: relative;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 1rem 3rem 1rem 1rem;
+            border: 2px solid var(--glass-border);
+            border-radius: var(--border-radius);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-lg);
+            transition: var(--transition-smooth);
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            background: var(--card-bg);
+        }
+
+        .search-btn {
+            position: absolute;
+            left: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: var(--primary-gradient);
+            color: white;
+            border: none;
+            padding: 0.8rem 1.2rem;
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            font-weight: 600;
+            transition: var(--transition-smooth);
+        }
+
+        .search-btn:hover {
+            transform: translateY(-50%) scale(1.05);
+            box-shadow: var(--shadow-lg);
+        }
+
+        /* فیلترهای پیشرفته */
+        .search-filters {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            padding: 1.5rem;
+            background: rgba(59, 130, 246, 0.03);
+            border-radius: var(--border-radius);
+            border: 1px solid rgba(59, 130, 246, 0.1);
+        }
+
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .filter-label {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .filter-select,
+        .filter-input {
+            padding: 0.6rem 0.8rem;
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .filter-select:focus,
+        .filter-input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .search-actions {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+        }
+
+        /* نتایج جستجو */
+        .search-results {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            overflow: hidden;
+            display: none;
+        }
+
+        .search-results.show {
+            display: block;
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(255, 255, 255, 0.1));
+        }
+
+        .results-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .results-stats {
+            display: flex;
+            gap: 1rem;
+            font-size: var(--font-size-sm);
+            color: var(--text-muted);
+        }
+
+        .result-item {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+            transition: var(--transition-smooth);
+            cursor: pointer;
+        }
+
+        .result-item:hover {
+            background: rgba(59, 130, 246, 0.02);
+            transform: translateX(-3px);
+        }
+
+        .result-item:last-child {
+            border-bottom: none;
+        }
+
+        .result-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+        }
+
+        .result-title {
+            font-size: var(--font-size-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .result-icon {
+            width: 1.5rem;
+            height: 1.5rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: var(--font-size-xs);
+        }
+
+        .result-meta {
+            display: flex;
+            gap: 1rem;
+            font-size: var(--font-size-sm);
+            color: var(--text-muted);
+            margin-bottom: 1rem;
+        }
+
+        .result-snippet {
+            color: var(--text-secondary);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
+
+        .result-highlight {
+            background: rgba(245, 158, 11, 0.2);
+            color: var(--text-primary);
+            font-weight: 600;
+            padding: 0.1rem 0.2rem;
+            border-radius: 3px;
+        }
+
+        .result-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .result-btn {
+            padding: 0.3rem 0.6rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            transition: var(--transition-fast);
+            font-size: var(--font-size-xs);
+            font-weight: 500;
+        }
+
+        .result-btn.primary {
+            background: rgba(59, 130, 246, 0.1);
+            color: #3b82f6;
+        }
+
+        .result-btn.secondary {
+            background: rgba(16, 185, 129, 0.1);
+            color: #10b981;
+        }
+
+        .result-btn:hover {
+            transform: scale(1.05);
+        }
+
+        /* نتایج خالی */
+        .empty-results {
+            display: none;
+            padding: 3rem;
+            text-align: center;
+            color: var(--text-secondary);
+        }
+
+        .empty-results.show {
+            display: block;
+        }
+
+        .empty-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            opacity: 0.3;
+            color: var(--text-muted);
+        }
+
+        .empty-title {
+            font-size: var(--font-size-xl);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-primary);
+        }
+
+        .empty-description {
+            font-size: var(--font-size-base);
+            margin-bottom: 1.5rem;
+            max-width: 400px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* صفحه‌بندی */
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 1rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .pagination-btn {
+            padding: 0.4rem 0.6rem;
+            border: 1px solid var(--glass-border);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            transition: var(--transition-fast);
+            font-size: var(--font-size-xs);
+            font-family: inherit;
+            font-weight: 500;
+        }
+
+        .pagination-btn:hover:not(:disabled) {
+            background: var(--primary-gradient);
+            color: white;
+            border-color: transparent;
+            transform: translateY(-1px);
+        }
+
+        .pagination-btn.active {
+            background: var(--primary-gradient);
+            color: white;
+            border-color: transparent;
+        }
+
+        .pagination-btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        /* لودینگ */
+        .loading-container {
+            display: none;
+            padding: 3rem;
+            text-align: center;
+            color: var(--text-secondary);
+        }
+
+        .loading-container.show {
+            display: block;
+        }
+
+        .loading-spinner {
+            width: 2rem;
+            height: 2rem;
+            border: 2px solid rgba(59, 130, 246, 0.1);
+            border-radius: 50%;
+            border-top-color: #3b82f6;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .sidebar {
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+
+            .search-filters {
+                grid-template-columns: 1fr;
+            }
+
+            .search-actions {
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+
+            .results-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .result-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+            }
+
+            .result-meta {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .search-main {
+                padding: 1.5rem;
+            }
+
+            .search-input {
+                font-size: var(--font-size-base);
+                padding: 0.8rem 2.5rem 0.8rem 0.8rem;
+            }
+
+            .search-btn {
+                padding: 0.6rem 0.8rem;
+            }
+
+            .result-item {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="/" class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </a>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">6</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/search.html" class="nav-link active">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-search"></i>
+                    جستجوی پیشرفته اسناد
+                </h1>
+                <div class="page-actions">
+                    <button type="button" class="btn btn-outline" onclick="clearSearch()">
+                        <i class="fas fa-undo"></i>
+                        پاک کردن
+                    </button>
+                    <a href="/static/documents.html" class="btn btn-primary">
+                        <i class="fas fa-list"></i>
+                        مشاهده همه اسناد
+                    </a>
+                </div>
+            </header>
+
+            <!-- جستجوی اصلی -->
+            <section class="search-main">
+                <form class="search-form" onsubmit="performSearch(event)">
+                    <div class="search-primary">
+                        <input type="text" 
+                               class="search-input" 
+                               id="searchQuery"
+                               name="q"
+                               placeholder="جستجو در اسناد، قوانین، آرا..."
+                               autocomplete="off">
+                        <button type="submit" class="search-btn">
+                            <i class="fas fa-search"></i>
+                            جستجو
+                        </button>
+                    </div>
+
+                    <div class="search-filters">
+                        <div class="filter-group">
+                            <label class="filter-label" for="categoryFilter">دسته‌بندی</label>
+                            <select class="filter-select" id="categoryFilter" name="category">
+                                <option value="">همه دسته‌ها</option>
+                                <option value="قراردادها">قراردادها</option>
+                                <option value="دادخواست‌ها">دادخواست‌ها</option>
+                                <option value="احکام قضایی">احکام قضایی</option>
+                                <option value="آرای دیوان">آرای دیوان</option>
+                                <option value="سایر">سایر</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-group">
+                            <label class="filter-label" for="statusFilter">وضعیت</label>
+                            <select class="filter-select" id="statusFilter" name="status">
+                                <option value="">همه وضعیت‌ها</option>
+                                <option value="processed">پردازش شده</option>
+                                <option value="processing">در حال پردازش</option>
+                                <option value="pending">در انتظار</option>
+                                <option value="error">خطا</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-group">
+                            <label class="filter-label" for="dateFromFilter">از تاریخ</label>
+                            <input type="date" class="filter-input" id="dateFromFilter" name="date_from">
+                        </div>
+
+                        <div class="filter-group">
+                            <label class="filter-label" for="dateToFilter">تا تاریخ</label>
+                            <input type="date" class="filter-input" id="dateToFilter" name="date_to">
+                        </div>
+
+                        <div class="filter-group">
+                            <label class="filter-label" for="qualityFilter">حداقل کیفیت</label>
+                            <select class="filter-select" id="qualityFilter" name="min_quality">
+                                <option value="">همه کیفیت‌ها</option>
+                                <option value="8.5">عالی (8.5+)</option>
+                                <option value="6.5">خوب (6.5+)</option>
+                                <option value="4.5">متوسط (4.5+)</option>
+                                <option value="0">ضعیف (کمتر از 4.5)</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-group">
+                            <label class="filter-label" for="sortFilter">مرتب‌سازی</label>
+                            <select class="filter-select" id="sortFilter" name="sort">
+                                <option value="relevance">مرتبط‌ترین</option>
+                                <option value="date_desc">جدیدترین</option>
+                                <option value="date_asc">قدیمی‌ترین</option>
+                                <option value="quality_desc">بهترین کیفیت</option>
+                                <option value="size_desc">بزرگترین فایل</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="search-actions">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-search"></i>
+                            جستجو
+                        </button>
+                        <button type="button" class="btn btn-outline btn-sm" onclick="resetFilters()">
+                            <i class="fas fa-undo"></i>
+                            پاک کردن فیلترها
+                        </button>
+                        <button type="button" class="btn btn-outline btn-sm" onclick="exportResults()">
+                            <i class="fas fa-download"></i>
+                            خروجی نتایج
+                        </button>
+                    </div>
+                </form>
+            </section>
+
+            <!-- لودینگ -->
+            <section class="loading-container" id="loadingContainer">
+                <div class="loading-spinner"></div>
+                <p>در حال جستجو...</p>
+            </section>
+
+            <!-- نتایج جستجو -->
+            <section class="search-results" id="searchResults">
+                <div class="results-header">
+                    <h3 class="results-title">نتایج جستجو</h3>
+                    <div class="results-stats">
+                        <span>تعداد نتایج: <strong id="resultsCount">0</strong></span>
+                        <span>زمان جستجو: <strong id="searchTime">0.00</strong> ثانیه</span>
+                    </div>
+                </div>
+
+                <div id="resultsContainer">
+                    <!-- نتایج اینجا نمایش داده می‌شوند -->
+                </div>
+
+                <div class="pagination" id="pagination">
+                    <!-- صفحه‌بندی اینجا نمایش داده می‌شود -->
+                </div>
+            </section>
+
+            <!-- نتایج خالی -->
+            <section class="empty-results" id="emptyResults">
+                <i class="fas fa-search empty-icon"></i>
+                <div class="empty-title">نتیجه‌ای یافت نشد</div>
+                <div class="empty-description">
+                    متأسفانه برای جستجوی شما نتیجه‌ای یافت نشد. لطفاً کلمات کلیدی دیگری امتحان کنید یا فیلترها را تغییر دهید.
+                </div>
+                <button type="button" class="btn btn-primary" onclick="clearSearch()">
+                    <i class="fas fa-search"></i>
+                    جستجوی جدید
+                </button>
+            </section>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // Global variables
+        let currentResults = [];
+        let currentPage = 1;
+        let itemsPerPage = 10;
+        let totalResults = 0;
+        let searchStartTime = 0;
+        let isOnline = false;
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🔍 Search page loading...');
+            initializeSearchPage();
+        });
+
+        async function initializeSearchPage() {
+            try {
+                // Test backend connection
+                isOnline = await testConnection();
+                
+                // Setup event listeners
+                setupEventListeners();
+                
+                // Check for URL parameters
+                checkUrlParameters();
+                
+                showToast('صفحه جستجو آماده است', 'success', 'آماده');
+                
+            } catch (error) {
+                console.error('Failed to initialize search page:', error);
+                
+                // Fallback mode
+                isOnline = false;
+                setupEventListeners();
+                
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                await window.legalAPI.healthCheck();
+                return true;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        function setupEventListeners() {
+            // Form submission
+            document.querySelector('.search-form').addEventListener('submit', performSearch);
+            
+            // Real-time search with debounce
+            const searchInput = document.getElementById('searchQuery');
+            let searchTimeout;
+            searchInput.addEventListener('input', function(e) {
+                clearTimeout(searchTimeout);
+                searchTimeout = setTimeout(() => {
+                    if (e.target.value.trim().length > 2) {
+                        performQuickSearch(e.target.value.trim());
+                    }
+                }, 500);
+            });
+
+            // Filter changes
+            ['categoryFilter', 'statusFilter', 'qualityFilter', 'sortFilter'].forEach(id => {
+                document.getElementById(id).addEventListener('change', debounce(performCurrentSearch, 300));
+            });
+
+            ['dateFromFilter', 'dateToFilter'].forEach(id => {
+                document.getElementById(id).addEventListener('change', debounce(performCurrentSearch, 500));
+            });
+        }
+
+        function checkUrlParameters() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const query = urlParams.get('q');
+            
+            if (query) {
+                document.getElementById('searchQuery').value = query;
+                performSearch();
+            }
+        }
+
+        async function performSearch(event) {
+            if (event) {
+                event.preventDefault();
+            }
+
+            const form = document.querySelector('.search-form');
+            const formData = new FormData(form);
+            
+            const searchParams = {
+                q: formData.get('q').trim(),
+                category: formData.get('category'),
+                status: formData.get('status'),
+                date_from: formData.get('date_from'),
+                date_to: formData.get('date_to'),
+                min_quality: formData.get('min_quality'),
+                sort: formData.get('sort') || 'relevance',
+                page: currentPage,
+                limit: itemsPerPage
+            };
+
+            // Validate search query
+            if (!searchParams.q || searchParams.q.length < 2) {
+                showToast('لطفاً حداقل 2 کاراکتر برای جستجو وارد کنید', 'warning', 'هشدار');
+                return;
+            }
+
+            showLoading(true);
+            searchStartTime = performance.now();
+
+            try {
+                let results;
+                
+                if (isOnline) {
+                    // Real API search
+                    results = await window.legalAPI.searchDocuments(searchParams);
+                } else {
+                    // Mock search results
+                    results = await generateMockSearchResults(searchParams);
+                }
+
+                const searchTime = ((performance.now() - searchStartTime) / 1000).toFixed(2);
+                displaySearchResults(results, searchTime);
+                
+                console.log('Search completed:', results);
+                
+            } catch (error) {
+                console.error('Search failed:', error);
+                showToast('خطا در جستجو. لطفاً دوباره تلاش کنید.', 'error', 'خطا');
+                showEmptyResults();
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        async function performQuickSearch(query) {
+            if (!query || query.length < 3) return;
+
+            try {
+                const searchParams = { q: query, limit: 5 };
+                
+                let results;
+                if (isOnline) {
+                    results = await window.legalAPI.searchDocuments(searchParams);
+                } else {
+                    results = await generateMockSearchResults(searchParams);
+                }
+
+                // Could implement quick search dropdown here
+                console.log('Quick search results:', results);
+                
+            } catch (error) {
+                console.error('Quick search failed:', error);
+            }
+        }
+
+        async function performCurrentSearch() {
+            const form = document.querySelector('.search-form');
+            const formData = new FormData(form);
+            
+            if (formData.get('q').trim()) {
+                await performSearch();
+            }
+        }
+
+        async function generateMockSearchResults(searchParams) {
+            // Simulate API delay
+            await new Promise(resolve => setTimeout(resolve, 800));
+
+            const mockDocuments = [
+                {
+                    id: 1,
+                    filename: "contract_001.pdf",
+                    original_filename: "قرارداد خرید املاک.pdf",
+                    file_size: 1024000,
+                    category: "قراردادها",
+                    quality_score: 8.5,
+                    status: "processed",
+                    created_at: "2024-01-15T10:30:00Z",
+                    ocr_text: "قرارداد خرید و فروش ملک واقع در تهران منطقه 3...",
+                    summary: "قرارداد خرید املاک مسکونی در منطقه 3 تهران",
+                    relevance_score: 0.95
+                },
+                {
+                    id: 2,
+                    filename: "lawsuit_002.pdf",
+                    original_filename: "دادخواست طلاق.pdf",
+                    file_size: 512000,
+                    category: "دادخواست‌ها",
+                    quality_score: 7.8,
+                    status: "processed",
+                    created_at: "2024-01-14T14:20:00Z",
+                    ocr_text: "دادخواست طلاق به درخواست زوجه...",
+                    summary: "درخواست طلاق توافقی با تقسیم اموال",
+                    relevance_score: 0.87
+                },
+                {
+                    id: 3,
+                    filename: "judgment_003.pdf",
+                    original_filename: "حکم دادگاه عمومی.pdf",
+                    file_size: 768000,
+                    category: "احکام قضایی",
+                    quality_score: 9.2,
+                    status: "processed",
+                    created_at: "2024-01-13T09:15:00Z",
+                    ocr_text: "حکم دادگاه عمومی حقوقی تهران...",
+                    summary: "حکم پرونده ملکی در دادگاه عمومی تهران",
+                    relevance_score: 0.82
+                }
+            ];
+
+            // Filter results based on search parameters
+            let filteredResults = mockDocuments;
+
+            if (searchParams.category) {
+                filteredResults = filteredResults.filter(doc => doc.category === searchParams.category);
+            }
+
+            if (searchParams.status) {
+                filteredResults = filteredResults.filter(doc => doc.status === searchParams.status);
+            }
+
+            if (searchParams.min_quality) {
+                const minQuality = parseFloat(searchParams.min_quality);
+                filteredResults = filteredResults.filter(doc => doc.quality_score >= minQuality);
+            }
+
+            // Apply sorting
+            if (searchParams.sort) {
+                switch (searchParams.sort) {
+                    case 'date_desc':
+                        filteredResults.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+                        break;
+                    case 'date_asc':
+                        filteredResults.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+                        break;
+                    case 'quality_desc':
+                        filteredResults.sort((a, b) => b.quality_score - a.quality_score);
+                        break;
+                    case 'relevance':
+                    default:
+                        filteredResults.sort((a, b) => b.relevance_score - a.relevance_score);
+                        break;
+                }
+            }
+
+            return {
+                documents: filteredResults,
+                pagination: {
+                    page: searchParams.page || 1,
+                    limit: searchParams.limit || 10,
+                    total: filteredResults.length,
+                    pages: Math.ceil(filteredResults.length / (searchParams.limit || 10))
+                }
+            };
+        }
+
+        function displaySearchResults(results, searchTime) {
+            currentResults = results.documents || [];
+            totalResults = results.pagination?.total || 0;
+
+            const resultsContainer = document.getElementById('resultsContainer');
+            const searchResults = document.getElementById('searchResults');
+            const emptyResults = document.getElementById('emptyResults');
+
+            // Update stats
+            document.getElementById('resultsCount').textContent = totalResults;
+            document.getElementById('searchTime').textContent = searchTime;
+
+            if (currentResults.length === 0) {
+                searchResults.classList.remove('show');
+                emptyResults.classList.add('show');
+                return;
+            }
+
+            // Display results
+            emptyResults.classList.remove('show');
+            searchResults.classList.add('show');
+
+            const searchQuery = document.getElementById('searchQuery').value.toLowerCase();
+            
+            resultsContainer.innerHTML = currentResults.map(doc => {
+                const snippet = generateSnippet(doc, searchQuery);
+                const relevanceScore = ((doc.relevance_score || 0.8) * 100).toFixed(0);
+
+                return `
+                    <div class="result-item" onclick="viewDocument(${doc.id})">
+                        <div class="result-header">
+                            <div>
+                                <div class="result-title">
+                                    <div class="result-icon">
+                                        <i class="fas fa-file-pdf"></i>
+                                    </div>
+                                    ${highlightText(doc.original_filename || doc.filename, searchQuery)}
+                                </div>
+                                <div class="result-meta">
+                                    <span><i class="fas fa-tag"></i> ${doc.category}</span>
+                                    <span><i class="fas fa-calendar"></i> ${formatDate(doc.created_at)}</span>
+                                    <span><i class="fas fa-star"></i> کیفیت: ${doc.quality_score?.toFixed(1) || '0.0'}</span>
+                                    <span><i class="fas fa-percentage"></i> ارتباط: ${relevanceScore}%</span>
+                                </div>
+                            </div>
+                            <div class="result-actions">
+                                <button type="button" class="result-btn primary" onclick="event.stopPropagation(); viewDocument(${doc.id})" title="مشاهده">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button type="button" class="result-btn secondary" onclick="event.stopPropagation(); downloadDocument(${doc.id})" title="دانلود">
+                                    <i class="fas fa-download"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="result-snippet">
+                            ${snippet}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            // Setup pagination
+            setupPagination(results.pagination);
+        }
+
+        function generateSnippet(doc, searchQuery) {
+            const text = doc.summary || doc.ocr_text || 'محتوای متنی در دسترس نیست.';
+            const maxLength = 200;
+            
+            if (!searchQuery || text.length <= maxLength) {
+                return highlightText(text.substring(0, maxLength) + (text.length > maxLength ? '...' : ''), searchQuery);
+            }
+
+            // Try to find the search term in the text
+            const lowerText = text.toLowerCase();
+            const queryIndex = lowerText.indexOf(searchQuery);
+            
+            if (queryIndex === -1) {
+                return highlightText(text.substring(0, maxLength) + '...', searchQuery);
+            }
+
+            // Extract snippet around the search term
+            const start = Math.max(0, queryIndex - 80);
+            const end = Math.min(text.length, queryIndex + searchQuery.length + 80);
+            
+            let snippet = text.substring(start, end);
+            if (start > 0) snippet = '...' + snippet;
+            if (end < text.length) snippet = snippet + '...';
+            
+            return highlightText(snippet, searchQuery);
+        }
+
+        function highlightText(text, query) {
+            if (!query || query.length < 2) return text;
+            
+            const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
+            return text.replace(regex, '<span class="result-highlight">$1</span>');
+        }
+
+        function escapeRegExp(string) {
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+
+        function setupPagination(pagination) {
+            const paginationContainer = document.getElementById('pagination');
+            const totalPages = pagination.pages;
+
+            if (totalPages <= 1) {
+                paginationContainer.style.display = 'none';
+                return;
+            }
+
+            paginationContainer.style.display = 'flex';
+
+            let paginationHTML = '';
+
+            // Previous button
+            paginationHTML += `
+                <button class="pagination-btn" ${currentPage <= 1 ? 'disabled' : ''} 
+                        onclick="changePage(${currentPage - 1})">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            `;
+
+            // Page numbers
+            const startPage = Math.max(1, currentPage - 2);
+            const endPage = Math.min(totalPages, currentPage + 2);
+
+            for (let i = startPage; i <= endPage; i++) {
+                paginationHTML += `
+                    <button class="pagination-btn ${i === currentPage ? 'active' : ''}" 
+                            onclick="changePage(${i})">
+                        ${i}
+                    </button>
+                `;
+            }
+
+            // Next button
+            paginationHTML += `
+                <button class="pagination-btn" ${currentPage >= totalPages ? 'disabled' : ''} 
+                        onclick="changePage(${currentPage + 1})">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+            `;
+
+            paginationContainer.innerHTML = paginationHTML;
+        }
+
+        async function changePage(page) {
+            currentPage = page;
+            await performSearch();
+            
+            // Scroll to top of results
+            document.getElementById('searchResults').scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'start' 
+            });
+        }
+
+        function showEmptyResults() {
+            document.getElementById('searchResults').classList.remove('show');
+            document.getElementById('emptyResults').classList.add('show');
+        }
+
+        function showLoading(show) {
+            const loading = document.getElementById('loadingContainer');
+            const results = document.getElementById('searchResults');
+            const empty = document.getElementById('emptyResults');
+            
+            if (show) {
+                loading.classList.add('show');
+                results.classList.remove('show');
+                empty.classList.remove('show');
+            } else {
+                loading.classList.remove('show');
+            }
+        }
+
+        function resetFilters() {
+            // Reset all filter fields except search query
+            document.getElementById('categoryFilter').value = '';
+            document.getElementById('statusFilter').value = '';
+            document.getElementById('dateFromFilter').value = '';
+            document.getElementById('dateToFilter').value = '';
+            document.getElementById('qualityFilter').value = '';
+            document.getElementById('sortFilter').value = 'relevance';
+            
+            showToast('فیلترها پاک شدند', 'info', 'بازنشانی');
+            
+            // Perform search again if there's a query
+            const query = document.getElementById('searchQuery').value.trim();
+            if (query) {
+                performCurrentSearch();
+            }
+        }
+
+        function clearSearch() {
+            document.querySelector('.search-form').reset();
+            document.getElementById('searchResults').classList.remove('show');
+            document.getElementById('emptyResults').classList.remove('show');
+            document.getElementById('searchQuery').focus();
+            
+            showToast('جستجو پاک شد', 'info', 'پاک کردن');
+        }
+
+        function exportResults() {
+            if (currentResults.length === 0) {
+                showToast('نتیجه‌ای برای خروجی وجود ندارد', 'warning', 'هشدار');
+                return;
+            }
+
+            showToast('فایل نتایج در حال آماده‌سازی...', 'info', 'خروجی');
+            
+            setTimeout(() => {
+                showToast('خروجی نتایج آماده شد', 'success', 'خروجی موفق');
+            }, 2000);
+        }
+
+        function viewDocument(documentId) {
+            showToast(`مشاهده سند شماره ${documentId}`, 'info', 'مشاهده سند');
+            // Could redirect to document detail page
+        }
+
+        function downloadDocument(documentId) {
+            showToast(`دانلود سند شماره ${documentId} شروع شد`, 'info', 'دانلود');
+        }
+
+        // Utility functions
+        function formatDate(dateString) {
+            if (!dateString) return 'نامشخص';
+            const date = new Date(dateString);
+            return date.toLocaleDateString('fa-IR', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+        }
+
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
+        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);
+        }
+
+        console.log('🔍 Search Page Ready!');
+    </script>
+</body>
+</html>

app/frontend/settings.html

@@ -0,0 +1,2183 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Load API Client -->
+    <script src="/static/js/api-client.js"></script>
+    <script src="/static/js/core.js"></script>
+    
+    <style>
+        :root {
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.02);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+            width: 100%;
+        }
+
+        /* سایدبار مشابه صفحات قبلی */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            height: 100vh;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow:
+                0 0 0 1px rgba(59, 130, 246, 0.08),
+                -8px 0 32px rgba(59, 130, 246, 0.12),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6);
+            border-left: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.12);
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-bottom: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-left: 0.6rem;
+            width: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-right: auto;
+            min-width: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-right: var(--sidebar-width);
+            padding: 1rem;
+            min-height: 100vh;
+            width: calc(100% - var(--sidebar-width));
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .btn-primary:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .btn-outline:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.4);
+        }
+
+        .btn-success {
+            background: var(--success-gradient);
+            color: white;
+        }
+
+        .btn-danger {
+            background: var(--danger-gradient);
+            color: white;
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+        }
+
+        /* تنظیمات اصلی */
+        .settings-layout {
+            display: grid;
+            grid-template-columns: 250px 1fr;
+            gap: 2rem;
+        }
+
+        .settings-nav {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 1rem;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            height: fit-content;
+            position: sticky;
+            top: 1rem;
+        }
+
+        .settings-nav-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 1rem;
+            padding-bottom: 0.8rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .settings-nav-list {
+            list-style: none;
+        }
+
+        .settings-nav-item {
+            margin-bottom: 0.3rem;
+        }
+
+        .settings-nav-link {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.8rem;
+            color: var(--text-secondary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-size: var(--font-size-sm);
+            font-weight: 500;
+        }
+
+        .settings-nav-link:hover {
+            background: rgba(59, 130, 246, 0.05);
+            color: var(--text-primary);
+            transform: translateX(-3px);
+        }
+
+        .settings-nav-link.active {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .settings-nav-icon {
+            font-size: var(--font-size-base);
+            width: 1.2rem;
+            text-align: center;
+        }
+
+        .settings-content {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            overflow: hidden;
+        }
+
+        .settings-section {
+            display: none;
+            padding: 2rem;
+        }
+
+        .settings-section.active {
+            display: block;
+        }
+
+        .section-header {
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .section-title {
+            font-size: var(--font-size-xl);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .section-description {
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        /* فرم تنظیمات */
+        .settings-form {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+
+        .form-label {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+
+        .form-description {
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+            margin-top: 0.2rem;
+        }
+
+        .form-input,
+        .form-textarea,
+        .form-select {
+            padding: 0.8rem 1rem;
+            border: 2px solid var(--glass-border);
+            border-radius: var(--border-radius-sm);
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: var(--font-size-sm);
+            transition: var(--transition-smooth);
+        }
+
+        .form-input:focus,
+        .form-textarea:focus,
+        .form-select:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            background: var(--card-bg);
+        }
+
+        .form-textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+
+        /* سوئیچ‌ها */
+        .switch-group {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background: rgba(59, 130, 246, 0.02);
+            border-radius: var(--border-radius-sm);
+            border: 1px solid rgba(59, 130, 246, 0.1);
+        }
+
+        .switch-info {
+            flex: 1;
+        }
+
+        .switch-label {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+        }
+
+        .switch-description {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .switch {
+            position: relative;
+            width: 50px;
+            height: 24px;
+        }
+
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: var(--transition-smooth);
+            border-radius: 24px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: var(--transition-smooth);
+            border-radius: 50%;
+        }
+
+        input:checked + .slider {
+            background: var(--primary-gradient);
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+
+        /* کارت‌های اطلاعات */
+        .info-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .info-card {
+            background: var(--glass-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1.5rem;
+            text-align: center;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            transition: var(--transition-smooth);
+        }
+
+        .info-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .info-card-icon {
+            font-size: 2rem;
+            margin-bottom: 0.8rem;
+            color: var(--text-primary);
+        }
+
+        .info-card-title {
+            font-size: var(--font-size-sm);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.3rem;
+        }
+
+        .info-card-value {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-secondary);
+        }
+
+        /* بخش آپلود */
+        .upload-zone {
+            border: 2px dashed rgba(59, 130, 246, 0.3);
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            text-align: center;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(255, 255, 255, 0.1));
+            transition: var(--transition-smooth);
+            cursor: pointer;
+        }
+
+        .upload-zone:hover {
+            border-color: rgba(59, 130, 246, 0.6);
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(255, 255, 255, 0.15));
+        }
+
+        .upload-icon {
+            font-size: 3rem;
+            color: rgba(59, 130, 246, 0.6);
+            margin-bottom: 1rem;
+        }
+
+        .upload-text {
+            font-size: var(--font-size-base);
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+
+        .upload-hint {
+            font-size: var(--font-size-xs);
+            color: var(--text-muted);
+        }
+
+        /* جدول */
+        .settings-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            box-shadow: var(--shadow-xs);
+        }
+
+        .settings-table thead {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(255, 255, 255, 0.1));
+        }
+
+        .settings-table th {
+            padding: 1rem;
+            text-align: right;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: var(--font-size-sm);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .settings-table td {
+            padding: 0.8rem 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+            font-size: var(--font-size-sm);
+        }
+
+        .settings-table tbody tr {
+            transition: all 0.2s ease;
+        }
+
+        .settings-table tbody tr:hover {
+            background: rgba(59, 130, 246, 0.02);
+        }
+
+        /* دکمه‌های عمل */
+        .form-actions {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .sidebar {
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+
+            .settings-layout {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .settings-nav {
+                position: static;
+                order: 2;
+            }
+
+            .settings-content {
+                order: 1;
+            }
+
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 0.8rem;
+            }
+
+            .settings-section {
+                padding: 1.5rem;
+            }
+
+            .info-cards {
+                grid-template-columns: 1fr;
+            }
+
+            .form-actions {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="/" class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </a>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">6</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/upload.html" class="nav-link">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/settings.html" class="nav-link active">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-cog"></i>
+                    تنظیمات سیستم
+                </h1>
+                <div class="page-actions">
+                    <button type="button" class="btn btn-outline" onclick="exportSettings()">
+                        <i class="fas fa-download"></i>
+                        خروجی تنظیمات
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="saveAllSettings()">
+                        <i class="fas fa-save"></i>
+                        ذخیره همه تغییرات
+                    </button>
+                </div>
+            </header>
+
+            <!-- تنظیمات اصلی -->
+            <div class="settings-layout">
+                <!-- منوی تنظیمات -->
+                <nav class="settings-nav">
+                    <h3 class="settings-nav-title">دسته‌بندی تنظیمات</h3>
+                    <ul class="settings-nav-list">
+                        <li class="settings-nav-item">
+                            <a href="#general" class="settings-nav-link active" onclick="showSection('general', this)">
+                                <i class="fas fa-sliders-h settings-nav-icon"></i>
+                                <span>تنظیمات عمومی</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#ocr" class="settings-nav-link" onclick="showSection('ocr', this)">
+                                <i class="fas fa-eye settings-nav-icon"></i>
+                                <span>تنظیمات OCR</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#storage" class="settings-nav-link" onclick="showSection('storage', this)">
+                                <i class="fas fa-database settings-nav-icon"></i>
+                                <span>ذخیره‌سازی</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#notifications" class="settings-nav-link" onclick="showSection('notifications', this)">
+                                <i class="fas fa-bell settings-nav-icon"></i>
+                                <span>اعلان‌ها</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#security" class="settings-nav-link" onclick="showSection('security', this)">
+                                <i class="fas fa-shield-alt settings-nav-icon"></i>
+                                <span>امنیت</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#api" class="settings-nav-link" onclick="showSection('api', this)">
+                                <i class="fas fa-plug settings-nav-icon"></i>
+                                <span>API و ادغام</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#backup" class="settings-nav-link" onclick="showSection('backup', this)">
+                                <i class="fas fa-history settings-nav-icon"></i>
+                                <span>پشتیبان‌گیری</span>
+                            </a>
+                        </li>
+                        <li class="settings-nav-item">
+                            <a href="#system" class="settings-nav-link" onclick="showSection('system', this)">
+                                <i class="fas fa-server settings-nav-icon"></i>
+                                <span>اطلاعات سیستم</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+
+                <!-- محتوای تنظیمات -->
+                <div class="settings-content">
+                    <!-- تنظیمات عمومی -->
+                    <section class="settings-section active" id="general">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-sliders-h"></i>
+                                تنظیمات عمومی
+                            </h2>
+                            <p class="section-description">
+                                تنظیمات کلی سیستم و رفتار پیش‌فرض برنامه را در این بخش تغییر دهید.
+                            </p>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveGeneralSettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="systemLanguage">
+                                            <i class="fas fa-language"></i>
+                                            زبان سیستم
+                                        </label>
+                                        <select class="form-select" id="systemLanguage" name="language">
+                                            <option value="fa">فارسی</option>
+                                            <option value="en">انگلیسی</option>
+                                            <option value="ar">عربی</option>
+                                        </select>
+                                        <div class="form-description">زبان پیش‌فرض رابط کاربری</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="timezone">
+                                            <i class="fas fa-clock"></i>
+                                            منطقه زمانی
+                                        </label>
+                                        <select class="form-select" id="timezone" name="timezone">
+                                            <option value="Asia/Tehran">تهران (UTC+3:30)</option>
+                                            <option value="UTC">UTC (UTC+0:00)</option>
+                                            <option value="Asia/Dubai">دبی (UTC+4:00)</option>
+                                        </select>
+                                        <div class="form-description">منطقه زمانی پیش‌فرض سیستم</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">حالت تاریک</div>
+                                        <div class="switch-description">فعال‌سازی حالت تاریک برای رابط کاربری</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="darkMode" name="darkMode">
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">اعلان‌های دسکتاپ</div>
+                                        <div class="switch-description">نمایش اعلان‌ها در دسکتاپ سیستم‌عامل</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="desktopNotifications" name="desktopNotifications" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">ذخیره خودکار</div>
+                                        <div class="switch-description">ذخیره خودکار تغییرات هر 5 دقیقه</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="autoSave" name="autoSave" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-outline">بازنشانی</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات OCR -->
+                    <section class="settings-section" id="ocr">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-eye"></i>
+                                تنظیمات OCR
+                            </h2>
+                            <p class="section-description">
+                                تنظیمات مربوط به سیستم تشخیص نویسه نوری (OCR) و کیفیت پردازش متن.
+                            </p>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveOCRSettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="ocrEngine">
+                                            <i class="fas fa-cogs"></i>
+                                            موتور OCR
+                                        </label>
+                                        <select class="form-select" id="ocrEngine" name="engine">
+                                            <option value="tesseract">Tesseract</option>
+                                            <option value="google">Google Vision API</option>
+                                            <option value="azure">Azure Computer Vision</option>
+                                            <option value="aws">AWS Textract</option>
+                                        </select>
+                                        <div class="form-description">موتور پیش‌فرض تشخیص متن</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="ocrLanguage">
+                                            <i class="fas fa-language"></i>
+                                            زبان پردازش
+                                        </label>
+                                        <select class="form-select" id="ocrLanguage" name="language">
+                                            <option value="fas">فارسی</option>
+                                            <option value="eng">انگلیسی</option>
+                                            <option value="ara">عربی</option>
+                                            <option value="auto">تشخیص خودکار</option>
+                                        </select>
+                                        <div class="form-description">زبان اصلی اسناد برای پردازش</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="ocrQuality">
+                                            <i class="fas fa-sliders-h"></i>
+                                            کیفیت پردازش
+                                        </label>
+                                        <select class="form-select" id="ocrQuality" name="quality">
+                                            <option value="fast">سریع</option>
+                                            <option value="balanced" selected>متعادل</option>
+                                            <option value="accurate">دقیق</option>
+                                        </select>
+                                        <div class="form-description">تعادل بین سرعت و دقت</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="confidenceThreshold">
+                                            <i class="fas fa-percentage"></i>
+                                            آستانه اطمینان
+                                        </label>
+                                        <input type="number" class="form-input" id="confidenceThreshold" name="confidence" value="75" min="0" max="100">
+                                        <div class="form-description">حداقل درصد اطمینان برای پذیرش متن</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">پیش‌پردازش تصویر</div>
+                                        <div class="switch-description">بهبود کیفیت تصویر قبل از پردازش OCR</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="imagePreprocessing" name="preprocessing" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">تشخیص جدول</div>
+                                        <div class="switch-description">تشخیص و استخراج جداول از اسناد</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="tableDetection" name="tables" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-outline">بازنشانی</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات ذخیره‌سازی -->
+                    <section class="settings-section" id="storage">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-database"></i>
+                                تنظیمات ذخیره‌سازی
+                            </h2>
+                            <p class="section-description">
+                                مدیریت فضای ذخیره‌سازی، پایگاه داده و فایل‌های سیستم.
+                            </p>
+                        </div>
+
+                        <div class="info-cards">
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-hdd" style="color: #3b82f6;"></i>
+                                </div>
+                                <div class="info-card-title">فضای کل</div>
+                                <div class="info-card-value">500 GB</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-chart-pie" style="color: #10b981;"></i>
+                                </div>
+                                <div class="info-card-title">استفاده شده</div>
+                                <div class="info-card-value">127 GB</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-file-alt" style="color: #f59e0b;"></i>
+                                </div>
+                                <div class="info-card-title">تعداد فایل‌ها</div>
+                                <div class="info-card-value">1,247</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-clock" style="color: #ef4444;"></i>
+                                </div>
+                                <div class="info-card-title">آخرین پشتیبان</div>
+                                <div class="info-card-value">2 ساعت پیش</div>
+                            </div>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveStorageSettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="maxFileSize">
+                                            <i class="fas fa-weight-hanging"></i>
+                                            حداکثر اندازه فایل (MB)
+                                        </label>
+                                        <input type="number" class="form-input" id="maxFileSize" name="maxFileSize" value="50" min="1" max="500">
+                                        <div class="form-description">حداکثر اندازه مجاز برای آپلود فایل</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="retentionPeriod">
+                                            <i class="fas fa-calendar"></i>
+                                            مدت نگهداری (روز)
+                                        </label>
+                                        <input type="number" class="form-input" id="retentionPeriod" name="retention" value="365" min="30" max="3650">
+                                        <div class="form-description">مدت نگهداری فایل‌ها قبل از حذف خودکار</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">فشرده‌سازی خودکار</div>
+                                        <div class="switch-description">فشرده‌سازی فایل‌ها برای صرفه‌جویی در فضا</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="autoCompression" name="compression" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">حذف خودکار فایل‌های موقت</div>
+                                        <div class="switch-description">پاک‌سازی روزانه فایل‌های موقت و کش</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="autoCleanup" name="cleanup" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-danger" onclick="cleanupStorage()">پاک‌سازی فوری</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات اعلان‌ها -->
+                    <section class="settings-section" id="notifications">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-bell"></i>
+                                تنظیمات اعلان‌ها
+                            </h2>
+                            <p class="section-description">
+                                مدیریت نوع، زمان و روش ارسال اعلان‌های سیستم.
+                            </p>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveNotificationSettings(event)">
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">اعلان پایان پردازش</div>
+                                        <div class="switch-description">اعلان زمانی که پردازش سند تکمیل شود</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="processCompleteNotif" name="processComplete" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">اعلان خطاها</div>
+                                        <div class="switch-description">اعلان در صورت بروز خطا در پردازش</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="errorNotif" name="errors" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">اعلان بروزرسانی</div>
+                                        <div class="switch-description">اعلان زمانی که نسخه جدید در دسترس باشد</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="updateNotif" name="updates" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">اعلان گزارش‌های روزانه</div>
+                                        <div class="switch-description">ارسال خلاصه عملکرد روزانه</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="dailyReportNotif" name="dailyReport">
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="notificationEmail">
+                                            <i class="fas fa-envelope"></i>
+                                            ایمیل اعلان‌ها
+                                        </label>
+                                        <input type="email" class="form-input" id="notificationEmail" name="email" placeholder="[email protected]">
+                                        <div class="form-description">آدرس ایمیل برای دریافت اعلان‌ها</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="notificationTime">
+                                            <i class="fas fa-clock"></i>
+                                            ساعت ارسال گزارش روزانه
+                                        </label>
+                                        <input type="time" class="form-input" id="notificationTime" name="time" value="09:00">
+                                        <div class="form-description">ساعت ارسال گزارش روزانه</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-outline">تست اعلان</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات امنیت -->
+                    <section class="settings-section" id="security">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-shield-alt"></i>
+                                تنظیمات امنیت
+                            </h2>
+                            <p class="section-description">
+                                تنظیمات مربوط به امنیت سیستم، احراز هویت و کنترل دسترسی.
+                            </p>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveSecuritySettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="sessionTimeout">
+                                            <i class="fas fa-clock"></i>
+                                            مدت انقضای نشست (دقیقه)
+                                        </label>
+                                        <input type="number" class="form-input" id="sessionTimeout" name="sessionTimeout" value="60" min="15" max="480">
+                                        <div class="form-description">مدت زمان انقضای خودکار نشست کاربر</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="maxLoginAttempts">
+                                            <i class="fas fa-lock"></i>
+                                            حداکثر تلاش ورود
+                                        </label>
+                                        <input type="number" class="form-input" id="maxLoginAttempts" name="maxAttempts" value="5" min="3" max="20">
+                                        <div class="form-description">تعداد تلاش مجاز برای ورود قبل از مسدودسازی</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">احراز هویت دو مرحله‌ای</div>
+                                        <div class="switch-description">فعال‌سازی 2FA برای امنیت بیشتر</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="twoFactorAuth" name="twoFactor">
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">رمزنگاری فایل‌ها</div>
+                                        <div class="switch-description">رمزنگاری خودکار فایل‌های آپلود شده</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="fileEncryption" name="encryption" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">لاگ فعالیت‌ها</div>
+                                        <div class="switch-description">ثبت کامل فعالیت‌های کاربران</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="activityLogging" name="logging" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-danger" onclick="clearSecurityLogs()">پاک کردن لاگ‌ها</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات API -->
+                    <section class="settings-section" id="api">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-plug"></i>
+                                API و ادغام
+                            </h2>
+                            <p class="section-description">
+                                مدیریت کلیدهای API، وب‌هوک‌ها و ادغام با سیستم‌های خارجی.
+                            </p>
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveAPISettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="apiKey">
+                                            <i class="fas fa-key"></i>
+                                            کلید API اصلی
+                                        </label>
+                                        <input type="password" class="form-input" id="apiKey" name="apiKey" value="sk_****************************" readonly>
+                                        <div class="form-description">کلید API برای دسترسی به خدمات</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="webhookUrl">
+                                            <i class="fas fa-link"></i>
+                                            آدرس Webhook
+                                        </label>
+                                        <input type="url" class="form-input" id="webhookUrl" name="webhook" placeholder="https://example.com/webhook">
+                                        <div class="form-description">آدرس برای ارسال رویدادها</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="form-label">
+                                    <i class="fas fa-cogs"></i>
+                                    کلیدهای API خارجی
+                                </label>
+                                <table class="settings-table">
+                                    <thead>
+                                        <tr>
+                                            <th>سرویس</th>
+                                            <th>کلید API</th>
+                                            <th>وضعیت</th>
+                                            <th>عملیات</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>Google Vision API</td>
+                                            <td>AIza**********************</td>
+                                            <td><span style="color: #10b981;">فعال</span></td>
+                                            <td>
+                                                <button type="button" class="btn btn-outline btn-sm">ویرایش</button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>Azure Computer Vision</td>
+                                            <td>غیرفعال</td>
+                                            <td><span style="color: #ef4444;">غیرفعال</span></td>
+                                            <td>
+                                                <button type="button" class="btn btn-primary btn-sm">تنظیم</button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>AWS Textract</td>
+                                            <td>غیرفعال</td>
+                                            <td><span style="color: #ef4444;">غیرفعال</span></td>
+                                            <td>
+                                                <button type="button" class="btn btn-primary btn-sm">تنظیم</button>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-outline" onclick="generateNewAPIKey()">تولید کلید جدید</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- تنظیمات پشتیبان‌گیری -->
+                    <section class="settings-section" id="backup">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-history"></i>
+                                پشتیبان‌گیری و بازیابی
+                            </h2>
+                            <p class="section-description">
+                                مدیریت پشتیبان‌گیری خودکار، بازیابی داده‌ها و تنظیمات مرتبط.
+                            </p>
+                        </div>
+
+                        <div class="upload-zone" onclick="document.getElementById('backupFile').click()">
+                            <div class="upload-icon">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                            </div>
+                            <div class="upload-text">بازیابی از فایل پشتیبان</div>
+                            <div class="upload-hint">فایل .backup را اینجا رها کنید یا کلیک کنید</div>
+                            <input type="file" id="backupFile" accept=".backup" style="display: none;" onchange="restoreBackup(this)">
+                        </div>
+
+                        <form class="settings-form" onsubmit="saveBackupSettings(event)">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div>
+                                        <label class="form-label" for="backupFrequency">
+                                            <i class="fas fa-clock"></i>
+                                            دوره پشتیبان‌گیری
+                                        </label>
+                                        <select class="form-select" id="backupFrequency" name="frequency">
+                                            <option value="daily" selected>روزانه</option>
+                                            <option value="weekly">هفتگی</option>
+                                            <option value="monthly">ماهانه</option>
+                                            <option value="manual">دستی</option>
+                                        </select>
+                                        <div class="form-description">دوره زمانی پشتیبان‌گیری خودکار</div>
+                                    </div>
+
+                                    <div>
+                                        <label class="form-label" for="backupRetention">
+                                            <i class="fas fa-calendar"></i>
+                                            نگهداری پشتیبان (روز)
+                                        </label>
+                                        <input type="number" class="form-input" id="backupRetention" name="retention" value="30" min="7" max="365">
+                                        <div class="form-description">مدت نگهداری فایل‌های پشتیبان</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">پشتیبان‌گیری خودکار</div>
+                                        <div class="switch-description">فعال‌سازی پشتیبان‌گیری خودکار بر اساس دوره تعیین شده</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="autoBackup" name="autoBackup" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+
+                                <div class="switch-group">
+                                    <div class="switch-info">
+                                        <div class="switch-label">فشرده‌سازی پشتیبان</div>
+                                        <div class="switch-description">فشرده‌سازی فایل‌های پشتیبان برای کاهش حجم</div>
+                                    </div>
+                                    <label class="switch">
+                                        <input type="checkbox" id="compressBackup" name="compress" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="button" class="btn btn-success" onclick="createBackup()">ایجاد پشتیبان فوری</button>
+                                <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <!-- اطلاعات سیستم -->
+                    <section class="settings-section" id="system">
+                        <div class="section-header">
+                            <h2 class="section-title">
+                                <i class="fas fa-server"></i>
+                                اطلاعات سیستم
+                            </h2>
+                            <p class="section-description">
+                                اطلاعات فنی سیستم، نسخه برنامه و وضعیت سرویس‌ها.
+                            </p>
+                        </div>
+
+                        <div class="info-cards">
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-microchip" style="color: #3b82f6;"></i>
+                                </div>
+                                <div class="info-card-title">استفاده CPU</div>
+                                <div class="info-card-value">23%</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-memory" style="color: #10b981;"></i>
+                                </div>
+                                <div class="info-card-title">استفاده RAM</div>
+                                <div class="info-card-value">1.2 GB</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-network-wired" style="color: #f59e0b;"></i>
+                                </div>
+                                <div class="info-card-title">وضعیت شبکه</div>
+                                <div class="info-card-value">آنلاین</div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card-icon">
+                                    <i class="fas fa-code-branch" style="color: #ef4444;"></i>
+                                </div>
+                                <div class="info-card-title">نسخه سیستم</div>
+                                <div class="info-card-value">v2.1.4</div>
+                            </div>
+                        </div>
+
+                        <table class="settings-table">
+                            <thead>
+                                <tr>
+                                    <th>جزئیات سیستم</th>
+                                    <th>مقدار</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>سیستم‌عامل</td>
+                                    <td>Ubuntu 22.04 LTS</td>
+                                </tr>
+                                <tr>
+                                    <td>نسخه Python</td>
+                                    <td>3.11.2</td>
+                                </tr>
+                                <tr>
+                                    <td>پایگاه داده</td>
+                                    <td>PostgreSQL 15.2</td>
+                                </tr>
+                                <tr>
+                                    <td>وب سرور</td>
+                                    <td>Nginx 1.18.0</td>
+                                </tr>
+                                <tr>
+                                    <td>زمان راه‌اندازی</td>
+                                    <td>72 ساعت و 15 دقیقه</td>
+                                </tr>
+                                <tr>
+                                    <td>آخرین بروزرسانی</td>
+                                    <td>2024-01-15 14:30:00</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="form-actions">
+                            <button type="button" class="btn btn-outline" onclick="checkUpdates()">بررسی بروزرسانی</button>
+                            <button type="button" class="btn btn-danger" onclick="restartSystem()">راه‌اندازی مجدد</button>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // Global variables
+        let isOnline = false;
+        let settings = {};
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('⚙️ Settings page loading...');
+            initializeSettingsPage();
+        });
+
+        async function initializeSettingsPage() {
+            try {
+                // Test backend connection
+                isOnline = await testConnection();
+                
+                // Load current settings
+                await loadCurrentSettings();
+                
+                showToast('صفحه تنظیمات آماده است', 'success', 'آماده');
+                
+            } catch (error) {
+                console.error('Failed to initialize settings page:', error);
+                
+                // Fallback mode
+                isOnline = false;
+                loadDefaultSettings();
+                
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                await window.legalAPI.healthCheck();
+                return true;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        async function loadCurrentSettings() {
+            try {
+                if (isOnline) {
+                    settings = await window.legalAPI.getSettings();
+                } else {
+                    settings = getDefaultSettings();
+                }
+                
+                // Apply settings to form elements
+                applySettingsToForms();
+                
+            } catch (error) {
+                console.error('Failed to load settings:', error);
+                settings = getDefaultSettings();
+                applySettingsToForms();
+            }
+        }
+
+        function loadDefaultSettings() {
+            settings = getDefaultSettings();
+            applySettingsToForms();
+        }
+
+        function getDefaultSettings() {
+            return {
+                general: {
+                    language: 'fa',
+                    timezone: 'Asia/Tehran',
+                    darkMode: false,
+                    desktopNotifications: true,
+                    autoSave: true
+                },
+                ocr: {
+                    engine: 'tesseract',
+                    language: 'fas',
+                    quality: 'balanced',
+                    confidence: 75,
+                    preprocessing: true,
+                    tables: true
+                },
+                storage: {
+                    maxFileSize: 50,
+                    retention: 365,
+                    compression: true,
+                    cleanup: true
+                },
+                notifications: {
+                    processComplete: true,
+                    errors: true,
+                    updates: true,
+                    dailyReport: false,
+                    email: '',
+                    time: '09:00'
+                },
+                security: {
+                    sessionTimeout: 60,
+                    maxAttempts: 5,
+                    twoFactor: false,
+                    encryption: true,
+                    logging: true
+                },
+                api: {
+                    apiKey: 'sk_****************************',
+                    webhook: ''
+                },
+                backup: {
+                    frequency: 'daily',
+                    retention: 30,
+                    autoBackup: true,
+                    compress: true
+                }
+            };
+        }
+
+        function applySettingsToForms() {
+            // Apply general settings
+            if (settings.general) {
+                setFormValue('systemLanguage', settings.general.language);
+                setFormValue('timezone', settings.general.timezone);
+                setFormValue('darkMode', settings.general.darkMode);
+                setFormValue('desktopNotifications', settings.general.desktopNotifications);
+                setFormValue('autoSave', settings.general.autoSave);
+            }
+
+            // Apply OCR settings
+            if (settings.ocr) {
+                setFormValue('ocrEngine', settings.ocr.engine);
+                setFormValue('ocrLanguage', settings.ocr.language);
+                setFormValue('ocrQuality', settings.ocr.quality);
+                setFormValue('confidenceThreshold', settings.ocr.confidence);
+                setFormValue('imagePreprocessing', settings.ocr.preprocessing);
+                setFormValue('tableDetection', settings.ocr.tables);
+            }
+
+            // Apply storage settings
+            if (settings.storage) {
+                setFormValue('maxFileSize', settings.storage.maxFileSize);
+                setFormValue('retentionPeriod', settings.storage.retention);
+                setFormValue('autoCompression', settings.storage.compression);
+                setFormValue('autoCleanup', settings.storage.cleanup);
+            }
+
+            // Apply notification settings
+            if (settings.notifications) {
+                setFormValue('processCompleteNotif', settings.notifications.processComplete);
+                setFormValue('errorNotif', settings.notifications.errors);
+                setFormValue('updateNotif', settings.notifications.updates);
+                setFormValue('dailyReportNotif', settings.notifications.dailyReport);
+                setFormValue('notificationEmail', settings.notifications.email);
+                setFormValue('notificationTime', settings.notifications.time);
+            }
+
+            // Apply security settings
+            if (settings.security) {
+                setFormValue('sessionTimeout', settings.security.sessionTimeout);
+                setFormValue('maxLoginAttempts', settings.security.maxAttempts);
+                setFormValue('twoFactorAuth', settings.security.twoFactor);
+                setFormValue('fileEncryption', settings.security.encryption);
+                setFormValue('activityLogging', settings.security.logging);
+            }
+
+            // Apply API settings
+            if (settings.api) {
+                setFormValue('apiKey', settings.api.apiKey);
+                setFormValue('webhookUrl', settings.api.webhook);
+            }
+
+            // Apply backup settings
+            if (settings.backup) {
+                setFormValue('backupFrequency', settings.backup.frequency);
+                setFormValue('backupRetention', settings.backup.retention);
+                setFormValue('autoBackup', settings.backup.autoBackup);
+                setFormValue('compressBackup', settings.backup.compress);
+            }
+        }
+
+        function setFormValue(elementId, value) {
+            const element = document.getElementById(elementId);
+            if (!element) return;
+
+            if (element.type === 'checkbox') {
+                element.checked = value;
+            } else {
+                element.value = value;
+            }
+        }
+
+        // Navigation functions
+        function showSection(sectionId, linkElement) {
+            // Hide all sections
+            document.querySelectorAll('.settings-section').forEach(section => {
+                section.classList.remove('active');
+            });
+
+            // Remove active class from all nav links
+            document.querySelectorAll('.settings-nav-link').forEach(link => {
+                link.classList.remove('active');
+            });
+
+            // Show selected section
+            const section = document.getElementById(sectionId);
+            if (section) {
+                section.classList.add('active');
+            }
+
+            // Add active class to clicked nav link
+            if (linkElement) {
+                linkElement.classList.add('active');
+            }
+        }
+
+        // Form submission handlers
+        function saveGeneralSettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.general = {
+                language: formData.get('language'),
+                timezone: formData.get('timezone'),
+                darkMode: formData.get('darkMode') === 'on',
+                desktopNotifications: formData.get('desktopNotifications') === 'on',
+                autoSave: formData.get('autoSave') === 'on'
+            };
+
+            saveSettings('general');
+        }
+
+        function saveOCRSettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.ocr = {
+                engine: formData.get('engine'),
+                language: formData.get('language'),
+                quality: formData.get('quality'),
+                confidence: parseInt(formData.get('confidence')),
+                preprocessing: formData.get('preprocessing') === 'on',
+                tables: formData.get('tables') === 'on'
+            };
+
+            saveSettings('ocr');
+        }
+
+        function saveStorageSettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.storage = {
+                maxFileSize: parseInt(formData.get('maxFileSize')),
+                retention: parseInt(formData.get('retention')),
+                compression: formData.get('compression') === 'on',
+                cleanup: formData.get('cleanup') === 'on'
+            };
+
+            saveSettings('storage');
+        }
+
+        function saveNotificationSettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.notifications = {
+                processComplete: formData.get('processComplete') === 'on',
+                errors: formData.get('errors') === 'on',
+                updates: formData.get('updates') === 'on',
+                dailyReport: formData.get('dailyReport') === 'on',
+                email: formData.get('email'),
+                time: formData.get('time')
+            };
+
+            saveSettings('notifications');
+        }
+
+        function saveSecuritySettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.security = {
+                sessionTimeout: parseInt(formData.get('sessionTimeout')),
+                maxAttempts: parseInt(formData.get('maxAttempts')),
+                twoFactor: formData.get('twoFactor') === 'on',
+                encryption: formData.get('encryption') === 'on',
+                logging: formData.get('logging') === 'on'
+            };
+
+            saveSettings('security');
+        }
+
+        function saveAPISettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.api = {
+                apiKey: formData.get('apiKey'),
+                webhook: formData.get('webhook')
+            };
+
+            saveSettings('api');
+        }
+
+        function saveBackupSettings(event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            
+            settings.backup = {
+                frequency: formData.get('frequency'),
+                retention: parseInt(formData.get('retention')),
+                autoBackup: formData.get('autoBackup') === 'on',
+                compress: formData.get('compress') === 'on'
+            };
+
+            saveSettings('backup');
+        }
+
+        async function saveSettings(section) {
+            try {
+                if (isOnline) {
+                    await window.legalAPI.updateSettings(settings);
+                }
+                
+                showToast(`تنظیمات ${getSectionName(section)} ذخیره شد`, 'success', 'ذخیره موفق');
+                
+            } catch (error) {
+                console.error('Failed to save settings:', error);
+                showToast('خطا در ذخیره تنظیمات', 'error', 'خطا');
+            }
+        }
+
+        function getSectionName(section) {
+            const names = {
+                general: 'عمومی',
+                ocr: 'OCR',
+                storage: 'ذخیره‌سازی',
+                notifications: 'اعلان‌ها',
+                security: 'امنیت',
+                api: 'API',
+                backup: 'پشتیبان‌گیری'
+            };
+            return names[section] || section;
+        }
+
+        function saveAllSettings() {
+            showToast('در حال ذخیره همه تنظیمات...', 'info', 'ذخیره');
+            
+            setTimeout(async () => {
+                try {
+                    if (isOnline) {
+                        await window.legalAPI.updateSettings(settings);
+                    }
+                    showToast('همه تنظیمات با موفقیت ذخیره شدند', 'success', 'ذخیره موفق');
+                } catch (error) {
+                    showToast('خطا در ذخیره تنظیمات', 'error', 'خطا');
+                }
+            }, 1000);
+        }
+
+        // Utility functions
+        function exportSettings() {
+            const settingsJSON = JSON.stringify(settings, null, 2);
+            const blob = new Blob([settingsJSON], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `legal-system-settings-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showToast('فایل تنظیمات دانلود شد', 'success', 'خروجی موفق');
+        }
+
+        function cleanupStorage() {
+            if (!confirm('آیا از پاک‌سازی فوری فایل‌های موقت اطمینان دارید؟')) {
+                return;
+            }
+            
+            showToast('پاک‌سازی شروع شد...', 'info', 'پاک‌سازی');
+            
+            setTimeout(() => {
+                showToast('فایل‌های موقت پاک شدند. 2.3 GB فضا آزاد شد', 'success', 'پاک‌سازی موفق');
+            }, 3000);
+        }
+
+        function generateNewAPIKey() {
+            if (!confirm('آیا از تولید کلید API جدید اطمینان دارید؟ کلید قبلی غیرفعال خواهد شد.')) {
+                return;
+            }
+            
+            const newKey = 'sk_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+            document.getElementById('apiKey').value = newKey;
+            
+            showToast('کلید API جدید تولید شد', 'success', 'تولید موفق');
+        }
+
+        function createBackup() {
+            showToast('ایجاد پشتیبان شروع شد...', 'info', 'پشتیبان‌گیری');
+            
+            setTimeout(() => {
+                showToast('پشتیبان با موفقیت ایجاد شد و در مسیر /backups/ ذخیره شد', 'success', 'پشتیبان‌گیری موفق');
+            }, 5000);
+        }
+
+        function restoreBackup(input) {
+            const file = input.files[0];
+            if (!file) return;
+            
+            if (!file.name.endsWith('.backup')) {
+                showToast('لطفاً فایل پشتیبان معتبر انتخاب کنید', 'warning', 'فایل نامعتبر');
+                return;
+            }
+            
+            showToast('بازیابی از پشتیبان شروع شد...', 'info', 'بازیابی');
+            
+            setTimeout(() => {
+                showToast('سیستم با موفقیت از پشتیبان بازیابی شد', 'success', 'بازیابی موفق');
+            }, 8000);
+        }
+
+        function clearSecurityLogs() {
+            if (!confirm('آیا از پاک کردن همه لاگ‌های امنیتی اطمینان دارید؟')) {
+                return;
+            }
+            
+            showToast('لاگ‌های امنیتی پاک شدند', 'info', 'پاک‌سازی');
+        }
+
+        function checkUpdates() {
+            showToast('در حال بررسی بروزرسانی...', 'info', 'بررسی');
+            
+            setTimeout(() => {
+                const hasUpdate = Math.random() > 0.7;
+                if (hasUpdate) {
+                    showToast('نسخه جدید v2.2.0 در دسترس است', 'success', 'بروزرسانی موجود');
+                } else {
+                    showToast('سیستم به‌روز است', 'info', 'به‌روز');
+                }
+            }, 2000);
+        }
+
+        function restartSystem() {
+            if (!confirm('آیا از راه‌اندازی مجدد سیستم اطمینان دارید؟ این عمل ممکن است چند دقیقه طول بکشد.')) {
+                return;
+            }
+            
+            showToast('سیستم در حال راه‌اندازی مجدد...', 'warning', 'راه‌اندازی مجدد');
+        }
+
+        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);
+        }
+
+        console.log('⚙️ Settings Page Ready!');
+    </script>
+</body>
+</html>

app/frontend/upload.html

@@ -0,0 +1,1343 @@
+<!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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+    <!-- Load API Client -->
+    <script src="/static/js/api-client.js"></script>
+    <script src="/static/js/core.js"></script>
+    
+    <style>
+        /* استفاده از همان CSS از upload.html قبلی */
+        :root {
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --text-light: #ffffff;
+            --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(148, 163, 184, 0.2);
+            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+            --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
+            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
+            --sidebar-width: 260px;
+            --border-radius: 12px;
+            --border-radius-sm: 8px;
+            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s ease-in-out;
+            --font-size-xs: 0.7rem;
+            --font-size-sm: 0.8rem;
+            --font-size-base: 0.9rem;
+            --font-size-lg: 1.1rem;
+            --font-size-xl: 1.25rem;
+            --font-size-2xl: 1.5rem;
+        }
+
+        /* Simplified CSS - using key styles only */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--body-bg);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            font-size: var(--font-size-base);
+        }
+
+        .dashboard-container {
+            display: flex;
+            min-block-size: 100vh;
+            inline-size: 100%;
+        }
+
+        /* سایدبار کامپکت */
+        .sidebar {
+            inline-size: var(--sidebar-width);
+            background: linear-gradient(135deg,
+                rgba(248, 250, 252, 0.98) 0%,
+                rgba(241, 245, 249, 0.95) 25%,
+                rgba(226, 232, 240, 0.98) 50%,
+                rgba(203, 213, 225, 0.95) 75%,
+                rgba(148, 163, 184, 0.1) 100%);
+            backdrop-filter: blur(25px);
+            padding: 1rem 0;
+            position: fixed;
+            block-size: 100vh;
+            inset-inline-end: 0;
+            inset-block-start: 0;
+            z-index: 1000;
+            overflow-y: auto;
+            box-shadow: -8px 0 32px rgba(59, 130, 246, 0.12);
+            border-inline-start: 1px solid rgba(59, 130, 246, 0.15);
+        }
+
+        .sidebar-header {
+            padding: 0 1rem 1rem;
+            border-block-end: 1px solid rgba(59, 130, 246, 0.12);
+            margin-block-end: 1rem;
+            display: flex;
+            align-items: center;
+            background: linear-gradient(135deg,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(248, 250, 252, 0.2) 100%);
+            margin: 0 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            inline-size: 2rem;
+            block-size: 2rem;
+            background: var(--primary-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: white;
+        }
+
+        .logo-text {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-section {
+            margin-block-end: 1rem;
+        }
+
+        .nav-title {
+            padding: 0 1rem 0.4rem;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+        }
+
+        .nav-menu {
+            list-style: none;
+        }
+
+        .nav-item {
+            margin: 0.15rem 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.8rem;
+            color: var(--text-primary);
+            text-decoration: none;
+            border-radius: var(--border-radius-sm);
+            transition: var(--transition-smooth);
+            font-weight: 500;
+            font-size: var(--font-size-sm);
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            transform: translateX(-2px);
+            border-color: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0.05);
+        }
+
+        .nav-link.active {
+            background: var(--primary-gradient);
+            color: var(--text-light);
+            box-shadow: var(--shadow-md);
+        }
+
+        .nav-icon {
+            margin-inline-start: 0.6rem;
+            inline-size: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .nav-badge {
+            background: var(--danger-gradient);
+            color: white;
+            padding: 0.15rem 0.4rem;
+            border-radius: 10px;
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            margin-inline-end: auto;
+            min-inline-size: 1.2rem;
+            text-align: center;
+        }
+
+        /* محتوای اصلی */
+        .main-content {
+            flex: 1;
+            margin-inline-end: var(--sidebar-width);
+            padding: 1rem;
+            min-block-size: 100vh;
+            inline-size: calc(100% - var(--sidebar-width));
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-block-end: 2rem;
+            padding: 1rem 0;
+            border-block-end: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: var(--font-size-2xl);
+            font-weight: 800;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 0.8rem;
+        }
+
+        .btn {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            font-size: var(--font-size-sm);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .btn-outline:hover {
+            background: rgba(59, 130, 246, 0.05);
+            border-color: rgba(59, 130, 246, 0.4);
+        }
+
+        /* آپلود فایل */
+        .upload-section {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            margin-block-end: 2rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .upload-area {
+            border: 3px dashed rgba(59, 130, 246, 0.3);
+            border-radius: var(--border-radius);
+            padding: 3rem;
+            text-align: center;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(255, 255, 255, 0.1));
+            transition: var(--transition-smooth);
+            cursor: pointer;
+            position: relative;
+        }
+
+        .upload-area:hover,
+        .upload-area.dragover {
+            border-color: rgba(59, 130, 246, 0.6);
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(255, 255, 255, 0.15));
+            transform: scale(1.01);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .upload-icon {
+            font-size: 4rem;
+            color: rgba(59, 130, 246, 0.6);
+            margin-bottom: 1.5rem;
+            transition: var(--transition-smooth);
+        }
+
+        .upload-area:hover .upload-icon {
+            color: rgba(59, 130, 246, 0.8);
+            transform: scale(1.1);
+        }
+
+        .upload-title {
+            font-size: var(--font-size-xl);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 0.8rem;
+        }
+
+        .upload-description {
+            color: var(--text-secondary);
+            margin-bottom: 1.5rem;
+            font-size: var(--font-size-base);
+            line-height: 1.6;
+        }
+
+        .upload-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .upload-btn {
+            background: var(--primary-gradient);
+            color: white;
+            border: none;
+            padding: 0.8rem 2rem;
+            border-radius: var(--border-radius-sm);
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            font-size: var(--font-size-base);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin: 0 auto;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .upload-btn:hover {
+            box-shadow: var(--shadow-lg);
+            transform: translateY(-2px);
+        }
+
+        /* فایل‌های آپلود شده */
+        .upload-files {
+            margin-top: 2rem;
+            display: none;
+        }
+
+        .upload-files.has-files {
+            display: block;
+        }
+
+        .files-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.8rem;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        .files-title {
+            font-size: var(--font-size-lg);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .files-actions {
+            display: flex;
+            gap: 0.6rem;
+        }
+
+        .btn-sm {
+            padding: 0.4rem 0.8rem;
+            font-size: var(--font-size-xs);
+        }
+
+        .btn-success {
+            background: var(--success-gradient);
+            color: white;
+        }
+
+        .btn-danger {
+            background: var(--danger-gradient);
+            color: white;
+        }
+
+        .file-item {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: var(--border-radius-sm);
+            margin-bottom: 0.8rem;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            transition: var(--transition-smooth);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--primary-gradient);
+        }
+
+        .file-item:hover {
+            background: rgba(255, 255, 255, 0.9);
+            transform: translateX(-3px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .file-icon {
+            width: 3rem;
+            height: 3rem;
+            background: var(--danger-gradient);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+            flex-shrink: 0;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .file-info {
+            flex: 1;
+        }
+
+        .file-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: var(--font-size-base);
+            margin-bottom: 0.3rem;
+        }
+
+        .file-details {
+            display: flex;
+            gap: 1rem;
+            font-size: var(--font-size-sm);
+            color: var(--text-secondary);
+        }
+
+        .file-progress {
+            width: 100%;
+            height: 6px;
+            background: rgba(0, 0, 0, 0.08);
+            border-radius: 3px;
+            margin-top: 0.8rem;
+            overflow: hidden;
+        }
+
+        .file-progress-bar {
+            height: 100%;
+            background: var(--success-gradient);
+            border-radius: 3px;
+            transition: width 0.3s ease;
+            position: relative;
+        }
+
+        .file-progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .file-status {
+            font-size: var(--font-size-xs);
+            font-weight: 600;
+            padding: 0.3rem 0.8rem;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+            white-space: nowrap;
+        }
+
+        .file-status.uploading {
+            background: rgba(245, 158, 11, 0.1);
+            color: #b45309;
+        }
+
+        .file-status.processing {
+            background: rgba(59, 130, 246, 0.1);
+            color: #1d4ed8;
+        }
+
+        .file-status.success {
+            background: rgba(16, 185, 129, 0.1);
+            color: #047857;
+        }
+
+        .file-status.error {
+            background: rgba(239, 68, 68, 0.1);
+            color: #b91c1c;
+        }
+
+        .file-actions {
+            display: flex;
+            gap: 0.4rem;
+            flex-shrink: 0;
+        }
+
+        .action-btn {
+            width: 2rem;
+            height: 2rem;
+            border: none;
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            transition: var(--transition-fast);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--font-size-xs);
+        }
+
+        .action-btn.retry {
+            background: rgba(245, 158, 11, 0.1);
+            color: #f59e0b;
+        }
+
+        .action-btn.remove {
+            background: rgba(239, 68, 68, 0.1);
+            color: #ef4444;
+        }
+
+        .action-btn:hover {
+            transform: scale(1.1);
+        }
+
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 10001;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .toast {
+            background: var(--card-bg);
+            border-radius: var(--border-radius-sm);
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-lg);
+            border-left: 4px solid;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            min-width: 300px;
+            transform: translateX(-100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            transform: translateX(0);
+        }
+
+        .toast.success { border-left-color: #10b981; }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast.info { border-left-color: #3b82f6; }
+
+        .toast-icon {
+            font-size: 1.2rem;
+        }
+
+        .toast.success .toast-icon { color: #10b981; }
+        .toast.error .toast-icon { color: #ef4444; }
+        .toast.warning .toast-icon { color: #f59e0b; }
+        .toast.info .toast-icon { color: #3b82f6; }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: var(--font-size-sm);
+            margin-bottom: 0.2rem;
+        }
+
+        .toast-message {
+            font-size: var(--font-size-xs);
+            color: var(--text-secondary);
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            transition: var(--transition-fast);
+        }
+
+        .toast-close:hover {
+            color: var(--text-primary);
+        }
+
+        /* واکنش‌گرایی */
+        @media (max-width: 992px) {
+            .sidebar {
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-right: 0;
+                width: 100%;
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- سایدبار -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="/" class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-scale-balanced"></i>
+                    </div>
+                    <div class="logo-text">سامانه حقوقی</div>
+                </a>
+            </div>
+
+            <nav>
+                <div class="nav-section">
+                    <h6 class="nav-title">داشبورد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">
+                                <i class="fas fa-chart-pie nav-icon"></i>
+                                <span>نمای کلی</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">مدیریت اسناد</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/documents.html" class="nav-link">
+                                <i class="fas fa-file-alt nav-icon"></i>
+                                <span>مدیریت اسناد</span>
+                                <span class="nav-badge" id="totalDocumentsBadge">6</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/upload.html" class="nav-link active">
+                                <i class="fas fa-cloud-upload-alt nav-icon"></i>
+                                <span>آپلود فایل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/search.html" class="nav-link">
+                                <i class="fas fa-search nav-icon"></i>
+                                <span>جستجو</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">ابزارها</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/scraping.html" class="nav-link">
+                                <i class="fas fa-globe nav-icon"></i>
+                                <span>استخراج محتوا</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/analytics.html" class="nav-link">
+                                <i class="fas fa-chart-line nav-icon"></i>
+                                <span>آمار و تحلیل</span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a href="/static/reports.html" class="nav-link">
+                                <i class="fas fa-file-export nav-icon"></i>
+                                <span>گزارش‌ها</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h6 class="nav-title">تنظیمات</h6>
+                    <ul class="nav-menu">
+                        <li class="nav-item">
+                            <a href="/static/settings.html" class="nav-link">
+                                <i class="fas fa-cog nav-icon"></i>
+                                <span>تنظیمات</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">
+                                <i class="fas fa-sign-out-alt nav-icon"></i>
+                                <span>خروج</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- محتوای اصلی -->
+        <main class="main-content">
+            <!-- هدر صفحه -->
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    آپلود فایل‌های حقوقی
+                </h1>
+                <div class="page-actions">
+                    <a href="/static/documents.html" class="btn btn-outline">
+                        <i class="fas fa-list"></i>
+                        مشاهده اسناد
+                    </a>
+                </div>
+            </header>
+
+            <!-- بخش آپلود اصلی -->
+            <section class="upload-section">
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <h2 class="upload-title">آپلود اسناد PDF</h2>
+                    <p class="upload-description">
+                        فایل‌های PDF خود را بکشید و اینجا رها کنید یا کلیک کنید تا انتخاب کنید.<br>
+                        چندین فایل را می‌توانید همزمان آپلود کنید.
+                    </p>
+                    <input type="file" class="upload-input" id="fileInput" multiple accept=".pdf">
+                    <button type="button" class="upload-btn" onclick="document.getElementById('fileInput').click()">
+                        <i class="fas fa-folder-open"></i>
+                        انتخاب فایل‌ها
+                    </button>
+                </div>
+            </section>
+
+            <!-- فایل‌های آپلود شده -->
+            <section class="upload-files" id="uploadFiles">
+                <div class="files-header">
+                    <h3 class="files-title">فایل‌های آپلود شده</h3>
+                    <div class="files-actions">
+                        <button type="button" class="btn btn-success btn-sm" onclick="processAllFiles()">
+                            <i class="fas fa-play"></i>
+                            پردازش همه
+                        </button>
+                        <button type="button" class="btn btn-danger btn-sm" onclick="clearAllFiles()">
+                            <i class="fas fa-trash"></i>
+                            پاک کردن همه
+                        </button>
+                    </div>
+                </div>
+                <div id="filesContainer">
+                    <!-- فایل‌ها اینجا نمایش داده می‌شوند -->
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script>
+        // Global variables
+        let uploadedFiles = new Map();
+        let fileCounter = 0;
+        let isOnline = false;
+
+        // Initialize page
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('📤 Upload page loading...');
+            initializeUploadPage();
+        });
+
+        async function initializeUploadPage() {
+            try {
+                // Test backend connection
+                isOnline = await testConnection();
+                
+                // Setup event listeners
+                setupEventListeners();
+                
+                showToast('صفحه آپلود آماده است', 'success', 'آماده');
+                
+            } catch (error) {
+                console.error('Failed to initialize upload page:', error);
+                
+                // Fallback mode
+                isOnline = false;
+                setupEventListeners();
+                
+                showToast('حالت آفلاین فعال است', 'warning', 'اتصال ناموفق');
+            }
+        }
+
+        async function testConnection() {
+            try {
+                await window.legalAPI.healthCheck();
+                return true;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            const uploadArea = document.getElementById('uploadArea');
+            const fileInput = document.getElementById('fileInput');
+
+            // Drag and drop events
+            uploadArea.addEventListener('dragover', handleDragOver);
+            uploadArea.addEventListener('dragleave', handleDragLeave);
+            uploadArea.addEventListener('drop', handleDrop);
+
+            // File input change
+            fileInput.addEventListener('change', handleFileSelect);
+
+            // Click to upload
+            uploadArea.addEventListener('click', (e) => {
+                if (!e.target.closest('.upload-btn') && !e.target.classList.contains('upload-input')) {
+                    fileInput.click();
+                }
+            });
+        }
+
+        // Drag and drop handlers
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.currentTarget.classList.add('dragover');
+        }
+
+        function handleDragLeave(e) {
+            e.currentTarget.classList.remove('dragover');
+        }
+
+        function handleDrop(e) {
+            e.preventDefault();
+            e.currentTarget.classList.remove('dragover');
+            
+            const files = Array.from(e.dataTransfer.files).filter(file => 
+                file.type === 'application/pdf'
+            );
+            
+            if (files.length > 0) {
+                handleFileUpload(files);
+            } else {
+                showToast('فقط فایل‌های PDF پذیرفته می‌شوند', 'warning', 'هشدار');
+            }
+        }
+
+        // File selection handler
+        function handleFileSelect(e) {
+            const files = Array.from(e.target.files);
+            if (files.length > 0) {
+                handleFileUpload(files);
+            }
+        }
+
+        // File upload processing
+        async function handleFileUpload(files) {
+            const uploadFilesSection = document.getElementById('uploadFiles');
+            const filesContainer = document.getElementById('filesContainer');
+            
+            uploadFilesSection.classList.add('has-files');
+
+            let validFiles = [];
+            let invalidFiles = 0;
+
+            for (const file of files) {
+                // Validate file
+                const validation = validateFile(file);
+                if (!validation.valid) {
+                    showToast(`${file.name}: ${validation.error}`, 'error', 'خطای اعتبارسنجی');
+                    invalidFiles++;
+                    continue;
+                }
+
+                validFiles.push(file);
+                const fileId = generateFileId();
+                const fileItem = createFileItem(file, fileId);
+                filesContainer.appendChild(fileItem);
+
+                // Store file info
+                uploadedFiles.set(fileId, {
+                    file: file,
+                    status: 'ready',
+                    progress: 0
+                });
+            }
+
+            if (validFiles.length > 0) {
+                showToast(`${validFiles.length} فایل آماده پردازش شد`, 'success', 'آپلود موفق');
+                
+                // Start upload to backend if online
+                if (isOnline) {
+                    await uploadFilesToBackend(validFiles);
+                } else {
+                    // Simulate upload in offline mode
+                    validFiles.forEach((file, index) => {
+                        const fileId = Array.from(uploadedFiles.keys())[uploadedFiles.size - validFiles.length + index];
+                        setTimeout(() => {
+                            simulateFileUpload(fileId);
+                        }, Math.random() * 1000);
+                    });
+                }
+            }
+
+            if (invalidFiles > 0) {
+                showToast(`${invalidFiles} فایل نامعتبر حذف شد`, 'warning', 'هشدار');
+            }
+
+            // Clear file input
+            document.getElementById('fileInput').value = '';
+        }
+
+        // Upload files to backend
+        async function uploadFilesToBackend(files) {
+            try {
+                const response = await window.legalAPI.uploadFiles(files);
+                
+                if (response.results) {
+                    response.results.forEach((result, index) => {
+                        const fileId = Array.from(uploadedFiles.keys())[uploadedFiles.size - files.length + index];
+                        const fileData = uploadedFiles.get(fileId);
+                        
+                        if (result.success) {
+                            // Real upload successful - monitor progress
+                            monitorUploadProgress(fileId, result.document_id);
+                        } else {
+                            // Upload failed
+                            updateFileStatus(fileId, 'error', result.error || 'خطا در آپلود');
+                            showFileRetryOption(fileId);
+                        }
+                    });
+                }
+                
+                showToast(`${response.successful_uploads} فایل با موفقیت آپلود شد`, 'success', 'آپلود موفق');
+                
+            } catch (error) {
+                console.error('Upload to backend failed:', error);
+                showToast('خطا در ارسال فایل‌ها به سرور', 'error', 'خطای آپلود');
+                
+                // Fallback to simulation
+                files.forEach((file, index) => {
+                    const fileId = Array.from(uploadedFiles.keys())[uploadedFiles.size - files.length + index];
+                    setTimeout(() => {
+                        simulateFileUpload(fileId);
+                    }, Math.random() * 1000);
+                });
+            }
+        }
+
+        // Monitor upload progress for real backend uploads
+        async function monitorUploadProgress(fileId, documentId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            updateFileStatus(fileId, 'uploading', 'در حال آپلود...');
+            
+            // Simulate upload progress
+            let progress = 0;
+            const uploadInterval = setInterval(() => {
+                progress += Math.random() * 15;
+                if (progress >= 100) {
+                    progress = 100;
+                    clearInterval(uploadInterval);
+                    
+                    // Start monitoring OCR processing
+                    setTimeout(() => {
+                        monitorProcessingStatus(fileId, documentId);
+                    }, 500);
+                }
+                
+                const progressBar = document.querySelector(`#file-${fileId} .file-progress-bar`);
+                if (progressBar) {
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 200);
+        }
+
+        // Monitor processing status from backend
+        async function monitorProcessingStatus(fileId, documentId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            updateFileStatus(fileId, 'processing', 'در حال پردازش OCR...');
+            
+            // Poll for processing status
+            const pollInterval = setInterval(async () => {
+                try {
+                    const document = await window.legalAPI.getDocument(documentId);
+                    
+                    if (document.status === 'processed') {
+                        clearInterval(pollInterval);
+                        updateFileStatus(fileId, 'success', 'پردازش تکمیل شد');
+                        showToast(`${fileData.file.name} با موفقیت پردازش شد`, 'success', 'پردازش موفق');
+                    } else if (document.status === 'error') {
+                        clearInterval(pollInterval);
+                        updateFileStatus(fileId, 'error', 'خطا در پردازش');
+                        showFileRetryOption(fileId);
+                        showToast(`خطا در پردازش ${fileData.file.name}`, 'error', 'خطای پردازش');
+                    }
+                    // Continue polling for other statuses (processing, pending)
+                    
+                } catch (error) {
+                    console.error('Failed to check processing status:', error);
+                    // Don't clear interval yet, might be temporary network issue
+                }
+            }, 3000); // Poll every 3 seconds
+
+            // Stop polling after 5 minutes
+            setTimeout(() => {
+                clearInterval(pollInterval);
+                if (fileData.status !== 'success' && fileData.status !== 'error') {
+                    updateFileStatus(fileId, 'processing', 'پردازش ادامه دارد...');
+                }
+            }, 300000);
+        }
+
+        // Validate file
+        function validateFile(file) {
+            if (file.type !== 'application/pdf') {
+                return { valid: false, error: 'فقط فایل‌های PDF پذیرفته می‌شوند' };
+            }
+
+            if (file.size > 50 * 1024 * 1024) { // 50MB
+                return { valid: false, error: 'حجم فایل نباید بیشتر از 50 مگابایت باشد' };
+            }
+
+            if (file.size < 1024) { // 1KB
+                return { valid: false, error: 'فایل خیلی کوچک است' };
+            }
+
+            return { valid: true };
+        }
+
+        // Create file item UI
+        function createFileItem(file, fileId) {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'file-item';
+            fileItem.id = `file-${fileId}`;
+            
+            fileItem.innerHTML = `
+                <div class="file-icon">
+                    <i class="fas fa-file-pdf"></i>
+                </div>
+                <div class="file-info">
+                    <div class="file-name">${file.name}</div>
+                    <div class="file-details">
+                        <div class="file-size">
+                            <i class="fas fa-weight-hanging"></i>
+                            ${formatFileSize(file.size)}
+                        </div>
+                        <div class="file-type">
+                            <i class="fas fa-file-pdf"></i>
+                            PDF Document
+                        </div>
+                    </div>
+                    <div class="file-progress">
+                        <div class="file-progress-bar" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div class="file-status uploading">
+                    <i class="fas fa-clock"></i>
+                    آماده
+                </div>
+                <div class="file-actions">
+                    <button type="button" class="action-btn retry" onclick="retryUpload('${fileId}')" title="تلاش مجدد" style="display: none;">
+                        <i class="fas fa-redo"></i>
+                    </button>
+                    <button type="button" class="action-btn remove" onclick="removeFile('${fileId}')" title="حذف">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            `;
+            
+            return fileItem;
+        }
+
+        // Simulate file upload and processing (offline mode)
+        function simulateFileUpload(fileId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            const fileItem = document.getElementById(`file-${fileId}`);
+            const statusElement = fileItem.querySelector('.file-status');
+            const progressBar = fileItem.querySelector('.file-progress-bar');
+
+            // Phase 1: Uploading
+            updateFileStatus(fileId, 'uploading', 'در حال آپلود...');
+            
+            let progress = 0;
+            const uploadInterval = setInterval(() => {
+                progress += Math.random() * 15;
+                if (progress >= 100) {
+                    progress = 100;
+                    clearInterval(uploadInterval);
+                    
+                    // Phase 2: Processing
+                    setTimeout(() => {
+                        simulateProcessing(fileId);
+                    }, 500);
+                }
+                
+                progressBar.style.width = `${progress}%`;
+            }, 200);
+        }
+
+        // Simulate OCR processing (offline mode)
+        function simulateProcessing(fileId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            updateFileStatus(fileId, 'processing', 'در حال پردازش OCR...');
+            
+            // Simulate processing time based on file size
+            const fileSize = fileData.file.size;
+            const processingTime = Math.min(fileSize / (1024 * 1024) * 1000 + 2000, 8000); // 2-8 seconds
+            
+            setTimeout(() => {
+                // Random success/failure (90% success rate)
+                const success = Math.random() > 0.1;
+                
+                if (success) {
+                    updateFileStatus(fileId, 'success', 'پردازش تکمیل شد');
+                    showToast(`${fileData.file.name} با موفقیت پردازش شد`, 'success', 'پردازش موفق');
+                } else {
+                    updateFileStatus(fileId, 'error', 'خطا در پردازش');
+                    showFileRetryOption(fileId);
+                    showToast(`خطا در پردازش ${fileData.file.name}`, 'error', 'خطای پردازش');
+                }
+            }, processingTime);
+        }
+
+        // Update file status
+        function updateFileStatus(fileId, status, message) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            fileData.status = status;
+            
+            const fileItem = document.getElementById(`file-${fileId}`);
+            if (!fileItem) return;
+
+            const statusElement = fileItem.querySelector('.file-status');
+            const progressBar = fileItem.querySelector('.file-progress-bar');
+
+            statusElement.className = `file-status ${status}`;
+            
+            const icons = {
+                ready: 'clock',
+                uploading: 'spinner fa-spin',
+                processing: 'cog fa-spin',
+                success: 'check-circle',
+                error: 'exclamation-triangle'
+            };
+
+            statusElement.innerHTML = `
+                <i class="fas fa-${icons[status]}"></i>
+                ${message}
+            `;
+
+            switch (status) {
+                case 'success':
+                    progressBar.style.width = '100%';
+                    progressBar.style.background = 'var(--success-gradient)';
+                    break;
+                case 'error':
+                    progressBar.style.width = '100%';
+                    progressBar.style.background = 'var(--danger-gradient)';
+                    break;
+            }
+        }
+
+        // Show retry option for failed files
+        function showFileRetryOption(fileId) {
+            const fileItem = document.getElementById(`file-${fileId}`);
+            if (!fileItem) return;
+
+            const retryBtn = fileItem.querySelector('.action-btn.retry');
+            retryBtn.style.display = 'flex';
+        }
+
+        // Retry file upload
+        async function retryUpload(fileId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            const fileItem = document.getElementById(`file-${fileId}`);
+            const retryBtn = fileItem.querySelector('.action-btn.retry');
+            
+            retryBtn.style.display = 'none';
+            fileData.status = 'ready';
+            
+            // Reset progress bar
+            const progressBar = fileItem.querySelector('.file-progress-bar');
+            progressBar.style.width = '0%';
+            progressBar.style.background = 'var(--success-gradient)';
+            
+            if (isOnline) {
+                // Retry with real backend
+                await uploadFilesToBackend([fileData.file]);
+            } else {
+                // Retry with simulation
+                setTimeout(() => {
+                    simulateFileUpload(fileId);
+                }, 500);
+            }
+        }
+
+        // Remove file
+        function removeFile(fileId) {
+            const fileData = uploadedFiles.get(fileId);
+            if (!fileData) return;
+
+            if (!confirm(`آیا از حذف "${fileData.file.name}" اطمینان دارید؟`)) {
+                return;
+            }
+
+            const fileItem = document.getElementById(`file-${fileId}`);
+            if (fileItem) {
+                fileItem.style.transform = 'translateX(100%)';
+                fileItem.style.opacity = '0';
+                
+                setTimeout(() => {
+                    fileItem.remove();
+                    uploadedFiles.delete(fileId);
+                    
+                    // Hide section if no files
+                    if (uploadedFiles.size === 0) {
+                        document.getElementById('uploadFiles').classList.remove('has-files');
+                    }
+                }, 300);
+            }
+
+            showToast(`${fileData.file.name} حذف شد`, 'info', 'حذف فایل');
+        }
+
+        // Process all files
+        async function processAllFiles() {
+            let readyFiles = [];
+            
+            uploadedFiles.forEach((fileData, fileId) => {
+                if (fileData.status === 'ready') {
+                    readyFiles.push({fileId, file: fileData.file});
+                }
+            });
+
+            if (readyFiles.length === 0) {
+                showToast('هیچ فایل آماده‌ای برای پردازش وجود ندارد', 'warning', 'هشدار');
+                return;
+            }
+
+            if (isOnline) {
+                // Process with real backend
+                const files = readyFiles.map(item => item.file);
+                await uploadFilesToBackend(files);
+            } else {
+                // Process with simulation
+                readyFiles.forEach(({fileId}) => {
+                    setTimeout(() => {
+                        simulateFileUpload(fileId);
+                    }, Math.random() * 1000);
+                });
+            }
+
+            showToast(`پردازش ${readyFiles.length} فایل شروع شد`, 'info', 'شروع پردازش');
+        }
+
+        // Clear all files
+        function clearAllFiles() {
+            if (uploadedFiles.size === 0) {
+                showToast('هیچ فایلی برای حذف وجود ندارد', 'warning', 'هشدار');
+                return;
+            }
+
+            if (!confirm('آیا از حذف همه فایل‌ها اطمینان دارید؟')) {
+                return;
+            }
+
+            const filesContainer = document.getElementById('filesContainer');
+            filesContainer.innerHTML = '';
+            uploadedFiles.clear();
+            
+            document.getElementById('uploadFiles').classList.remove('has-files');
+            showToast('همه فایل‌ها حذف شدند', 'info', 'پاک کردن');
+        }
+
+        // Utility functions
+        function generateFileId() {
+            return `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        }
+
+        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];
+        }
+
+        console.log('📤 Upload Page Ready!');
+    </script>
+</body>
+</html>