Initial commit for deployment

.agent/rules/check.md

@@ -0,0 +1,6 @@
+---
+trigger: always_on
+glob:
+description:
+---
+

.agent/workflows/pre-commit-check.md

@@ -0,0 +1,72 @@
+---
+description: Pre-commit quality checks before pushing code
+---
+
+# Pre-Commit Quality Check Workflow
+
+Run this workflow before committing code to ensure quality and catch issues early.
+
+// turbo-all
+
+## Steps
+
+### 1. Format Code
+
+Clean and format all Python files:
+```bash
+python code_quality_agent.py --module clean
+```
+
+### 2. Security Scan
+
+Check for security vulnerabilities:
+```bash
+python code_quality_agent.py --module security
+```
+
+### 3. Run Tests
+
+Execute tests with coverage:
+```bash
+python code_quality_agent.py --module test
+```
+
+### 4. Review Report
+
+Open the quality report:
+```bash
+start quality_reports\latest_report.html
+```
+
+### 5. Check for Critical Issues
+
+Review the console output for any CRITICAL or HIGH severity issues.
+
+**If any CRITICAL issues found**: Fix them before committing!
+
+**If any HIGH issues found**: Consider fixing before committing.
+
+**If tests fail**: Fix failing tests before committing.
+
+### 6. Stage and Commit
+
+Once all checks pass:
+```bash
+git add .
+git commit -m "Your commit message"
+```
+
+## Quick Pre-Commit
+
+For a fast check, run:
+```bash
+python code_quality_agent.py --module clean
+python code_quality_agent.py --module security
+```
+
+## Full Pre-Commit
+
+For comprehensive check:
+```bash
+python code_quality_agent.py --all
+```

.agent/workflows/quality-check.md

@@ -0,0 +1,134 @@
+---
+description: Run code quality checks with the automated agent
+---
+
+# Code Quality Check Workflow
+
+This workflow runs the automated code quality agent to check your code for issues, vulnerabilities, and test coverage.
+
+## Prerequisites
+
+Ensure dependencies are installed:
+```bash
+pip install -r requirements-dev.txt
+```
+
+## Steps
+
+### 1. Quick Security Scan
+
+Run a fast security check to find vulnerabilities:
+```bash
+python code_quality_agent.py --module security
+```
+
+This checks for:
+- Security vulnerabilities with Bandit
+- Vulnerable dependencies with Safety
+- CORS configuration issues
+- DEBUG mode in production
+- Weak secret keys
+
+### 2. Format and Clean Code
+
+// turbo
+Clean and format all Python files:
+```bash
+python code_quality_agent.py --module clean
+```
+
+This will:
+- Format code with Black (PEP 8)
+- Sort imports with isort
+- Remove unused imports and variables
+
+### 3. Test Database and API Connections
+
+// turbo
+Verify all connections are working:
+```bash
+python code_quality_agent.py --module connections
+```
+
+**Note**: Make sure your backend is running first:
+```bash
+cd backend
+uvicorn app.main:app --reload
+```
+
+### 4. Run All Tests with Coverage
+
+// turbo
+Execute all tests and generate coverage reports:
+```bash
+python code_quality_agent.py --module test
+```
+
+### 5. Full Quality Check (All Modules)
+
+Run everything at once:
+```bash
+python code_quality_agent.py --all
+```
+
+### 6. View Reports
+
+// turbo
+Open the HTML report in your browser:
+```bash
+start quality_reports\latest_report.html
+```
+
+## Quick Commands
+
+**Dry Run (Preview Only)**:
+```bash
+python code_quality_agent.py --dry-run
+```
+
+**Before Committing**:
+```bash
+python code_quality_agent.py --module clean
+python code_quality_agent.py --module security
+```
+
+**CI/CD Integration**:
+```bash
+python code_quality_agent.py --all
+```
+
+## Understanding Results
+
+- **Green/PASSED**: Everything is good ✅
+- **Yellow/WARNING**: Minor issues to review ⚠️
+- **Red/FAILED**: Critical issues to fix ❌
+
+### Security Severity Levels
+
+- **CRITICAL**: Fix immediately (e.g., hardcoded secrets)
+- **HIGH**: Fix soon (e.g., SQL injection risks)
+- **MEDIUM**: Should fix (e.g., DEBUG mode enabled)
+- **LOW**: Nice to fix (e.g., minor best practices)
+
+## Customization
+
+Edit `agent_config.yaml` to customize:
+- Enable/disable specific modules
+- Set coverage thresholds
+- Configure excluded directories
+- Adjust severity levels
+
+## Troubleshooting
+
+**"Module not found" errors**:
+```bash
+pip install -r requirements-dev.txt
+```
+
+**Connection tests failing**:
+- Ensure backend server is running on port 8000
+- Check if database file exists
+
+**No files found**:
+- Verify you're in the project root directory
+- Check `exclude_dirs` in `agent_config.yaml`

.agent/workflows/weekly-audit.md

@@ -0,0 +1,105 @@
+---
+description: Weekly comprehensive code quality audit
+---
+
+# Weekly Code Quality Audit Workflow
+
+Run this workflow weekly to maintain code quality and track improvements over time.
+
+## Steps
+
+### 1. Update Dependencies
+
+Check for outdated packages:
+```bash
+pip list --outdated
+```
+
+### 2. Run Full Quality Check
+
+Execute all quality modules:
+```bash
+python code_quality_agent.py --all
+```
+
+### 3. Start Backend Server
+
+For connection tests:
+```bash
+cd backend
+uvicorn app.main:app --reload
+```
+
+### 4. Run Connection Tests
+
+In a new terminal:
+```bash
+python code_quality_agent.py --module connections
+```
+
+### 5. Review Security Issues
+
+Open the HTML report and focus on security section:
+```bash
+start quality_reports\latest_report.html
+```
+
+**Review**:
+- Any new CRITICAL or HIGH severity issues?
+- Are there vulnerable dependencies?
+- Is CORS configuration appropriate?
+- Is DEBUG mode disabled for production?
+
+### 6. Check Code Coverage
+
+Review test coverage percentage:
+- **Target**: >70% coverage
+- **Good**: >80% coverage
+- **Excellent**: >90% coverage
+
+If coverage is low, identify untested modules and add tests.
+
+### 7. Review Code Quality Scores
+
+Check Pylint score:
+- **Target**: >7.0/10
+- **Good**: >8.0/10
+- **Excellent**: >9.0/10
+
+### 8. Compare with Previous Week
+
+Check historical reports:
+```bash
+explorer quality_reports\history
+```
+
+**Track trends**:
+- Is coverage improving?
+- Are security issues decreasing?
+- Is code quality score stable or improving?
+
+### 9. Create Action Items
+
+Based on the report, create tasks for:
+- Fixing CRITICAL/HIGH security issues
+- Improving test coverage
+- Addressing code quality issues
+- Updating vulnerable dependencies
+
+### 10. Document Findings
+
+Create a summary of:
+- Issues found and fixed
+- Coverage improvements
+- Quality score changes
+- Action items for next week
+
+## Quick Weekly Check
+
+For a faster audit:
+```bash
+python code_quality_agent.py --all
+start quality_reports\latest_report.html
+```
+
+Then review the summary dashboard for key metrics.

.github/workflows/deploy_and_keep_alive.yml

@@ -0,0 +1,34 @@
+name: Keep Alive & Deploy
+
+on:
+  schedule:
+    # Run every 12 hours
+    - cron: '0 */12 * * *'
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  ping_server:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Ping Hugging Face Space
+        run: |
+          # Replace with your actual Space URL
+          curl -s https://huggingface.co/spaces/${{ secrets.HF_USERNAME }}/${{ secrets.HF_SPACE_NAME }}/health || echo "Ping complete"
+  
+  sync_to_hub:
+    runs-on: ubuntu-latest
+    needs: ping_server
+    if: github.event_name == 'push'
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Push to Hugging Face Hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_USERNAME: ${{ secrets.HF_USERNAME }}
+          HF_SPACE_NAME: ${{ secrets.HF_SPACE_NAME }}
+        run: |
+          git push https://$HF_USERNAME:$HF_TOKEN@huggingface.co/spaces/$HF_USERNAME/$HF_SPACE_NAME main

.gitignore

@@ -0,0 +1,37 @@
+# Environment variables
+.env
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+
+# Distribution
+build/
+dist/
+*.egg-info/
+
+# Code Quality Reports
+quality_reports/

AGENT_USAGE.md

@@ -0,0 +1,196 @@
+# Code Quality Agent - Usage Guide
+
+## Overview
+
+The Code Quality Agent is an automated tool that performs comprehensive code quality checks including:
+- **Code Cleaning**: Format code with Black, sort imports, remove unused code
+- **Security Scanning**: Check for vulnerabilities with Bandit and Safety
+- **Connection Testing**: Verify database and API connections
+- **Code Testing**: Run tests with coverage reporting
+
+## Installation
+
+1. **Install Development Dependencies**:
+   ```bash
+   pip install -r requirements-dev.txt
+   ```
+
+2. **Verify Installation**:
+   ```bash
+   python code_quality_agent.py --help
+   ```
+
+## Quick Start
+
+### Run All Checks
+```bash
+python code_quality_agent.py --all
+```
+
+### Preview Changes (Dry Run)
+```bash
+python code_quality_agent.py --dry-run
+```
+
+### Run Specific Module
+```bash
+# Code cleaning only
+python code_quality_agent.py --module clean
+
+# Security checks only
+python code_quality_agent.py --module security
+
+# Connection tests only
+python code_quality_agent.py --module connections
+
+# Code tests only
+python code_quality_agent.py --module test
+```
+
+## Configuration
+
+Edit `agent_config.yaml` to customize behavior:
+
+```yaml
+# Enable/disable modules
+modules:
+  code_cleaner: true
+  vulnerability_checker: true
+  connection_tester: true
+  code_tester: true
+
+# Customize thresholds
+code_tester:
+  coverage_threshold: 70  # minimum percentage
+  pylint_threshold: 7.0   # minimum score
+
+# Exclude directories
+code_cleaner:
+  exclude_dirs:
+    - "venv"
+    - "__pycache__"
+```
+
+## Understanding Reports
+
+### HTML Report
+- Open `quality_reports/latest_report.html` in your browser
+- Interactive dashboard with charts and metrics
+- Color-coded severity levels
+
+### JSON Report
+- Located at `quality_reports/latest_report.json`
+- Machine-readable format for CI/CD integration
+- Contains all raw data
+
+### Console Summary
+- Quick overview printed to terminal
+- Shows key metrics and pass/fail status
+
+## Common Workflows
+
+### Before Committing Code
+```bash
+# Check everything
+python code_quality_agent.py --all
+
+# Review the HTML report
+# Fix any issues found
+# Commit your changes
+```
+
+### CI/CD Integration
+```bash
+# In your CI pipeline
+python code_quality_agent.py --all
+
+# Check exit code
+if [ $? -ne 0 ]; then
+    echo "Quality checks failed"
+    exit 1
+fi
+```
+
+### Code Review Preparation
+```bash
+# Clean code first
+python code_quality_agent.py --module clean
+
+# Then run all checks
+python code_quality_agent.py --all
+```
+
+## Interpreting Results
+
+### Code Cleaning
+- **Files Processed**: Total Python files scanned
+- **Formatted**: Files modified by Black
+- **Errors**: Issues encountered during cleaning
+
+### Security
+- **CRITICAL**: Immediate attention required (e.g., hardcoded secrets)
+- **HIGH**: Serious issues (e.g., SQL injection risks)
+- **MEDIUM**: Important to fix (e.g., DEBUG mode enabled)
+- **LOW**: Minor issues or best practices
+
+### Connections
+- **PASSED**: Connection successful
+- **FAILED**: Connection failed (check if server is running)
+- **SKIPPED**: Test was not applicable
+
+### Code Tests
+- **Coverage**: Percentage of code covered by tests (aim for >70%)
+- **Pylint Score**: Code quality score out of 10 (aim for >7.0)
+- **Flake8**: Style issues found
+
+## Troubleshooting
+
+### "Module not found" errors
+```bash
+# Reinstall dependencies
+pip install -r requirements-dev.txt
+```
+
+### Connection tests failing
+```bash
+# Make sure your backend is running
+cd backend
+uvicorn app.main:app --reload
+```
+
+### No Python files found
+- Check `exclude_dirs` in config
+- Verify you're running from project root
+
+## Advanced Usage
+
+### Custom Config File
+```bash
+python code_quality_agent.py --config my_config.yaml
+```
+
+### Dry Run with Specific Module
+```bash
+python code_quality_agent.py --module clean --dry-run
+```
+
+### View Historical Reports
+```bash
+# Reports are saved in quality_reports/history/
+ls quality_reports/history/
+```
+
+## Tips
+
+1. **Run dry-run first** to preview changes before applying
+2. **Fix CRITICAL issues immediately** - they're security risks
+3. **Aim for >70% coverage** for good test coverage
+4. **Run before every commit** to maintain code quality
+5. **Review HTML report** for detailed insights
+
+## Support
+
+For issues or questions:
+1. Check the logs in `quality_reports/agent.log`
+2. Review the configuration in `agent_config.yaml`
+3. Ensure all dependencies are installed

DEPLOYMENT_GUIDE.md

