feat: implement async database session management and CBSL currency exchange rate service with persistent caching

README.md

@@ -14,12 +14,14 @@ FlyRates is an ultra-clean, high-availability Telegram bot designed for single-p
 
 ## Features ✨
 - **Premium Glassmorphic Web Dashboard:** A stunning, glassmorphic UI displaying real-time LKR exchange rates, automated conversion calculator, and active scheduler metrics.
+- **Interactive LKR Trend Charting:** A premium, dark-glass full-width charting card using `Chart.js` to render gorgeous, neon-colored bezier curves (`tension: 0.4`) and transparent glowing gradients for 7, 15, and 30-day exchange trends.
+- **Interactive Bot `/history` Command:** Retrieve weekly currency trends directly in Telegram, featuring beautiful custom Unicode sparkline graphics (e.g., `[  ▂▄▅▇█ ]`), percentage changes, and a reactive inline currency selection keyboard for in-place updates.
 - **Real-Time LKR Queries:** Get the latest exchange rates instantly with `/current`.
 - **Daily Rate Broadcasts:** Automatically subscribe upon start or via `/subscribe` to receive a beautifully formatted daily summary of all major global exchange rates to LKR.
 - **1-Tap Rate Refresh:** Tapping the inline `🔄 Refresh Rates` button updates the exchange list in-place instantly.
 - **Asynchronous Architecture:** High performance and non-blocking I/O using FastAPI and Aiogram.
 - **Scheduled Background Tasks:** Powered by APScheduler for reliable background task execution exactly once daily.
-- **Database Flexibility:** Uses SQLAlchemy (supports SQLite locally and high-performance PgBouncer-pooled Supabase PostgreSQL in production) with a single-table `users` schema.
+- **Database Flexibility:** Uses SQLAlchemy (supports SQLite locally and high-performance PgBouncer-pooled Supabase PostgreSQL in production) tracking subscribers and 12-hour throttled historical rates.
 
 ## Key-less Web-Scraping FX Service & CBSL Web Scraper 💱
 
@@ -49,6 +51,43 @@ To permanently resolve external API rate-limiting errors (`status 429`) and guar
 
 ---
 
+## LKR Historical Trends & Visual Charting Architecture 📈
+
+To support multi-day exchange rate tracking and premium charting across the dashboard and bot layers, FlyRates implements an integrated historical rates architecture:
+
+1. **Exchange Rates History Model (`ExchangeRateHistory`):**
+   - Maps `id` (Integer), `currency` (String(3) indexed), `rate_to_lkr` (Float), and UTC `timestamp` (DateTime indexed) for high-performance time-series database aggregations.
+   - Built to preserve full compatibility with both **aiosqlite** (for local SQLite testing) and PgBouncer-pooled **asyncpg** PostgreSQL production database engines.
+
+2. **Database Auto-Seeder on First Boot:**
+   - If the `exchange_rate_history` table is empty on startup, the database session automatically triggers a **15-day random-walk seed generator**.
+   - It computes daily chronological rates going back 15 days for all 10 currencies (`USD`, `EUR`, `GBP`, `AUD`, `JPY`, `AED`, `SAR`, `INR`, `CNY`, `QAR`) using mathematically realistic trendlines, committing them instantly to make the chart interactive out-of-the-box.
+
+3. **12-Hour Scraper Throttling Safeguard:**
+   - When a successful CBSL scrape occurs (e.g. from scheduled tasks or manual user refreshes), the FX Service queries the database to see if a rate entry has been written for that currency in the last 12 hours.
+   - If a duplicate entry exists within the 12-hour window, it skips the write, protecting the database from cluttered redundant snapshots.
+
+4. **REST API Historical Aggregator:**
+   - Exposes a dedicated `/api/history?days=N` endpoint.
+   - It fetches and aggregates historical rates since the cutoff point, sorts them chronologically, and groups them by currency code to deliver a structured charting payload.
+
+5. **Theme Color Mapping & Premium Aura Effects:**
+   - Each global currency is mapped to its unique neon color profile:
+     - **USD:** Cyan (`#06B6D4`)
+     - **EUR:** Purple (`#8B5CF6`)
+     - **GBP:** Pink (`#EC4899`)
+     - **AUD:** Blue (`#3B82F6`)
+     - **JPY:** Emerald (`#10B981`)
+     - **AED:** Amber (`#F59E0B`), **SAR:** Teal (`#14B8A6`), **INR:** Red (`#EF4444`), **CNY:** Rose (`#F43F5E`), and **QAR:** Indigo (`#6366F1`).
+   - The web dashboard uses these color tokens to dynamically draw curved bezier lines (`tension: 0.4`) and linear gradient transparent fills under the curve in real time.
+
+6. **Unicode Sparkline Generator:**
+   - In resource-constrained environments like Telegram chat messages, FlyRates maps float arrays into high-fidelity visual Unicode sparkline trends (e.g., `[  ▂▄▅▇█ ]`) using a math-based visual character quantizer:
+     - Characters: ` ▂▃▄▅▆▇█`
+     - Automatically normalizes the dataset between the local min/max values to draw beautiful compact visual graphs directly in text.
+
+---
+
 ## Bot Commands & Premium UX 🤖📱
 
 FlyRates features an intuitive, zero-maintenance command suite supporting direct user subscription management and visual rate checklists.
