ui errors fix and readme update with new features implemented

README.md

@@ -1,4 +1,4 @@
-# Co-Code GGW Health Platform
+# Lumea Health Platform
 
 A full-stack health companion platform for preventive health management. Upload medical reports, extract health metrics via OCR, track trends, and receive AI-powered health recommendations.
 
@@ -12,6 +12,7 @@ A full-stack health companion platform for preventive health management. Upload
 - [Tech Stack](#tech-stack)
 - [Architecture](#architecture)
 - [Features](#features)
+- [Medicines: Find Cheap Alternatives](#medicines-find-cheap-alternatives)
 - [Getting Started](#getting-started)
 - [Environment Variables](#environment-variables)
 - [Database](#database)
@@ -26,7 +27,7 @@ A full-stack health companion platform for preventive health management. Upload
 
 ## Overview
 
-Co-Code GGW is a unified medical companion platform that enables users to:
+Lumea is a unified medical companion platform that enables users to:
 
 - **Upload medical reports** (PDF, images) and automatically extract health metrics via OCR
 - **Track health profiles** with comprehensive intake forms (conditions, medications, allergies, family history)
@@ -198,6 +199,218 @@ sequenceDiagram
 
 ---
 
+## Medicines: Find Cheap Alternatives
+
+Lumea includes a comprehensive medicine management system that helps users find affordable generic alternatives to prescribed medicines and locate nearby pharmacies, including government-sponsored Jan Aushadhi Kendras offering subsidized medications.
+
+> ⚠️ **Medical Disclaimer**: This feature is a support tool for informational purposes only. It does NOT provide medical advice. Always consult your doctor or pharmacist before switching medicines or starting new treatments.
+
+### Overview
+
+The Medicines feature enables users to:
+
+- **Search for medicines** by brand name or free-text queries
+- **Upload prescriptions** and automatically extract medicines via OCR/AI
+- **Find affordable alternatives** with ranked matching by clinical equivalence
+- **Compare prices** including Jan Aushadhi (government-fixed price) options
+- **Locate nearby pharmacies** including generic and Jan Aushadhi pharmacies
+- **Track medications** with personal notes and dosage schedules
+
+### User Flow
+
+1. **Input Medicine Information**
+   - User enters brand name (e.g., "Aspirin 500mg") or uploads prescription image
+   - System extracts text via OCR or Grok AI parsing
+
+2. **Normalize Medicine Data**
+   - `MedicineNormalizer` service extracts: salt, strength, form (tablet/capsule/liquid), release type (immediate/sustained)
+   - Queries `GenericCatalog` table to validate and standardize extraction
+
+3. **Find Substitutes**
+   - `SubstituteFinder` queries database for alternatives with 4-tier ranked matching:
+     - **Tier 1** (1.0 score): Exact match on salt + strength + form + release type
+     - **Tier 2** (0.8 score): Same salt + strength + form
+     - **Tier 3** (0.6 score): Same salt + strength
+     - **Tier 4** (0.4 score): Same salt only
+   - Results sorted by price (Jan Aushadhi first for lowest cost)
+
+4. **Locate Pharmacies** (Optional)
+   - User enters location (latitude/longitude) and search radius
+   - `PharmacyLocator` queries Google Places API for pharmacies
+   - Results include Jan Aushadhi Kendras (government pharmacies) and private pharmacies
+   - Results cached for 1 hour to reduce API calls
+
+5. **Save & Track**
+   - User can save medicines to personal list with notes
+   - Each save creates `UserSavedMedicine` entry for quick reference
+
+### Architecture Diagram
+
+```mermaid
+flowchart TB
+    subgraph Frontend["Frontend (React)"]
+        MedicinesPage["Medicines.tsx Page"]
+        SubstitutePanel["Substitute Finder Panel"]
+        PharmacyPanel["Pharmacy Locator Panel"]
+    end
+
+    subgraph API["Backend API (FastAPI)"]
+        NormalizeRoute["POST /normalize<br/>POST /normalize/batch"]
+        SubstituteRoute["POST /substitutes<br/>POST /substitutes/from-text"]
+        PharmacyRoute["GET /pharmacies/nearby<br/>GET /pharmacies/{id}<br/>POST /pharmacies/{id}/click"]
+        SavedRoute["POST /saved<br/>GET /saved<br/>DELETE /saved/{id}"]
+    end
+
+    subgraph Services["Backend Services"]
+        MedicineNormalizer["MedicineNormalizer<br/>- normalize()<br/>- normalize_batch()"]
+        SubstituteFinder["SubstituteFinder<br/>- find_substitutes()<br/>- save_medicine()"]
+        PharmacyLocator["PharmacyLocator<br/>- search_nearby()<br/>- get_place_details()<br/>- 1hr cache"]
+        GrokService["GrokMedicineService<br/>- get_alternatives_for_text()"]
+    end
+
+    subgraph External["External Services"]
+        GooglePlaces["Google Places API<br/>(Pharmacy Search)"]
+        GrokAPI["Grok xAI API<br/>(Medicine Parsing)"]
+    end
+
+    subgraph Storage["Data Layer"]
+        DB[(PostgreSQL)]
+        GenericCatalog["GenericCatalog Table<br/>(600K+ medicines)"]
+        UserSavedMedicine["UserSavedMedicine Table"]
+        SubstituteQuery["SubstituteQuery Table<br/>(Analytics)"]
+        PharmacyClick["PharmacyClick Table<br/>(Analytics)"]
+    end
+
+    MedicinesPage --> SubstitutePanel
+    MedicinesPage --> PharmacyPanel
+    SubstitutePanel --> SubstituteRoute
+    PharmacyPanel --> PharmacyRoute
+    PharmacyPanel --> SavedRoute
+
+    SubstituteRoute --> GrokService
+    SubstituteRoute --> MedicineNormalizer
+    SubstituteRoute --> SubstituteFinder
+    PharmacyRoute --> PharmacyLocator
+
+    MedicineNormalizer --> DB
+    MedicineNormalizer --> GenericCatalog
+    SubstituteFinder --> DB
+    SubstituteFinder --> GenericCatalog
+    SubstituteFinder --> SubstituteQuery
+    PharmacyLocator --> GooglePlaces
+    PharmacyLocator --> PharmacyClick
+
+    GrokService --> GrokAPI
+    GrokAPI -->|Parsed results| SubstituteFinder
+```
+
+### API Endpoints
+
+| Method | Endpoint | Description | Auth | Key Parameters |
+|--------|----------|-------------|------|-----------------|
+| POST | `/api/medicines/normalize` | Normalize single medicine text | Yes | `text: str` → Returns `NormalizedMedicine` |
+| POST | `/api/medicines/normalize/batch` | Normalize multiple medicines (prescription lines) | Yes | `texts: List[str]` → Returns `List[NormalizedMedicine]` |
+| POST | `/api/medicines/substitutes` | Find substitutes from structured data | Yes | `salt, strength, form, release_type` → Returns ranked substitutes |
+| POST | `/api/medicines/substitutes/from-text` | Find substitutes from free-form text (AI-powered) | Yes | `text: str` → Grok AI parsing → Returns alternatives with prices |
+| GET | `/api/medicines/pharmacies/nearby` | Search nearby pharmacies by location | Yes | `lat, lng, radius_m=1000, type=all, page_token` → Returns paginated pharmacies |
+| GET | `/api/medicines/pharmacies/{place_id}` | Get pharmacy details | Yes | `place_id: str` → Returns address, phone, hours, rating |
+| POST | `/api/medicines/pharmacies/{place_id}/click` | Log pharmacy interaction (analytics) | Yes | `action: directions\|call\|website` |
+| POST | `/api/medicines/saved` | Save medicine to user list | Yes | `brand_name, salt, strength, form, notes` |
+| GET | `/api/medicines/saved` | Get user's saved medicines | Yes | Returns list of `UserSavedMedicine` |
+| DELETE | `/api/medicines/saved/{medicine_id}` | Delete saved medicine | Yes | `medicine_id: UUID` |
+
+### Request/Response Examples
+
+**POST /api/medicines/substitutes/from-text**
+
+Request:
+```json
+{
+  "text": "Aspirin 500mg tablets"
+}
+```
+
+Response:
+```json
+{
+  "original_text": "Aspirin 500mg tablets",
+  "normalized": {
+    "brand_name": "Aspirin",
+    "salt": "Acetylsalicylic Acid",
+    "strength": "500",
+    "form": "tablet",
+    "release_type": "immediate",
+    "confidence": 0.95
+  },
+  "substitutes": [
+    {
+      "rank": 1,
+      "product_name": "Jan Aushadhi Aspirin 500mg",
+      "salt": "Acetylsalicylic Acid",
+      "strength": "500",
+      "form": "tablet",
+      "mrp": "5.00",
+      "is_jan_aushadhi": true,
+      "match_score": 1.0,
+      "match_reason": "Exact match: Same salt, strength, form, and type"
+    },
+    {
+      "rank": 2,
+      "product_name": "Ecosprin 500mg",
+      "salt": "Acetylsalicylic Acid",
+      "strength": "500",
+      "form": "tablet",
+      "mrp": "8.50",
+      "is_jan_aushadhi": false,
+      "match_score": 1.0,
+      "match_reason": "Exact match: Same salt, strength, form, and type"
+    }
+  ],
+  "disclaimer": "Always confirm with your doctor or pharmacist before switching medicines"
+}
+```
+
+**GET /api/medicines/pharmacies/nearby**
+
+Request:
+```
+GET /api/medicines/pharmacies/nearby?lat=40.7128&lng=-74.0060&radius_m=1000&type=all
+```
+
+Response:
+```json
+{
+  "pharmacies": [
+    {
+      "place_id": "ChIJN1blbgBQwokRzKgy6E_B_1Q",
+      "name": "Jan Aushadhi Kendra - Downtown",
+      "address": "123 Main St, New York, NY 10001",
+      "latitude": 40.7128,
+      "longitude": -74.0060,
+      "rating": 4.7,
+      "is_open": true,
+      "is_jan_aushadhi": true,
+      "phone": "+1-212-555-0123"
+    },
+    {
+      "place_id": "ChIJrc_p_1BQwokRzKgy6E_B_2Q",
+      "name": "Metro Pharmacy",
+      "address": "456 Broadway, New York, NY 10002",
+      "latitude": 40.7150,
+      "longitude": -74.0030,
+      "rating": 4.2,
+      "is_open": true,
+      "is_jan_aushadhi": false,
+      "phone": "+1-212-555-0456"
+    }
+  ],
+  "next_page_token": null,
+  "total_results": 2
+}
+```
+
+---
+
 ## Getting Started
 
 ### Prerequisites
@@ -277,18 +490,27 @@ Services:
 
 Create a `.env` file in the `backend/` directory:
 
-| Variable | Description | Example |
-|----------|-------------|---------|
-| `DATABASE_URL` | PostgreSQL connection string (asyncpg) | `postgresql+asyncpg://user:pass@host:5432/db` |
-| `JWT_SECRET` | Secret key for JWT signing | `your-secret-key-min-32-chars` |
-| `JWT_ALGORITHM` | JWT algorithm | `HS256` |
-| `ACCESS_TOKEN_EXPIRE_MINUTES` | Token expiration | `10080` (7 days) |
-| `FRONTEND_ORIGIN` | CORS allowed origin | `http://localhost:5173` |
-| `GROK_API_KEY` | xAI Grok API key (for AI summaries) | `gsk_...` |
-| `GEMINI_API_KEY` | Google Gemini API key (optional fallback) | `AIza...` |
-| `OLLAMA_BASE_URL` | Ollama server URL (optional) | `http://localhost:11434` |
-| `OLLAMA_MODEL` | Ollama model name | `medgemma:4b` |
-| `USE_GEMINI_FALLBACK` | Enable Gemini fallback | `true` |
+| Variable | Description | Example | Required |
+|----------|-------------|---------|----------|
+| `DATABASE_URL` | PostgreSQL connection string (asyncpg) | `postgresql+asyncpg://user:pass@host:5432/db` | Yes |
+| `JWT_SECRET` | Secret key for JWT signing | `your-secret-key-min-32-chars` | Yes |
+| `JWT_ALGORITHM` | JWT algorithm | `HS256` | No (default: HS256) |
+| `ACCESS_TOKEN_EXPIRE_MINUTES` | Token expiration | `10080` (7 days) | No (default: 10080) |
+| `FRONTEND_ORIGIN` | CORS allowed origin | `http://localhost:5173` | Yes |
+| `GROK_API_KEY` | xAI Grok API key (for AI summaries & medicine parsing) | `gsk_...` | Yes |
+| `XAI_API_BASE` | xAI API endpoint base URL | `https://api.x.ai/v1` | No (default provided) |
+| `GROK_MODEL` | Grok model identifier | `grok-beta` | No (default: grok-beta) |
+| `GOOGLE_PLACES_API_KEY` | Google Maps API key (for pharmacy search) | `AIzaSyD...` | No (fallback to mock data) |
+| `GEMINI_API_KEY` | Google Gemini API key (optional fallback for summaries) | `AIza...` | No |
+| `OLLAMA_BASE_URL` | Ollama server URL (optional) | `http://localhost:11434` | No |
+| `OLLAMA_MODEL` | Ollama model name | `medgemma:4b` | No |
+| `USE_GEMINI_FALLBACK` | Enable Gemini fallback when Grok unavailable | `true` | No (default: false) |
+
+**Medicines Feature Notes:**
+
+- **GROK_API_KEY**: Required for free-text medicine parsing (e.g., "Aspirin 500mg tablets" → structured data)
+- **GOOGLE_PLACES_API_KEY**: Optional for pharmacy search. If not set, returns mock pharmacy data for testing
+- **XAI_API_BASE** & **GROK_MODEL**: Typically use defaults; modify only for different xAI endpoints or model versions
 
 See [backend/.env.example](backend/.env.example) for a complete template.
 
@@ -332,6 +554,11 @@ alembic current
 | `chat_messages` | Chat message history |
 | `report_ai_summaries` | Cached AI report summaries |
 | `report_ai_comparisons` | Cached AI report comparisons |
+| `generic_catalog` | Medicine database (600K+ products, indexed by salt/product_name) |
+| `user_saved_medicines` | User's saved medicines (brand name, dosage, notes) |
+| `substitute_queries` | Analytics: medicine searches and results |
+| `pharmacy_clicks` | Analytics: pharmacy interaction tracking (directions, calls, website) |
+| `user_location_consent` | Location permissions for pharmacy search |
 
 ### Entity Relationships
 
@@ -347,13 +574,85 @@ erDiagram
     users ||--o{ chat_sessions : owns
     users ||--o{ report_ai_summaries : generates
     users ||--o{ report_ai_comparisons : generates
+    users ||--o{ user_saved_medicines : saves
+    users ||--o{ substitute_queries : searches
+    users ||--o{ pharmacy_clicks : clicks
+    users ||--o| user_location_consent : grants
     
     reports ||--o{ observations : extracts
     reports ||--o{ report_ai_summaries : summarized_by
     
     chat_sessions ||--o{ chat_messages : contains
+    
+    user_saved_medicines ||--o{ generic_catalog : references
+    substitute_queries ||--o{ generic_catalog : queries
 ```
 
+### Medicines Database Schema
+
+**generic_catalog** - Seeded from PMBI (Pharmaceutical Market Bureau of India) data
+
+| Column | Type | Notes |
+|--------|------|-------|
+| `id` | UUID | Primary key |
+| `product_name` | VARCHAR | Brand/product name (indexed) |
+| `salt` | VARCHAR | Active pharmaceutical ingredient (indexed) |
+| `strength` | VARCHAR | e.g., "500mg", "100mcg" |
+| `form` | VARCHAR | e.g., "tablet", "capsule", "liquid", "injection" |
+| `release_type` | VARCHAR | e.g., "immediate", "sustained" |
+| `mrp` | DECIMAL | Maximum retail price |
+| `manufacturer` | VARCHAR | Manufacturing company |
+| `source` | VARCHAR | Data source (e.g., "jan_aushadhi", "pmbi") |
+| `is_jan_aushadhi` | BOOLEAN | Government-fixed price indicator |
+| `created_at` | TIMESTAMP | Record creation time |
+
+**user_saved_medicines** - User's tracked medicines
+
+| Column | Type | Notes |
+|--------|------|-------|
+| `id` | UUID | Primary key |
+| `user_id` | UUID | Foreign key → users |
+| `original_name` | VARCHAR | User-entered medicine name |
+| `salt` | VARCHAR | Normalized salt |
+| `strength` | VARCHAR | Normalized strength |
+| `form` | VARCHAR | Normalized form |
+| `release_type` | VARCHAR | Normalized release type |
+| `schedule_json` | JSONB | Optional: dosage schedule (morning, noon, evening) |
+| `notes` | TEXT | User's personal notes |
+| `created_at` | TIMESTAMP | When medicine was saved |
+
+**substitute_queries** - Analytics table
+
+| Column | Type | Notes |
+|--------|------|-------|
+| `id` | UUID | Primary key |
+| `user_id` | UUID | Foreign key → users |
+| `query_raw` | VARCHAR | Original user input |
+| `normalized_json` | JSONB | Extracted fields (salt, strength, form, release_type) |
+| `results_json` | JSONB | Array of matching substitutes |
+| `results_count` | INTEGER | Number of alternatives found |
+| `created_at` | TIMESTAMP | Query timestamp |
+
+**pharmacy_clicks** - Analytics table
+
+| Column | Type | Notes |
+|--------|------|-------|
+| `id` | UUID | Primary key |
+| `user_id` | UUID | Foreign key → users |
+| `place_id` | VARCHAR | Google Places API place ID |
+| `place_name` | VARCHAR | Pharmacy name |
+| `mode` | VARCHAR | Action: "directions", "call", "website" |
+| `created_at` | TIMESTAMP | Click timestamp |
+
+**user_location_consent** - Privacy tracking
+
+| Column | Type | Notes |
+|--------|------|-------|
+| `id` | UUID | Primary key |
+| `user_id` | UUID | Foreign key → users (unique) |
+| `consent` | BOOLEAN | Location permission granted/revoked |
+| `updated_at` | TIMESTAMP | Last update |
+
 ---
 
 ## API Reference
@@ -552,7 +851,132 @@ pytest tests/test_routes_auth.py
 10. ☐ Generate AI summary, verify it displays
 11. ☐ Select 2 reports of same type, generate comparison
 12. ☐ Try selecting mixed types, verify warning appears
+13. ☐ Test Medicines feature: search for a medicine (e.g., "Aspirin 500mg")
+14. ☐ Verify substitutes appear with prices and Jan Aushadhi options highlighted
+15. ☐ Test pharmacy search by entering your location
+16. ☐ Verify nearby pharmacies appear with ratings and distance
+17. ☐ Try filtering pharmacies by type (all/jan_aushadhi/generic)
+18. ☐ Save a medicine and verify it appears in saved list
+
+### Medicines Feature Testing
+
+```bash
+cd backend
+
+# Test medicines normalization
+pytest tests/test_medicines_normalizer.py
+
+# Test substitute finder
+pytest tests/test_medicines_substitutes.py
+
+# Test pharmacy locator
+pytest tests/test_medicines_pharmacy_locator.py
+
+# Test medicines routes
+pytest tests/test_routes_medicines.py
+```
 
+### Medicines Manual Testing
+
+1. **Test Medicine Normalization**
+   ```bash
+   curl -X POST http://localhost:8000/api/medicines/normalize \
+     -H "Authorization: Bearer <token>" \
+     -H "Content-Type: application/json" \
+     -d '{"text": "Aspirin 500mg tablet"}'
+   ```
+   Expected: `NormalizedMedicine` with extracted salt, strength, form
+
+2. **Test Substitute Search (AI-Powered)**
+   ```bash
+   curl -X POST http://localhost:8000/api/medicines/substitutes/from-text \
+     -H "Authorization: Bearer <token>" \
+     -H "Content-Type: application/json" \
+     -d '{"text": "Crocin 650mg for fever"}'
+   ```
+   Expected: Ranked list of alternatives with prices
+
+3. **Test Pharmacy Search**
+   ```bash
+   curl -X GET "http://localhost:8000/api/medicines/pharmacies/nearby?lat=40.7128&lng=-74.0060&radius_m=1000&type=all" \
+     -H "Authorization: Bearer <token>"
+   ```
+   Expected: List of nearby pharmacies with ratings
+
+4. **Test Save Medicine**
+   ```bash
+   curl -X POST http://localhost:8000/api/medicines/saved \
+     -H "Authorization: Bearer <token>" \
+     -H "Content-Type: application/json" \
+     -d '{
+       "brand_name": "Aspirin",
+       "salt": "Acetylsalicylic Acid",
+       "strength": "500",
+       "form": "tablet",
+       "release_type": "immediate",
+       "notes": "Take with food"
+     }'
+   ```
+   Expected: `UserSavedMedicine` object saved to database
+
+### Medicines Troubleshooting
+
+**Problem: "No alternatives found" when searching for a medicine**
+
+- **Cause**: Medicine not in `generic_catalog` table
+- **Solution**: 
+  - Verify PMBI/Jan Aushadhi seed data was loaded during migration
+  - Check database: `SELECT COUNT(*) FROM generic_catalog;` should show 600K+ records
+  - Try searching by generic name instead of brand name (e.g., "Acetylsalicylic Acid" instead of "Aspirin")
+  - Check logs for Grok API errors if using free-text search
+
+**Problem: "Google Places API 401" or pharmacy search returns empty**
+
+- **Cause**: `GOOGLE_PLACES_API_KEY` not set or API quota exceeded
+- **Solution**:
+  - Verify `GOOGLE_PLACES_API_KEY` is set in `.env`: `echo $GOOGLE_PLACES_API_KEY`
+  - Check Google Cloud Console for API key validity and quota limits
+  - If quota exceeded, wait 24 hours or upgrade billing
+  - During development, feature falls back to mock pharmacy data when API key is missing
+  - Mock data is useful for frontend testing without API costs
+
+**Problem: Slow medicine normalization or substitute search**
+
+- **Cause**: Missing database indexes on high-cardinality columns
+- **Solution**:
+  - Verify indexes exist on `generic_catalog`: `SELECT indexname FROM pg_indexes WHERE tablename='generic_catalog';`
+  - Should see indexes on: `product_name`, `salt`, `user_id`
+  - If missing, run: `alembic upgrade head` to apply latest migrations
+  - Check database query performance: Enable `EXPLAIN ANALYZE` in PostgreSQL
+  - Profile with: `SELECT pg_size_pretty(pg_total_relation_size('generic_catalog'));`
+
+**Problem: Grok API errors when parsing prescription images**
+
+- **Cause**: Invalid image format, API key expired, or API rate limit
+- **Solution**:
+  - Verify image is clear and readable (JPG, PNG, TIFF)
+  - Test API key directly: `curl -H "Authorization: Bearer $GROK_API_KEY" https://api.x.ai/v1/models`
+  - Check Grok API status at https://status.x.ai
+  - Review backend logs: `docker logs <backend-container>` or `tail uvicorn.log`
+  - If rate-limited, implement request throttling in `medicine_normalizer.py`
+
+**Problem: Pharmacy search cache not updating**
+
+- **Cause**: In-memory cache TTL (1 hour) not expired
+- **Solution**:
+  - Manually clear cache by restarting backend service
+  - Cache is per-search key (lat/lng/radius): different locations create new cache entries
+  - Check cache size in logs: Search for "pharmacy_cache" debug messages
+  - To disable caching for testing, set `PharmacyLocator.CACHE_TTL_SECONDS = 0`
+
+**Problem: User saved medicines not persisting**
+
+- **Cause**: Database migration not applied or user_id foreign key constraint
+- **Solution**:
+  - Verify `user_saved_medicines` table exists: `\dt user_saved_medicines` in psql
+  - Run migrations: `cd backend && alembic upgrade head`
+  - Verify user exists and authenticated: Check JWT token contains valid `sub` (user_id)
+  - Check database logs for constraint errors: `docker logs <postgres-container>`
 ---
 
 ## Deployment

backend/.env.example

@@ -1,5 +1,5 @@
 # =============================================================================
-# Co-Code GGW Backend Environment Variables
+# Lumea Backend Environment Variables
 # =============================================================================
 # Copy this file to .env and fill in your values
 # cp .env.example .env

backend/app/main.py

@@ -46,7 +46,7 @@ async def lifespan(app: FastAPI):
     except Exception as e:
         logger.debug(f"DB engine dispose: {e}")
 
-app = FastAPI(title="Co-Code GGW Health Platform API", lifespan=lifespan)
+app = FastAPI(title="Lumea Health Platform API", lifespan=lifespan)
 
 # CORS configuration - allow both localhost ports and Docker
 origins = [
@@ -87,7 +87,7 @@ app.include_router(medicines_router)
 @app.get("/")
 async def root():
     return {
-        "message": "Co-Code GGW Health Platform API",
+        "message": "Lumea Health Platform API",
         "version": "2.0",
         "endpoints": {
             "auth": "/api/auth",

backend/app/routes/__init__.py

@@ -1,5 +1,5 @@
 """
-Routes module for the Co-Code GGW Health Platform API.
+Routes module for the Lumea Health Platform API.
 """
 from . import auth, health, dashboard, reports, assistant, recommendations, websocket, ai_summary, medicines
 

backend/app/routes/documents.py

@@ -7,7 +7,7 @@ Provides endpoints for:
 - Missing data task management
 - Reprocessing
 
-Author: Co-Code GGW Health Platform
+Author: Lumea Health Platform
 """
 import logging
 from datetime import datetime

backend/app/services/__init__.py

@@ -1,5 +1,5 @@
 """
-Services module for the Co-Code GGW Health Platform.
+Services module for the Lumea Health Platform.
 """
 from .recommendation_service import RecommendationService, get_user_recommendations
 from .document_classifier import classify_document, ClassificationResult

backend/app/services/document_classifier.py

@@ -6,7 +6,7 @@ Uses pattern matching with priority-ordered rules to classify documents into:
 - Categories: Lab, Dental, MRI, X-ray, Prescription, Sleep
 - Document Types: Blood Panel, Lipid Panel, Checkup, Brain Scan, Chest, etc.
 
-Author: Co-Code GGW Health Platform
+Author: Lumea Health Platform
 """
 import re
 import logging

backend/app/services/document_processing.py

@@ -10,7 +10,7 @@ Orchestrates the full document processing flow:
 6. Database persistence
 7. Recompute trigger
 
-Author: Co-Code GGW Health Platform
+Author: Lumea Health Platform
 """
 import logging
 import uuid

backend/app/services/grok_extractor.py

@@ -13,7 +13,7 @@ HARD RULES:
 - Prefer null for missing values + create MissingDataTask
 - Always validate JSON against schema before accepting
 
-Author: Co-Code GGW Health Platform
+Author: Lumea Health Platform
 """
 import json
 import logging

backend/app/services/metric_extractor.py

@@ -9,7 +9,7 @@ Handles:
 - Unit normalization
 - Missing parameter detection
 
-Author: Co-Code GGW Health Platform
+Author: Lumea Health Platform
 """
 import re
 import logging

backend/src/__init__.py

@@ -1,5 +1,5 @@
 """
-Co-Code GGW Health Platform Backend
+Lumea Health Platform Backend
 
 Structured following the monolithic REST API pattern:
 - config/     Application config, environment variables, database setup

backend/src/app.py

@@ -1,5 +1,5 @@
 """
-Co-Code GGW Health Platform API
+Lumea Health Platform API
 
 Main application entry point following monolithic REST API structure.
 """
@@ -20,7 +20,7 @@ async def lifespan(app: FastAPI):
     yield
 
 
-app = FastAPI(title="Co-Code GGW Health Platform API", lifespan=lifespan)
+app = FastAPI(title="Lumea Health Platform API", lifespan=lifespan)
 
 # CORS configuration - allow both localhost ports and Docker
 origins = [
@@ -58,7 +58,7 @@ app.include_router(websocket_router)
 @app.get("/")
 async def root():
     return {
-        "message": "Co-Code GGW Health Platform API",
+        "message": "Lumea Health Platform API",
         "version": "2.0",
         "endpoints": {
             "auth": "/api/auth",

backend/src/routes/__init__.py

@@ -1,5 +1,5 @@
 """
-Routes module for the Co-Code GGW Health Platform API.
+Routes module for the Lumea Health Platform API.
 """
 from . import auth, health, dashboard, reports, assistant, recommendations, websocket
 

backend/src/services/__init__.py

@@ -1,5 +1,5 @@
 """
-Services module for the Co-Code GGW Health Platform.
+Services module for the Lumea Health Platform.
 """
 from .recommendation_service import RecommendationService, get_user_recommendations
 from .report_service import ReportService

backend/start.bat

@@ -1,5 +1,5 @@
 @echo off
-echo Starting Co-Code GGW Backend...
+echo Starting Lumea Backend...
 echo.
 
 if not exist venv (

backend/tests/__init__.py

@@ -1,3 +1,3 @@
 """
-Test suite for the Co-Code GGW Health Platform backend.
+Test suite for the Lumea Health Platform backend.
 """

frontend/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Co-Code GGW - Unified Medical Platform</title>\n    <meta name="description" content="Upload your lab reports, get them interpreted, and receive smart reminders for checkups + medicines. Co-Code GGW helps you stay preventive—without becoming your doctor." />
+    <title>Lumea - Unified Medical Platform</title>
+    <meta name="description" content="Upload your lab reports, get them interpreted, and receive smart reminders for checkups + medicines. Lumea helps you stay preventive—without becoming your doctor." />
     <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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "co-code-ggw",
+  "name": "lumea",
   "private": true,
   "version": "1.0.0",
   "type": "module",

frontend/src/components/ArtOfNaturalRemedies.tsx

@@ -136,7 +136,13 @@ function ArtOfNaturalRemedies() {
               viewport={{ once: true }}
               transition={{ delay: 0.5, duration: 0.6 }}
             >
-              <img src="https://images.unsplash.com/photo-1505751104628-0448e3c8c7b0?w=400&h=300&fit=crop" alt="Digital health records" />
+              <img 
+                src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop" 
+                alt="Digital health records" 
+                onError={(e) => {
+                  e.currentTarget.src = 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=400&h=300&fit=crop'
+                }}
+              />
             </motion.div>
           </div>
         </div>

frontend/src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
+import Logo from './ui/Logo'
 import './Footer.css'
 
 function Footer() {
@@ -16,7 +17,7 @@ function Footer() {
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <h3 className="footer-heading">Co-Code GGW</h3>
+            <h3 className="footer-heading">Lumea</h3>
             <p className="footer-text">
               {t('footer.description')}
             </p>
@@ -45,8 +46,7 @@ function Footer() {
             transition={{ delay: 0.2, duration: 0.6 }}
           >
             <div className="footer-logo">
-              <span className="footer-logo-main">Co-Code</span>
-              <span className="footer-logo-sub">GGW</span>
+              <Logo variant="footer" />
             </div>
             <h3 className="footer-cta-text">
               {t('footer.cta.title')}

frontend/src/components/Header.css

@@ -1,9 +1,11 @@
 .header {
-  padding: 20px 60px;
+  padding: 1rem 3.75rem;
   background-color: #f5f0e8;
   position: sticky;
   top: 0;
   z-index: 100;
+  margin: 0;
+  border: 0;
 }
 
 .header-container {

frontend/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import Logo from './ui/Logo'
 import LanguageSwitcher from './LanguageSwitcher'
 import './Header.css'
 
@@ -8,8 +9,6 @@ function Header() {
   const { t } = useTranslation()
 
   const navLinks = [
-    { label: 'Dashboard', href: '/dashboard', isRoute: true },
-    { label: 'Reports', href: '/reports', isRoute: true },
     { label: t('header.nav.features'), href: '#features' },
     { label: t('header.nav.howItWorks'), href: '#how-it-works' },
     { label: t('header.nav.privacySecurity'), href: '#privacy' },
@@ -24,15 +23,9 @@ function Header() {
       transition={{ duration: 0.8, ease: 'easeOut' }}
     >
       <div className="header-container">
-        <motion.a 
-          href="/" 
-          className="logo"
-          whileHover={{ scale: 1.05 }}
-          transition={{ type: 'spring', stiffness: 400 }}
-        >
-          <span className="logo-main">Co-Code</span>
-          <span className="logo-sub">GGW</span>
-        </motion.a>
+        <Link to="/">
+          <Logo variant="header" />
+        </Link>
 
         <nav className="nav">
           <ul className="nav-list">
@@ -44,25 +37,14 @@ function Header() {
                 animate={{ y: 0, opacity: 1 }}
                 transition={{ delay: 0.1 * index, duration: 0.5 }}
               >
-                {link.isRoute ? (
-                  <Link to={link.href} className="nav-link">
-                    <motion.span
-                      whileHover={{ scale: 1.1, color: '#4a7c59' }}
-                      transition={{ type: 'spring', stiffness: 300 }}
-                    >
-                      {link.label}
-                    </motion.span>
-                  </Link>
-                ) : (
-                  <motion.a 
-                    href={link.href} 
-                    className="nav-link"
-                    whileHover={{ scale: 1.1, color: '#4a7c59' }}
-                    transition={{ type: 'spring', stiffness: 300 }}
-                  >
-                    {link.label}
-                  </motion.a>
-                )}
+                <motion.a 
+                  href={link.href} 
+                  className="nav-link"
+                  whileHover={{ scale: 1.1, color: '#4a7c59' }}
+                  transition={{ type: 'spring', stiffness: 300 }}
+                >
+                  {link.label}
+                </motion.a>
               </motion.li>
             ))}
           </ul>

frontend/src/components/Hero.css

@@ -1,6 +1,6 @@
 .hero {
-  min-height: 100vh;
-  padding: 80px 40px 60px;
+  min-height: calc(100vh - 80px);
+  padding: 2rem 2.5rem 3.75rem;
   background-color: #f5f0e8;
   display: flex;
   align-items: center;
@@ -85,10 +85,10 @@
   background-color: #4a7c59;
   color: white;
   font-family: 'DM Sans', sans-serif;
-  font-size: 19px;
+  font-size: 1rem;
   font-weight: 500;
-  padding: 22px 48px;
-  border-radius: 40px;
+  padding: 0.875rem 2.5rem;
+  border-radius: 2rem;
   transition: all 0.3s ease;
   display: inline-block;
 }

frontend/src/components/HowWeCanHelp.css

@@ -47,7 +47,7 @@
 .btn-view-all {
   display: inline-block;
   background-color: #4a7c59;
-  color: white;
+  color: #f5f1e8;
   font-family: 'DM Sans', sans-serif;
   font-size: 18px;
   font-weight: 500;
@@ -107,13 +107,13 @@
   font-family: 'DM Sans', sans-serif;
   font-size: 17px;
   font-weight: 500;
-  color: #2d2d2d;
+  color: #f5f1e8;
   transition: all 0.3s ease;
 }
 
 .service-view-link:hover {
   gap: 14px;
-  color: #4a7c59;
+  color: #ffffff;
 }
 
 .view-icon {

frontend/src/components/dashboard/DashboardNavbar.tsx

@@ -3,6 +3,7 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Settings, LogOut, Home, LayoutDashboard, Bell, FileText, Activity, Sparkles, Pill } from 'lucide-react';
 import { logout } from '../../utils/auth';
+import Logo from '../ui/Logo';
 import './DashboardNavbar.css';
 
 interface DashboardNavbarProps {
@@ -42,17 +43,7 @@ function DashboardNavbar({ userName = 'User', userStatus = '87% Healthy' }: Dash
       <div className="dashboard-navbar-container">
         {/* Logo */}
         <Link to="/" className="dashboard-logo">
-          <motion.div
-            className="dashboard-logo-icon"
-            whileHover={{ rotate: 5, scale: 1.05 }}
-            transition={{ type: 'spring', stiffness: 400 }}
-          >
-            CC
-          </motion.div>
-          <div className="dashboard-logo-text">
-            <span className="dashboard-logo-main">Co-Code</span>
-            <span className="dashboard-logo-sub">GGW Health</span>
-          </div>
+          <Logo variant="dashboard" />
         </Link>
 
         {/* Navigation Links */}

frontend/src/components/ui/Logo.css

@@ -0,0 +1,29 @@
+.logo-component {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.logo-image {
+  height: auto;
+  object-fit: contain;
+}
+
+.logo-component.header .logo-image {
+  height: 50px;
+}
+
+.logo-component.footer .logo-image {
+  height: 45px;
+}
+
+.logo-component.dashboard .logo-image {
+  height: 40px;
+}
+
+@media (max-width: 768px) {
+  .logo-image {
+    height: 35px;
+  }
+}
+}

frontend/src/components/ui/Logo.tsx

@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion'
+import './Logo.css'
+import logoImage from '../../assets/logo.png'
+
+interface LogoProps {
+  className?: string
+  variant?: 'header' | 'footer' | 'dashboard'
+}
+
+function Logo({ className = '', variant = 'header' }: LogoProps) {
+  return (
+    <motion.div 
+      className={`logo-component ${variant} ${className}`}
+      whileHover={{ scale: 1.05 }}
+      transition={{ type: 'spring', stiffness: 400 }}
+    >
+      <img src={logoImage} alt="Lumea" className="logo-image" />
+    </motion.div>
+  )
+}
+
+export default Logo

frontend/src/components/ui/PdfPreview.css

@@ -0,0 +1,48 @@
+.pdf-preview-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.pdf-preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.pdf-preview-loading,
+.pdf-preview-error,
+.pdf-preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 1rem;
+  color: #666;
+}
+
+.pdf-preview-error {
+  color: #dc2626;
+}
+
+.error-detail {
+  font-size: 0.875rem;
+  color: #999;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/ui/PdfPreview.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { Loader2, AlertCircle, FileText } from 'lucide-react'
+import './PdfPreview.css'
+
+interface PdfPreviewProps {
+  fileUrl: string
+  fileName?: string
+  className?: string
+}
+
+function PdfPreview({ fileUrl, fileName, className = '' }: PdfPreviewProps) {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  const handleLoad = () => {
+    setLoading(false)
+    setError(false)
+  }
+
+  const handleError = () => {
+    setLoading(false)
+    setError(true)
+  }
+
+  if (!fileUrl) {
+    return (
+      <div className={`pdf-preview-empty ${className}`}>
+        <FileText size={48} />
+        <p>No file selected</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`pdf-preview-container ${className}`}>
+      {loading && (
+        <div className="pdf-preview-loading">
+          <Loader2 size={32} className="spin" />
+          <p>Loading PDF...</p>
+        </div>
+      )}
+      
+      {error && (
+        <div className="pdf-preview-error">
+          <AlertCircle size={48} />
+          <p>Failed to load PDF</p>
+          <p className="error-detail">{fileName || 'Unknown file'}</p>
+        </div>
+      )}
+      
+      {!error && (
+        <iframe
+          src={fileUrl}
+          title={fileName || 'PDF Preview'}
+          className="pdf-preview-iframe"
+          onLoad={handleLoad}
+          onError={handleError}
+          style={{ display: loading ? 'none' : 'block' }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default PdfPreview

frontend/src/components/ui/Tooltip.css

@@ -0,0 +1,84 @@
+.tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-content {
+  position: absolute;
+  background: #2d3748;
+  color: #fff;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.tooltip-top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip-bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip-left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip-right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Arrow */
+.tooltip-content::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.tooltip-top::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-color: #2d3748 transparent transparent transparent;
+}
+
+.tooltip-bottom::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #2d3748 transparent;
+}
+
+.tooltip-left::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent #2d3748;
+}
+
+.tooltip-right::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+  border-color: transparent #2d3748 transparent transparent;
+}

frontend/src/components/ui/Tooltip.tsx

@@ -0,0 +1,29 @@
+import { ReactNode, useState } from 'react'
+import './Tooltip.css'
+
+interface TooltipProps {
+  children: ReactNode
+  content: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+function Tooltip({ children, content, position = 'top' }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  return (
+    <div 
+      className="tooltip-wrapper"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className={`tooltip-content tooltip-${position}`}>
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip

frontend/src/components/ui/index.ts

@@ -0,0 +1,3 @@
+export { default as Logo } from './Logo'
+export { default as Tooltip } from './Tooltip'
+export { default as PdfPreview } from './PdfPreview'

frontend/src/i18n/locales/en.json

@@ -14,7 +14,7 @@
     "tagline": "First priority is",
     "taglineHighlight": "your health",
     "subtitle": "Track it. Understand it. Prevent it.",
-    "description": "Upload your lab reports, get them interpreted, and receive smart reminders for checkups + medicines. Co-Code GGW helps you stay preventive—without becoming your doctor.",
+    "description": "Upload your lab reports, get them interpreted, and receive smart reminders for checkups + medicines. Lumea helps you stay preventive—without becoming your doctor.",
     "disclaimer": "Not medical advice. Always consult a licensed clinician for diagnosis/treatment.",
     "cta": {
       "upload": "Upload Reports",
@@ -50,7 +50,7 @@
     }
   },
   "howItWorks": {
-    "title": "How Co-Code GGW Works",
+    "title": "How Lumea Works",
     "subtitle": "Upload reports, get insights, and stay on top of preventive care—all in one secure platform.",
     "features": {
       "ocr": {
@@ -69,7 +69,7 @@
     "cta": "View All Features"
   },
   "belief": {
-    "message": "Most health issues don't start as emergencies. They start quietly. Co-Code GGW keeps your health history organized and nudges you at the right time—so prevention becomes automatic.",
+    "message": "Most health issues don't start as emergencies. They start quietly. Lumea keeps your health history organized and nudges you at the right time—so prevention becomes automatic.",
     "tagline": "Built as a suggestion system, not a doctor."
   },
   "news": {
@@ -96,11 +96,11 @@
   "faq": {
     "title": "The Art Of",
     "titleHighlight": "Prevention",
-    "subtitle": "Co-Code GGW makes preventive care simple. Upload reports, track trends, and get nudges at the right time—so staying healthy doesn't feel like work.",
+    "subtitle": "Lumea makes preventive care simple. Upload reports, track trends, and get nudges at the right time—so staying healthy doesn't feel like work.",
     "items": {
       "isDoctor": {
-        "question": "Is Co-Code GGW a doctor?",
-        "answer": "No. Co-Code GGW is not a doctor and does not provide medical advice, diagnosis, or treatment. It is a suggestion system that helps you organize lab reports, track health trends, and receive smart reminders—always consult a licensed clinician for medical decisions."
+        "question": "Is Lumea a doctor?",
+        "answer": "No. Lumea is not a doctor and does not provide medical advice, diagnosis, or treatment. It is a suggestion system that helps you organize lab reports, track health trends, and receive smart reminders—always consult a licensed clinician for medical decisions."
       },
       "reports": {
         "question": "What reports can I upload?",
@@ -112,7 +112,7 @@
       },
       "reminders": {
         "question": "How are reminders personalized?",
-        "answer": "Based on your report history, age, and past checkup dates, Co-Code GGW suggests when to schedule follow-ups, refill medicines, or repeat tests. Reminders adapt dynamically as you upload new reports."
+        "answer": "Based on your report history, age, and past checkup dates, Lumea suggests when to schedule follow-ups, refill medicines, or repeat tests. Reminders adapt dynamically as you upload new reports."
       },
       "security": {
         "question": "How do you keep my data secure?",

frontend/src/i18n/locales/hi.json

@@ -14,7 +14,7 @@
     "tagline": "सबसे पहली प्राथमिकता है",
     "taglineHighlight": "आपका स्वास्थ्य",
     "subtitle": "ट्रैक करें। समझें। रोकें।",
-    "description": "अपनी जांच रिपोर्ट अपलोड करें, उनका विश्लेषण प्राप्त करें, और नियमित जांच व दवाइयों के लिए स्मार्ट स्मरण पाएं। Co-Code GGW आपको रोकथाम में मदद करता है—आपके डॉक्टर बने बिना।",
+    "description": "अपनी जांच रिपोर्ट अपलोड करें, उनका विश्लेषण प्राप्त करें, और नियमित जांच व दवाइयों के लिए स्मार्ट स्मरण पाएं। Lumea आपको रोकथाम में मदद करता है—आपके डॉक्टर बने बिना।",
     "disclaimer": "यह चिकित्सा सलाह नहीं है। निदान/उपचार के लिए हमेशा लाइसेंस प्राप्त चिकित्सक से परामर्श करें।",
     "cta": {
       "upload": "रिपोर्ट अपलोड करें",
@@ -50,7 +50,7 @@
     }
   },
   "howItWorks": {
-    "title": "Co-Code GGW कैसे काम करता है",
+    "title": "Lumea कैसे काम करता है",
     "subtitle": "रिपोर्ट अपलोड करें, जानकारी पाएं, और एक सुरक्षित मंच पर रोकथाम देखभाल के शीर्ष पर रहें।",
     "features": {
       "ocr": {
@@ -69,7 +69,7 @@
     "cta": "सभी विशेषताएं देखें"
   },
   "belief": {
-    "message": "अधिकतर स्वास्थ्य समस्याएं आपातकाल के रूप में शुरू नहीं होतीं। वे चुपचाप शुरू होती हैं। Co-Code GGW आपके स्वास्थ्य इतिहास को व्यवस्थित रखता है और सही समय पर आपको याद दिलाता है—ताकि रोकथाम स्वचालित हो जाए।",
+    "message": "अधिकतर स्वास्थ्य समस्याएं आपातकाल के रूप में शुरू नहीं होतीं। वे चुपचाप शुरू होती हैं। Lumea आपके स्वास्थ्य इतिहास को व्यवस्थित रखता है और सही समय पर आपको याद दिलाता है—ताकि रोकथाम स्वचालित हो जाए।",
     "tagline": "एक सुझाव प्रणाली के रूप में बनाया गया, डॉक्टर के रूप में नहीं।"
   },
   "news": {
@@ -96,11 +96,11 @@
   "faq": {
     "title": "रोकथाम की",
     "titleHighlight": "कला",
-    "subtitle": "Co-Code GGW रोकथाम देखभाल को सरल बनाता है। रिपोर्ट अपलोड करें, रुझान ट्रैक करें, और सही समय पर याद दिलाएं—ताकि स्वस्थ रहना काम जैसा न लगे।",
+    "subtitle": "Lumea रोकथाम देखभाल को सरल बनाता है। रिपोर्ट अपलोड करें, रुझान ट्रैक करें, और सही समय पर याद दिलाएं—ताकि स्वस्थ रहना काम जैसा न लगे।",
     "items": {
       "isDoctor": {
-        "question": "क्या Co-Code GGW एक डॉक्टर है?",
-        "answer": "नहीं। Co-Code GGW डॉक्टर नहीं है और चिकित्सा सलाह, निदान या उपचार प्रदान नहीं करता है। यह एक सुझाव प्रणाली है जो आपको जांच रिपोर्ट व्यवस्थित करने, स्वास्थ्य रुझान ट्रैक करने और स्मार्ट स्मरण प्राप्त करने में मदद करती है—चिकित्सा निर्णयों के लिए हमेशा लाइसेंस प्राप्त चिकित्सक से परामर्श करें।"
+        "question": "क्या Lumea एक डॉक्टर है?",
+        "answer": "नहीं। Lumea डॉक्टर नहीं है और चिकित्सा सलाह, निदान या उपचार प्रदान नहीं करता है। यह एक सुझाव प्रणाली है जो आपको जांच रिपोर्ट व्यवस्थित करने, स्वास्थ्य रुझान ट्रैक करने और स्मार्ट स्मरण प्राप्त करने में मदद करती है—चिकित्सा निर्णयों के लिए हमेशा लाइसेंस प्राप्त चिकित्सक से परामर्श करें।"
       },
       "reports": {
         "question": "मैं कौन सी रिपोर्ट अपलोड कर सकता हूं?",
@@ -112,7 +112,7 @@
       },
       "reminders": {
         "question": "स्मरण कैसे व्यक्तिगत किए जाते हैं?",
-        "answer": "आपकी रिपोर्ट इतिहास, उम्र और पिछली जांच तिथियों के आधार पर, Co-Code GGW सुझाव देता है कि फॉलो-अप कब शेड्यूल करें, दवाइयां फिर से भरें या परीक्षण दोहराएं। स्मरण गतिशील रूप से अनुकूलित होते हैं जैसे-जैसे आप नई रिपोर्ट अपलोड करते हैं।"
+        "answer": "आपकी रिपोर्ट इतिहास, उम्र और पिछली जांच तिथियों के आधार पर, Lumea सुझाव देता है कि फॉलो-अप कब शेड्यूल करें, दवाइयां फिर से भरें या परीक्षण दोहराएं। स्मरण गतिशील रूप से अनुकूलित होते हैं जैसे-जैसे आप नई रिपोर्ट अपलोड करते हैं।"
       },
       "security": {
         "question": "आप मेरा डेटा कैसे सुरक्षित रखते हैं?",

frontend/src/i18n/locales/mr.json

@@ -14,7 +14,7 @@
     "tagline": "पहिली प्राधान्यता आहे",
     "taglineHighlight": "तुमचे आरोग्य",
     "subtitle": "ट्रॅक करा। समजून घ्या। प्रतिबंध करा।",
-    "description": "तुमचे तपासणी अहवाल अपलोड करा, त्यांचे विश्लेषण मिळवा, आणि नियमित तपासणी व औषधांसाठी स्मार्ट स्मरणपत्र मिळवा। Co-Code GGW तुम्हाला प्रतिबंधात मदत करते—तुमचे डॉक्टर न बनता।",
+    "description": "तुमचे तपासणी अहवाल अपलोड करा, त्यांचे विश्लेषण मिळवा, आणि नियमित तपासणी व औषधांसाठी स्मार्ट स्मरणपत्र मिळवा। Lumea तुम्हाला प्रतिबंधात मदत करते—तुमचे डॉक्टर न बनता।",
     "disclaimer": "हा वैद्यकीय सल्ला नाही. निदान/उपचारासाठी नेहमी परवानाधारक वैद्यांचा सल्ला घ्या।",
     "cta": {
       "upload": "अहवाल अपलोड करा",
@@ -50,7 +50,7 @@
     }
   },
   "howItWorks": {
-    "title": "Co-Code GGW कसे काम करते",
+    "title": "Lumea कसे काम करते",
     "subtitle": "अहवाल अपलोड करा, माहिती मिळवा आणि एका सुरक्षित व्यासपीठावर प्रतिबंधात्मक काळजीच्या शीर्षस्थानी रहा।",
     "features": {
       "ocr": {
@@ -69,7 +69,7 @@
     "cta": "सर्व वैशिष्ट्ये पहा"
   },
   "belief": {
-    "message": "बहुतेक आरोग्य समस्या आणीबाणी म्हणून सुरू होत नाहीत. त्या शांतपणे सुरू होतात। Co-Code GGW तुमचा आरोग्य इतिहास व्यवस्थित ठेवते आणि योग्य वेळी तुम्हाला आठवण करून देते—जेणेकरून प्रतिबंध स्वयंचलित होईल।",
+    "message": "बहुतेक आरोग्य समस्या आणीबाणी म्हणून सुरू होत नाहीत। त्या शांतपणे सुरू होतात। Lumea तुमचा आरोग्य इतिहास व्यवस्थित ठेवते आणि योग्य वेळी तुम्हाला आठवण करून देते—जेणेकरून प्रतिबंध स्वयंचलित होईल।",
     "tagline": "एक सूचना प्रणाली म्हणून तयार केले, डॉक्टर म्हणून नाही।"
   },
   "news": {
@@ -96,11 +96,11 @@
   "faq": {
     "title": "प्रतिबंधाची",
     "titleHighlight": "कला",
-    "subtitle": "Co-Code GGW प्रतिबंधात्मक काळजी सोपी करते। अहवाल अपलोड करा, ट्रेंड ट्रॅक करा आणि योग्य वेळी आठवण करून द्या—जेणेकरून निरोगी राहणे कामासारखे वाटणार नाही।",
+    "subtitle": "Lumea प्रतिबंधात्मक काळजी सोपी करते। अहवाल अपलोड करा, ट्रेंड ट्रॅक करा आणि योग्य वेळी आठवण करून द्या—जेणेकरून निरोगी राहणे कामासारखे वाटणार नाही।",
     "items": {
       "isDoctor": {
-        "question": "Co-Code GGW डॉक्टर आहे का?",
-        "answer": "नाही। Co-Code GGW डॉक्टर नाही आणि वैद्यकीय सल्ला, निदान किंवा उपचार प्रदान करत नाही। ही एक सूचना प्रणाली आहे जी तुम्हाला तपासणी अहवाल व्यवस्थित करण्यात, आरोग्य ट्रेंड ट्रॅक करण्यात आणि स्मार्ट स्मरणपत्र प्राप्त करण्यात मदत करते—वैद्यकीय निर्णयांसाठी नेहमी परवानाधारक व��द्यांचा सल्ला घ्या।"
+        "question": "Lumea डॉक्टर आहे का?",
+        "answer": "नाही। Lumea डॉक्टर नाही आणि वैद्यकीय सल्ला, निदान किंवा उपचार प्रदान करत नाही। ही एक सूचना प्रणाली आहे जी तुम्हाला तपासणी अहवाल व्यवस्थित करण्यात, आरोग्य ट्रेंड ट्रॅक करण्यात आणि स्मार्ट स्मरणपत्र प्राप्त करण्यात मदत करते—वैद्यकीय निर्णयांसाठी नेहमी परवानाधारक वैद्यांचा सल्ला घ्या।"
       },
       "reports": {
         "question": "मी कोणते अहवाल अपलोड करू शकतो?",
@@ -112,7 +112,7 @@
       },
       "reminders": {
         "question": "स्मरणपत्र वैयक्तिक कसे केली जातात?",
-        "answer": "तुमच्या अहवाल इतिहास, वय आणि मागील तपासणी तारखांच्या आधारे, Co-Code GGW सुचवते की फॉलो-अप केव्हा शेड्यूल करावे, औषधे पुन्हा भरावीत किंवा चाचण्या पुन्हा करावीत। स्मरणपत्र डायनॅमिकपणे जुळवले जातात जसे तुम्ही नवीन अहवाल अपलोड करता।"
+        "answer": "तुमच्या अहवाल इतिहास, वय आणि मागील तपासणी तारखांच्या आधारे, Lumea सुचवते की फॉलो-अप केव्हा शेड्यूल करावे, औषधे पुन्हा भरावीत किंवा चाचण्या पुन्हा करावीत। स्मरणपत्र डायनॅमिकपणे जुळवले जातात जसे तुम्ही नवीन अहवाल अपलोड करता।"
       },
       "security": {
         "question": "तुम्ही माझा डेटा कसा सुरक्षित ठेवता?",

frontend/src/index.css

@@ -6,6 +6,8 @@
 
 html {
   font-size: 16px;
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -15,6 +17,8 @@ body {
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
 }
 
 a {

frontend/src/pages/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { Upload } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import DashboardNavbar from '../components/dashboard/DashboardNavbar';
 import HealthIndexCard from '../components/dashboard/HealthIndexCard';
 import HealthSummaryCard from '../components/dashboard/HealthSummaryCard';
@@ -13,6 +13,7 @@ import { API_BASE_URL } from '../config/api';
 import '../styles/dashboardTokens.css';
 import '../styles/dashboardBase.css';
 import './Dashboard.css';
+import './DashboardExtras.css';
 
 interface UserSummary {
   id: string;
@@ -230,12 +231,18 @@ function Dashboard() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.3 }}
           >
-            <RecommendationsPanel
-              authToken={authToken || undefined}
-              apiBaseUrl={API_BASE_URL}
-              maxInitialDisplay={3}
-              refreshTrigger={recommendationsRefreshTrigger}
-            />
+            <div className="recommendations-dashboard-wrapper">
+              <RecommendationsPanel
+                authToken={authToken || undefined}
+                apiBaseUrl={API_BASE_URL}
+                maxInitialDisplay={3}
+                refreshTrigger={recommendationsRefreshTrigger}
+                variant="dashboard"
+              />
+              <Link to="/recommendations" className="view-detailed-recommendations-btn">
+                View Detailed Recommendations
+              </Link>
+            </div>
           </motion.div>
 
           {/* Bottom Row: Trends Chart */}

frontend/src/pages/DashboardExtras.css

@@ -0,0 +1,27 @@
+/* Additional Dashboard styles for recommendations wrapper */
+.recommendations-dashboard-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.view-detailed-recommendations-btn {
+  align-self: flex-start;
+  padding: 0.75rem 1.5rem;
+  background-color: #4a7c59;
+  color: white;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.view-detailed-recommendations-btn:hover {
+  background-color: #3d6849;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
+}

frontend/src/pages/ReportSummary.css

@@ -582,6 +582,31 @@
   max-height: calc(100vh - 200px);
   position: sticky;
   top: 100px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-results-panel {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 200px);
+}
+
+.ai-results-panel .ai-tabs {
+  flex-shrink: 0;
+}
+
+.ai-results-panel .ai-content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: calc(100vh - 350px);
+}
+
+.ai-results-panel .ai-action-footer {
+  flex-shrink: 0;
+  padding: 16px 20px;
+  border-top: 1px solid #f0f0f0;
+  background: white;
 }
 
 /* AI Empty State */

frontend/src/pages/ReportSummary.tsx

@@ -18,6 +18,7 @@ import {
   Grid,
 } from 'lucide-react';
 import DashboardNavbar from '../components/dashboard/DashboardNavbar';
+import { PdfPreview } from '../components/ui';
 import './ReportSummary.css';
 
 import { API_BASE_URL } from '../config/api';
@@ -406,6 +407,11 @@ function ReportSummary() {
 
     if (selectedReports.length === 1) {
       const report = selectedReports[0];
+      const token = localStorage.getItem('access_token');
+      const fileUrl = report.preview_url
+        ? `${API_BASE}${report.preview_url}${token ? `?token=${token}` : ''}`
+        : '';
+      
       return (
         <div className="preview-single">
           <div className="preview-header">
@@ -413,25 +419,17 @@ function ReportSummary() {
             <span className="preview-date">{formatDate(report.report_date || report.uploaded_at)}</span>
           </div>
           <div className="preview-frame">
-            {report.file_type === '.pdf' ? (
-              <iframe
-                src={`${API_BASE}${report.preview_url}`}
-                title={report.filename}
-                className="preview-iframe"
-              />
-            ) : (
-              <img
-                src={`${API_BASE}${report.preview_url}`}
-                alt={report.filename}
-                className="preview-image"
-              />
-            )}
+            <PdfPreview
+              fileUrl={fileUrl}
+              fileName={report.filename}
+            />
           </div>
         </div>
       );
     }
 
     // Multiple reports - grid view
+    const token = localStorage.getItem('access_token');
     return (
       <div className="preview-multi">
         <div className="preview-multi-header">
@@ -439,42 +437,39 @@ function ReportSummary() {
           <span>{selectedReports.length} Reports Selected</span>
         </div>
         <div className={`preview-grid grid-${Math.min(selectedReports.length, 3)}`}>
-          {selectedReports.map(report => (
-            <div
-              key={report.id}
-              className={`preview-grid-item ${focusedPreviewId === report.id ? 'focused' : ''}`}
-              onClick={() => setFocusedPreviewId(focusedPreviewId === report.id ? null : report.id)}
-            >
-              <div className="preview-grid-item-header">
-                <span className="preview-grid-filename">{report.filename}</span>
-                <span className="preview-grid-date">{formatDate(report.report_date || report.uploaded_at)}</span>
-              </div>
-              <div className="preview-grid-content">
-                {report.file_type === '.pdf' ? (
-                  <iframe
-                    src={`${API_BASE}${report.preview_url}#toolbar=0&navpanes=0`}
-                    title={report.filename}
-                    className="preview-grid-iframe"
-                  />
-                ) : (
-                  <img
-                    src={`${API_BASE}${report.preview_url}`}
-                    alt={report.filename}
-                    className="preview-grid-image"
+          {selectedReports.map(report => {
+            const fileUrl = report.preview_url
+              ? `${API_BASE}${report.preview_url}${token ? `?token=${token}` : ''}`
+              : '';
+            
+            return (
+              <div
+                key={report.id}
+                className={`preview-grid-item ${focusedPreviewId === report.id ? 'focused' : ''}`}
+                onClick={() => setFocusedPreviewId(focusedPreviewId === report.id ? null : report.id)}
+              >
+                <div className="preview-grid-item-header">
+                  <span className="preview-grid-filename">{report.filename}</span>
+                  <span className="preview-grid-date">{formatDate(report.report_date || report.uploaded_at)}</span>
+                </div>
+                <div className="preview-grid-content">
+                  <PdfPreview
+                    fileUrl={fileUrl}
+                    fileName={report.filename}
                   />
-                )}
+                </div>
+                <button
+                  className="preview-grid-expand"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    window.open(fileUrl, '_blank');
+                  }}
+                >
+                  <Maximize2 size={14} />
+                </button>
               </div>
-              <button
-                className="preview-grid-expand"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  window.open(`${API_BASE}${report.preview_url}`, '_blank');
-                }}
-              >
-                <Maximize2 size={14} />
-              </button>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
     );
@@ -495,34 +490,35 @@ function ReportSummary() {
     }
 
     return (
-      <div className="ai-panel">
-        {/* Tabs */}
-        <div className="ai-tabs">
-          <button
-            className={`ai-tab ${activeTab === 'summary' ? 'active' : ''}`}
-            onClick={() => setActiveTab('summary')}
-            disabled={selectedIds.size !== 1}
-          >
-            Summary
-          </button>
-          <button
-            className={`ai-tab ${activeTab === 'comparison' ? 'active' : ''}`}
-            onClick={() => setActiveTab('comparison')}
-            disabled={selectedIds.size < 2}
-          >
-            Comparison
-          </button>
-          <button
-            className={`ai-tab ${activeTab === 'metrics' ? 'active' : ''}`}
-            onClick={() => setActiveTab('metrics')}
-            disabled={selectedIds.size === 0}
-          >
-            Metrics
-          </button>
-        </div>
+      <>
+        <div className="ai-panel">
+          {/* Tabs */}
+          <div className="ai-tabs">
+            <button
+              className={`ai-tab ${activeTab === 'summary' ? 'active' : ''}`}
+              onClick={() => setActiveTab('summary')}
+              disabled={selectedIds.size !== 1}
+            >
+              Summary
+            </button>
+            <button
+              className={`ai-tab ${activeTab === 'comparison' ? 'active' : ''}`}
+              onClick={() => setActiveTab('comparison')}
+              disabled={selectedIds.size < 2}
+            >
+              Comparison
+            </button>
+            <button
+              className={`ai-tab ${activeTab === 'metrics' ? 'active' : ''}`}
+              onClick={() => setActiveTab('metrics')}
+              disabled={selectedIds.size === 0}
+            >
+              Metrics
+            </button>
+          </div>
 
-        {/* Tab Content */}
-        <div className="ai-content">
+          {/* Tab Content */}
+          <div className="ai-content">
           {/* Summary Tab */}
           {activeTab === 'summary' && (
             <>
@@ -749,7 +745,41 @@ function ReportSummary() {
             </div>
           )}
         </div>
+        
+        {/* Action Footer - Generate Summary / Compare Button */}
+        <div className="ai-action-footer">
+          {selectedIds.size === 1 ? (
+            <button
+              className="action-btn primary"
+              onClick={() => generateSummary()}
+              disabled={summaryResult.loading}
+              style={{ width: '100%' }}
+            >
+              {summaryResult.loading ? (
+                <Loader2 size={18} className="spinner" />
+              ) : (
+                <Sparkles size={18} />
+              )}
+              Generate Summary
+            </button>
+          ) : (
+            <button
+              className="action-btn primary"
+              onClick={() => generateComparison()}
+              disabled={comparisonResult.loading || !validateSelection().valid}
+              style={{ width: '100%' }}
+            >
+              {comparisonResult.loading ? (
+                <Loader2 size={18} className="spinner" />
+              ) : (
+                <Sparkles size={18} />
+              )}
+              Compare Selected ({selectedIds.size})
+            </button>
+          )}
+        </div>
       </div>
+      </>
     );
   };
 
@@ -919,46 +949,6 @@ function ReportSummary() {
             </div>
           </div>
         </div>
-
-        {/* Floating Action Button */}
-        <AnimatePresence>
-          {selectedIds.size > 0 && (
-            <motion.div
-              className="floating-action"
-              initial={{ opacity: 0, y: 50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 50 }}
-            >
-              {selectedIds.size === 1 ? (
-                <button
-                  className="action-btn primary"
-                  onClick={() => generateSummary()}
-                  disabled={summaryResult.loading}
-                >
-                  {summaryResult.loading ? (
-                    <Loader2 size={18} className="spinner" />
-                  ) : (
-                    <Sparkles size={18} />
-                  )}
-                  Generate Summary
-                </button>
-              ) : (
-                <button
-                  className="action-btn primary"
-                  onClick={() => generateComparison()}
-                  disabled={comparisonResult.loading || !validateSelection().valid}
-                >
-                  {comparisonResult.loading ? (
-                    <Loader2 size={18} className="spinner" />
-                  ) : (
-                    <Sparkles size={18} />
-                  )}
-                  Compare Selected ({selectedIds.size})
-                </button>
-              )}
-            </motion.div>
-          )}
-        </AnimatePresence>
       </div>
     </div>
   );

frontend/src/pages/Reports.tsx

@@ -12,12 +12,15 @@ import {
   Clock,
   AlertCircle,
   FolderOpen,
+  X,
 } from 'lucide-react';
 import DashboardNavbar from '../components/dashboard/DashboardNavbar';
 import { useWebSocket } from '../hooks/useWebSocket';
 import { HealthProfileCard } from '../components/profile';
+import { Tooltip, PdfPreview } from '../components/ui';
 import { API_BASE_URL } from '../config/api';
 import './Reports.css';
+import './ReportsExtras.css';
 
 // Types
 interface Report {
@@ -74,6 +77,7 @@ function Reports() {
   const [uploadError, setUploadError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const itemsPerPage = 5;
+  const [pdfPreview, setPdfPreview] = useState<{ reportId: string; fileName: string; url: string } | null>(null);
 
   // WebSocket for real-time updates
   useWebSocket({
@@ -326,15 +330,15 @@ function Reports() {
     if (!token) return;
 
     try {
-      const response = await fetch(`${API_BASE_URL}/api/reports/${report.id}/debug`, {
-        headers: { Authorization: `Bearer ${token}` },
+      const downloadUrl = `${API_BASE_URL}/api/reports/${report.id}/download?token=${token}`;
+      setPdfPreview({
+        reportId: report.id,
+        fileName: report.name,
+        url: downloadUrl,
       });
-      if (response.ok) {
-        const data = await response.json();
-        alert(`Report: ${report.name}\nStatus: ${data.status}\nExtraction Method: ${data.extraction_method || 'N/A'}\nMetrics Found: ${data.extracted_metrics_count}\nText Length: ${data.text_length} chars\n\nPreview:\n${data.text_preview?.substring(0, 500) || 'No text'}`);
-      }
     } catch (error) {
       console.error('Error viewing report:', error);
+      alert('Failed to load PDF preview');
     }
   };
 
@@ -584,35 +588,43 @@ function Reports() {
                       </span>
                     </td>
                     <td className="actions-cell operations-col">
-                      <button
-                        className="action-btn"
-                        onClick={() => handleView(report)}
-                        title="View"
-                      >
-                        <Eye size={16} />
-                      </button>
-                      <button
-                        className="action-btn"
-                        onClick={() => handleReprocess(report)}
-                        title="Reprocess OCR"
-                        disabled={report.status === 'processing'}
-                      >
-                        <RefreshCw size={16} className={report.status === 'processing' ? 'spinning' : ''} />
-                      </button>
-                      <button
-                        className="action-btn"
-                        onClick={() => handleDelete(report)}
-                        title="Delete"
-                      >
-                        <Trash2 size={16} />
-                      </button>
-                      <button
-                        className="action-btn"
-                        onClick={() => handleDownload(report)}
-                        title="Download"
-                      >
-                        <Download size={16} />
-                      </button>
+                      <Tooltip content="View Document">
+                        <button
+                          className="action-btn"
+                          onClick={() => handleView(report)}
+                          aria-label="View"
+                        >
+                          <Eye size={16} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip content="Reload/Reprocess">
+                        <button
+                          className="action-btn"
+                          onClick={() => handleReprocess(report)}
+                          aria-label="Reprocess OCR"
+                          disabled={report.status === 'processing'}
+                        >
+                          <RefreshCw size={16} className={report.status === 'processing' ? 'spinning' : ''} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip content="Delete">
+                        <button
+                          className="action-btn"
+                          onClick={() => handleDelete(report)}
+                          aria-label="Delete"
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip content="Download">
+                        <button
+                          className="action-btn"
+                          onClick={() => handleDownload(report)}
+                          aria-label="Download"
+                        >
+                          <Download size={16} />
+                        </button>
+                      </Tooltip>
                     </td>
                   </motion.tr>
                 ))}
@@ -654,6 +666,44 @@ function Reports() {
           </div>
         </div>
       </div>
+
+      {/* PDF Preview Modal */}
+      <AnimatePresence>
+        {pdfPreview && (
+          <motion.div
+            className="pdf-modal-overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setPdfPreview(null)}
+          >
+            <motion.div
+              className="pdf-modal-content"
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="pdf-modal-header">
+                <h3>{pdfPreview.fileName}</h3>
+                <button
+                  className="pdf-modal-close"
+                  onClick={() => setPdfPreview(null)}
+                  aria-label="Close"
+                >
+                  <X size={24} />
+                </button>
+              </div>
+              <div className="pdf-modal-body">
+                <PdfPreview
+                  fileUrl={pdfPreview.url}
+                  fileName={pdfPreview.fileName}
+                />
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }

frontend/src/pages/ReportsExtras.css

@@ -0,0 +1,126 @@
+/* PDF Preview Modal */
+.pdf-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 2rem;
+}
+
+.pdf-modal-content {
+  background: white;
+  border-radius: 0.75rem;
+  width: 100%;
+  max-width: 1200px;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.pdf-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.pdf-modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.pdf-modal-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  transition: background 0.2s;
+}
+
+.pdf-modal-close:hover {
+  background: #f3f4f6;
+}
+
+.pdf-modal-body {
+  flex: 1;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+/* Table responsiveness fixes */
+.reports-table-container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.reports-table {
+  width: 100%;
+  min-width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.reports-table th,
+.reports-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.reports-table .doc-name {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.operations-col {
+  width: auto;
+  min-width: 180px;
+  white-space: nowrap;
+}
+
+.actions-cell {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.action-btn {
+  flex-shrink: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+  .reports-table th:not(.checkbox-col):not(.operations-col),
+  .reports-table td:not(.checkbox-col):not(.operations-col) {
+    padding: 0.5rem 0.75rem;
+  }
+  
+  .reports-table .doc-name {
+    max-width: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pdf-modal-overlay {
+    padding: 1rem;
+  }
+  
+  .pdf-modal-content {
+    height: 85vh;
+  }
+}