@@ -0,0 +1,70 @@
+# Deployment Guide
+
+This guide covers how to deploy the Stock Analysis Application to Hugging Face Spaces, Vercel, and GitHub.
+
+## 1. Hugging Face Spaces Deployment (Recommended for Full Features)
+
+Hugging Face Spaces supports Docker, which is perfect for this app.
+
+1.  Create a new Space on [Hugging Face](https://huggingface.co/spaces).
+2.  Select **Docker** as the SDK.
+3.  Choose a name (e.g., `stock-analysis`).
+4.  In your local project, initialize Git if you haven't already:
+    ```bash
+    git init
+    git add .
+    git commit -m "Initial commit"
+    ```
+5.  Add the Hugging Face remote (replace `USERNAME` and `SPACE_NAME`):
+    ```bash
+    git remote add hf https://huggingface.co/spaces/USERNAME/SPACE_NAME
+    ```
+6.  Push to Hugging Face:
+    ```bash
+    git push hf main
+    ```
+    *Note: If you have large files (like `stock_analysis.db`), you might need to use `git-lfs` or exclude them via `.gitignore`.*
+
+## 2. GitHub Actions Automation & Keep Alive
+
+We've included a GitHub Action that:
+- Automatically syncs your code to Hugging Face when you push to GitHub.
+- Pings your app every 12 hours to prevent it from sleeping (if on a free tier).
+
+### Setup:
+1.  Push your code to a GitHub repository.
+2.  Go to **Settings** > **Secrets and variables** > **Actions**.
+3.  Add the following Repository Secrets:
+    - `HF_TOKEN`: Your Hugging Face Access Token (Write permissions).
+    - `HF_USERNAME`: Your Hugging Face username.
+    - `HF_SPACE_NAME`: The name of your Space.
+
+The workflow file is located at `.github/workflows/deploy_and_keep_alive.yml`.
+
+## 3. Vercel Deployment
+
+Vercel is great for the frontend, but requires specific configuration for Python backends (serverless).
+
+1.  Install Vercel CLI: `npm i -g vercel`
+2.  Login: `vercel login`
+3.  Deploy:
+    ```bash
+    vercel
+    ```
+4.  The `vercel.json` configuration file handles the routing to the Python backend.
+
+## 4. Local "Keep Alive" Script
+
+If you prefer to run a keep-alive script from your own machine:
+
+1.  Edit `keep_alive.py` and set your URL.
+2.  Run it:
+    ```bash
+    python keep_alive.py
+    ```
+    It will ping your server every 12 hours.
+
+## Important Notes
+
+- **Database**: The SQLite database (`stock_analysis.db`) is file-based. On Hugging Face Spaces (Docker), it will reset if the container restarts unless you set up persistent storage (Hugging Face "Persistent Storage" dataset or upgrade the space). For production, consider using an external database (PostgreSQL/Supabase).
+- **Environment Variables**: Make sure to set any secrets (like database URLs or API keys) in the Settings tab of your deployment platform.

Dockerfile

@@ -0,0 +1,35 @@
+# Use Python 3.11
+FROM python:3.11-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+# Install requirements
+# Note: We use the backend/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r backend/requirements.txt
+
+# Create necessary directories within the user's space
+RUN mkdir -p $HOME/app/data
+
+# Exposure port (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Health Check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import requests; requests.get('http://localhost:7860/health')"
+
+# Run the application using the app.py entry point
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,50 @@
+# 📈 Stock Analysis Application
+
+Complete stock analysis platform with authentication and real-time market data.
+
+## 🚀 Quick Start
+
+### 1. Start Backend
+```bash
+cd backend
+python -m uvicorn app.main:app --reload
+```
+
+### 2. Open Application
+Open `frontend/index.html` in your browser
+
+### 3. Login
+**Test Account:**
+- Email: `admin@test.com`
+- Password: `SecurePass123!`
+
+### 4. View Dashboard
+Stocks display instantly after login!
+
+## ✨ Features
+
+- ✅ Secure authentication (JWT)
+- ✅ Real-time stock data (Yahoo Finance)
+- ✅ 5 popular stocks: AAPL, GOOGL, MSFT, TSLA, AMZN
+- ✅ Instant loading dashboard
+- ✅ Color-coded price changes
+- ✅ Auto-refresh capability
+- ✅ Beautiful cyberpunk UI
+
+## 📊 Stock Data
+
+Each stock card shows:
+- Current price
+- Change % (color-coded)
+- Dollar change
+- Trading volume
+
+## 🔧 Tech Stack
+
+**Backend:** FastAPI, SQLAlchemy, yfinance, JWT  
+**Frontend:** HTML, CSS, JavaScript  
+**Database:** SQLite (local development)
+
+## ✅ Status
+
+**Production Ready** - All features working!

agent_config.yaml

@@ -0,0 +1,94 @@
+# Code Quality Agent Configuration
+
+# General Settings
+general:
+  project_name: "Stock Analysis"
+  project_root: "."
+  output_dir: "quality_reports"
+  log_level: "INFO"  # DEBUG, INFO, WARNING, ERROR
+
+# Modules to Enable/Disable
+modules:
+  code_cleaner: true
+  vulnerability_checker: true
+  connection_tester: true
+  code_tester: true
+
+# Code Cleaner Settings
+code_cleaner:
+  enabled: true
+  format_with_black: true
+  sort_imports: true
+  remove_unused_imports: true
+  line_length: 100
+  exclude_dirs:
+    - "venv"
+    - ".venv"
+    - "env"
+    - "__pycache__"
+    - ".git"
+    - "node_modules"
+    - "quality_reports"
+  exclude_files:
+    - "*.pyc"
+    - "*.pyo"
+
+# Vulnerability Checker Settings
+vulnerability_checker:
+  enabled: true
+  run_bandit: true
+  run_safety: true
+  custom_security_checks: true
+  severity_threshold: "LOW"  # LOW, MEDIUM, HIGH, CRITICAL
+  exclude_dirs:
+    - "venv"
+    - ".venv"
+    - "tests"
+  bandit_config:
+    confidence_level: "LOW"
+    severity_level: "LOW"
+
+# Connection Tester Settings
+connection_tester:
+  enabled: true
+  test_database: true
+  test_api_endpoints: true
+  test_health_endpoints: true
+  test_authentication: true
+  api_base_url: "http://localhost:8000"
+  timeout: 10  # seconds
+  endpoints_to_test:
+    - path: "/"
+      method: "GET"
+      expected_status: 200
+    - path: "/health"
+      method: "GET"
+      expected_status: 200
+    - path: "/docs"
+      method: "GET"
+      expected_status: 200
+
+# Code Tester Settings
+code_tester:
+  enabled: true
+  run_pytest: true
+  run_pylint: true
+  run_flake8: true
+  generate_coverage: true
+  coverage_threshold: 70  # minimum percentage
+  test_directories:
+    - "backend"
+  pytest_args:
+    - "-v"
+    - "--tb=short"
+  pylint_threshold: 7.0  # minimum score out of 10
+
+# Report Settings
+reporting:
+  generate_html: true
+  generate_json: true
+  generate_console_summary: true
+  include_charts: true
+  open_html_after_run: true
+  save_history: true
+  max_history_reports: 10

app.py

@@ -0,0 +1,38 @@
+"""
+Hugging Face Spaces entry point for Stock Analysis Application.
+This file serves both the FastAPI backend and static frontend files.
+"""
+import os
+import uvicorn
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from backend.app.main import app as backend_app
+
+# Mount static files
+backend_app.mount("/static", StaticFiles(directory="frontend"), name="static")
+
+# Serve index.html at root
+@backend_app.get("/app")
+async def serve_app():
+    """Serve the main application page."""
+    return FileResponse("frontend/index.html")
+
+@backend_app.get("/dashboard")
+async def serve_dashboard():
+    """Serve the dashboard page."""
+    return FileResponse("frontend/dashboard.html")
+
+@backend_app.get("/portfolio")
+async def serve_portfolio():
+    """Serve the portfolio page."""
+    return FileResponse("frontend/portfolio.html")
+
+if __name__ == "__main__":
+    port = int(os.getenv("PORT", 7860))
+    uvicorn.run(
+        backend_app,
+        host="0.0.0.0",
+        port=port,
+        log_level="info"
+    )

backend/.env.example

@@ -0,0 +1,11 @@
+# Database Configuration
+DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.zbnydktylyfpyzmldotn.supabase.co:5432/postgres
+
+# JWT Configuration
+SECRET_KEY=your-secret-key-here-change-this-in-production
+ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=43200
+
+# Application Settings
+PROJECT_NAME=Stock Analysis API
+DEBUG=True

backend/app/__init__.py

@@ -0,0 +1 @@
+# Stock Analysis Backend Application

backend/app/core/__init__.py

@@ -0,0 +1 @@
+# Core utilities and configuration

backend/app/core/config.py

@@ -0,0 +1,36 @@
+"""
+Application configuration using Pydantic Settings.
+Loads environment variables from .env file.
+"""
+from pydantic_settings import BaseSettings
+from typing import Optional
+
+
+class Settings(BaseSettings):
+    """Application settings loaded from environment variables."""
+    
+    # Database
+    DATABASE_URL: str
+    
+    # JWT Settings
+    SECRET_KEY: str
+    ALGORITHM: str = "HS256"
+    ACCESS_TOKEN_EXPIRE_MINUTES: int = 43200  # 30 days
+    
+    # Application
+    PROJECT_NAME: str = "Stock Analysis API"
+    DEBUG: bool = True
+    
+    # CORS - Allow all origins for development (including file://)
+    BACKEND_CORS_ORIGINS: list = ["*"]
+    
+    # Groq API
+    GROQ_API_KEY: str = ""
+    
+    class Config:
+        env_file = ".env"
+        case_sensitive = True
+
+
+# Global settings instance
+settings = Settings()

backend/app/core/database.py

@@ -0,0 +1,32 @@
+"""
+Database connection and session management using SQLAlchemy.
+"""
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+from .config import settings
+
+# Create database engine
+engine = create_engine(
+    settings.DATABASE_URL,
+    pool_pre_ping=True,  # Verify connections before using
+    echo=settings.DEBUG  # Log SQL queries in debug mode
+)
+
+# Session factory
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+# Base class for models
+Base = declarative_base()
+
+
+def get_db():
+    """
+    Dependency function to get database session.
+    Yields a session and ensures it's closed after use.
+    """
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/app/core/security.py

@@ -0,0 +1,157 @@
+"""
+Security utilities for password hashing and JWT token management.
+"""
+from datetime import datetime, timedelta
+from typing import Optional
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+from fastapi import Depends, HTTPException, status
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from sqlalchemy.orm import Session
+
+from .config import settings
+from .database import get_db
+from ..models.user import User
+
+# Password hashing context
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+
+# HTTP Bearer token scheme
+security = HTTPBearer()
+
+
+def hash_password(password: str) -> str:
+    """
+    Hash a plain text password using bcrypt.
+    
+    Args:
+        password: Plain text password
+        
+    Returns:
+        Hashed password string
+    """
+    return pwd_context.hash(password)
+
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    """
+    Verify a plain text password against a hashed password.
+    
+    Args:
+        plain_password: Plain text password to verify
+        hashed_password: Hashed password from database
+        
+    Returns:
+        True if password matches, False otherwise
+    """
+    return pwd_context.verify(plain_password, hashed_password)
+
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None) -> str:
+    """
+    Create a JWT access token.
+    
+    Args:
+        data: Dictionary of data to encode in the token
+        expires_delta: Optional custom expiration time
+        
+    Returns:
+        Encoded JWT token string
+    """
+    to_encode = data.copy()
+    
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
+    
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, settings.SECRET_KEY, algorithm=settings.ALGORITHM)
+    
+    return encoded_jwt
+
+
+def decode_access_token(token: str) -> Optional[dict]:
+    """
+    Decode and validate a JWT access token.
+    
+    Args:
+        token: JWT token string
+        
+    Returns:
+        Decoded token payload or None if invalid
+    """
+    try:
+        payload = jwt.decode(token, settings.SECRET_KEY, algorithms=[settings.ALGORITHM])
+        return payload
+    except JWTError:
+        return None
+
+
+async def get_current_user(
+    credentials: HTTPAuthorizationCredentials = Depends(security),
+    db: Session = Depends(get_db)
+) -> User:
+    """
+    FastAPI dependency to get the current authenticated user from JWT token.
+    
+    Args:
+        credentials: HTTP Bearer credentials from request header
+        db: Database session
+        
+    Returns:
+        User object
+        
+    Raises:
+        HTTPException: If token is invalid or user not found
+    """
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    
+    token = credentials.credentials
+    payload = decode_access_token(token)
+    
+    if payload is None:
+        raise credentials_exception
+    
+    user_id: str = payload.get("sub")
+    if user_id is None:
+        raise credentials_exception
+    
+    # Get user from database
+    user = db.query(User).filter(User.id == user_id).first()
+    
+    if user is None:
+        raise credentials_exception
+    
+    if not user.is_active:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Inactive user"
+        )
+    
+    return user
+
+
+def require_role(required_role: str):
+    """
+    Dependency factory to require a specific user role.
+    
+    Args:
+        required_role: Role required (e.g., "ADMIN")
+        
+    Returns:
+        Dependency function that checks user role
+    """
+    async def role_checker(current_user: User = Depends(get_current_user)) -> User:
+        if current_user.role != required_role:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail=f"Access denied. {required_role} role required."
+            )
+        return current_user
+    
+    return role_checker

backend/app/main.py