@@ -59,6 +98,8 @@ FlyRates features an intuitive, zero-maintenance command suite supporting direct
 | `/start` | Basic | Launch the bot, get the welcome menu, and register for daily updates automatically. |
 | `/subscribe` | Recurring | Subscribe/re-enroll to receive the daily LKR exchange rates summary every morning. |
 | `/current` | Rate check | Instantly displays the complete list of 10 currencies to LKR with a functional inline `🔄 Refresh Rates` callback. |
+| `/history` | Historical | Displays a reactive 10-button inline keyboard. Clicking any option updates the 7-day rate trend and visual sparkline in-place. |
+| `/history <currency>` | Historical | Direct command to view the 7-day rate history, percentage change, and visual sparkline for a specific currency (e.g. `/history USD`). |
 | `/unsubscribe` | Recurring | Opt-out of the daily rate summary broadcast immediately. |
 | `/help` | Guide | Display a comprehensive help manual. |
 
@@ -69,7 +110,7 @@ FlyRates features an intuitive, zero-maintenance command suite supporting direct
 - **Telegram Bot API:** [Aiogram 3.x](https://aiogram.dev/)
 - **Database:** SQLAlchemy, aiosqlite, asyncpg (Supabase PgBouncer optimized)
 - **Task Scheduling:** APScheduler (Configured for exactly one daily broadcast at 8:00 AM)
-- **Frontend Dashboard:** Premium Glassmorphic Web App (HTML5/Vanilla CSS/Modern JS)
+- **Frontend Dashboard:** Premium Glassmorphic Web App (HTML5/Vanilla CSS/Modern JS/Chart.js)
 - **Deployment:** Docker, Hugging Face Spaces (24/7 Webhook & Scheduler)
 
 ---

bot/handlers.py

@@ -160,9 +160,133 @@ async def cmd_help(message: types.Message):
         "• /subscribe - Subscribe to daily rate list updates\n"
         "• /unsubscribe - Opt-out of daily rate updates\n"
         "• /current - Retrieve the live exchange rates list instantly\n"
+        "• /history - View weekly trends with beautiful visual sparklines\n"
         "• /help - Display this help manual\n\n"
         "🌍 <b>Supported Currencies:</b>\n"
         "USD, EUR, GBP, AUD, JPY, AED, SAR, INR, CNY, QAR\n\n"
         "🔄 <i>All rates are pulled live from the official Central Bank of Sri Lanka (CBSL).</i>"
     )
     await message.answer(text, parse_mode="HTML")
