frontend/README.md

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:

// Example usage
const api = new LegalDashboardAPI();
const documents = await api.getDocuments();

Error Handling

Consistent error handling across all modules:

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:

• 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

• 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