@@ -0,0 +1,51 @@
+"""
+Main FastAPI application entry point.
+"""
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from .core.database import engine, Base
+from .routers import auth, stocks, portfolio
+from .models import User, Portfolio  # Import models to ensure tables are created
+
+# Create database tables
+Base.metadata.create_all(bind=engine)
+
+app = FastAPI(
+    title="Stock Analysis API",
+    description="Real-time stock market data and analysis API",
+    version="1.0.0"
+)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify exact origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(auth.router)
+app.include_router(stocks.router)
+app.include_router(portfolio.router)
+
+
+@app.get("/")
+async def root():
+    """Root endpoint - API health check."""
+    return {
+        "message": "Stock Analysis API",
+        "version": "1.0.0",
+        "status": "active"
+    }
+
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint."""
+    return {
+        "status": "healthy",
+        "api": "operational",
+        "database": "connected"
+    }

backend/app/models/__init__.py

@@ -0,0 +1,3 @@
+# Database models
+from .user import User, UserRole
+from .portfolio import Portfolio

backend/app/models/portfolio.py

@@ -0,0 +1,30 @@
+"""
+Portfolio database model for tracking user stock holdings.
+"""
+from sqlalchemy import Column, String, Float, Date, DateTime, ForeignKey
+from sqlalchemy.orm import relationship
+from datetime import datetime, date
+import uuid
+
+from ..core.database import Base
+
+
+class Portfolio(Base):
+    """Portfolio model for tracking user stock holdings."""
+    
+    __tablename__ = "portfolio"
+    
+    id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+    user_id = Column(String(36), ForeignKey("users.id"), nullable=False, index=True)
+    symbol = Column(String(50), nullable=False, index=True)
+    shares = Column(Float, nullable=False)
+    buying_date = Column(Date, nullable=False)
+    buying_price = Column(Float, nullable=True)  # Optional: price at purchase
+    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
+    
+    # Relationship to user
+    # user = relationship("User", back_populates="portfolio")
+    
+    def __repr__(self):
+        return f"<Portfolio {self.symbol} - {self.shares} shares>"

backend/app/models/user.py

@@ -0,0 +1,33 @@
+"""
+User database model using SQLAlchemy ORM.
+"""
+import enum
+from sqlalchemy import Column, String, Boolean, Enum, DateTime
+from datetime import datetime
+import uuid
+
+from ..core.database import Base
+
+
+class UserRole(str, enum.Enum):
+    """User role enumeration."""
+    ADMIN = "ADMIN"
+    STAFF = "STAFF"
+
+
+class User(Base):
+    """User model for authentication and authorization."""
+    
+    __tablename__ = "users"
+    
+    id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+    email = Column(String(255), unique=True, nullable=False, index=True)
+    name = Column(String(255), nullable=False)
+    password_hash = Column(String(255), nullable=False)
+    role = Column(Enum(UserRole), nullable=False, default=UserRole.STAFF)
+    is_active = Column(Boolean, default=True, nullable=False)
+    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
+    
+    def __repr__(self):
+        return f"<User {self.email}>"

backend/app/routers/__init__.py

@@ -0,0 +1 @@
+# API routers

backend/app/routers/auth.py

@@ -0,0 +1,116 @@
+"""
+Authentication routes: signup, login, and user management.
+"""
+from fastapi import APIRouter, Depends, HTTPException, status
+from sqlalchemy.orm import Session
+
+from ..core.database import get_db
+from ..core.security import (
+    hash_password,
+    verify_password,
+    create_access_token,
+    get_current_user,
+    require_role
+)
+from ..models.user import User, UserRole
+from ..schemas.auth import (
+    UserSignup,
+    UserLogin,
+    Token,
+    UserResponse,
+    MessageResponse
+)
+
+router = APIRouter(prefix="/auth", tags=["Authentication"])
+
+
+@router.post("/signup", response_model=UserResponse, status_code=status.HTTP_201_CREATED)
+async def signup(user_data: UserSignup, db: Session = Depends(get_db)):
+    """
+    Register a new user.
+    
+    - **email**: Valid email address (must be unique)
+    - **name**: User's full name
+    - **password**: Password (minimum 8 characters)
+    - **role**: User role (ADMIN or STAFF, defaults to STAFF)
+    """
+    # Check if email already exists
+    existing_user = db.query(User).filter(User.email == user_data.email).first()
+    if existing_user:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Email already registered"
+        )
+    
+    # Create new user
+    new_user = User(
+        email=user_data.email,
+        name=user_data.name,
+        password_hash=hash_password(user_data.password),
+        role=UserRole(user_data.role)
+    )
+    
+    db.add(new_user)
+    db.commit()
+    db.refresh(new_user)
+    
+    return new_user
+
+
+@router.post("/login", response_model=Token)
+async def login(credentials: UserLogin, db: Session = Depends(get_db)):
+    """
+    Authenticate user and return JWT access token.
+    
+    - **email**: User's email address
+    - **password**: User's password
+    """
+    # Find user by email
+    user = db.query(User).filter(User.email == credentials.email).first()
+    
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect email or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    
+    # Verify password
+    if not verify_password(credentials.password, user.password_hash):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect email or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    
+    # Check if user is active
+    if not user.is_active:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Account is inactive"
+        )
+    
+    # Create access token
+    access_token = create_access_token(data={"sub": str(user.id)})
+    
+    return {"access_token": access_token, "token_type": "bearer"}
+
+
+@router.get("/me", response_model=UserResponse)
+async def get_current_user_info(current_user: User = Depends(get_current_user)):
+    """
+    Get current authenticated user's information.
+    
+    Requires valid JWT token in Authorization header.
+    """
+    return current_user
+
+
+@router.get("/admin-only", response_model=MessageResponse)
+async def admin_only_route(current_user: User = Depends(require_role("ADMIN"))):
+    """
+    Demo endpoint that requires ADMIN role.
+    
+    This demonstrates role-based authorization.
+    """
+    return {"message": f"Welcome, Admin {current_user.name}! You have access to this protected route."}

backend/app/routers/portfolio.py

@@ -0,0 +1,136 @@
+"""
+Portfolio API endpoints for managing user stock holdings.
+"""
+from fastapi import APIRouter, HTTPException, Depends
+from sqlalchemy.orm import Session
+from typing import List
+from datetime import date
+
+from ..core.database import get_db
+from ..core.security import get_current_user
+from ..models.user import User
+from ..models.portfolio import Portfolio
+from ..schemas.portfolio import PortfolioAdd, PortfolioUpdate, PortfolioResponse
+
+router = APIRouter(prefix="/portfolio", tags=["Portfolio"])
+
+
+@router.post("/add", response_model=PortfolioResponse)
+async def add_to_portfolio(
+    portfolio_data: PortfolioAdd,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Add a stock to user's portfolio.
+    
+    **Requires authentication.**
+    """
+    # Check if stock already exists in portfolio
+    existing = db.query(Portfolio).filter(
+        Portfolio.user_id == current_user.id,
+        Portfolio.symbol == portfolio_data.symbol.upper()
+    ).first()
+    
+    if existing:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Stock {portfolio_data.symbol} already exists in your portfolio"
+        )
+    
+    # Create new portfolio entry
+    portfolio_entry = Portfolio(
+        user_id=current_user.id,
+        symbol=portfolio_data.symbol.upper(),
+        shares=portfolio_data.shares,
+        buying_date=portfolio_data.buying_date,
+        buying_price=portfolio_data.buying_price
+    )
+    
+    db.add(portfolio_entry)
+    db.commit()
+    db.refresh(portfolio_entry)
+    
+    return portfolio_entry
+
+
+@router.get("/", response_model=List[PortfolioResponse])
+async def get_portfolio(
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Get user's complete portfolio.
+    
+    **Requires authentication.**
+    """
+    portfolio = db.query(Portfolio).filter(
+        Portfolio.user_id == current_user.id
+    ).order_by(Portfolio.created_at.desc()).all()
+    
+    return portfolio
+
+
+@router.delete("/{portfolio_id}")
+async def remove_from_portfolio(
+    portfolio_id: str,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Remove a stock from portfolio.
+    
+    **Requires authentication.**
+    """
+    portfolio_entry = db.query(Portfolio).filter(
+        Portfolio.id == portfolio_id,
+        Portfolio.user_id == current_user.id
+    ).first()
+    
+    if not portfolio_entry:
+        raise HTTPException(
+            status_code=404,
+            detail="Portfolio entry not found"
+        )
+    
+    db.delete(portfolio_entry)
+    db.commit()
+    
+    return {"message": f"Removed {portfolio_entry.symbol} from portfolio"}
+
+
+@router.put("/{portfolio_id}", response_model=PortfolioResponse)
+async def update_portfolio_entry(
+    portfolio_id: str,
+    update_data: PortfolioUpdate,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Update a portfolio entry.
+    
+    **Requires authentication.**
+    """
+    portfolio_entry = db.query(Portfolio).filter(
+        Portfolio.id == portfolio_id,
+        Portfolio.user_id == current_user.id
+    ).first()
+    
+    if not portfolio_entry:
+        raise HTTPException(
+            status_code=404,
+            detail="Portfolio entry not found"
+        )
+    
+    # Update fields if provided
+    if update_data.shares is not None:
+        portfolio_entry.shares = update_data.shares
+    if update_data.buying_date is not None:
+        portfolio_entry.buying_date = update_data.buying_date
+    if update_data.buying_price is not None:
+        portfolio_entry.buying_price = update_data.buying_price
+    
+    db.commit()
+    db.refresh(portfolio_entry)
+    
+    return portfolio_entry

backend/app/routers/stocks.py

@@ -0,0 +1,158 @@
+"""
+Stock API endpoints.
+Provides real-time stock quotes and market data.
+"""
+from fastapi import APIRouter, HTTPException, Depends
+from typing import List
+import csv
+import os
+from ..services.stock_service import stock_service
+from ..core.security import get_current_user
+from ..models.user import User
+from ..schemas.portfolio import NSEStock
+
+router = APIRouter(prefix="/stocks", tags=["Stocks"])
+
+
+@router.get("/quote/{symbol}")
+async def get_stock_quote(
+    symbol: str,
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Get current quote for a stock symbol.
+    
+    **Requires authentication.**
+    
+    Args:
+        symbol: Stock ticker symbol (e.g., AAPL, GOOGL)
+        
+    Returns:
+        Stock quote with price, change, volume, etc.
+    """
+    quote = stock_service.get_stock_quote(symbol)
+    
+    if not quote:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Stock symbol '{symbol}' not found or data unavailable"
+        )
+    
+    return quote
+
+
+@router.get("/popular")
+async def get_popular_stocks(
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Get quotes for popular stocks (AAPL, GOOGL, MSFT, TSLA, AMZN).
+    
+    **Requires authentication.**
+    
+    Returns:
+        List of stock quotes
+    """
+    stocks = stock_service.get_popular_stocks()
+    
+    return {
+        "stocks": stocks,
+        "count": len(stocks)
+    }
+
+
+@router.get("/search")
+async def search_stocks(
+    q: str,
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Search for stocks by symbol or name.
+    
+    **Requires authentication.**
+    
+    Args:
+        q: Search query (symbol or company name)
+        
+    Returns:
+        List of matching stocks
+    """
+    if not q or len(q) < 1:
+        raise HTTPException(
+            status_code=400,
+            detail="Search query must be at least 1 character"
+        )
+    
+    results = stock_service.search_stocks(q)
+    
+    return {
+        "results": results,
+        "count": len(results),
+        "query": q
+    }
+
+
+@router.get("/nse-symbols", response_model=List[NSEStock])
+async def get_nse_symbols(
+    q: str = None,
+    limit: int = 100,
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Get NSE India stock symbols from CSV file.
+    
+    **Requires authentication.**
+    
+    Args:
+        q: Optional search query to filter symbols
+        limit: Maximum number of results (default: 100)
+        
+    Returns:
+        List of NSE stock symbols with company names
+    """
+    # Path to CSV file
+    csv_path = os.path.join(os.path.dirname(__file__), "..", "..", "..", "Ticker_List_NSE_India.csv")
+    
+    if not os.path.exists(csv_path):
+        raise HTTPException(
+            status_code=500,
+            detail="NSE stock symbols file not found"
+        )
+    
+    stocks = []
+    
+    try:
+        with open(csv_path, 'r', encoding='utf-8') as file:
+            csv_reader = csv.DictReader(file)
+            
+            for row in csv_reader:
+                symbol = row.get('SYMBOL', '').strip()
+                name = row.get('NAME OF COMPANY', '').strip()
+                series = row.get(' SERIES', '').strip()
+                
+                if not symbol:
+                    continue
+                
+                # Filter by search query if provided
+                if q:
+                    q_lower = q.lower()
+                    if q_lower not in symbol.lower() and q_lower not in name.lower():
+                        continue
+                
+                stocks.append(NSEStock(
+                    symbol=symbol,
+                    name=name,
+                    series=series if series else None
+                ))
+                
+                # Limit results
+                if len(stocks) >= limit:
+                    break
+        
+        return stocks
+        
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error reading NSE symbols: {str(e)}"
+        )

backend/app/schemas/__init__.py

@@ -0,0 +1 @@
+# Pydantic schemas for request/response validation

backend/app/schemas/auth.py

@@ -0,0 +1,45 @@
+"""
+Pydantic schemas for authentication requests and responses.
+"""
+from pydantic import BaseModel, EmailStr, Field
+from typing import Optional
+from datetime import datetime
+from uuid import UUID
+
+
+class UserSignup(BaseModel):
+    """Schema for user signup request."""
+    email: EmailStr
+    name: str = Field(..., min_length=1, max_length=255)
+    password: str = Field(..., min_length=8, max_length=100)
+    role: str = Field(default="STAFF", pattern="^(ADMIN|STAFF)$")
+
+
+class UserLogin(BaseModel):
+    """Schema for user login request."""
+    email: EmailStr
+    password: str
+
+
+class Token(BaseModel):
+    """Schema for JWT token response."""
+    access_token: str
+    token_type: str = "bearer"
+
+
+class UserResponse(BaseModel):
+    """Schema for user data response."""
+    id: UUID
+    email: str
+    name: str
+    role: str
+    is_active: bool
+    created_at: datetime
+    
+    class Config:
+        from_attributes = True  # Allows creation from ORM models
+
+
+class MessageResponse(BaseModel):
+    """Generic message response schema."""
+    message: str

backend/app/schemas/portfolio.py

@@ -0,0 +1,43 @@
+"""
+Portfolio schemas for request/response validation.
+"""
+from pydantic import BaseModel, Field
+from datetime import date, datetime
+from typing import Optional
+
+
+class PortfolioAdd(BaseModel):
+    """Schema for adding a stock to portfolio."""
+    symbol: str = Field(..., min_length=1, max_length=50, description="Stock symbol")
+    shares: float = Field(..., gt=0, description="Number of shares")
+    buying_date: date = Field(..., description="Date when stock was purchased")
+    buying_price: Optional[float] = Field(None, gt=0, description="Price at purchase (optional)")
+
+
+class PortfolioUpdate(BaseModel):
+    """Schema for updating portfolio entry."""
+    shares: Optional[float] = Field(None, gt=0)
+    buying_date: Optional[date] = None
+    buying_price: Optional[float] = Field(None, gt=0)
+
+
+class PortfolioResponse(BaseModel):
+    """Schema for portfolio response."""
+    id: str
+    user_id: str
+    symbol: str
+    shares: float
+    buying_date: date
+    buying_price: Optional[float]
+    created_at: datetime
+    updated_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+
+class NSEStock(BaseModel):
+    """Schema for NSE stock symbol."""
+    symbol: str
+    name: str
+    series: Optional[str] = None

backend/app/services/__init__.py

@@ -0,0 +1,3 @@
+"""
+Services package initialization.
+"""

backend/app/services/stock_service.py

@@ -0,0 +1,150 @@
+"""
+Stock data service using Yahoo Finance.
+Fetches real-time stock quotes and company information.
+"""
+import yfinance as yf
+from datetime import datetime, timedelta
+from typing import Optional, Dict, List
+from concurrent.futures import ThreadPoolExecutor, as_completed
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class StockService:
+    """Service for fetching stock data from Yahoo Finance."""
+    
+    # Popular stocks to display by default
+    POPULAR_SYMBOLS = ["AAPL", "GOOGL", "MSFT", "TSLA", "AMZN"]
+    
+    # Simple cache
+    _cache = {}
+    _cache_duration = timedelta(minutes=1)  # Cache for 1 minute
+    
+    @staticmethod
+    def get_stock_quote(symbol: str) -> Optional[Dict]:
+        """
+        Get current stock quote for a symbol.
+        
+        Args:
+            symbol: Stock ticker symbol (e.g., 'AAPL')
+            
+        Returns:
+            Dictionary with stock data or None if error
+        """
+        # Check cache first
+        cache_key = f"quote_{symbol}"
+        if cache_key in StockService._cache:
+            cached_data, cached_time = StockService._cache[cache_key]
+            if datetime.now() - cached_time < StockService._cache_duration:
+                logger.info(f"Using cached data for {symbol}")
+                return cached_data
+        
+        try:
+            logger.info(f"Fetching fresh data for {symbol}")
+            stock = yf.Ticker(symbol)
+            
+            # Use fast_info for quicker response
+            try:
+                fast_info = stock.fast_info
+                current_price = fast_info.get('lastPrice') or fast_info.get('regularMarketPrice')
+                previous_close = fast_info.get('previousClose')
+            except:
+                # Fallback to regular info if fast_info fails
+                info = stock.info
+                current_price = info.get('currentPrice') or info.get('regularMarketPrice')
+                previous_close = info.get('previousClose')
+            
+            if not current_price or not previous_close:
+                logger.warning(f"Missing price data for {symbol}")
+                return None
+            
+            # Calculate change
+            change = current_price - previous_close
+            change_percent = (change / previous_close) * 100
+            
+            # Get company name (use fast method)
+            try:
+                name = stock.info.get('longName') or stock.info.get('shortName') or symbol
+            except:
+                name = symbol
+            
+            result = {
+                "symbol": symbol.upper(),
+                "name": name,
+                "price": round(float(current_price), 2),
+                "change": round(float(change), 2),
+                "change_percent": round(float(change_percent), 2),
+                "volume": int(fast_info.get('volume', 0)) if 'fast_info' in locals() else 0,
+                "market_cap": None,
+                "pe_ratio": None,
+                "updated_at": datetime.utcnow().isoformat()
+            }
+            
+            # Cache the result
+            StockService._cache[cache_key] = (result, datetime.now())
+            
+            return result
+            
+        except Exception as e:
+            logger.error(f"Error fetching stock data for {symbol}: {e}")
+            return None
+    
+    @staticmethod
+    def get_popular_stocks() -> List[Dict]:
+        """
+        Get quotes for popular stocks (fetched in parallel for speed).
+        
+        Returns:
+            List of stock quote dictionaries
+        """
+        logger.info("Fetching popular stocks in parallel...")
+        stocks = []
+        
+        # Use ThreadPoolExecutor to fetch stocks in parallel
+        with ThreadPoolExecutor(max_workers=5) as executor:
+            # Submit all tasks
+            future_to_symbol = {
+                executor.submit(StockService.get_stock_quote, symbol): symbol 
+                for symbol in StockService.POPULAR_SYMBOLS
+            }
+            
+            # Collect results as they complete
+            for future in as_completed(future_to_symbol):
+                symbol = future_to_symbol[future]
+                try:
+                    quote = future.result(timeout=10)  # 10 second timeout per stock
+                    if quote:
+                        stocks.append(quote)
+                        logger.info(f"✅ Got quote for {symbol}")
+                except Exception as e:
+                    logger.error(f"❌ Failed to get quote for {symbol}: {e}")
+        
+        logger.info(f"Fetched {len(stocks)} stocks successfully")
+        return stocks
+    
+    @staticmethod
+    def search_stocks(query: str, limit: int = 10) -> List[Dict]:
+        """
+        Search for stocks by symbol or name.
+        
+        Args:
+            query: Search query
+            limit: Maximum number of results
+            
+        Returns:
+            List of matching stocks
+        """
+        # For now, just try to get the quote for the query as a symbol
+        # In production, you'd use a proper search API
+        query = query.upper().strip()
+        quote = StockService.get_stock_quote(query)
+        
+        if quote:
+            return [quote]
+        return []
+
+
+# Create singleton instance
+stock_service = StockService()
+

backend/create_account.py

@@ -0,0 +1,40 @@
+"""
+Quick test to create a user via API
+"""
+import requests
+import json
+
+API_BASE_URL = "http://localhost:8000"
+
+print("=" * 50)
+print("Creating test account...")
+print("=" * 50)
+
+payload = {
+    "email": "admin@test.com",
+    "name": "Admin User",
+    "password": "SecurePass123!",
+    "role": "ADMIN"
+}
+
+try:
+    response = requests.post(
+        f"{API_BASE_URL}/auth/signup",
+        json=payload
+    )
+    
+    print(f"\nStatus Code: {response.status_code}")
+    print(f"\nResponse:")
+    print(json.dumps(response.json(), indent=2))
+    
+    if response.status_code == 201:
+        print("\n✅ Account created successfully!")
+        print("\nYou can now login with:")
+        print(f"Email: {payload['email']}")
+        print(f"Password: {payload['password']}")
+    else:
+        print("\n❌ Failed to create account!")
+        
+except Exception as e:
+    print(f"\n❌ Error: {e}")
+    print("\nMake sure the backend is running on http://localhost:8000")

backend/database_schema.sql

@@ -0,0 +1,36 @@
+-- Stock Analysis Database Schema
+-- Run this SQL in your Supabase SQL Editor
+
+-- Create user role enum
+CREATE TYPE user_role AS ENUM ('ADMIN', 'STAFF');
+
+-- Create users table
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    email VARCHAR(255) UNIQUE NOT NULL,
+    name VARCHAR(255) NOT NULL,
+    password_hash VARCHAR(255) NOT NULL,
+    role user_role NOT NULL DEFAULT 'STAFF',
+    is_active BOOLEAN DEFAULT TRUE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create index on email for faster lookups
+CREATE INDEX idx_users_email ON users(email);
+
+-- Create function to automatically update updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = NOW();
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Create trigger to call the function before update
+CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
+FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Verify table creation
+SELECT table_name FROM information_schema.tables WHERE table_schema = 'public';

backend/init_db.py

@@ -0,0 +1,14 @@
+"""
+Create database tables for SQLite.
+Run this once to initialize the database.
+"""
+from app.core.database import engine, Base
+from app.models.user import User
+
+print("Creating database tables...")
+
+# Create all tables
+Base.metadata.create_all(bind=engine)
+
+print("✅ Database tables created successfully!")
+print("You can now run the application.")

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+sqlalchemy==2.0.25
+psycopg2-binary==2.9.9
+pydantic==2.5.3
+pydantic-settings==2.1.0
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+python-multipart==0.0.6

backend/test_api.py

@@ -0,0 +1,70 @@
+"""
+Test script to verify the signup endpoint works.
+"""
+import requests
+import json
+
+API_BASE_URL = "http://localhost:8000"
+
+def test_signup():
+    """Test user signup."""
+    print("Testing signup endpoint...")
+    
+    payload = {
+        "email": "testuser@example.com",
+        "name": "Test User",
+        "password": "SecurePass123!",
+        "role": "STAFF"
+    }
+    
+    try:
+        response = requests.post(
+            f"{API_BASE_URL}/auth/signup",
+            json=payload
+        )
+        
+        print(f"Status Code: {response.status_code}")
+        print(f"Response: {json.dumps(response.json(), indent=2)}")
+        
+        if response.status_code == 201:
+            print("✅ Signup successful!")
+            return True
+        else:
+            print("❌ Signup failed!")
+            return False
+            
+    except Exception as e:
+        print(f"❌ Error: {e}")
+        return False
+
+def test_health():
+    """Test health endpoint."""
+    print("\nTesting health endpoint...")
+    
+    try:
+        response = requests.get(f"{API_BASE_URL}/health")
+        print(f"Status Code: {response.status_code}")
+        print(f"Response: {json.dumps(response.json(), indent=2)}")
+        
+        if response.status_code == 200:
+            print("✅ Backend is healthy!")
+            return True
+        else:
+            print("❌ Backend health check failed!")
+            return False
+            
+    except Exception as e:
+        print(f"❌ Error: {e}")
+        return False
+
+if __name__ == "__main__":
+    print("=" * 50)
+    print("API Test Script")
+    print("=" * 50)
+    
+    # Test health first
+    if test_health():
+        # Then test signup
+        test_signup()
+    else:
+        print("\n❌ Backend is not responding. Make sure it's running on port 8000.")

backend/test_stocks.py

@@ -0,0 +1,41 @@
+"""
+Test stock API endpoint
+"""
+import requests
+
+API_BASE_URL = "http://localhost:8000"
+
+# First, login to get token
+print("=" * 50)
+print("Testing Stock API")
+print("=" * 50)
+
+# Login
+print("\n1. Logging in...")
+login_response = requests.post(
+    f"{API_BASE_URL}/auth/login",
+    json={"email": "admin@test.com", "password": "SecurePass123!"}
+)
+
+if login_response.status_code == 200:
+    token = login_response.json()["access_token"]
+    print("✅ Login successful!")
+    
+    # Test stock endpoint
+    print("\n2. Fetching popular stocks...")
+    stock_response = requests.get(
+        f"{API_BASE_URL}/stocks/popular",
+        headers={"Authorization": f"Bearer {token}"}
+    )
+    
+    print(f"Status Code: {stock_response.status_code}")
+    
+    if stock_response.status_code == 200:
+        data = stock_response.json()
+        print(f"✅ Got {data['count']} stocks!")
+        for stock in data['stocks']:
+            print(f"\n{stock['symbol']}: ${stock['price']} ({stock['change_percent']:+.2f}%)")
+    else:
+        print(f"❌ Error: {stock_response.text}")
+else:
+    print(f"❌ Login failed: {login_response.text}")

code_quality_agent.py

@@ -0,0 +1,293 @@
+"""
+Code Quality Agent - Main orchestration script.
+
+This is the main entry point for the automated code quality agent.
+It coordinates all modules and generates comprehensive quality reports.
+
+Usage:
+    python code_quality_agent.py [options]
+    
+Options:
+    --dry-run           Preview changes without applying them
+    --module <name>     Run specific module only (clean, security, connections, test)
+    --all               Run all modules (default)
+    --config <path>     Path to custom config file
+    --help              Show this help message
+"""
+
+import sys
+import argparse
+import logging
+import yaml
+from pathlib import Path
+from typing import Dict, Any
+
+from modules import (
+    CodeCleaner,
+    VulnerabilityChecker,
+    ConnectionTester,
+    CodeTester,
+    ReportGenerator
+)
+
+
+class CodeQualityAgent:
+    """Main code quality agent orchestrator."""
+    
+    def __init__(self, config_path: str = "agent_config.yaml"):
+        """
+        Initialize the code quality agent.
+        
+        Args:
+            config_path: Path to configuration file
+        """
+        self.project_root = Path(__file__).parent
+        self.config = self._load_config(config_path)
+        self._setup_logging()
+        
+        self.results = {}
+    
+    def _load_config(self, config_path: str) -> Dict[str, Any]:
+        """Load configuration from YAML file."""
+        config_file = self.project_root / config_path
+        
+        if not config_file.exists():
+            print(f"Warning: Config file {config_path} not found. Using defaults.")
+            return self._get_default_config()
+        
+        try:
+            with open(config_file, 'r') as f:
+                config = yaml.safe_load(f)
+            return config
+        except Exception as e:
+            print(f"Error loading config: {e}. Using defaults.")
+            return self._get_default_config()
+    
+    def _get_default_config(self) -> Dict[str, Any]:
+        """Get default configuration."""
+        return {
+            "general": {
+                "project_name": "Project",
+                "project_root": ".",
+                "output_dir": "quality_reports",
+                "log_level": "INFO"
+            },
+            "modules": {
+                "code_cleaner": True,
+                "vulnerability_checker": True,
+                "connection_tester": True,
+                "code_tester": True
+            },
+            "code_cleaner": {"enabled": True},
+            "vulnerability_checker": {"enabled": True},
+            "connection_tester": {"enabled": True},
+            "code_tester": {"enabled": True},
+            "reporting": {
+                "generate_html": True,
+                "generate_json": True,
+                "generate_console_summary": True
+            }
+        }
+    
+    def _setup_logging(self):
+        """Setup logging configuration."""
+        log_level = self.config.get("general", {}).get("log_level", "INFO")
+        output_dir = self.project_root / self.config.get("general", {}).get("output_dir", "quality_reports")
+        
+        # Create output directory if it doesn't exist
+        output_dir.mkdir(exist_ok=True)
+        
+        logging.basicConfig(
+            level=getattr(logging, log_level),
+            format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+            handlers=[
+                logging.StreamHandler(sys.stdout),
+                logging.FileHandler(output_dir / "agent.log")
+            ]
+        )
+        
+        self.logger = logging.getLogger(__name__)
+    
+    def run_all(self, dry_run: bool = False):
+        """
+        Run all enabled modules.
+        
+        Args:
+            dry_run: If True, preview changes without applying them
+        """
+        self.logger.info("="*70)
+        self.logger.info("CODE QUALITY AGENT STARTED")
+        self.logger.info("="*70)
+        
+        project_name = self.config.get("general", {}).get("project_name", "Project")
+        self.logger.info(f"Project: {project_name}")
+        self.logger.info(f"Dry run: {dry_run}")
+        
+        # Run Code Cleaner
+        if self.config.get("modules", {}).get("code_cleaner", True):
+            self.logger.info("\n" + "-"*70)
+            self.logger.info("MODULE: Code Cleaner")
+            self.logger.info("-"*70)
+            cleaner = CodeCleaner(
+                self.config.get("code_cleaner", {}),
+                str(self.project_root)
+            )
+            self.results["code_cleaner"] = cleaner.run(dry_run=dry_run)
+            self.logger.info(cleaner.get_summary())
+        
+        # Run Vulnerability Checker
+        if self.config.get("modules", {}).get("vulnerability_checker", True):
+            self.logger.info("\n" + "-"*70)
+            self.logger.info("MODULE: Vulnerability Checker")
+            self.logger.info("-"*70)
+            vuln_checker = VulnerabilityChecker(
+                self.config.get("vulnerability_checker", {}),
+                str(self.project_root)
+            )
+            self.results["vulnerability_checker"] = vuln_checker.run()
+            self.logger.info(vuln_checker.get_summary())
+        
+        # Run Connection Tester
+        if self.config.get("modules", {}).get("connection_tester", True):
+            self.logger.info("\n" + "-"*70)
+            self.logger.info("MODULE: Connection Tester")
+            self.logger.info("-"*70)
+            conn_tester = ConnectionTester(
+                self.config.get("connection_tester", {}),
+                str(self.project_root)
+            )
+            self.results["connection_tester"] = conn_tester.run()
+            self.logger.info(conn_tester.get_summary())
+        
+        # Run Code Tester
+        if self.config.get("modules", {}).get("code_tester", True):
+            self.logger.info("\n" + "-"*70)
+            self.logger.info("MODULE: Code Tester")
+            self.logger.info("-"*70)
+            code_tester = CodeTester(
+                self.config.get("code_tester", {}),
+                str(self.project_root)
+            )
+            self.results["code_tester"] = code_tester.run()
+            self.logger.info(code_tester.get_summary())
+        
+        # Generate Reports
+        self.logger.info("\n" + "-"*70)
+        self.logger.info("Generating Reports")
+        self.logger.info("-"*70)
+        report_gen = ReportGenerator(
+            self.config.get("reporting", {}),
+            str(self.project_root)
+        )
+        report_gen.generate_reports(self.results)
+        
+        self.logger.info("\n" + "="*70)
+        self.logger.info("CODE QUALITY AGENT COMPLETED")
+        self.logger.info("="*70)
+    
+    def run_module(self, module_name: str, dry_run: bool = False):
+        """
+        Run a specific module.
+        
+        Args:
+            module_name: Name of module to run (clean, security, connections, test)
+            dry_run: If True, preview changes without applying them
+        """
+        self.logger.info(f"Running module: {module_name}")
+        
+        if module_name == "clean":
+            cleaner = CodeCleaner(
+                self.config.get("code_cleaner", {}),
+                str(self.project_root)
+            )
+            self.results["code_cleaner"] = cleaner.run(dry_run=dry_run)
+            self.logger.info(cleaner.get_summary())
+            
+        elif module_name == "security":
+            vuln_checker = VulnerabilityChecker(
+                self.config.get("vulnerability_checker", {}),
+                str(self.project_root)
+            )
+            self.results["vulnerability_checker"] = vuln_checker.run()
+            self.logger.info(vuln_checker.get_summary())
+            
+        elif module_name == "connections":
+            conn_tester = ConnectionTester(
+                self.config.get("connection_tester", {}),
+                str(self.project_root)
+            )
+            self.results["connection_tester"] = conn_tester.run()
+            self.logger.info(conn_tester.get_summary())
+            
+        elif module_name == "test":
+            code_tester = CodeTester(
+                self.config.get("code_tester", {}),
+                str(self.project_root)
+            )
+            self.results["code_tester"] = code_tester.run()
+            self.logger.info(code_tester.get_summary())
+            
+        else:
+            self.logger.error(f"Unknown module: {module_name}")
+            return
+        
+        # Generate report for single module
+        report_gen = ReportGenerator(
+            self.config.get("reporting", {}),
+            str(self.project_root)
+        )
+        report_gen.generate_reports(self.results)
+
+
+def main():
+    """Main entry point."""
+    parser = argparse.ArgumentParser(
+        description="Automated Code Quality Agent",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  python code_quality_agent.py --all
+  python code_quality_agent.py --dry-run
+  python code_quality_agent.py --module clean
+  python code_quality_agent.py --module security
+        """
+    )
+    
+    parser.add_argument(
+        "--dry-run",
+        action="store_true",
+        help="Preview changes without applying them"
+    )
+    
+    parser.add_argument(
+        "--module",
+        choices=["clean", "security", "connections", "test"],
+        help="Run specific module only"
+    )
+    
+    parser.add_argument(
+        "--all",
+        action="store_true",
+        help="Run all modules (default)"
+    )
+    
+    parser.add_argument(
+        "--config",
+        default="agent_config.yaml",
+        help="Path to custom config file"
+    )
+    
+    args = parser.parse_args()
+    
+    # Create agent
+    agent = CodeQualityAgent(config_path=args.config)
+    
+    # Run agent
+    if args.module:
+        agent.run_module(args.module, dry_run=args.dry_run)
+    else:
+        agent.run_all(dry_run=args.dry_run)
+
+
+if __name__ == "__main__":
+    main()

frontend/README.md

@@ -0,0 +1,260 @@
+# Frontend - Stock Analysis Authentication UI
+
+A **visually stunning authentication interface** with dark cyberpunk aesthetics.
+
+## 🎨 Design Features
+
+- **Dark Cyberpunk Theme** - Deep space blue with neon cyan/green accents
+- **Unique Typography** - Syne, JetBrains Mono, Orbitron (NO generic fonts!)
+- **Animated Gradient Background** - Smooth color shifting
+- **Floating Particles** - CSS-only geometric animations
+- **Glassmorphism** - Blurred card effects
+- **Glowing Inputs** - Neon border effects on focus
+- **Smooth Micro-interactions** - 60fps animations
+- **Fully Responsive** - Mobile, tablet, desktop
+
+## 📁 Structure
+
+```
+frontend/
+├── index.html              # Login/Signup page
+├── dashboard.html          # Protected dashboard
+├── css/
+│   ├── variables.css       # Design tokens
+│   ├── base.css            # Reset & typography
+│   ├── animations.css      # Keyframe animations
+│   └── auth.css            # Auth page styles
+└── js/
+    ├── config.js           # API configuration
+    ├── utils.js            # Helper functions
+    └── auth.js             # Authentication logic
+```
+
+## 🚀 Quick Start
+
+### 1. Make sure backend is running
+
+```bash
+cd ../backend
+uvicorn app.main:app --reload
+```
+
+Backend should be running on `http://localhost:8000`
+
+### 2. Open the frontend
+
+**Option A: Using Live Server (VS Code)**
+1. Install "Live Server" extension
+2. Right-click `index.html`
+3. Select "Open with Live Server"
+
+**Option B: Direct File**
+1. Simply open `index.html` in your browser
+2. File path: `E:\VsCode\New_PProject\Stock_anaylsis\frontend\index.html`
+
+## 🎯 Features
+
+### Authentication Pages
+
+**Login Mode** (Default)
+- Email + Password
+- Smooth form validation
+- Loading states
+- Error messages with shake animation
+
+**Signup Mode** (Toggle)
+- Email + Name + Password + Role
+- Role selector (Staff/Admin)
+- Auto-login after signup
+- Animated form expansion
+
+### Protected Dashboard
+
+- Requires valid JWT token
+- Auto-redirects if not authenticated
+- Displays user info
+- Logout functionality
+- Placeholder for portfolio features
+
+## 🔐 How It Works
+
+### Authentication Flow
+
+1. **User enters credentials** → Form validation
+2. **Submit** → API call to backend
+3. **Success** → JWT token saved to localStorage
+4. **Redirect** → Dashboard page
+5. **Dashboard loads** → Verifies token with `/auth/me`
+6. **Token valid** → Display user info
+7. **Token invalid** → Redirect to login
+
+### Token Management
+
+```javascript
+// Token stored in localStorage
+localStorage.setItem('stock_analysis_token', token);
+
+// Used in API calls
+fetch(`${API_BASE_URL}/auth/me`, {
+  headers: {
+    'Authorization': `Bearer ${token}`
+  }
+});
+```
+
+## 🎨 Design System
+
+### Colors
+
+```css
+--bg-primary: #0a0e1a;       /* Deep space blue */
+--accent-cyan: #00f0ff;      /* Primary accent */
+--accent-green: #39ff14;     /* Success */
+--accent-purple: #b026ff;    /* Hover */
+--accent-red: #ff0055;       /* Errors */
+```
+
+### Typography
+
+```css
+--font-heading: 'Syne'           /* Bold geometric */
+--font-body: 'JetBrains Mono'    /* Monospace */
+--font-accent: 'Orbitron'        /* Futuristic */
+```
+
+### Animations
+
+- **Page Load**: Staggered fadeInUp (0.1s delay each)
+- **Input Focus**: Glow + lift effect
+- **Button Hover**: Glow expand + lift
+- **Form Toggle**: Smooth opacity transition
+- **Error**: Shake animation
+- **Background**: Infinite gradient shift
+
+## 📱 Responsive Breakpoints
+
+- **Desktop** (1024px+): Side-by-side layout
+- **Tablet** (768px-1023px): Stacked layout
+- **Mobile** (< 768px): Full-screen card
+
+## 🧪 Testing
+
+### Test Login
+
+1. Open `index.html`
+2. Use credentials from backend signup
+3. Click "Sign In"
+4. Should redirect to dashboard
+
+### Test Signup
+
+1. Click "Create one"
+2. Fill all fields
+3. Select role (Staff/Admin)
+4. Click "Sign Up"
+5. Should auto-login and redirect
+
+### Test Protected Route
+
+1. Open `dashboard.html` directly (no login)
+2. Should redirect to `index.html`
+3. Login first
+4. Then access dashboard
+5. Should show user info
+
+### Test Token Persistence
+
+1. Login successfully
+2. Close browser
+3. Reopen `index.html`
+4. Should auto-redirect to dashboard (token still valid)
+
+### Test Logout
+
+1. On dashboard, click "Logout"
+2. Should clear token
+3. Should redirect to login
+
+## 🎭 Animation Showcase
+
+### Page Load Sequence
+
+1. Background gradient fades in (0s)
+2. Floating particles appear (0.2s)
+3. Auth card scales in (0.8s)
+4. Title fades in (1s)
+5. Form fields stagger in (1.1s - 1.5s)
+
+### Micro-interactions
+
+- **Input focus**: Cyan glow + 2px lift
+- **Button hover**: Shadow expand + 3px lift
+- **Form submit**: Button → spinner
+- **Error**: Red glow + horizontal shake
+- **Success**: Green flash
+
+## 🔧 Configuration
+
+### Change API URL
+
+Edit `js/config.js`:
+
+```javascript
+const API_BASE_URL = 'http://localhost:8000';
+```
+
+### Customize Colors
+
+Edit `css/variables.css`:
+
+```css
+:root {
+  --accent-cyan: #00f0ff;  /* Change to your color */
+}
+```
+
+## 🌟 Highlights
+
+### What Makes This Unique
+
+✅ **NOT generic AI design** - Custom cyberpunk aesthetic  
+✅ **Distinctive fonts** - Syne, JetBrains Mono, Orbitron  
+✅ **Bold color choices** - Neon accents on dark backgrounds  
+✅ **Atmospheric backgrounds** - Animated gradients + particles  
+✅ **Smooth 60fps animations** - CSS-only, performant  
+✅ **Production-ready** - Full error handling, validation  
+
+### Portfolio Talking Points
+
+> "I designed and built a custom authentication UI with a dark cyberpunk aesthetic, featuring animated gradient backgrounds, glassmorphism effects, and smooth micro-interactions. The interface uses vanilla JavaScript for JWT token management and API integration, with a fully responsive design that works across all devices."
+
+## 📝 Next Steps
+
+- [ ] Add password strength indicator
+- [ ] Add "Remember me" checkbox
+- [ ] Add "Forgot password" flow
+- [ ] Add social login buttons
+- [ ] Add email verification
+- [ ] Build portfolio management features
+
+## 🐛 Troubleshooting
+
+**Styles not loading?**
+- Check file paths in HTML
+- Ensure all CSS files exist
+
+**API calls failing?**
+- Verify backend is running on port 8000
+- Check CORS settings in backend
+
+**Animations not smooth?**
+- Use modern browser (Chrome, Firefox, Edge)
+- Check hardware acceleration enabled
+
+**Token not persisting?**
+- Check browser localStorage is enabled
+- Check for private/incognito mode
+
+---
+
+**Built with ❤️ and attention to detail**

frontend/css/animations.css

@@ -0,0 +1,177 @@
+/* Keyframe Animations */
+
+/* Fade In Up - Staggered element reveals */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Glow Pulse - Pulsing glow effect */
+@keyframes glowPulse {
+
+    0%,
+    100% {
+        box-shadow: var(--glow-cyan);
+    }
+
+    50% {
+        box-shadow: var(--glow-cyan-strong);
+    }
+}
+
+/* Gradient Shift - Animated background */
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* Float Particle - Floating geometric shapes */
+@keyframes floatParticle {
+
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+
+    25% {
+        transform: translate(10px, -10px) rotate(90deg);
+    }
+
+    50% {
+        transform: translate(0, -20px) rotate(180deg);
+    }
+
+    75% {
+        transform: translate(-10px, -10px) rotate(270deg);
+    }
+}
+
+/* Shake - Error animation */
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-5px);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(5px);
+    }
+}
+
+/* Spin - Loading spinner */
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Slide In Right */
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Slide In Left */
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Scale In */
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Glow Expand - Button hover effect */
+@keyframes glowExpand {
+    from {
+        box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+    }
+
+    to {
+        box-shadow: 0 0 25px rgba(0, 240, 255, 0.6), 0 0 50px rgba(0, 240, 255, 0.3);
+    }
+}
+
+/* Utility Animation Classes */
+.animate-fadeInUp {
+    animation: fadeInUp var(--transition-smooth) ease-out forwards;
+}
+
+.animate-delay-1 {
+    animation-delay: 0.1s;
+}
+
+.animate-delay-2 {
+    animation-delay: 0.2s;
+}
+
+.animate-delay-3 {
+    animation-delay: 0.3s;
+}
+
+.animate-delay-4 {
+    animation-delay: 0.4s;
+}
+
+.animate-delay-5 {
+    animation-delay: 0.5s;
+}
+
+.animate-delay-6 {
+    animation-delay: 0.6s;
+}