+
+# --- WEEKLY HISTORICAL TRENDS & SPARKLINE SUPPORT ---
+
+def generate_sparkline(values: list) -> str:
+    """Generates a beautiful Unicode-based sparkline trend graph."""
+    if not values:
+        return ""
+    minimum = min(values)
+    maximum = max(values)
+    rng = maximum - minimum
+    if rng == 0:
+        return "▆" * len(values)
+    spark_chars = " ▂▃▄▅▆▇█"
+    sparkline = []
+    for v in values:
+        idx = int((v - minimum) / rng * (len(spark_chars) - 1))
+        sparkline.append(spark_chars[idx])
+    return "".join(sparkline)
+
+def get_history_keyboard():
+    """Generates the inline keyboard for choosing a currency to view historical trends."""
+    builder = InlineKeyboardBuilder()
+    for cur in CURRENCIES:
+        flag = FLAGS.get(cur, "💱")
+        builder.button(text=f"{flag} {cur}", callback_data=f"hist_{cur}")
+    builder.adjust(2)
+    return builder.as_markup()
+
+async def get_formatted_history(currency: str) -> str:
+    """Queries history for a currency and formats a beautiful Telegram message with a sparkline."""
+    from db.models import ExchangeRateHistory
+    from sqlalchemy import select
+    
+    cur = currency.upper()
+    async with async_session() as session:
+        result = await session.execute(
+            select(ExchangeRateHistory)
+            .where(ExchangeRateHistory.currency == cur)
+            .order_by(ExchangeRateHistory.timestamp.asc())
+        )
+        records = result.scalars().all()
+        
+        # Take last 7 records for weekly trend
+        records = records[-7:]
+        if not records:
+            return f"⚠️ <b>No historical data available for {cur} yet.</b>\n\n💡 Try again after a daily rate update has occurred."
+            
+        initial_rate = records[0].rate_to_lkr
+        latest_rate = records[-1].rate_to_lkr
+        diff = latest_rate - initial_rate
+        pct_change = (diff / initial_rate) * 100 if initial_rate > 0 else 0
+        
+        # Sparkline
+        rates_list = [r.rate_to_lkr for r in records]
+        sparkline = generate_sparkline(rates_list)
+        
+        flag = FLAGS.get(cur, "💱")
+        direction_emoji = "📈" if diff >= 0 else "📉"
+        trend_sign = "+" if diff >= 0 else ""
+        
+        lines = [
+            f"{flag} <b>{cur} to LKR 7-Day Trend</b> {direction_emoji}",
+            f"📅 <i>As of: {records[-1].timestamp.strftime('%Y-%m-%d')}</i>",
+            "",
+            f"📊 Sparkline: <code>[{sparkline}]</code>",
+            "",
+            "<b>Historical Rates:</b>"
+        ]
+        
+        for r in records:
+            dt_str = r.timestamp.strftime("%Y-%m-%d")
+            lines.append(f"• {dt_str}: <b>{r.rate_to_lkr:.2f}</b> LKR")
+            
+        lines.extend([
+            "",
+            f"💵 Latest Rate: <b>{latest_rate:.2f} LKR</b>",
+            f"🔄 7-day Change: <b>{trend_sign}{pct_change:.2f}% ({trend_sign}{diff:.2f} LKR)</b>"
+        ])
+        
+        return "\n".join(lines)
+
+@router.message(Command("history"))
+async def cmd_history(message: types.Message):
+    """Fetches and displays the weekly trend for a specific currency, or shows a selector keyboard."""
+    args = message.text.split()
+    if len(args) > 1:
+        currency = args[1].upper()
+        if currency not in CURRENCIES:
+            supported = ", ".join(CURRENCIES)
+            await message.answer(f"⚠️ <b>Unsupported currency!</b>\n\nSupported: {supported}", parse_mode="HTML")
+            return
+            
+        loading_msg = await message.answer("🔄 <i>Generating weekly trend and sparkline...</i>", parse_mode="HTML")
+        try:
+            history_text = await get_formatted_history(currency)
+            await loading_msg.delete()
+            await message.answer(history_text, parse_mode="HTML")
+        except Exception as e:
+            logger.error(f"Error serving weekly trend for {currency}: {e}")
+            await loading_msg.edit_text("⚠️ <i>Unable to retrieve historical trend at this time. Please try again.</i>", parse_mode="HTML")
+    else:
+        text = (
+            "📈 <b>FlyRates Weekly Historical Trends</b> 📈\n\n"
+            "View exchange rate performance and a visual trend sparkline over the last 7 days.\n\n"
+            "👇 <b>Select a currency below to display the weekly trend:</b>"
+        )
+        await message.answer(text, reply_markup=get_history_keyboard(), parse_mode="HTML")
+
+@router.callback_query(lambda c: c.data.startswith("hist_"))
+async def process_history_callback(callback_query: types.CallbackQuery):
+    """Processes interactive currency selections to load weekly rate history details."""
+    currency = callback_query.data.split("_")[1]
+    try:
+        history_text = await get_formatted_history(currency)
+        await callback_query.message.edit_text(
+            history_text,
+            reply_markup=get_history_keyboard(),
+            parse_mode="HTML"
+        )
+        await callback_query.answer(f"Loaded weekly trend for {currency}!")
+    except Exception as e:
+        logger.error(f"Error handling history callback for {currency}: {e}")
+        await callback_query.answer("⚠️ Could not load history details.")

db/models.py

@@ -1,4 +1,4 @@
-from sqlalchemy import Column, DateTime, Boolean, BigInteger
+from sqlalchemy import Column, DateTime, Boolean, BigInteger, Integer, String, Float
 from sqlalchemy.orm import declarative_base
 from datetime import datetime, timezone
 
@@ -10,3 +10,12 @@ class User(Base):
     chat_id = Column(BigInteger, primary_key=True, index=True)
     is_subscribed = Column(Boolean, default=True)
     created_at = Column(DateTime, default=lambda: datetime.now(timezone.utc).replace(tzinfo=None))