frontend/css/auth.css

@@ -0,0 +1,402 @@
+/* Authentication Page Styles */
+
+/* Main Container */
+.auth-container {
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Left Side - Animated Background */
+.auth-bg {
+    position: relative;
+    background: var(--gradient-bg);
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+/* Grid Overlay */
+.auth-bg::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+        linear-gradient(var(--accent-cyan) 1px, transparent 1px),
+        linear-gradient(90deg, var(--accent-cyan) 1px, transparent 1px);
+    background-size: 50px 50px;
+    opacity: 0.03;
+    animation: fadeInUp 1s ease-out;
+}
+
+/* Floating Particles */
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: var(--accent-cyan);
+    border-radius: 50%;
+    box-shadow: var(--glow-cyan);
+    animation: floatParticle 20s infinite ease-in-out;
+}
+
+.particle:nth-child(1) {
+    top: 20%;
+    left: 20%;
+    animation-delay: 0s;
+    animation-duration: 15s;
+}
+
+.particle:nth-child(2) {
+    top: 60%;
+    left: 30%;
+    animation-delay: 2s;
+    animation-duration: 18s;
+    background: var(--accent-green);
+    box-shadow: var(--glow-green);
+}
+
+.particle:nth-child(3) {
+    top: 40%;
+    left: 70%;
+    animation-delay: 4s;
+    animation-duration: 22s;
+}
+
+.particle:nth-child(4) {
+    top: 80%;
+    left: 50%;
+    animation-delay: 1s;
+    animation-duration: 20s;
+    background: var(--accent-purple);
+}
+
+.particle:nth-child(5) {
+    top: 30%;
+    left: 80%;
+    animation-delay: 3s;
+    animation-duration: 16s;
+    background: var(--accent-green);
+    box-shadow: var(--glow-green);
+}
+
+/* Brand Section */
+.brand-section {
+    z-index: 10;
+    text-align: center;
+    padding: var(--space-xl);
+    opacity: 0;
+    animation: fadeInUp 0.8s ease-out 0.4s forwards;
+}
+
+.brand-logo {
+    font-family: var(--font-accent);
+    font-size: 4rem;
+    font-weight: 900;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: var(--space-md);
+    letter-spacing: 0.05em;
+}
+
+.brand-tagline {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+/* Right Side - Auth Form */
+.auth-form-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xl);
+    background: var(--bg-secondary);
+    position: relative;
+}
+
+/* Decorative Elements */
+.auth-form-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    opacity: 0;
+    animation: slideInRight 0.6s ease-out 0.6s forwards;
+}
+
+/* Auth Card */
+.auth-card {
+    width: 100%;
+    max-width: 480px;
+    background: var(--bg-overlay);
+    backdrop-filter: blur(20px);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid rgba(0, 240, 255, 0.1);
+    opacity: 0;
+    animation: scaleIn 0.6s ease-out 0.8s forwards;
+}
+
+/* Auth Header */
+.auth-header {
+    margin-bottom: var(--space-lg);
+    opacity: 0;
+    animation: fadeInUp 0.6s ease-out 1s forwards;
+}
+
+.auth-title {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-xs);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.auth-subtitle {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+/* Form Groups */
+.form-group {
+    margin-bottom: var(--space-md);
+    opacity: 0;
+}
+
+.form-group:nth-child(1) {
+    animation: fadeInUp 0.5s ease-out 1.1s forwards;
+}
+
+.form-group:nth-child(2) {
+    animation: fadeInUp 0.5s ease-out 1.2s forwards;
+}
+
+.form-group:nth-child(3) {
+    animation: fadeInUp 0.5s ease-out 1.3s forwards;
+}
+
+.form-group:nth-child(4) {
+    animation: fadeInUp 0.5s ease-out 1.4s forwards;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: var(--space-xs);
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.form-input {
+    width: 100%;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--bg-tertiary);
+    border: 2px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    transition: all var(--transition-smooth);
+    outline: none;
+}
+
+.form-input::placeholder {
+    color: var(--text-muted);
+}
+
+.form-input:focus {
+    border-color: var(--accent-cyan);
+    box-shadow: var(--glow-cyan);
+    transform: translateY(-2px);
+}
+
+.form-input:invalid:not(:placeholder-shown) {
+    border-color: var(--accent-red);
+}
+
+/* Role Selector */
+.role-selector {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-sm);
+}
+
+.role-option {
+    position: relative;
+}
+
+.role-option input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+}
+
+.role-label {
+    display: block;
+    padding: var(--space-sm);
+    background: var(--bg-tertiary);
+    border: 2px solid transparent;
+    border-radius: var(--radius-md);
+    text-align: center;
+    cursor: pointer;
+    transition: all var(--transition-smooth);
+    font-weight: 500;
+}
+
+.role-option input[type="radio"]:checked+.role-label {
+    border-color: var(--accent-cyan);
+    background: rgba(0, 240, 255, 0.1);
+    box-shadow: var(--glow-cyan);
+}
+
+.role-label:hover {
+    border-color: var(--accent-purple);
+    transform: translateY(-2px);
+}
+
+/* Submit Button */
+.btn-submit {
+    width: 100%;
+    padding: var(--space-md);
+    background: var(--gradient-primary);
+    color: var(--text-primary);
+    font-weight: 700;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-smooth);
+    position: relative;
+    overflow: hidden;
+    opacity: 0;
+    animation: fadeInUp 0.5s ease-out 1.5s forwards;
+}
+
+.btn-submit::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+}
+
+.btn-submit:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.4);
+}
+
+.btn-submit:hover::before {
+    transform: translateX(100%);
+}
+
+.btn-submit:active {
+    transform: translateY(-1px);
+}
+
+.btn-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Loading Spinner */
+.spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-right: var(--space-xs);
+}
+
+/* Toggle Auth Mode */
+.auth-toggle {
+    text-align: center;
+    margin-top: var(--space-lg);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    opacity: 0;
+    animation: fadeInUp 0.5s ease-out 1.6s forwards;
+}
+
+.auth-toggle-link {
+    color: var(--accent-cyan);
+    font-weight: 600;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+}
+
+.auth-toggle-link:hover {
+    color: var(--accent-purple);
+    text-decoration: underline;
+}
+
+/* Alert Messages */
+.alert {
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-md);
+    font-size: 0.9rem;
+    font-weight: 500;
+    animation: slideInRight 0.3s ease-out;
+}
+
+.alert-error {
+    background: rgba(255, 0, 85, 0.1);
+    border: 1px solid var(--accent-red);
+    color: var(--accent-red);
+    animation: shake 0.5s ease-out, slideInRight 0.3s ease-out;
+}
+
+.alert-success {
+    background: rgba(57, 255, 20, 0.1);
+    border: 1px solid var(--accent-green);
+    color: var(--accent-green);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .auth-container {
+        grid-template-columns: 1fr;
+    }
+
+    .auth-bg {
+        display: none;
+    }
+
+    .auth-form-container {
+        min-height: 100vh;
+    }
+}
+
+@media (max-width: 640px) {
+    .auth-card {
+        padding: var(--space-lg);
+    }
+
+    .auth-title {
+        font-size: 2rem;
+    }
+
+    .brand-logo {
+        font-size: 3rem;
+    }
+}

frontend/css/base.css

@@ -0,0 +1,127 @@
+/* CSS Reset & Base Styles */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background: var(--bg-primary);
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-heading);
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: var(--space-sm);
+}
+
+h1 {
+    font-size: 3rem;
+    letter-spacing: -0.02em;
+}
+
+h2 {
+    font-size: 2rem;
+    letter-spacing: -0.01em;
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+p {
+    margin-bottom: var(--space-sm);
+}
+
+a {
+    color: var(--accent-cyan);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--accent-purple);
+}
+
+/* Form Elements */
+input,
+button,
+select,
+textarea {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    outline: none;
+}
+
+/* Utility Classes */
+.text-center {
+    text-align: center;
+}
+
+.text-muted {
+    color: var(--text-muted);
+}
+
+.text-secondary {
+    color: var(--text-secondary);
+}
+
+.mb-sm {
+    margin-bottom: var(--space-sm);
+}
+
+.mb-md {
+    margin-bottom: var(--space-md);
+}
+
+.mb-lg {
+    margin-bottom: var(--space-lg);
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-cyan);
+    border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-purple);
+}

frontend/css/variables.css

@@ -0,0 +1,58 @@
+:root {
+  /* Color Palette - Dark Cyberpunk Theme */
+  --bg-primary: #0a0e1a;
+  --bg-secondary: #141b2d;
+  --bg-tertiary: #1a2332;
+  --bg-overlay: rgba(20, 27, 45, 0.85);
+  
+  /* Accent Colors */
+  --accent-cyan: #00f0ff;
+  --accent-green: #39ff14;
+  --accent-purple: #b026ff;
+  --accent-red: #ff0055;
+  --accent-orange: #ff6b35;
+  
+  /* Text Colors */
+  --text-primary: #e8edf5;
+  --text-secondary: #8b95a8;
+  --text-muted: #4a5568;
+  
+  /* Glow Effects */
+  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.5);
+  --glow-cyan-strong: 0 0 30px rgba(0, 240, 255, 0.8);
+  --glow-green: 0 0 20px rgba(57, 255, 20, 0.5);
+  --glow-red: 0 0 20px rgba(255, 0, 85, 0.5);
+  
+  /* Typography */
+  --font-heading: 'Syne', sans-serif;
+  --font-body: 'JetBrains Mono', monospace;
+  --font-accent: 'Orbitron', sans-serif;
+  
+  /* Spacing */
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  
+  /* Transitions */
+  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Shadows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+  
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+  --gradient-secondary: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-cyan) 100%);
+  --gradient-bg: linear-gradient(135deg, #0a0e1a 0%, #141b2d 50%, #1a2332 100%);
+}