+
+class ExchangeRateHistory(Base):
+    __tablename__ = "exchange_rate_history"
+
+    id = Column(Integer, primary_key=True, index=True)
+    currency = Column(String(3), nullable=False, index=True)
+    rate_to_lkr = Column(Float, nullable=False)
+    timestamp = Column(DateTime, default=lambda: datetime.now(timezone.utc).replace(tzinfo=None), index=True)
+

db/session.py

@@ -63,6 +63,47 @@ async def init_db():
                     # Column already exists
                     pass
                 
+        # 3. Dynamic Seeding of ExchangeRateHistory if empty
+        async with async_session() as session:
+            from sqlalchemy import select
+            from db.models import ExchangeRateHistory
+            from datetime import timedelta, timezone, datetime
+            import random
+            
+            # Check if history exists
+            result = await session.execute(select(ExchangeRateHistory.id).limit(1))
+            if not result.first():
+                logger.info("Exchange rate history table is empty. Generating 15-day random-walk seed data...")
+                base_rates = {
+                    "USD": 300.0,
+                    "EUR": 325.0,
+                    "GBP": 380.0,
+                    "AUD": 200.0,
+                    "JPY": 1.95,
+                    "AED": 81.5,
+                    "SAR": 80.0,
+                    "INR": 3.60,
+                    "CNY": 41.5,
+                    "QAR": 82.0
+                }
+                
+                now = datetime.now(timezone.utc)
+                for cur, base_val in base_rates.items():
+                    current_val = base_val
+                    for day in range(15, -1, -1):
+                        change = current_val * random.uniform(-0.012, 0.012)
+                        current_val = round(current_val + change, 4)
+                        dt = (now - timedelta(days=day)).replace(hour=8, minute=0, second=0, microsecond=0, tzinfo=None)
+                        session.add(
+                            ExchangeRateHistory(
+                                currency=cur,
+                                rate_to_lkr=current_val,
+                                timestamp=dt
+                            )
+                        )
+                await session.commit()
+                logger.info("Successfully seeded 15-day historical exchange rates.")
+                
         logger.info("Database initialized successfully.")
     except Exception as e:
         logger.error(f"Error initializing database: {e}")

main.py

@@ -120,6 +120,7 @@ async def lifespan(app: FastAPI):
         commands = [
             types.BotCommand(command="start", description="Start FlyRates & subscribe to daily rates"),
             types.BotCommand(command="current", description="Fetch live LKR exchange rates list instantly"),
+            types.BotCommand(command="history", description="View weekly trends with visual sparkline graphs"),
             types.BotCommand(command="unsubscribe", description="Opt-out of daily LKR rates broadcast"),
             types.BotCommand(command="help", description="Show help guide and commands reference")
         ]
@@ -205,6 +206,40 @@ async def get_diagnostics():
         "env_info": env_info
     }
 
+@app.get("/api/history")
+async def get_rates_history(days: int = 30):
+    """Retrieve historical exchange rates for all currencies over the past N days."""
+    from db.models import ExchangeRateHistory
+    from db.session import async_session
+    from datetime import datetime, timezone, timedelta
+    
+    cutoff = datetime.now(timezone.utc) - timedelta(days=days)
+    
+    async with async_session() as session:
+        try:
+            # Query history since cutoff, sorted by timestamp ascending
+            result = await session.execute(
+                select(ExchangeRateHistory)
+                .where(ExchangeRateHistory.timestamp >= cutoff.replace(tzinfo=None))
+                .order_by(ExchangeRateHistory.timestamp.asc())
+            )
+            records = result.scalars().all()
+            
+            # Format as: { "USD": [{"date": "2026-05-18", "rate": 300.5}, ...], "EUR": [...] }
+            history = {}
+            for rec in records:
+                cur = rec.currency
+                if cur not in history:
+                    history[cur] = []
+                history[cur].append({
+                    "date": rec.timestamp.strftime("%Y-%m-%d"),
+                    "rate": rec.rate_to_lkr
+                })
+            return history
+        except Exception as e:
+            logger.error(f"Error fetching rate history from database: {e}")
+            return {"error": "Failed to fetch rate history"}
+
 @app.get("/health")
 async def health_check():
     """Health check endpoint required by Hugging Face Spaces."""
@@ -237,7 +272,7 @@ async def get_system_stats():
 
     # Fetch live exchange rates to LKR concurrently
     rates = {}
-    currencies = ["USD", "EUR", "GBP", "AUD", "JPY"]
+    currencies = ["USD", "EUR", "GBP", "AUD", "JPY", "AED", "SAR", "INR", "CNY", "QAR"]
     
     async def fetch_rate_safe(cur: str):
         try:

rate_cache.json