frontend/dashboard.html

@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>STOCKLYZE - Dashboard</title>
+  
+  <!-- Google Fonts -->
+  <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=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+  
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+      min-height: 100vh;
+      position: relative;
+      overflow-x: hidden;
+    }
+
+    /* Animated Gradient Blobs */
+    .gradient-blob {
+      position: fixed;
+      width: 500px;
+      height: 500px;
+      background: radial-gradient(circle, rgba(0, 200, 180, 0.3) 0%, rgba(0, 150, 255, 0.2) 50%, transparent 70%);
+      border-radius: 50%;
+      filter: blur(80px);
+      animation: float 10s ease-in-out infinite;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .gradient-blob:nth-child(1) {
+      top: -150px;
+      right: -150px;
+    }
+
+    .gradient-blob:nth-child(2) {
+      bottom: -150px;
+      left: -150px;
+      animation-delay: 5s;
+      background: radial-gradient(circle, rgba(100, 200, 255, 0.3) 0%, rgba(0, 180, 200, 0.2) 50%, transparent 70%);
+    }
+
+    @keyframes float {
+      0%, 100% {
+        transform: translate(0, 0) scale(1);
+      }
+      50% {
+        transform: translate(30px, 30px) scale(1.05);
+      }
+    }
+
+    /* Header */
+    .header {
+      position: relative;
+      z-index: 10;
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
+      padding: 20px 40px;
+      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 40px;
+    }
+
+    .logo-section {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .logo-icon {
+      width: 45px;
+      height: 45px;
+      background: linear-gradient(135deg, #00c896 0%, #00a8cc 100%);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      box-shadow: 0 4px 12px rgba(0, 200, 150, 0.3);
+    }
+
+    .logo-text {
+      font-size: 28px;
+      font-weight: 800;
+      color: #1a1a2e;
+      font-family: 'Poppins', sans-serif;
+      letter-spacing: -1px;
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .refresh-btn {
+      padding: 12px 24px;
+      background: linear-gradient(135deg, #00c896 0%, #00a8cc 100%);
+      color: white;
+      border: none;
+      border-radius: 50px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 15px rgba(0, 200, 150, 0.3);
+      font-size: 14px;
+    }
+
+    .refresh-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 200, 150, 0.5);
+    }
+
+    .refresh-btn:active {
+      transform: translateY(0);
+    }
+
+    /* Profile Menu */
+    .profile-container {
+      position: relative;
+    }
+
+    .profile-btn {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #00c896 0%, #00a8cc 100%);
+      border: 3px solid white;
+      color: white;
+      font-size: 20px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 12px rgba(0, 200, 150, 0.3);
+    }
+
+    .profile-btn:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 200, 150, 0.5);
+    }
+
+    .profile-menu {
+      display: none;
+      position: absolute;
+      top: 60px;
+      right: 0;
+      background: white;
+      border-radius: 16px;
+      min-width: 200px;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+      z-index: 1000;
+    }
+
+    .profile-menu.active {
+      display: block;
+      animation: slideDown 0.3s ease;
+    }
+
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .profile-header {
+      padding: 15px 20px;
+      background: linear-gradient(135deg, #00c896 0%, #00a8cc 100%);
+      color: white;
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .menu-item {
+      width: 100%;
+      padding: 14px 20px;
+      background: transparent;
+      border: none;
+      color: #2c3e50;
+      text-align: left;
+      cursor: pointer;
+      font-weight: 500;
+      transition: background 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+    }
+
+    .menu-item:hover {
+      background: #f5f7fa;
+    }
+
+    .menu-item.logout {
+      color: #e74c3c;
+      border-top: 1px solid #e8ecf1;
+    }
+
+    .menu-item.logout:hover {
+      background: #fee;
+    }
+
+    /* Main Content */
+    .container {
+      position: relative;
+      z-index: 1;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 40px 40px;
+    }
+
+    .dashboard-header {
+      margin-bottom: 30px;
+    }
+
+    .page-title {
+      font-size: 36px;
+      font-weight: 800;
+      color: #1a1a2e;
+      margin-bottom: 10px;
+      font-family: 'Poppins', sans-serif;
+    }
+
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: rgba(0, 200, 150, 0.1);
+      border: 2px solid #00c896;
+      border-radius: 50px;
+      color: #00c896;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: #00c896;
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    /* Stock Cards Grid */
+    .stocks-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 24px;
+      margin-top: 30px;
+    }
+
+    .stock-card {
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 20px;
+      padding: 28px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+      transition: all 0.3s ease;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .stock-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, #00c896 0%, #00a8cc 100%);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+
+    .stock-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 12px 40px rgba(0, 200, 150, 0.2);
+    }
+
+    .stock-card:hover::before {
+      transform: scaleX(1);
+    }
+
+    .stock-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 20px;
+    }
+
+    .stock-symbol {
+      font-size: 28px;
+      font-weight: 800;
+      color: #1a1a2e;
+      font-family: 'Poppins', sans-serif;
+    }
+
+    .stock-trend-icon {
+      font-size: 24px;
+    }
+
+    .stock-name {
+      font-size: 13px;
+      color: #7f8c8d;
+      margin-bottom: 20px;
+      font-weight: 500;
+    }
+
+    .stock-price {
+      font-size: 40px;
+      font-weight: 800;
+      color: #1a1a2e;
+      margin-bottom: 12px;
+      font-family: 'Poppins', sans-serif;
+    }
+
+    .stock-change {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      border-radius: 50px;
+      font-size: 14px;
+      font-weight: 700;
+      margin-bottom: 16px;
+    }
+
+    .stock-change.positive {
+      background: rgba(0, 200, 150, 0.15);
+      color: #00c896;
+    }
+
+    .stock-change.negative {
+      background: rgba(231, 76, 60, 0.15);
+      color: #e74c3c;
+    }
+
+    .stock-meta {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 16px;
+      border-top: 2px solid #f5f7fa;
+    }
+
+    .meta-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .meta-label {
+      font-size: 11px;
+      color: #95a5a6;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 600;
+    }
+
+    .meta-value {
+      font-size: 14px;
+      color: #2c3e50;
+      font-weight: 600;
+    }
+
+    /* Loading State */
+    .loading {
+      text-align: center;
+      padding: 60px 20px;
+    }
+
+    .loading-spinner {
+      width: 50px;
+      height: 50px;
+      border: 4px solid #e8ecf1;
+      border-top-color: #00c896;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 20px;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .header {
+        padding: 15px 20px;
+      }
+
+      .container {
+        padding: 0 20px 20px;
+      }
+
+      .logo-text {
+        font-size: 22px;
+      }
+
+      .page-title {
+        font-size: 28px;
+      }
+
+      .stocks-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+
+      .refresh-btn {
+        padding: 10px 18px;
+        font-size: 13px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Animated Gradient Blobs -->
+  <div class="gradient-blob"></div>
+  <div class="gradient-blob"></div>
+
+  <!-- Header -->
+  <header class="header">
+    <div class="logo-section">
+      <div class="logo-icon">📈</div>
+      <div class="logo-text">STOCKLYZE</div>
+    </div>
+
+    <div class="header-actions">
+      <button class="refresh-btn" onclick="loadStocks()">
+        🔄 Refresh Data
+      </button>
+
+      <div class="profile-container">
+        <button class="profile-btn" onclick="toggleProfileMenu()" id="profile-btn">
+          👤
+        </button>
+
+        <div class="profile-menu" id="profile-menu">
+          <div class="profile-header">
+            Admin User
+          </div>
+          <button class="menu-item" onclick="window.location.href='portfolio.html'">
+            💼 My Portfolio
+          </button>
+          <button class="menu-item logout" onclick="logout()">
+            🚪 Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main class="container">
+    <div class="dashboard-header">
+      <h1 class="page-title">Stock Dashboard</h1>
+      <div class="status-badge" id="status-badge">
+        <span class="status-dot"></span>
+        <span id="status">Initializing...</span>
+      </div>
+    </div>
+
+    <div class="stocks-grid" id="stocks-grid">
+      <!-- Stock cards will be inserted here -->
+    </div>
+  </main>
+
+  <script>
+    console.log('🚀 Dashboard loaded!');
+    
+    const API_BASE_URL = 'http://localhost:8000';
+    const TOKEN_KEY = 'stock_analysis_token';
+    
+    const MOCK_STOCKS = [
+      { symbol: 'AAPL', name: 'Apple Inc.', price: 259.48, change: 1.19, change_percent: 0.46, volume: 52000000, market_cap: 3980000000000 },
+      { symbol: 'GOOGL', name: 'Alphabet Inc.', price: 338.0, change: -0.24, change_percent: -0.07, volume: 28000000, market_cap: 2100000000000 },
+      { symbol: 'MSFT', name: 'Microsoft Corporation', price: 430.29, change: -3.21, change_percent: -0.74, volume: 31000000, market_cap: 3200000000000 },
+      { symbol: 'TSLA', name: 'Tesla, Inc.', price: 430.41, change: 13.84, change_percent: 3.32, volume: 95000000, market_cap: 1370000000000 },
+      { symbol: 'AMZN', name: 'Amazon.com, Inc.', price: 239.3, change: -2.44, change_percent: -1.01, volume: 42000000, market_cap: 2480000000000 },
+      { symbol: 'META', name: 'Meta Platforms, Inc.', price: 612.75, change: 8.42, change_percent: 1.39, volume: 18500000, market_cap: 1560000000000 }
+    ];
+    
+    // Check authentication
+    if (!localStorage.getItem(TOKEN_KEY)) {
+      window.location.href = 'index.html';
+    }
+    
+    function displayStocks(stocks) {
+      console.log('📊 Displaying stocks:', stocks);
+      const grid = document.getElementById('stocks-grid');
+      
+      grid.innerHTML = stocks.map(stock => {
+        const isPositive = stock.change >= 0;
+        const changeClass = isPositive ? 'positive' : 'negative';
+        const changeSymbol = isPositive ? '+' : '';
+        const trendIcon = isPositive ? '📈' : '📉';
+        
+        return `
+          <div class="stock-card">
+            <div class="stock-header">
+              <div class="stock-symbol">${stock.symbol}</div>
+              <div class="stock-trend-icon">${trendIcon}</div>
+            </div>
+            <div class="stock-name">${stock.name}</div>
+            <div class="stock-price">$${stock.price.toFixed(2)}</div>
+            <div class="stock-change ${changeClass}">
+              ${changeSymbol}${stock.change_percent.toFixed(2)}% 
+              (${changeSymbol}$${Math.abs(stock.change).toFixed(2)})
+            </div>
+            <div class="stock-meta">
+              <div class="meta-item">
+                <span class="meta-label">Volume</span>
+                <span class="meta-value">${formatVolume(stock.volume)}</span>
+              </div>
+              <div class="meta-item">
+                <span class="meta-label">Market Cap</span>
+                <span class="meta-value">${formatMarketCap(stock.market_cap || 0)}</span>
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+      
+      console.log('✅ Cards rendered!');
+    }
+    
+    function formatVolume(volume) {
+      if (volume >= 1000000000) return (volume / 1000000000).toFixed(2) + 'B';
+      if (volume >= 1000000) return (volume / 1000000).toFixed(2) + 'M';
+      if (volume >= 1000) return (volume / 1000).toFixed(2) + 'K';
+      return volume.toString();
+    }
+    
+    function formatMarketCap(cap) {
+      if (cap >= 1000000000000) return '$' + (cap / 1000000000000).toFixed(2) + 'T';
+      if (cap >= 1000000000) return '$' + (cap / 1000000000).toFixed(2) + 'B';
+      if (cap >= 1000000) return '$' + (cap / 1000000).toFixed(2) + 'M';
+      return '$' + cap.toString();
+    }
+    
+    async function loadStocks() {
+      const statusEl = document.getElementById('status');
+      statusEl.textContent = 'Fetching live data...';
+      
+      try {
+        const token = localStorage.getItem(TOKEN_KEY);
+        
+        const stocksRes = await fetch(`${API_BASE_URL}/stocks/popular`, {
+          headers: { 'Authorization': `Bearer ${token}` }
+        });
+        
+        if (!stocksRes.ok) {
+          throw new Error('Failed to fetch stocks');
+        }
+        
+        const data = await stocksRes.json();
+        displayStocks(data.stocks);
+        statusEl.textContent = `Live data - Updated at ${new Date().toLocaleTimeString()}`;
+      } catch (error) {
+        console.error('Error:', error);
+        statusEl.textContent = 'Error loading live data - showing cached';
+        displayStocks(MOCK_STOCKS);
+      }
+    }
+    
+    function toggleProfileMenu() {
+      const menu = document.getElementById('profile-menu');
+      menu.classList.toggle('active');
+    }
+    
+    // Close menu when clicking outside
+    document.addEventListener('click', function(event) {
+      const menu = document.getElementById('profile-menu');
+      const btn = document.getElementById('profile-btn');
+      if (!btn.contains(event.target) && !menu.contains(event.target)) {
+        menu.classList.remove('active');
+      }
+    });
+    
+    function logout() {
+      localStorage.clear();
+      window.location.href = 'index.html';
+    }
+    
+    // Initialize
+    console.log('📊 Showing mock data...');
+    displayStocks(MOCK_STOCKS);
+    document.getElementById('status').textContent = 'Cached data - Click refresh for live prices';
+    
+    // Load real data after 1 second
+    setTimeout(loadStocks, 1000);
+  </script>
+</body>
+</html>

frontend/dashboard_direct.html

@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard - Stock Analysis</title>
+  
+  <!-- Google Fonts -->
+  <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=Syne:wght@700;800&family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+  
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="css/variables.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/animations.css">
+  
+  <style>
+    /* Dashboard Styles */
+    .dashboard-container {
+      min-height: 100vh;
+      background: var(--bg-primary);
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Header */
+    .dashboard-header {
+      background: var(--bg-secondary);
+      border-bottom: 2px solid var(--accent-cyan);
+      padding: var(--space-md) var(--space-xl);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      animation: slideInRight 0.6s ease-out;
+    }
+    
+    .dashboard-logo {
+      font-family: var(--font-accent);
+      font-size: 1.5rem;
+      font-weight: 900;
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .btn-logout {
+      padding: var(--space-xs) var(--space-md);
+      background: transparent;
+      border: 2px solid var(--accent-red);
+      color: var(--accent-red);
+      font-weight: 600;
+      font-size: 0.85rem;
+      border-radius: var(--radius-md);
+      transition: all var(--transition-smooth);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+    }
+    
+    .btn-logout:hover {
+      background: var(--accent-red);
+      color: var(--text-primary);
+      box-shadow: var(--glow-red);
+      transform: translateY(-2px);
+    }
+    
+    /* Main Content */
+    .dashboard-main {
+      flex: 1;
+      padding: var(--space-xl);
+      max-width: 1400px;
+      margin: 0 auto;
+      width: 100%;
+    }
+    
+    .welcome-section {
+      margin-bottom: var(--space-xl);
+      opacity: 0;
+      animation: fadeInUp 0.6s ease-out 0.2s forwards;
+    }
+    
+    .welcome-title {
+      font-size: 2.5rem;
+      margin-bottom: var(--space-sm);
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    /* Stock Cards Section */
+    .stocks-section {
+      opacity: 0;
+      animation: fadeInUp 0.6s ease-out 0.4s forwards;
+    }
+    
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-lg);
+      flex-wrap: wrap;
+      gap: var(--space-md);
+    }
+    
+    .section-title {
+      font-size: 1.8rem;
+      color: var(--accent-cyan);
+      font-family: var(--font-accent);
+    }
+    
+    .section-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+    }
+    
+    .last-updated {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    
+    .btn-refresh {
+      padding: var(--space-xs) var(--space-md);
+      background: transparent;
+      border: 2px solid var(--accent-cyan);
+      color: var(--accent-cyan);
+      font-weight: 600;
+      font-size: 0.85rem;
+      border-radius: var(--radius-md);
+      transition: all var(--transition-smooth);
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      cursor: pointer;
+    }
+    
+    .btn-refresh:hover:not(:disabled) {
+      background: var(--accent-cyan);
+      color: var(--bg-primary);
+      box-shadow: var(--glow-cyan);
+    }
+    
+    .btn-refresh:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    
+    .refresh-icon {
+      display: inline-block;
+      transition: transform 0.3s;
+    }
+    
+    .btn-refresh:hover:not(:disabled) .refresh-icon {
+      transform: rotate(180deg);
+    }
+    
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-xl);
+      color: var(--text-secondary);
+    }
+    
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid rgba(0, 240, 255, 0.2);
+      border-top-color: var(--accent-cyan);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: var(--space-md);
+    }
+    
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    
+    .stocks-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--space-lg);
+    }
+    
+    .stock-card {
+      background: var(--bg-secondary);
+      border: 1px solid rgba(0, 240, 255, 0.2);
+      border-radius: var(--radius-lg);
+      padding: var(--space-lg);
+      transition: all var(--transition-smooth);
+      cursor: pointer;
+    }
+    
+    .stock-card:hover {
+      border-color: var(--accent-cyan);
+      box-shadow: var(--glow-cyan);
+      transform: translateY(-5px);
+    }
+    
+    .stock-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-sm);
+    }
+    
+    .stock-symbol {
+      font-family: var(--font-accent);
+      font-size: 1.2rem;
+      font-weight: 900;
+      color: var(--text-primary);
+    }
+    
+    .stock-change {
+      font-weight: 700;
+      font-size: 0.9rem;
+      padding: 4px 8px;
+      border-radius: var(--radius-sm);
+    }
+    
+    .stock-change.positive {
+      color: var(--accent-green);
+      background: rgba(57, 255, 20, 0.1);
+    }
+    
+    .stock-change.negative {
+      color: var(--accent-red);
+      background: rgba(255, 0, 85, 0.1);
+    }
+    
+    .stock-name {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-md);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .stock-price {
+      font-family: var(--font-accent);
+      font-size: 2rem;
+      font-weight: 900;
+      color: var(--accent-cyan);
+      margin-bottom: var(--space-md);
+    }
+    
+    .stock-details {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-xs);
+      padding-top: var(--space-sm);
+      border-top: 1px solid rgba(0, 240, 255, 0.1);
+    }
+    
+    .stock-detail {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.85rem;
+    }
+    
+    .detail-label {
+      color: var(--text-secondary);
+    }
+    
+    .detail-value {
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    
+    .detail-value.positive {
+      color: var(--accent-green);
+    }
+    
+    .detail-value.negative {
+      color: var(--accent-red);
+    }
+  </style>
+</head>
+<body>
+  <div class="dashboard-container">
+    <!-- Header -->
+    <header class="dashboard-header">
+      <div class="dashboard-logo">STOCKLYZE</div>
+      <button class="btn-logout" onclick="handleLogout()">Logout</button>
+    </header>
+    
+    <!-- Main Content -->
+    <main class="dashboard-main">
+      <!-- Welcome Section -->
+      <section class="welcome-section">
+        <h1 class="welcome-title">Stock Dashboard</h1>
+        <p style="color: var(--text-secondary); font-size: 1.1rem;">Real-time market data</p>
+      </section>
+      
+      <!-- Stock Cards Section -->
+      <section class="stocks-section">
+        <div class="section-header">
+          <h2 class="section-title">📈 Popular Stocks</h2>
+          <div class="section-actions">
+            <span class="last-updated" id="last-updated">Loading...</span>
+            <button class="btn-refresh" onclick="loadStocks()" id="refresh-btn">
+              <span class="refresh-icon">↻</span> Refresh
+            </button>
+          </div>
+        </div>
+        
+        <div id="stocks-loading" class="loading-state">
+          <div class="spinner"></div>
+          <p>Fetching stock data...</p>
+        </div>
+        
+        <div class="stocks-grid" id="stocks-grid"></div>
+      </section>
+    </main>
+  </div>
+  
+  <!-- Scripts -->
+  <script src="js/config.js"></script>
+  <script>
+    const { API_BASE_URL, TOKEN_KEY } = window.CONFIG;
+    
+    // Auto-load stocks on page load
+    window.addEventListener('DOMContentLoaded', () => {
+      console.log('🚀 Page loaded, starting stock fetch...');
+      loadStocks();
+      // Auto-refresh every 60 seconds
+      setInterval(loadStocks, 60000);
+    });
+    
+    async function loadStocks() {
+      console.log('🔄 loadStocks() called');
+      const loadingEl = document.getElementById('stocks-loading');
+      const gridEl = document.getElementById('stocks-grid');
+      const refreshBtn = document.getElementById('refresh-btn');
+      
+      loadingEl.style.display = 'flex';
+      if (refreshBtn) refreshBtn.disabled = true;
+      
+      try {
+        // Step 1: Login
+        console.log('🔐 Logging in...');
+        const loginRes = await fetch(`${API_BASE_URL}/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            email: 'admin@test.com',
+            password: 'SecurePass123!'
+          })
+        });
+        
+        if (!loginRes.ok) throw new Error('Login failed');
+        
+        const { access_token } = await loginRes.json();
+        console.log('✅ Login successful');
+        
+        // Step 2: Fetch stocks
+        console.log('📡 Fetching stocks...');
+        const stocksRes = await fetch(`${API_BASE_URL}/stocks/popular`, {
+          headers: { 'Authorization': `Bearer ${access_token}` }
+        });
+        
+        if (!stocksRes.ok) throw new Error('Failed to fetch stocks');
+        
+        const data = await stocksRes.json();
+        console.log('✅ Got stocks:', data);
+        
+        // Step 3: Display
+        displayStocks(data.stocks);
+        updateLastUpdated();
+        loadingEl.style.display = 'none';
+        
+      } catch (error) {
+        console.error('❌ Error:', error);
+        loadingEl.style.display = 'none';
+        gridEl.innerHTML = `<p style="grid-column: 1/-1; text-align: center; color: var(--accent-red);">Error: ${error.message}</p>`;
+      } finally {
+        if (refreshBtn) refreshBtn.disabled = false;
+      }
+    }
+    
+    function displayStocks(stocks) {
+      const gridEl = document.getElementById('stocks-grid');
+      
+      gridEl.innerHTML = stocks.map(stock => {
+        const isPositive = stock.change >= 0;
+        const changeClass = isPositive ? 'positive' : 'negative';
+        const changeSymbol = isPositive ? '+' : '';
+        
+        return `
+          <div class="stock-card">
+            <div class="stock-header">
+              <div class="stock-symbol">${stock.symbol}</div>
+              <div class="stock-change ${changeClass}">
+                ${changeSymbol}${stock.change_percent.toFixed(2)}%
+              </div>
+            </div>
+            <div class="stock-name">${stock.name}</div>
+            <div class="stock-price">$${stock.price.toFixed(2)}</div>
+            <div class="stock-details">
+              <div class="stock-detail">
+                <span class="detail-label">Change:</span>
+                <span class="detail-value ${changeClass}">${changeSymbol}$${Math.abs(stock.change).toFixed(2)}</span>
+              </div>
+              <div class="stock-detail">
+                <span class="detail-label">Volume:</span>
+                <span class="detail-value">${formatVolume(stock.volume)}</span>
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+    
+    function formatVolume(volume) {
+      if (volume >= 1000000000) return (volume / 1000000000).toFixed(2) + 'B';
+      if (volume >= 1000000) return (volume / 1000000).toFixed(2) + 'M';
+      if (volume >= 1000) return (volume / 1000).toFixed(2) + 'K';
+      return volume.toString();
+    }
+    
+    function updateLastUpdated() {
+      const now = new Date();
+      document.getElementById('last-updated').textContent = `Last updated: ${now.toLocaleTimeString()}`;
+    }
+    
+    function handleLogout() {
+      localStorage.clear();
+      window.location.href = 'index.html';
+    }
+  </script>
+</body>
+</html>

frontend/index.html

@@ -0,0 +1,776 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>STOCKLYZE - Road to Financial Freedom</title>
+  
+  <!-- Google Fonts - Inter for Professional Fintech Look -->
+  <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  
+  <style>
+    /* ============================================
+       DESIGN SYSTEM - STOCKLYZE
+       Visual Personality: Clean • Trustworthy • Data-Smart • Premium
+       ============================================ */
+    
+    :root {
+      /* Color System - Professional Fintech Palette */
+      --primary-teal: #00b4a6;
+      --primary-teal-dark: #008c82;
+      --primary-teal-light: #00d4c3;
+      
+      /* Backgrounds */
+      --bg-primary: #fafbfc;
+      --bg-secondary: #f5f7fa;
+      --bg-white: #ffffff;
+      
+      /* Text Colors */
+      --text-primary: #1a2332;
+      --text-secondary: #6b7280;
+      --text-muted: #9ca3af;
+      
+      /* Supporting Colors */
+      --success: #10b981;
+      --success-light: #d1fae5;
+      --warning: #f59e0b;
+      --warning-light: #fef3c7;
+      --error: #ef4444;
+      --error-light: #fee2e2;
+      
+      /* Shadows - Subtle & Professional */
+      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
+      --shadow-glow: 0 0 0 3px rgba(0, 180, 166, 0.1);
+      
+      /* Spacing System - 8px Base */
+      --space-1: 8px;
+      --space-2: 16px;
+      --space-3: 24px;
+      --space-4: 32px;
+      --space-6: 48px;
+      --space-8: 64px;
+      
+      /* Border Radius */
+      --radius-sm: 8px;
+      --radius-md: 16px;
+      --radius-lg: 20px;
+      --radius-full: 9999px;
+      
+      /* Typography */
+      --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      background: var(--bg-primary);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* Subtle Gradient Blobs - Calm, Not Loud */
+    .gradient-blob {
+      position: absolute;
+      width: 600px;
+      height: 600px;
+      background: radial-gradient(circle, rgba(0, 180, 166, 0.08) 0%, rgba(0, 180, 166, 0.04) 50%, transparent 70%);
+      border-radius: 50%;
+      filter: blur(60px);
+      animation: float 12s ease-in-out infinite;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .gradient-blob:nth-child(1) {
+      top: -200px;
+      left: -200px;
+    }
+
+    .gradient-blob:nth-child(2) {
+      bottom: -200px;
+      right: -200px;
+      animation-delay: 6s;
+    }
+
+    @keyframes float {
+      0%, 100% {
+        transform: translate(0, 0) scale(1);
+      }
+      50% {
+        transform: translate(40px, 40px) scale(1.05);
+      }
+    }
+
+    /* Main Container */
+    .container {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      max-width: 1200px;
+      padding: var(--space-4);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-8);
+    }
+
+    /* Left Side - Branding */
+    .brand-section {
+      flex: 1;
+      max-width: 520px;
+    }
+
+    .brand-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: var(--space-6);
+    }
+
+    .brand-icon {
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      box-shadow: var(--shadow-md);
+    }
+
+    .brand-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+    }
+
+    .main-logo {
+      font-size: 64px;
+      font-weight: 800;
+      color: var(--text-primary);
+      margin-bottom: var(--space-2);
+      letter-spacing: -2px;
+      line-height: 1;
+    }
+
+    .main-tagline {
+      font-size: 24px;
+      color: var(--text-secondary);
+      font-weight: 500;
+      line-height: 1.4;
+      margin-bottom: var(--space-3);
+    }
+
+    .tagline-highlight {
+      color: var(--primary-teal);
+      font-weight: 700;
+    }
+
+    .security-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1);
+      padding: var(--space-1) var(--space-2);
+      background: var(--success-light);
+      border-radius: var(--radius-full);
+      color: var(--success);
+      font-size: 13px;
+      font-weight: 600;
+      margin-top: var(--space-3);
+    }
+
+    /* Right Side - Login Form */
+    .login-container {
+      flex: 0 0 440px;
+      background: var(--bg-white);
+      border-radius: var(--radius-lg);
+      padding: var(--space-6) var(--space-4);
+      box-shadow: var(--shadow-lg);
+      backdrop-filter: blur(10px);
+    }
+
+    .login-header {
+      margin-bottom: var(--space-4);
+    }
+
+    .login-title {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-1);
+    }
+
+    .login-subtitle {
+      font-size: 14px;
+      color: var(--text-secondary);
+      font-weight: 500;
+    }
+
+    /* Form Styles */
+    .form-group {
+      margin-bottom: var(--space-3);
+    }
+
+    .form-label {
+      display: block;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-1);
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 14px var(--space-2);
+      font-size: 15px;
+      font-weight: 500;
+      border: 2px solid #e5e7eb;
+      background: var(--bg-secondary);
+      border-radius: var(--radius-sm);
+      color: var(--text-primary);
+      outline: none;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      font-family: var(--font-family);
+    }
+
+    .form-input::placeholder {
+      color: var(--text-muted);
+      font-weight: 400;
+    }
+
+    .form-input:focus {
+      border-color: var(--primary-teal);
+      background: var(--bg-white);
+      box-shadow: var(--shadow-glow);
+    }
+
+    .form-input:hover:not(:focus) {
+      border-color: #d1d5db;
+    }
+
+    /* Input States */
+    .form-input.error {
+      border-color: var(--error);
+      background: var(--error-light);
+    }
+
+    .form-input.success {
+      border-color: var(--success);
+      background: var(--success-light);
+    }
+
+    /* Password Toggle */
+    .password-wrapper {
+      position: relative;
+    }
+
+    .password-toggle {
+      position: absolute;
+      right: var(--space-2);
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 18px;
+      padding: var(--space-1);
+      transition: color 0.2s;
+    }
+
+    .password-toggle:hover {
+      color: var(--text-secondary);
+    }
+
+    /* Submit Button */
+    .btn-submit {
+      width: 100%;
+      padding: 14px var(--space-3);
+      font-size: 15px;
+      font-weight: 700;
+      color: white;
+      background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
+      border: none;
+      border-radius: var(--radius-full);
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: var(--shadow-md);
+      margin-top: var(--space-2);
+      font-family: var(--font-family);
+    }
+
+    .btn-submit:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(0, 180, 166, 0.25);
+    }
+
+    .btn-submit:active {
+      transform: translateY(0);
+    }
+
+    .btn-submit:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Role Selector */
+    .role-selector {
+      display: flex;
+      gap: var(--space-2);
+    }
+
+    .role-option {
+      flex: 1;
+    }
+
+    .role-option input[type="radio"] {
+      display: none;
+    }
+
+    .role-label {
+      display: block;
+      padding: 12px var(--space-2);
+      text-align: center;
+      border: 2px solid #e5e7eb;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--text-secondary);
+      transition: all 0.2s;
+      background: var(--bg-secondary);
+    }
+
+    .role-option input[type="radio"]:checked + .role-label {
+      border-color: var(--primary-teal);
+      background: rgba(0, 180, 166, 0.08);
+      color: var(--primary-teal);
+    }
+
+    .role-label:hover {
+      border-color: var(--primary-teal);
+    }
+
+    /* Toggle Auth Mode */
+    .auth-toggle {
+      text-align: center;
+      margin-top: var(--space-3);
+      font-size: 14px;
+      color: var(--text-secondary);
+      font-weight: 500;
+    }
+
+    .auth-toggle-link {
+      color: var(--primary-teal);
+      font-weight: 700;
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+
+    .auth-toggle-link:hover {
+      color: var(--primary-teal-dark);
+      text-decoration: underline;
+    }
+
+    /* Alert Messages */
+    .alert {
+      padding: 12px var(--space-2);
+      border-radius: var(--radius-sm);
+      margin-bottom: var(--space-3);
+      font-size: 14px;
+      font-weight: 600;
+      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      align-items: center;
+      gap: var(--space-1);
+    }
+
+    .alert-error {
+      background: var(--error-light);
+      color: var(--error);
+      border: 2px solid var(--error);
+    }
+
+    .alert-success {
+      background: var(--success-light);
+      color: var(--success);
+      border: 2px solid var(--success);
+    }
+
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .hidden {
+      display: none !important;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 968px) {
+      .container {
+        flex-direction: column;
+        gap: var(--space-6);
+      }
+
+      .brand-section {
+        text-align: center;
+      }
+
+      .main-logo {
+        font-size: 48px;
+      }
+
+      .main-tagline {
+        font-size: 20px;
+      }
+
+      .login-container {
+        flex: 1;
+        width: 100%;
+        max-width: 440px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .container {
+        padding: var(--space-2);
+      }
+
+      .login-container {
+        padding: var(--space-4) var(--space-3);
+      }
+
+      .main-logo {
+        font-size: 40px;
+      }
+
+      .main-tagline {
+        font-size: 18px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Subtle Gradient Blobs -->
+  <div class="gradient-blob"></div>
+  <div class="gradient-blob"></div>
+
+  <div class="container">
+    <!-- Left Side - Branding -->
+    <div class="brand-section">
+      <div class="brand-header">
+        <div class="brand-icon">✦</div>
+        <div class="brand-title">Road to Financial Freedom</div>
+      </div>
+      
+      <h1 class="main-logo">STOCKLYZE</h1>
+      <p class="main-tagline">
+        Advanced <span class="tagline-highlight">Portfolio Analytics</span>
+      </p>
+      
+      <div class="security-badge">
+        🔒 Bank-level security
+      </div>
+    </div>
+
+    <!-- Right Side - Login Form -->
+    <div class="login-container">
+      <div class="login-header">
+        <h2 class="login-title" id="auth-title">Welcome back</h2>
+        <p class="login-subtitle" id="auth-subtitle">Sign in to access your portfolio</p>
+      </div>
+
+      <!-- Alert Container -->
+      <div id="alert-container"></div>
+
+      <!-- Auth Form -->
+      <form id="auth-form">
+        <!-- Name (Signup only) -->
+        <div class="form-group hidden" id="name-group">
+          <label for="name" class="form-label">Full Name</label>
+          <input 
+            type="text" 
+            id="name" 
+            class="form-input" 
+            placeholder="Enter your full name"
+            autocomplete="name"
+          >
+        </div>
+
+        <!-- Email -->
+        <div class="form-group">
+          <label for="email" class="form-label">Email Address</label>
+          <input 
+            type="email" 
+            id="email" 
+            class="form-input" 
+            placeholder="you@example.com"
+            required
+            autocomplete="email"
+          >
+        </div>
+
+        <!-- Password -->
+        <div class="form-group">
+          <label for="password" class="form-label">Password</label>
+          <div class="password-wrapper">
+            <input 
+              type="password" 
+              id="password" 
+              class="form-input" 
+              placeholder="Enter your password"
+              required
+              autocomplete="current-password"
+              minlength="8"
+            >
+            <button type="button" class="password-toggle" onclick="togglePassword()">
+              👁️
+            </button>
+          </div>
+        </div>
+
+        <!-- Role Selector (Signup only) -->
+        <div class="form-group hidden" id="role-group">
+          <label class="form-label">Account Type</label>
+          <div class="role-selector">
+            <div class="role-option">
+              <input type="radio" id="role-staff" name="role" value="STAFF" checked>
+              <label for="role-staff" class="role-label">Staff</label>
+            </div>
+            <div class="role-option">
+              <input type="radio" id="role-admin" name="role" value="ADMIN">
+              <label for="role-admin" class="role-label">Admin</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Submit Button -->
+        <button type="submit" class="btn-submit" id="submit-btn">
+          Sign In
+        </button>
+      </form>
+
+      <!-- Toggle Auth Mode -->
+      <div class="auth-toggle">
+        <span id="toggle-text">Don't have an account? </span>
+        <a href="#" class="auth-toggle-link" id="toggle-auth">Create one</a>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const API_BASE_URL = 'http://localhost:8000';
+    const TOKEN_KEY = 'stock_analysis_token';
+    const USER_KEY = 'stock_analysis_user';
+    let authMode = 'login';
+    
+    // Initialize on page load
+    document.addEventListener('DOMContentLoaded', () => {
+      // Check if already authenticated
+      if (localStorage.getItem(TOKEN_KEY)) {
+        window.location.href = 'dashboard.html';
+        return;
+      }
+      
+      // Set up event listeners
+      const form = document.getElementById('auth-form');
+      const toggleLink = document.getElementById('toggle-auth');
+      
+      form.addEventListener('submit', handleSubmit);
+      toggleLink.addEventListener('click', toggleAuthMode);
+    });
+    
+    // Toggle password visibility
+    function togglePassword() {
+      const passwordInput = document.getElementById('password');
+      const toggleBtn = document.querySelector('.password-toggle');
+      
+      if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        toggleBtn.textContent = '🙈';
+      } else {
+        passwordInput.type = 'password';
+        toggleBtn.textContent = '👁️';
+      }
+    }
+    
+    // Toggle between login and signup
+    function toggleAuthMode(e) {
+      e.preventDefault();
+      authMode = authMode === 'login' ? 'signup' : 'login';
+      updateUI();
+    }
+    
+    // Update UI based on mode
+    function updateUI() {
+      const title = document.getElementById('auth-title');
+      const subtitle = document.getElementById('auth-subtitle');
+      const nameGroup = document.getElementById('name-group');
+      const roleGroup = document.getElementById('role-group');
+      const submitBtn = document.getElementById('submit-btn');
+      const toggleText = document.getElementById('toggle-text');
+      const toggleLink = document.getElementById('toggle-auth');
+      
+      if (authMode === 'login') {
+        title.textContent = 'Welcome back';
+        subtitle.textContent = 'Sign in to access your portfolio';
+        nameGroup.classList.add('hidden');
+        roleGroup.classList.add('hidden');
+        submitBtn.textContent = 'Sign In';
+        toggleText.textContent = "Don't have an account? ";
+        toggleLink.textContent = 'Create one';
+      } else {
+        title.textContent = 'Create your account';
+        subtitle.textContent = 'Start your investment journey today';
+        nameGroup.classList.remove('hidden');
+        roleGroup.classList.remove('hidden');
+        submitBtn.textContent = 'Create Account';
+        toggleText.textContent = 'Already have an account? ';
+        toggleLink.textContent = 'Sign in';
+      }
+      clearAlert();
+    }
+    
+    // Handle form submission
+    async function handleSubmit(e) {
+      e.preventDefault();
+      
+      const email = document.getElementById('email').value.trim();
+      const password = document.getElementById('password').value;
+      
+      // Validation
+      if (!email || !password) {
+        showError('Please fill in all fields');
+        return;
+      }
+      
+      if (authMode === 'login') {
+        await handleLogin(email, password);
+      } else {
+        const name = document.getElementById('name').value.trim();
+        const role = document.querySelector('input[name="role"]:checked')?.value || 'STAFF';
+        
+        if (!name) {
+          showError('Please enter your name');
+          return;
+        }
+        
+        await handleSignup(email, name, password, role);
+      }
+    }
+    
+    // Handle login
+    async function handleLogin(email, password) {
+      const submitBtn = document.getElementById('submit-btn');
+      submitBtn.textContent = 'Signing in...';
+      submitBtn.disabled = true;
+      
+      try {
+        const response = await fetch(`${API_BASE_URL}/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+          localStorage.setItem(TOKEN_KEY, data.access_token);
+          showSuccess('Login successful! Redirecting...');
+          setTimeout(() => window.location.href = 'dashboard.html', 1000);
+        } else {
+          showError(data.detail || 'Invalid email or password');
+          submitBtn.textContent = 'Sign In';
+          submitBtn.disabled = false;
+        }
+      } catch (error) {
+        console.error('Login error:', error);
+        showError('Unable to connect to server. Please try again.');
+        submitBtn.textContent = 'Sign In';
+        submitBtn.disabled = false;
+      }
+    }
+    
+    // Handle signup
+    async function handleSignup(email, name, password, role) {
+      const submitBtn = document.getElementById('submit-btn');
+      submitBtn.textContent = 'Creating account...';
+      submitBtn.disabled = true;
+      
+      try {
+        const response = await fetch(`${API_BASE_URL}/auth/signup`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, name, password, role })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+          showSuccess('Account created! Logging you in...');
+          setTimeout(() => handleLogin(email, password), 1000);
+        } else {
+          showError(data.detail || 'Unable to create account');
+          submitBtn.textContent = 'Create Account';
+          submitBtn.disabled = false;
+        }
+      } catch (error) {
+        console.error('Signup error:', error);
+        showError('Unable to connect to server. Please try again.');
+        submitBtn.textContent = 'Create Account';
+        submitBtn.disabled = false;
+      }
+    }
+    
+    // Show error message
+    function showError(message) {
+      const container = document.getElementById('alert-container');
+      container.innerHTML = `
+        <div class="alert alert-error">
+          ⚠️ ${message}
+        </div>
+      `;
+    }
+    
+    // Show success message
+    function showSuccess(message) {
+      const container = document.getElementById('alert-container');
+      container.innerHTML = `
+        <div class="alert alert-success">
+          ✓ ${message}
+        </div>
+      `;
+    }
+    
+    // Clear alert
+    function clearAlert() {
+      document.getElementById('alert-container').innerHTML = '';
+    }
+  </script>
+</body>
+</html>

frontend/js/auth.js

@@ -0,0 +1,237 @@
+// Authentication Logic
+
+const { API_BASE_URL, TOKEN_KEY, USER_KEY } = window.CONFIG;
+const { showError, showSuccess, validateEmail, validatePassword, setLoading, animateFormSwitch } = window.utils;
+
+// Current auth mode
+let authMode = 'login'; // 'login' or 'signup'
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+  // Check if already authenticated
+  if (getToken()) {
+    redirectToDashboard();
+    return;
+  }
+  
+  // Set up event listeners
+  setupEventListeners();
+  
+  // Set initial mode
+  setAuthMode('login');
+});
+
+// Set up event listeners
+function setupEventListeners() {
+  const form = document.getElementById('auth-form');
+  const toggleLink = document.getElementById('toggle-auth');
+  
+  form.addEventListener('submit', handleSubmit);
+  toggleLink.addEventListener('click', toggleAuthMode);
+}
+
+// Toggle between login and signup
+function toggleAuthMode(e) {
+  e.preventDefault();
+  authMode = authMode === 'login' ? 'signup' : 'login';
+  setAuthMode(authMode);
+  animateFormSwitch();
+}
+
+// Set auth mode UI
+function setAuthMode(mode) {
+  const title = document.getElementById('auth-title');
+  const subtitle = document.getElementById('auth-subtitle');
+  const nameGroup = document.getElementById('name-group');
+  const roleGroup = document.getElementById('role-group');
+  const submitBtn = document.getElementById('submit-btn');
+  const toggleText = document.getElementById('toggle-text');
+  const toggleLink = document.getElementById('toggle-auth');
+  
+  if (mode === 'login') {
+    title.textContent = 'Welcome Back';
+    subtitle.textContent = 'Sign in to access your portfolio';
+    nameGroup.classList.add('hidden');
+    roleGroup.classList.add('hidden');
+    submitBtn.textContent = 'Sign In';
+    toggleText.textContent = "Don't have an account? ";
+    toggleLink.textContent = 'Create one';
+  } else {
+    title.textContent = 'Create Account';
+    subtitle.textContent = 'Join the stock analysis platform';
+    nameGroup.classList.remove('hidden');
+    roleGroup.classList.remove('hidden');
+    submitBtn.textContent = 'Sign Up';
+    toggleText.textContent = 'Already have an account? ';
+    toggleLink.textContent = 'Sign in';
+  }
+}
+
+// Handle form submission
+async function handleSubmit(e) {
+  e.preventDefault();
+  
+  const email = document.getElementById('email').value.trim();
+  const password = document.getElementById('password').value;
+  
+  // Validation
+  if (!validateEmail(email)) {
+    showError('Please enter a valid email address');
+    return;
+  }
+  
+  const passwordCheck = validatePassword(password);
+  if (!passwordCheck.valid) {
+    showError(passwordCheck.message);
+    return;
+  }
+  
+  if (authMode === 'login') {
+    await handleLogin(email, password);
+  } else {
+    const name = document.getElementById('name').value.trim();
+    const role = document.querySelector('input[name="role"]:checked')?.value || 'STAFF';
+    
+    if (!name) {
+      showError('Please enter your name');
+      return;
+    }
+    
+    await handleSignup(email, name, password, role);
+  }
+}
+
+// Handle login
+async function handleLogin(email, password) {
+  setLoading(true);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ email, password })
+    });
+    
+    const data = await response.json();
+    
+    if (response.ok) {
+      saveToken(data.access_token);
+      await fetchUserData();
+      showSuccess('Login successful! Redirecting...');
+      setTimeout(() => redirectToDashboard(), 1000);
+    } else {
+      showError(data.detail || 'Invalid email or password');
+      setLoading(false);
+    }
+  } catch (error) {
+    console.error('Login error:', error);
+    showError('Unable to connect to server. Please try again.');
+    setLoading(false);
+  }
+}
+
+// Handle signup
+async function handleSignup(email, name, password, role) {
+  setLoading(true);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/auth/signup`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ email, name, password, role })
+    });
+    
+    const data = await response.json();
+    
+    if (response.ok) {
+      showSuccess('Account created! Logging you in...');
+      // Auto-login after signup
+      setTimeout(() => handleLogin(email, password), 1000);
+    } else {
+      showError(data.detail || 'Unable to create account');
+      setLoading(false);
+    }
+  } catch (error) {
+    console.error('Signup error:', error);
+    showError('Unable to connect to server. Please try again.');
+    setLoading(false);
+  }
+}
+
+// Fetch user data
+async function fetchUserData() {
+  const token = getToken();
+  if (!token) return null;
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/auth/me`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    });
+    
+    if (response.ok) {
+      const userData = await response.json();
+      saveUser(userData);
+      return userData;
+    } else {
+      // Token invalid, clear it
+      clearAuth();
+      return null;
+    }
+  } catch (error) {
+    console.error('Fetch user error:', error);
+    return null;
+  }
+}
+
+// Save token to localStorage
+function saveToken(token) {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+// Get token from localStorage
+function getToken() {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+// Save user data
+function saveUser(userData) {
+  localStorage.setItem(USER_KEY, JSON.stringify(userData));
+}
+
+// Get user data
+function getUser() {
+  const userData = localStorage.getItem(USER_KEY);
+  return userData ? JSON.parse(userData) : null;
+}
+
+// Clear authentication
+function clearAuth() {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+}
+
+// Logout
+function logout() {
+  clearAuth();
+  window.location.href = 'index.html';
+}
+
+// Redirect to dashboard
+function redirectToDashboard() {
+  window.location.href = 'dashboard.html';
+}
+
+// Export functions
+window.auth = {
+  getToken,
+  getUser,
+  logout,
+  fetchUserData,
+  clearAuth
+};