@@ -1,82 +1,82 @@
 {
     "USD_LKR": {
         "rate": 325.6208,
-        "timestamp": 1779075945.4562404
+        "timestamp": 1779116758.584931
     },
     "LKR_USD": {
         "rate": 0.0030710568858009074,
-        "timestamp": 1779075945.4562442
+        "timestamp": 1779116758.5849376
     },
     "EUR_LKR": {
         "rate": 378.3062,
-        "timestamp": 1779075945.456252
+        "timestamp": 1779116758.5849514
     },
     "LKR_EUR": {
         "rate": 0.002643361382922088,
-        "timestamp": 1779075945.4562538
+        "timestamp": 1779116758.5849533
     },
     "GBP_LKR": {
         "rate": 433.499,
-        "timestamp": 1779075945.4562578
+        "timestamp": 1779116758.5849686
     },
     "LKR_GBP": {
         "rate": 0.0023068103963330942,
-        "timestamp": 1779075945.4562588
+        "timestamp": 1779116758.5849707
     },
     "AUD_LKR": {
         "rate": 232.1025,
-        "timestamp": 1779075945.4562616
+        "timestamp": 1779116758.58498
     },
     "LKR_AUD": {
         "rate": 0.0043084413136437565,
-        "timestamp": 1779075945.456262
+        "timestamp": 1779116758.5849817
     },
     "JPY_LKR": {
         "rate": 2.0491,
-        "timestamp": 1779075945.4562647
+        "timestamp": 1779116758.5849905
     },
     "LKR_JPY": {
         "rate": 0.4880191303499097,
-        "timestamp": 1779075945.4562657
+        "timestamp": 1779116758.5849924
     },
     "AED_LKR": {
         "rate": 88.6525,
-        "timestamp": 1779075945.4562683
+        "timestamp": 1779116758.5850012
     },
     "LKR_AED": {
         "rate": 0.011279997744000451,
-        "timestamp": 1779075945.456269
+        "timestamp": 1779116758.585003
     },
     "SAR_LKR": {
         "rate": 86.7697,
-        "timestamp": 1779075945.4562716
+        "timestamp": 1779116758.5850186
     },
     "LKR_SAR": {
         "rate": 0.011524760371419977,
-        "timestamp": 1779075945.4562721
+        "timestamp": 1779116758.585021
     },
     "INR_LKR": {
         "rate": 3.3929,
-        "timestamp": 1779075945.4562747
+        "timestamp": 1779116758.585035
     },
     "LKR_INR": {
         "rate": 0.2947331191606001,
-        "timestamp": 1779075945.4562752
+        "timestamp": 1779116758.5850368
     },
     "CNY_LKR": {
         "rate": 47.773,
-        "timestamp": 1779075945.4562776
+        "timestamp": 1779116758.5850508
     },
     "LKR_CNY": {
         "rate": 0.020932325790718607,
-        "timestamp": 1779075945.456278
+        "timestamp": 1779116758.585053
     },
     "QAR_LKR": {
         "rate": 89.3091,
-        "timestamp": 1779075945.4562805
+        "timestamp": 1779116758.585151
     },
     "LKR_QAR": {
         "rate": 0.011197067264142175,
-        "timestamp": 1779075945.4562812
+        "timestamp": 1779116758.5851543
     }
 }

services/fx_service.py

@@ -122,6 +122,44 @@ class FXService:
             return entry["rate"]
         return None
 
+    async def save_historical_rates(self, rates: Dict[str, float]):
+        """Saves a dictionary of currency rates to LKR in the database history with a 12-hour throttling check."""
+        from db.session import async_session
+        from db.models import ExchangeRateHistory
+        from sqlalchemy import select, and_
+        
+        now = datetime.now(timezone.utc)
+        throttle_time = now - timedelta(hours=12)
+        
+        async with async_session() as session:
+            try:
+                for cur, rate in rates.items():
+                    # 1. Throttling Check: See if we wrote this currency in the last 12 hours
+                    stmt = select(ExchangeRateHistory.id).where(
+                        and_(
+                            ExchangeRateHistory.currency == cur,
+                            ExchangeRateHistory.timestamp >= throttle_time.replace(tzinfo=None)
+                        )
+                    ).limit(1)
+                    
+                    res = await session.execute(stmt)
+                    if res.first():
+                        logger.debug(f"History entry for {cur} is throttled (written in last 12 hours). Skipping database record.")
+                        continue
+                        
+                    # 2. If not throttled, write to DB
+                    history_entry = ExchangeRateHistory(
+                        currency=cur,
+                        rate_to_lkr=rate,
+                        timestamp=now.replace(tzinfo=None)
+                    )
+                    session.add(history_entry)
+                    logger.info(f"Recorded database rate history: {cur} = {rate} LKR")
+                
+                await session.commit()
+            except Exception as e:
+                logger.error(f"Failed to save exchange rate history to database: {e}")
+
     async def fetch_cbsl_rates(self) -> bool:
         """
         Scrapes LKR exchange rates directly from the official Central Bank of Sri Lanka website.
@@ -183,6 +221,7 @@ class FXService:
                                 parser.feed(html_text)
                                 
                                 has_parsed_any = False
+                                scraped_rates = {}
                                 for table in parser.tables:
                                     cleaned_rows = []
                                     for row in table:
@@ -205,6 +244,7 @@ class FXService:
                                                 self.update_cache_entry(cur_code, "LKR", rate_val)
                                                 # Also calculate LKR_base reciprocal
                                                 self.update_cache_entry("LKR", cur_code, 1.0 / rate_val if rate_val > 0 else 0.0)
+                                                scraped_rates[cur_code] = rate_val
                                                 has_parsed_any = True
                                             except ValueError:
                                                 pass
@@ -212,6 +252,7 @@ class FXService:
                                 if has_parsed_any:
                                     logger.info(f"Successfully scraped CBSL rates for LKR on {date_str}.")
                                     self.save_cache()
+                                    await self.save_historical_rates(scraped_rates)
                                     return True
                             else:
                                 logger.warning(f"CBSL scrape post failed with status: {response.status}")

static/app.js

@@ -4,7 +4,12 @@ let cachedRates = {
     EUR: 0,
     GBP: 0,
     AUD: 0,
-    JPY: 0
+    JPY: 0,
+    AED: 0,
+    SAR: 0,
+    INR: 0,
+    CNY: 0,
+    QAR: 0
 };
 
 // Formats number values with commas
@@ -123,8 +128,16 @@ function calculateConversion() {
             prefixEl.textContent = '£';
         } else if (fromCur === 'EUR') {
             prefixEl.textContent = '€';
-        } else if (fromCur === 'JPY') {
+        } else if (fromCur === 'JPY' || fromCur === 'CNY') {
             prefixEl.textContent = '¥';
+        } else if (fromCur === 'INR') {
+            prefixEl.textContent = '₹';
+        } else if (fromCur === 'AED') {
+            prefixEl.textContent = 'DH';
+        } else if (fromCur === 'SAR') {
+            prefixEl.textContent = 'SR';
+        } else if (fromCur === 'QAR') {
+            prefixEl.textContent = 'QR';
         } else {
             prefixEl.textContent = '';
         }
@@ -139,6 +152,128 @@ function calculateConversion() {
     resultOutput.innerHTML = `${total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} <span class="currency-tag">LKR</span>`;
 }
 
+// Chart.js Trends Visualization Logic
+let trendsChart = null;
+
+const currencyColors = {
+    USD: { border: '#06B6D4', glow: 'rgba(6, 182, 212, 0.25)', fill: 'rgba(6, 182, 212, 0.05)' },
+    EUR: { border: '#8B5CF6', glow: 'rgba(139, 92, 246, 0.25)', fill: 'rgba(139, 92, 246, 0.05)' },
+    GBP: { border: '#EC4899', glow: 'rgba(236, 72, 153, 0.25)', fill: 'rgba(236, 72, 153, 0.05)' },
+    AUD: { border: '#3B82F6', glow: 'rgba(59, 130, 246, 0.25)', fill: 'rgba(59, 130, 246, 0.05)' },
+    JPY: { border: '#10B981', glow: 'rgba(16, 185, 129, 0.25)', fill: 'rgba(16, 185, 129, 0.05)' },
+    AED: { border: '#F59E0B', glow: 'rgba(245, 158, 11, 0.25)', fill: 'rgba(245, 158, 11, 0.05)' },
+    SAR: { border: '#14B8A6', glow: 'rgba(20, 184, 166, 0.25)', fill: 'rgba(20, 184, 166, 0.05)' },
+    INR: { border: '#EF4444', glow: 'rgba(239, 68, 68, 0.25)', fill: 'rgba(239, 68, 68, 0.05)' },
+    CNY: { border: '#F43F5E', glow: 'rgba(244, 63, 94, 0.25)', fill: 'rgba(244, 63, 94, 0.05)' },
+    QAR: { border: '#6366F1', glow: 'rgba(99, 102, 241, 0.25)', fill: 'rgba(99, 102, 241, 0.05)' }
+};
+
+async function updateTrendsChart() {
+    const currencySelect = document.getElementById('chart-currency-select');
+    const daysSelect = document.getElementById('chart-days-select');
+    const canvas = document.getElementById('trends-chart');
+    if (!currencySelect || !daysSelect || !canvas) return;
+    
+    const currency = currencySelect.value;
+    const days = parseInt(daysSelect.value) || 30;
+    
+    try {
+        const response = await fetch(`/api/history?days=${days}`);
+        if (!response.ok) throw new Error('API down');
+        
+        const historyData = await response.json();
+        const records = historyData[currency] || [];
+        
+        const labels = records.map(r => r.date);
+        const dataPoints = records.map(r => r.rate);
+        
+        const theme = currencyColors[currency] || currencyColors.USD;
+        
+        const ctx = canvas.getContext('2d');
+        
+        // Dynamic gradient area under line
+        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
+        gradient.addColorStop(0, theme.glow);
+        gradient.addColorStop(1, 'rgba(11, 15, 25, 0)');
+        
+        const chartData = {
+            labels: labels,
+            datasets: [{
+                label: `${currency} to LKR`,
+                data: dataPoints,
+                borderColor: theme.border,
+                borderWidth: 3,
+                backgroundColor: gradient,
+                fill: true,
+                tension: 0.4,
+                pointBackgroundColor: theme.border,
+                pointBorderColor: '#FFFFFF',
+                pointBorderWidth: 1.5,
+                pointRadius: labels.length > 15 ? 2.5 : 4,
+                pointHoverRadius: 6,
+                pointHoverBackgroundColor: theme.border,
+                pointHoverBorderColor: '#FFFFFF',
+                pointHoverBorderWidth: 2
+            }]
+        };
+        
+        if (trendsChart) {
+            trendsChart.data = chartData;
+            trendsChart.update();
+        } else {
+            trendsChart = new Chart(ctx, {
+                type: 'line',
+                data: chartData,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(17, 24, 39, 0.95)',
+                            titleColor: '#F3F4F6',
+                            bodyColor: '#F3F4F6',
+                            borderColor: 'rgba(255, 255, 255, 0.12)',
+                            borderWidth: 1,
+                            padding: 12,
+                            displayColors: false,
+                            callbacks: {
+                                label: function(context) {
+                                    return `1 ${currency} = ${context.parsed.y.toFixed(2)} LKR`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: { color: 'rgba(255, 255, 255, 0.03)' },
+                            ticks: {
+                                color: '#9CA3AF',
+                                font: { family: 'Plus Jakarta Sans', size: 11 },
+                                maxRotation: 45,
+                                autoSkip: true,
+                                maxTicksLimit: 10
+                            }
+                        },
+                        y: {
+                            grid: { color: 'rgba(255, 255, 255, 0.03)' },
+                            ticks: {
+                                color: '#9CA3AF',
+                                font: { family: 'Plus Jakarta Sans', size: 11 },
+                                callback: function(value) {
+                                    return value.toFixed(1) + ' LKR';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Error drawing chart:', error);
+    }
+}
+
 // Event Listeners initialization
 document.addEventListener('DOMContentLoaded', () => {
     // Initial fetch
@@ -151,6 +286,14 @@ document.addEventListener('DOMContentLoaded', () => {
     if (amountInput) amountInput.addEventListener('input', calculateConversion);
     if (currencySelect) currencySelect.addEventListener('change', calculateConversion);
     
+    // Setup Chart dynamic bindings
+    updateTrendsChart();
+    
+    const chartCurrency = document.getElementById('chart-currency-select');
+    const chartDays = document.getElementById('chart-days-select');
+    if (chartCurrency) chartCurrency.addEventListener('change', updateTrendsChart);
+    if (chartDays) chartDays.addEventListener('change', updateTrendsChart);
+    
     // Auto-update dashboard metrics and rates every 60 seconds
     setInterval(fetchStats, 60000);
 });

static/index.html

@@ -13,6 +13,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- Custom Style Sheet -->
     <link rel="stylesheet" href="/static/style.css">
+    <!-- Chart.js CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
     <!-- Background glows -->
@@ -86,6 +88,11 @@
                                 <option value="GBP">GBP - British Pound</option>
                                 <option value="AUD">AUD - Australian Dollar</option>
                                 <option value="JPY">JPY - Japanese Yen</option>
+                                <option value="AED">AED - UAE Dirham</option>
+                                <option value="SAR">SAR - Saudi Riyal</option>
+                                <option value="INR">INR - Indian Rupee</option>
+                                <option value="CNY">CNY - Chinese Yuan</option>
+                                <option value="QAR">QAR - Qatari Riyal</option>
                             </select>
                         </div>
                         <div class="conversion-result">
@@ -170,11 +177,100 @@
                             </div>
                             <div class="rate-value" id="val-jpy">0.00 <span class="tag">LKR</span></div>
                         </div>
+                        <!-- AED Card -->
+                        <div class="rate-row" id="rate-aed">
+                            <div class="currency-info">
+                                <div class="flag">🇦🇪</div>
+                                <div>
+                                    <span class="code">AED</span>
+                                    <span class="name">UAE Dirham</span>
+                                </div>
+                            </div>
+                            <div class="rate-value" id="val-aed">0.00 <span class="tag">LKR</span></div>
+                        </div>
+                        <!-- SAR Card -->
+                        <div class="rate-row" id="rate-sar">
+                            <div class="currency-info">
+                                <div class="flag">🇸🇦</div>
+                                <div>
+                                    <span class="code">SAR</span>
+                                    <span class="name">Saudi Arabian Riyal</span>
+                                </div>
+                            </div>
+                            <div class="rate-value" id="val-sar">0.00 <span class="tag">LKR</span></div>
+                        </div>
+                        <!-- INR Card -->
+                        <div class="rate-row" id="rate-inr">
+                            <div class="currency-info">
+                                <div class="flag">🇮🇳</div>
+                                <div>
+                                    <span class="code">INR</span>
+                                    <span class="name">Indian Rupee</span>
+                                </div>
+                            </div>
+                            <div class="rate-value" id="val-inr">0.00 <span class="tag">LKR</span></div>
+                        </div>
+                        <!-- CNY Card -->
+                        <div class="rate-row" id="rate-cny">
+                            <div class="currency-info">
+                                <div class="flag">🇨🇳</div>
+                                <div>
+                                    <span class="code">CNY</span>
+                                    <span class="name">Chinese Yuan</span>
+                                </div>
+                            </div>
+                            <div class="rate-value" id="val-cny">0.00 <span class="tag">LKR</span></div>
+                        </div>
+                        <!-- QAR Card -->
+                        <div class="rate-row" id="rate-qar">
+                            <div class="currency-info">
+                                <div class="flag">🇶🇦</div>
+                                <div>
+                                    <span class="code">QAR</span>
+                                    <span class="name">Qatar Riyal</span>
+                                </div>
+                            </div>
+                            <div class="rate-value" id="val-qar">0.00 <span class="tag">LKR</span></div>
+                        </div>
                     </div>
                 </div>
             </section>
         </main>
 
+        <!-- Historical Trends Section -->
+        <section class="trend-section">
+            <div class="glass-card trend-chart-card">
+                <div class="card-header chart-header-row">
+                    <div>
+                        <h2><i class="fa-solid fa-chart-area"></i> LKR Exchange Rate Trends</h2>
+                        <p>Historical exchange rates performance against 1 Sri Lankan Rupee (LKR)</p>
+                    </div>
+                    <div class="chart-controls">
+                        <select id="chart-currency-select" class="chart-select">
+                            <option value="USD">USD - US Dollar</option>
+                            <option value="EUR">EUR - Euro</option>
+                            <option value="GBP">GBP - British Pound</option>
+                            <option value="AUD">AUD - Australian Dollar</option>
+                            <option value="JPY">JPY - Japanese Yen</option>
+                            <option value="AED">AED - UAE Dirham</option>
+                            <option value="SAR">SAR - Saudi Riyal</option>
+                            <option value="INR">INR - Indian Rupee</option>
+                            <option value="CNY">CNY - Chinese Yuan</option>
+                            <option value="QAR">QAR - Qatari Riyal</option>
+                        </select>
+                        <select id="chart-days-select" class="chart-select">
+                            <option value="7">Last 7 Days</option>
+                            <option value="15">Last 15 Days</option>
+                            <option value="30" selected>Last 30 Days</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="chart-container" style="position: relative; height: 350px; width: 100%;">
+                    <canvas id="trends-chart"></canvas>
+                </div>
+            </div>
+        </section>
+
         <!-- Footer -->
         <footer class="app-footer">
             <p>&copy; 2026 FlyRates System. Powered by FastAPI & Supabase. Fully high-availability.</p>

static/style.css

@@ -513,3 +513,67 @@ body {
         grid-template-columns: 1fr;
     }
 }
+
+/* Trend Chart Section Styling */
+.trend-section {
+    margin-top: 1rem;
+}
+
+.trend-chart-card {
+    width: 100%;
+}
+
+.chart-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.chart-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.chart-select {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 0.6rem 1.25rem;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.875rem;
+    outline: none;
+    cursor: pointer;
+    transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+.chart-select:focus,
+.chart-select:hover {
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
+}
+
+.chart-select option {
+    background-color: #111827;
+    color: var(--text-primary);
+}
+
+/* Responsiveness for Chart Controls */
+@media (max-width: 640px) {
+    .chart-header-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .chart-controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+    .chart-select {
+        flex: 1;
+    }
+}
+