app refactoring

app/charts.py

@@ -0,0 +1,142 @@
+"""Chart creation utilities for the financial dashboard."""
+
+import plotly.graph_objects as go
+import pandas as pd
+
+
+def get_dark_theme_layout():
+    """Get common dark theme layout settings for all charts."""
+    return dict(
+        plot_bgcolor="#0d1117",
+        paper_bgcolor="#0e1117",
+        font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
+        xaxis=dict(
+            gridcolor="#30363d",
+            showgrid=True,
+            zeroline=False,
+            color="#8b949e"
+        ),
+        yaxis=dict(
+            gridcolor="#30363d",
+            showgrid=True,
+            zeroline=False,
+            color="#8b949e"
+        ),
+        legend=dict(
+            bgcolor="rgba(13, 17, 23, 0.8)",
+            bordercolor="#30363d",
+            borderwidth=1,
+            font=dict(color="#e6edf3")
+        ),
+        hoverlabel=dict(
+            bgcolor="#0d1117",
+            bordercolor="#30363d",
+            font=dict(color="#e6edf3")
+        )
+    )
+
+
+def create_price_chart(df: pd.DataFrame, symbol: str, period: int) -> go.Figure:
+    """Create price chart with SMA and EMA indicators."""
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=df.index, y=df["close"],
+        name="Close Price",
+        line=dict(color="#0066ff", width=2.5)
+    ))
+    fig.add_trace(go.Scatter(
+        x=df.index, y=df["SMA"],
+        name=f"SMA {period}",
+        line=dict(color="#00d084", width=2, dash="dash")
+    ))
+    fig.add_trace(go.Scatter(
+        x=df.index, y=df["EMA"],
+        name=f"EMA {period}",
+        line=dict(color="#ffa500", width=2, dash="dot")
+    ))
+
+    layout = get_dark_theme_layout()
+    fig.update_layout(
+        title=f"{symbol} - Price with Moving Averages",
+        xaxis_title="Date",
+        yaxis_title="Price ($)",
+        hovermode="x unified",
+        template="plotly_dark",
+        height=500,
+        margin=dict(l=0, r=0, t=40, b=0),
+        **layout
+    )
+
+    return fig
+
+
+def create_rsi_chart(df: pd.DataFrame, symbol: str) -> go.Figure:
+    """Create RSI (Relative Strength Index) chart."""
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=df.index, y=df["RSI"],
+        name="RSI",
+        line=dict(color="#ff3838", width=2.5),
+        fill="tozeroy",
+        fillcolor="rgba(255, 56, 56, 0.15)"
+    ))
+
+    fig.add_hline(y=70, line_dash="dash", line_color="rgba(255, 165, 0, 0.6)",
+                  annotation_text="Overbought (70)")
+    fig.add_hline(y=30, line_dash="dash", line_color="rgba(0, 208, 132, 0.6)",
+                  annotation_text="Oversold (30)")
+    fig.add_hline(y=50, line_dash="dot", line_color="rgba(139, 148, 158, 0.3)")
+
+    layout = get_dark_theme_layout()
+    layout["yaxis"]["range"] = [0, 100]
+
+    fig.update_layout(
+        title=f"{symbol} - Relative Strength Index (RSI)",
+        xaxis_title="Date",
+        yaxis_title="RSI",
+        hovermode="x unified",
+        template="plotly_dark",
+        height=500,
+        margin=dict(l=0, r=0, t=40, b=0),
+        **layout
+    )
+
+    return fig
+
+
+def create_financial_chart(income_data: pd.DataFrame) -> go.Figure:
+    """Create financial revenue and net income chart."""
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        x=income_data['period_ending'],
+        y=income_data['total_revenue'],
+        name="Total Revenue",
+        marker=dict(color='#0066ff', opacity=0.9),
+        yaxis='y1'
+    ))
+
+    fig.add_trace(go.Bar(
+        x=income_data['period_ending'],
+        y=income_data['net_income'],
+        name="Net Income",
+        marker=dict(color='#00d084', opacity=0.9),
+        yaxis='y1'
+    ))
+
+    layout = get_dark_theme_layout()
+    fig.update_layout(
+        title="Revenue & Net Income (Annual)",
+        xaxis_title="Period",
+        yaxis_title="Amount ($)",
+        hovermode="x unified",
+        template="plotly_dark",
+        height=400,
+        barmode='group',
+        margin=dict(l=0, r=0, t=40, b=0),
+        **layout
+    )
+
+    return fig

app/data.py

@@ -0,0 +1,88 @@
+"""Data fetching and processing utilities for the financial dashboard."""
+
+import pandas as pd
+from openbb import sdk
+
+
+def load_stock_data(symbol: str) -> pd.DataFrame:
+    """Load historical stock price data."""
+    df = sdk.equity.price.historical(symbol=symbol).to_dataframe()
+    return df
+
+
+def load_company_profile(symbol: str):
+    """Load company profile information."""
+    profile_response = sdk.equity.profile(symbol=symbol)
+    profile_info = profile_response.results[0] if hasattr(profile_response, 'results') and profile_response.results else None
+    return profile_info
+
+
+def load_income_statement(symbol: str) -> pd.DataFrame:
+    """Load company income statement data."""
+    income_stmt = sdk.equity.fundamental.income(symbol=symbol).to_dataframe()
+    return income_stmt
+
+
+def calculate_technical_indicators(df: pd.DataFrame, period: int) -> pd.DataFrame:
+    """Calculate SMA, EMA, and RSI indicators."""
+    df["SMA"] = df["close"].rolling(period).mean()
+    df["EMA"] = df["close"].ewm(span=period, adjust=False).mean()
+
+    # Calculate RSI
+    delta = df["close"].diff()
+    gain = delta.clip(lower=0)
+    loss = -1 * delta.clip(upper=0)
+    avg_gain = gain.rolling(period).mean()
+    avg_loss = loss.rolling(period).mean()
+    rs = avg_gain / avg_loss
+    df["RSI"] = 100 - (100 / (1 + rs))
+
+    return df
+
+
+def format_financial_value(value) -> str:
+    """Format financial values with appropriate units."""
+    if pd.isna(value):
+        return "N/A"
+    if abs(value) >= 1e9:
+        return f"${value/1e9:.2f}B"
+    elif abs(value) >= 1e6:
+        return f"${value/1e6:.2f}M"
+    else:
+        return f"${value:.2f}"
+
+
+def get_price_metrics(df: pd.DataFrame) -> dict:
+    """Calculate key price metrics."""
+    current_price = df["close"].iloc[-1]
+    prev_close = df["close"].iloc[-2] if len(df) > 1 else df["close"].iloc[0]
+    price_change = current_price - prev_close
+    price_change_pct = (price_change / prev_close) * 100 if prev_close != 0 else 0
+
+    return {
+        "current_price": current_price,
+        "price_change": price_change,
+        "price_change_pct": price_change_pct,
+        "high_52w": df['high'].max(),
+        "low_52w": df['low'].min(),
+    }
+
+
+def get_profitability_metrics(income_data: pd.Series) -> dict:
+    """Calculate profitability metrics from income statement."""
+    total_rev = income_data.get('total_revenue', 0)
+    gross_prof = income_data.get('gross_profit', 0)
+    net_inc = income_data.get('net_income', 0)
+    operating_inc = income_data.get('operating_income', 0)
+
+    metrics = {}
+
+    if total_rev and total_rev > 0:
+        metrics["gross_margin"] = (gross_prof / total_rev) * 100 if pd.notna(gross_prof) else 0
+        metrics["net_margin"] = (net_inc / total_rev) * 100 if pd.notna(net_inc) else 0
+        if operating_inc:
+            metrics["operating_margin"] = (operating_inc / total_rev) * 100
+    else:
+        metrics = {"gross_margin": 0, "net_margin": 0}
+
+    return metrics

app/main.py

@@ -1,15 +1,35 @@
+"""Financial Analysis Dashboard - Main Application."""
+
 import streamlit as st
-import pandas as pd
-import plotly.graph_objects as go
-from openbb import sdk
 from dotenv import load_dotenv
 import os
 
+from styles import DARK_THEME_CSS
+from data import (
+    load_stock_data,
+    load_company_profile,
+    load_income_statement,
+    calculate_technical_indicators,
+    get_price_metrics,
+)
+from charts import (
+    create_price_chart,
+    create_rsi_chart,
+    create_financial_chart,
+)
+from ui import (
+    display_price_metrics,
+    display_company_info,
+    display_financial_metrics,
+    display_income_statement,
+    display_profitability_metrics,
+)
+
 
+# ---- Configuration ----
 load_dotenv()
 token = os.getenv("TOKEN")
 
-# ---- Page Configuration ----
 st.set_page_config(
     page_title="Financial Dashboard",
     page_icon="📈",
@@ -20,336 +40,8 @@ st.set_page_config(
     }
 )
 
-# ---- Custom CSS for Dark Theme ----
-st.markdown("""
-    <style>
-    :root {
-        --primary-color: #0066ff;
-        --secondary-color: #1f77e2;
-        --success-color: #00d084;
-        --danger-color: #ff3838;
-        --warning-color: #ffa500;
-        --bg-dark: #0e1117;
-        --bg-darker: #010409;
-        --text-primary: #e6edf3;
-        --text-secondary: #8b949e;
-        --border-color: #30363d;
-    }
-
-    /* Main background */
-    html, body {
-        background-color: var(--bg-darker) !important;
-        color: var(--text-primary) !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Streamlit containers */
-    .main, [data-testid="stAppViewContainer"] {
-        background-color: var(--bg-dark) !important;
-    }
-
-    /* Hide header and footer */
-    [data-testid="stHeader"] {
-        background-color: var(--bg-dark) !important;
-    }
-
-    [data-testid="stToolbar"] {
-        background-color: var(--bg-dark) !important;
-    }
-
-    .stApp {
-        background-color: var(--bg-dark) !important;
-    }
-
-    [data-testid="stDecoration"] {
-        background-color: var(--bg-dark) !important;
-    }
-
-    [data-testid="stSidebar"] {
-        background-color: #0d1117 !important;
-        border-right: 1px solid var(--border-color);
-    }
-
-    /* Text colors */
-    p, span, div, h1, h2, h3, h4, h5, h6, label, li, a {
-        color: var(--text-primary) !important;
-    }
-
-    /* Headings */
-    h1, h2, h3 {
-        color: var(--text-primary) !important;
-        font-weight: 700 !important;
-    }
-
-    /* Links */
-    a {
-        color: var(--primary-color) !important;
-        text-decoration: none !important;
-    }
-
-    a:hover {
-        color: var(--secondary-color) !important;
-        text-decoration: underline !important;
-    }
-
-    /* Labels and text inputs */
-    label {
-        color: var(--text-primary) !important;
-        font-weight: 500 !important;
-    }
-
-    /* Paragraph text */
-    p {
-        color: var(--text-primary) !important;
-        line-height: 1.6 !important;
-    }
-
-    /* Metric card styling */
-    [data-testid="metric-container"] {
-        background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
-        border: 1px solid var(--border-color) !important;
-        border-radius: 10px !important;
-        padding: 1.5rem !important;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
-    }
-
-    .metric-card {
-        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-        padding: 1.5rem;
-        border-radius: 10px;
-        border: 1px solid var(--border-color);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    .metric-value {
-        font-size: 2.5rem;
-        font-weight: 700;
-        color: var(--primary-color);
-        margin: 0.5rem 0;
-    }
-
-    .metric-label {
-        font-size: 0.875rem;
-        color: var(--text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-
-    .section-title {
-        color: var(--text-primary);
-        border-bottom: 2px solid var(--primary-color);
-        padding-bottom: 1rem;
-        margin-top: 2rem;
-        margin-bottom: 1.5rem;
-    }
-
-    /* Button styling */
-    .stButton > button {
-        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
-        color: #ffffff !important;
-        border: none !important;
-        border-radius: 8px !important;
-        padding: 0.75rem 2rem !important;
-        font-weight: 700 !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 4px 6px rgba(0, 102, 255, 0.2) !important;
-    }
-
-    .stButton > button:hover {
-        box-shadow: 0 8px 16px rgba(0, 102, 255, 0.4) !important;
-        transform: translateY(-2px) !important;
-    }
-
-    .stButton > button:active {
-        transform: translateY(0) !important;
-    }
-
-    /* Input fields */
-    [data-testid="stTextInput"] input,
-    [data-testid="stSlider"] input {
-        background-color: #161b22 !important;
-        border: 1px solid var(--border-color) !important;
-        color: var(--text-primary) !important;
-        border-radius: 6px !important;
-    }
-
-    [data-testid="stTextInput"] input::placeholder {
-        color: var(--text-secondary) !important;
-    }
-
-    /* Slider */
-    [data-testid="stSlider"] {
-        color: var(--primary-color) !important;
-    }
-
-    /* Tabs */
-    [data-testid="stTabs"] [role="tablist"] {
-        background-color: transparent !important;
-        border-bottom: 2px solid var(--border-color) !important;
-    }
-
-    [data-testid="stTabs"] [role="tab"] {
-        color: var(--text-secondary) !important;
-        background-color: transparent !important;
-        border: none !important;
-        padding: 1rem 1.5rem !important;
-    }
-
-    [data-testid="stTabs"] [role="tab"][aria-selected="true"] {
-        color: var(--primary-color) !important;
-        border-bottom: 3px solid var(--primary-color) !important;
-    }
-
-    /* Dataframe */
-    [data-testid="dataframe"] {
-        background-color: #0d1117 !important;
-    }
-
-    .dataframe {
-        background-color: #0d1117 !important;
-        color: var(--text-primary) !important;
-    }
-
-    /* Info/Error boxes */
-    [data-testid="stInfo"],
-    [data-testid="stSuccess"],
-    [data-testid="stWarning"],
-    [data-testid="stError"] {
-        background-color: rgba(0, 102, 255, 0.1) !important;
-        border-left: 4px solid var(--primary-color) !important;
-        border-radius: 6px !important;
-    }
-
-    [data-testid="stError"] {
-        background-color: rgba(255, 56, 56, 0.1) !important;
-        border-left-color: var(--danger-color) !important;
-    }
-
-    /* Markdown */
-    [data-testid="stMarkdown"] {
-        color: var(--text-primary) !important;
-    }
-
-    /* Expander */
-    [data-testid="stExpander"] {
-        background-color: #161b22 !important;
-        border: 1px solid var(--border-color) !important;
-        border-radius: 6px !important;
-    }
-
-    /* Metric text styling */
-    [data-testid="metric-container"] p {
-        color: var(--text-primary) !important;
-    }
-
-    [data-testid="metric-container"] [data-testid="stMetricValue"] {
-        color: var(--primary-color) !important;
-        font-weight: 700 !important;
-    }
-
-    /* Slider label color */
-    [data-testid="stSlider"] label {
-        color: var(--text-primary) !important;
-    }
-
-    /* Text input label */
-    [data-testid="stTextInput"] label {
-        color: var(--text-primary) !important;
-    }
-
-    /* Write and markdown text */
-    [data-testid="stMarkdownContainer"] p {
-        color: var(--text-primary) !important;
-    }
-
-    [data-testid="stMarkdownContainer"] strong {
-        color: var(--primary-color) !important;
-        font-weight: 600 !important;
-    }
-
-    /* Spinner text */
-    [data-testid="stSpinner"] {
-        color: var(--primary-color) !important;
-    }
-
-    /* Column separators */
-    hr {
-        border-color: var(--border-color) !important;
-    }
-
-    /* Scrollbar */
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: var(--border-color);
-        border-radius: 4px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        background: var(--primary-color);
-    }
-
-    /* Selection highlighting */
-    ::selection {
-        background-color: var(--primary-color);
-        color: #fff;
-    }
-
-    /* Fix all white backgrounds */
-    .stApp > header {
-        background-color: var(--bg-dark) !important;
-    }
-
-    .stApp > header::before {
-        background: none !important;
-    }
-
-    .stApp > header::after {
-        background: none !important;
-    }
-
-    /* Streamlit elements background */
-    [data-testid="stVerticalBlock"] {
-        background-color: transparent !important;
-    }
-
-    [data-testid="stVerticalBlockBorderWrapper"] {
-        background-color: transparent !important;
-    }
-
-    /* Remove white decorative elements */
-    .st-emotion-cache-1gvbgyg {
-        background-color: var(--bg-dark) !important;
-    }
-
-    .st-emotion-cache-1jicfl2 {
-        background-color: var(--bg-dark) !important;
-    }
-
-    /* Ensure all root divs are dark */
-    div[class*="st-"] {
-        background-color: transparent !important;
-    }
-
-    /* Modal and overlay backgrounds */
-    .stModal {
-        background-color: var(--bg-dark) !important;
-    }
-
-    /* Alert boxes background */
-    .stAlert {
-        background-color: rgba(0, 102, 255, 0.1) !important;
-    }
-    </style>
-""", unsafe_allow_html=True)
+# ---- Apply Dark Theme ----
+st.markdown(DARK_THEME_CSS, unsafe_allow_html=True)
 
 # ---- Header ----
 st.markdown("# 📈 Financial Analysis Dashboard")
@@ -365,410 +57,92 @@ with st.sidebar:
     st.markdown("### About")
     st.info("This dashboard provides real-time technical analysis with comprehensive financial metrics.")
 
-if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
-
-    try:
-        # Load free stock data
-        with st.spinner("Loading data..."):
-            df = sdk.equity.price.historical(symbol=symbol).to_dataframe()
-
-            # Load company profile
-            profile_response = sdk.equity.profile(symbol=symbol)
-            profile_info = profile_response.results[0] if hasattr(profile_response, 'results') and profile_response.results else None
-
-            # Load income statement
-            income_stmt = sdk.equity.fundamental.income(symbol=symbol).to_dataframe()
-
-        # ---- Technical Indicators ----
-        df["SMA"] = df["close"].rolling(period).mean()
-        df["EMA"] = df["close"].ewm(span=period, adjust=False).mean()
-        delta = df["close"].diff()
-        gain = delta.clip(lower=0)
-        loss = -1 * delta.clip(upper=0)
-        avg_gain = gain.rolling(period).mean()
-        avg_loss = loss.rolling(period).mean()
-        rs = avg_gain / avg_loss
-        df["RSI"] = 100 - (100 / (1 + rs))
-
-        # ---- Display Key Metrics ----
-        st.markdown('<div class="section-title">📊 Price Metrics</div>', unsafe_allow_html=True)
-
-        col1, col2, col3, col4 = st.columns(4)
-
-        current_price = df["close"].iloc[-1]
-        prev_close = df["close"].iloc[-2] if len(df) > 1 else df["close"].iloc[0]
-        price_change = current_price - prev_close
-        price_change_pct = (price_change / prev_close) * 100 if prev_close != 0 else 0
-
-        with col1:
-            st.metric("Current Price", f"${current_price:.2f}", f"{price_change:+.2f}", delta_color="normal")
-
-        with col2:
-            st.metric("Day Change %", f"{price_change_pct:+.2f}%", None, delta_color="normal")
 
-        with col3:
-            st.metric("52W High", f"${df['high'].max():.2f}")
+def main():
+    """Main application logic."""
+    if st.button("�� Load Dashboard", key="load_btn", use_container_width=True):
+        try:
+            # Load data
+            with st.spinner("Loading data..."):
+                df = load_stock_data(symbol)
+                profile_info = load_company_profile(symbol)
+                income_stmt = load_income_statement(symbol)
 
-        with col4:
-            st.metric("52W Low", f"${df['low'].min():.2f}")
+            # Calculate technical indicators
+            df = calculate_technical_indicators(df, period)
 
-        # ---- Company Information & Financials ----
-        st.markdown('<div class="section-title">📋 Company Information</div>', unsafe_allow_html=True)
+            # Display price metrics
+            metrics = get_price_metrics(df)
+            display_price_metrics(metrics)
 
-        if profile_info:
-            info_col1, info_col2 = st.columns(2)
-            with info_col1:
-                st.write(f"**Company Name:** {getattr(profile_info, 'name', 'N/A')}")
-                st.write(f"**Sector:** {getattr(profile_info, 'sector', 'N/A')}")
-                st.write(f"**Industry:** {getattr(profile_info, 'industry', 'N/A')}")
+            # Display company information
+            display_company_info(profile_info)
 
-            with info_col2:
-                st.write(f"**Country:** {getattr(profile_info, 'country', 'N/A')}")
-                st.write(f"**Exchange:** {getattr(profile_info, 'exchange', 'N/A')}")
-                st.write(f"**Website:** {getattr(profile_info, 'website', 'N/A')}")
-
-        # ---- Financial Metrics ----
-        if not income_stmt.empty:
-            st.markdown('<div class="section-title">💰 Financial Metrics</div>', unsafe_allow_html=True)
-
-            # Get latest financial data
-            latest_income = income_stmt.iloc[0] if len(income_stmt) > 0 else None
-
-            if latest_income is not None:
-                fin_col1, fin_col2, fin_col3, fin_col4 = st.columns(4)
-
-                with fin_col1:
-                    revenue = latest_income.get('total_revenue', 0)
-                    if pd.notna(revenue) and revenue > 0:
-                        st.metric("Total Revenue", f"${revenue/1e9:.2f}B" if revenue > 1e9 else f"${revenue/1e6:.2f}M")
-                    else:
-                        st.metric("Total Revenue", "N/A")
-
-                with fin_col2:
-                    net_income = latest_income.get('net_income', 0)
-                    if pd.notna(net_income) and net_income > 0:
-                        st.metric("Net Income", f"${net_income/1e9:.2f}B" if net_income > 1e9 else f"${net_income/1e6:.2f}M")
-                    else:
-                        st.metric("Net Income", "N/A")
-
-                with fin_col3:
-                    gross_profit = latest_income.get('gross_profit', 0)
-                    if pd.notna(gross_profit) and gross_profit > 0:
-                        st.metric("Gross Profit", f"${gross_profit/1e9:.2f}B" if gross_profit > 1e9 else f"${gross_profit/1e6:.2f}M")
-                    else:
-                        st.metric("Gross Profit", "N/A")
-
-                with fin_col4:
-                    operating_income = latest_income.get('operating_income', 0)
-                    if pd.notna(operating_income) and operating_income > 0:
-                        st.metric("Operating Income", f"${operating_income/1e9:.2f}B" if operating_income > 1e9 else f"${operating_income/1e6:.2f}M")
-                    else:
-                        st.metric("Operating Income", "N/A")
-
-                # Additional metrics
-                fin_col5, fin_col6, fin_col7, fin_col8 = st.columns(4)
-
-                with fin_col5:
-                    eps = latest_income.get('diluted_earnings_per_share', 0)
-                    if pd.notna(eps):
-                        st.metric("EPS (Diluted)", f"${eps:.2f}")
-                    else:
-                        st.metric("EPS (Diluted)", "N/A")
-
-                with fin_col6:
-                    ebitda = latest_income.get('ebitda', 0)
-                    if pd.notna(ebitda) and ebitda > 0:
-                        st.metric("EBITDA", f"${ebitda/1e9:.2f}B" if ebitda > 1e9 else f"${ebitda/1e6:.2f}M")
-                    else:
-                        st.metric("EBITDA", "N/A")
-
-                with fin_col7:
-                    cogs = latest_income.get('cost_of_revenue', 0)
-                    if pd.notna(cogs) and cogs > 0:
-                        st.metric("Cost of Revenue", f"${cogs/1e9:.2f}B" if cogs > 1e9 else f"${cogs/1e6:.2f}M")
-                    else:
-                        st.metric("Cost of Revenue", "N/A")
-
-                with fin_col8:
-                    rd_expense = latest_income.get('research_and_development_expense', 0)
-                    if pd.notna(rd_expense) and rd_expense > 0:
-                        st.metric("R&D Expense", f"${rd_expense/1e9:.2f}B" if rd_expense > 1e9 else f"${rd_expense/1e6:.2f}M")
-                    else:
-                        st.metric("R&D Expense", "N/A")
-
-            # Financial history chart
-            st.markdown('<div class="section-title">📊 Revenue & Net Income Trend</div>', unsafe_allow_html=True)
+            # Display financial metrics
+            if not income_stmt.empty:
+                display_financial_metrics(income_stmt)
 
-            # Prepare data for chart
-            if len(income_stmt) > 0:
+                # Financial history chart
+                st.markdown('<div class="section-title">📊 Revenue & Net Income Trend</div>', unsafe_allow_html=True)
                 income_chart_data = income_stmt[['period_ending', 'total_revenue', 'net_income']].dropna()
 
                 if len(income_chart_data) > 0:
-                    fig_financial = go.Figure()
-
-                    fig_financial.add_trace(go.Bar(
-                        x=income_chart_data['period_ending'],
-                        y=income_chart_data['total_revenue'],
-                        name="Total Revenue",
-                        marker=dict(color='#0066ff', opacity=0.9),
-                        yaxis='y1'
-                    ))
-
-                    fig_financial.add_trace(go.Bar(
-                        x=income_chart_data['period_ending'],
-                        y=income_chart_data['net_income'],
-                        name="Net Income",
-                        marker=dict(color='#00d084', opacity=0.9),
-                        yaxis='y1'
-                    ))
-
-                    fig_financial.update_layout(
-                        title="Revenue & Net Income (Annual)",
-                        xaxis_title="Period",
-                        yaxis_title="Amount ($)",
-                        hovermode="x unified",
-                        template="plotly_dark",
-                        height=400,
-                        barmode='group',
-                        margin=dict(l=0, r=0, t=40, b=0),
-                        plot_bgcolor="#0d1117",
-                        paper_bgcolor="#0e1117",
-                        font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
-                        xaxis=dict(
-                            gridcolor="#30363d",
-                            showgrid=True,
-                            zeroline=False,
-                            color="#8b949e"
-                        ),
-                        yaxis=dict(
-                            gridcolor="#30363d",
-                            showgrid=True,
-                            zeroline=False,
-                            color="#8b949e"
-                        ),
-                        legend=dict(
-                            bgcolor="rgba(13, 17, 23, 0.8)",
-                            bordercolor="#30363d",
-                            borderwidth=1,
-                            font=dict(color="#e6edf3")
-                        ),
-                        hoverlabel=dict(
-                            bgcolor="#0d1117",
-                            bordercolor="#30363d",
-                            font=dict(color="#e6edf3")
-                        )
-                    )
-
+                    fig_financial = create_financial_chart(income_chart_data)
                     st.plotly_chart(fig_financial, use_container_width=True)
 
-        # ---- Tabs ----
-        tab1, tab2, tab3, tab4 = st.tabs(["📈 Price & Moving Averages", "📊 RSI Indicator", "📉 TradingView", "📋 Financials"])
-
-        # ---- Tab 1: Price + SMA/EMA ----
-        with tab1:
-            fig_price = go.Figure()
-
-            fig_price.add_trace(go.Scatter(
-                x=df.index, y=df["close"],
-                name="Close Price",
-                line=dict(color="#0066ff", width=2.5)
-            ))
-            fig_price.add_trace(go.Scatter(
-                x=df.index, y=df["SMA"],
-                name=f"SMA {period}",
-                line=dict(color="#00d084", width=2, dash="dash")
-            ))
-            fig_price.add_trace(go.Scatter(
-                x=df.index, y=df["EMA"],
-                name=f"EMA {period}",
-                line=dict(color="#ffa500", width=2, dash="dot")
-            ))
-
-            fig_price.update_layout(
-                title=f"{symbol} - Price with Moving Averages",
-                xaxis_title="Date",
-                yaxis_title="Price ($)",
-                hovermode="x unified",
-                template="plotly_dark",
-                height=500,
-                margin=dict(l=0, r=0, t=40, b=0),
-                plot_bgcolor="#0d1117",
-                paper_bgcolor="#0e1117",
-                font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
-                xaxis=dict(
-                    gridcolor="#30363d",
-                    showgrid=True,
-                    zeroline=False,
-                    color="#8b949e"
-                ),
-                yaxis=dict(
-                    gridcolor="#30363d",
-                    showgrid=True,
-                    zeroline=False,
-                    color="#8b949e"
-                ),
-                legend=dict(
-                    bgcolor="rgba(13, 17, 23, 0.8)",
-                    bordercolor="#30363d",
-                    borderwidth=1,
-                    font=dict(color="#e6edf3")
-                ),
-                hoverlabel=dict(
-                    bgcolor="#0d1117",
-                    bordercolor="#30363d",
-                    font=dict(color="#e6edf3")
-                )
-            )
-
-            st.plotly_chart(fig_price, use_container_width=True)
-
-        # ---- Tab 2: RSI ----
-        with tab2:
-            fig_rsi = go.Figure()
-
-            fig_rsi.add_trace(go.Scatter(
-                x=df.index, y=df["RSI"],
-                name="RSI",
-                line=dict(color="#ff3838", width=2.5),
-                fill="tozeroy",
-                fillcolor="rgba(255, 56, 56, 0.15)"
-            ))
-
-            # Add overbought/oversold lines
-            fig_rsi.add_hline(y=70, line_dash="dash", line_color="rgba(255, 165, 0, 0.6)", annotation_text="Overbought (70)")
-            fig_rsi.add_hline(y=30, line_dash="dash", line_color="rgba(0, 208, 132, 0.6)", annotation_text="Oversold (30)")
-            fig_rsi.add_hline(y=50, line_dash="dot", line_color="rgba(139, 148, 158, 0.3)")
-
-            fig_rsi.update_layout(
-                title=f"{symbol} - Relative Strength Index (RSI)",
-                xaxis_title="Date",
-                yaxis_title="RSI",
-                hovermode="x unified",
-                template="plotly_dark",
-                height=500,
-                margin=dict(l=0, r=0, t=40, b=0),
-                plot_bgcolor="#0d1117",
-                paper_bgcolor="#0e1117",
-                font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
-                xaxis=dict(
-                    gridcolor="#30363d",
-                    showgrid=True,
-                    zeroline=False,
-                    color="#8b949e"
-                ),
-                yaxis=dict(
-                    range=[0, 100],
-                    gridcolor="#30363d",
-                    showgrid=True,
-                    zeroline=False,
-                    color="#8b949e"
-                ),
-                legend=dict(
-                    bgcolor="rgba(13, 17, 23, 0.8)",
-                    bordercolor="#30363d",
-                    borderwidth=1,
-                    font=dict(color="#e6edf3")
-                ),
-                hoverlabel=dict(
-                    bgcolor="#0d1117",
-                    bordercolor="#30363d",
-                    font=dict(color="#e6edf3")
-                )
-            )
-
-            st.plotly_chart(fig_rsi, use_container_width=True)
-
-        # ---- Tab 3: TradingView ----
-        with tab3:
-            tradingview_html = f"""
-            <div class="tradingview-widget-container">
-              <div id="tradingview_{symbol}"></div>
-              <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
-              <script type="text/javascript">
-                new TradingView.widget({{
-                  "width": "100%",
-                  "height": 600,
-                  "symbol": "{symbol}",
-                  "interval": "D",
-                  "timezone": "Etc/UTC",
-                  "theme": "dark",
-                  "style": "1",
-                  "locale": "en",
-                  "enable_publishing": false,
-                  "allow_symbol_change": true,
-                  "container_id": "tradingview_{symbol}"
-                }});
-              </script>
-            </div>
-            """
-            st.components.v1.html(tradingview_html, height=650)
-
-        # ---- Tab 4: Detailed Financials ----
-        with tab4:
-            st.markdown("### Income Statement")
-
-            if not income_stmt.empty:
-                # Select key columns to display
-                display_columns = [
-                    'period_ending',
-                    'total_revenue',
-                    'cost_of_revenue',
-                    'gross_profit',
-                    'operating_income',
-                    'net_income',
-                    'diluted_earnings_per_share',
-                    'ebitda'
-                ]
-
-                # Filter to available columns
-                available_cols = [col for col in display_columns if col in income_stmt.columns]
-                financial_display = income_stmt[available_cols].copy()
-
-                # Format numeric columns
-                for col in financial_display.columns:
-                    if col != 'period_ending':
-                        financial_display[col] = financial_display[col].apply(
-                            lambda x: f"${x/1e9:.2f}B" if pd.notna(x) and abs(x) >= 1e9 else (
-                                f"${x/1e6:.2f}M" if pd.notna(x) and abs(x) >= 1e6 else (
-                                f"${x:.2f}" if pd.notna(x) else "N/A"
-                            )
-                        )
-                    )
-
-                st.dataframe(financial_display, use_container_width=True, hide_index=True)
-
-                # Profitability metrics
-                st.markdown("### Profitability Metrics")
-
-                prof_col1, prof_col2 = st.columns(2)
-
-                with prof_col1:
-                    # Calculate profit margins
-                    latest_data = income_stmt.iloc[0]
-                    total_rev = latest_data.get('total_revenue', 0)
-                    gross_prof = latest_data.get('gross_profit', 0)
-                    net_inc = latest_data.get('net_income', 0)
-
-                    if total_rev and total_rev > 0:
-                        gross_margin = (gross_prof / total_rev) * 100 if pd.notna(gross_prof) else 0
-                        net_margin = (net_inc / total_rev) * 100 if pd.notna(net_inc) else 0
-
-                        st.metric("Gross Margin", f"{gross_margin:.2f}%")
-                        st.metric("Net Profit Margin", f"{net_margin:.2f}%")
-
-                with prof_col2:
-                    operating_inc = latest_data.get('operating_income', 0)
-                    if total_rev and total_rev > 0 and operating_inc:
-                        operating_margin = (operating_inc / total_rev) * 100
-                        st.metric("Operating Margin", f"{operating_margin:.2f}%")
-
-                    # Growth comparison
-                    if len(income_stmt) > 1:
-                        prev_revenue = income_stmt.iloc[1].get('total_revenue', 0)
-                        if prev_revenue and prev_revenue > 0:
-                            revenue_growth = ((total_rev - prev_revenue) / prev_revenue) * 100
-                            st.metric("Revenue Growth (YoY)", f"{revenue_growth:+.2f}%")
-
-    except Exception as e:
-        st.error(f"Error loading data for {symbol}: {str(e)}")
-        st.info("Please check the ticker symbol and try again.")
+            # ---- Tabs ----
+            tab1, tab2, tab3, tab4 = st.tabs([
+                "📈 Price & Moving Averages",
+                "📊 RSI Indicator",
+                "📉 TradingView",
+                "📋 Financials"
+            ])
+
+            # Tab 1: Price & Moving Averages
+            with tab1:
+                fig_price = create_price_chart(df, symbol, period)
+                st.plotly_chart(fig_price, use_container_width=True)
+
+            # Tab 2: RSI Indicator
+            with tab2:
+                fig_rsi = create_rsi_chart(df, symbol)
+                st.plotly_chart(fig_rsi, use_container_width=True)
+
+            # Tab 3: TradingView
+            with tab3:
+                tradingview_html = f"""
+                <div class="tradingview-widget-container">
+                  <div id="tradingview_{symbol}"></div>
+                  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
+                  <script type="text/javascript">
+                    new TradingView.widget({{
+                      "width": "100%",
+                      "height": 600,
+                      "symbol": "{symbol}",
+                      "interval": "D",
+                      "timezone": "Etc/UTC",
+                      "theme": "dark",
+                      "style": "1",
+                      "locale": "en",
+                      "enable_publishing": false,
+                      "allow_symbol_change": true,
+                      "container_id": "tradingview_{symbol}"
+                    }});
+                  </script>
+                </div>
+                """
+                st.components.v1.html(tradingview_html, height=650)
+
+            # Tab 4: Detailed Financials
+            with tab4:
+                if not income_stmt.empty:
+                    display_income_statement(income_stmt)
+                    display_profitability_metrics(income_stmt)
+
+        except Exception as e:
+            st.error(f"Error loading data for {symbol}: {str(e)}")
+            st.info("Please check the ticker symbol and try again.")
+
+
+if __name__ == "__main__":
+    main()

app/styles.py

@@ -0,0 +1,331 @@
+"""Dark theme CSS styles for the financial dashboard."""
+
+DARK_THEME_CSS = """
+    <style>
+    :root {
+        --primary-color: #0066ff;
+        --secondary-color: #1f77e2;
+        --success-color: #00d084;
+        --danger-color: #ff3838;
+        --warning-color: #ffa500;
+        --bg-dark: #0e1117;
+        --bg-darker: #010409;
+        --text-primary: #e6edf3;
+        --text-secondary: #8b949e;
+        --border-color: #30363d;
+    }
+
+    /* Main background */
+    html, body {
+        background-color: var(--bg-darker) !important;
+        color: var(--text-primary) !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    /* Streamlit containers */
+    .main, [data-testid="stAppViewContainer"] {
+        background-color: var(--bg-dark) !important;
+    }
+
+    /* Hide header and footer */
+    [data-testid="stHeader"] {
+        background-color: var(--bg-dark) !important;
+    }
+
+    [data-testid="stToolbar"] {
+        background-color: var(--bg-dark) !important;
+    }
+
+    .stApp {
+        background-color: var(--bg-dark) !important;
+    }
+
+    [data-testid="stDecoration"] {
+        background-color: var(--bg-dark) !important;
+    }
+
+    [data-testid="stSidebar"] {
+        background-color: #0d1117 !important;
+        border-right: 1px solid var(--border-color);
+    }
+
+    /* Text colors */
+    p, span, div, h1, h2, h3, h4, h5, h6, label, li, a {
+        color: var(--text-primary) !important;
+    }
+
+    /* Headings */
+    h1, h2, h3 {
+        color: var(--text-primary) !important;
+        font-weight: 700 !important;
+    }
+
+    /* Links */
+    a {
+        color: var(--primary-color) !important;
+        text-decoration: none !important;
+    }
+
+    a:hover {
+        color: var(--secondary-color) !important;
+        text-decoration: underline !important;
+    }
+
+    /* Labels and text inputs */
+    label {
+        color: var(--text-primary) !important;
+        font-weight: 500 !important;
+    }
+
+    /* Paragraph text */
+    p {
+        color: var(--text-primary) !important;
+        line-height: 1.6 !important;
+    }
+
+    /* Metric card styling */
+    [data-testid="metric-container"] {
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 10px !important;
+        padding: 1.5rem !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
+    }
+
+    .metric-card {
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+        padding: 1.5rem;
+        border-radius: 10px;
+        border: 1px solid var(--border-color);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    }
+
+    .metric-value {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--primary-color);
+        margin: 0.5rem 0;
+    }
+
+    .metric-label {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .section-title {
+        color: var(--text-primary);
+        border-bottom: 2px solid var(--primary-color);
+        padding-bottom: 1rem;
+        margin-top: 2rem;
+        margin-bottom: 1.5rem;
+    }
+
+    /* Button styling */
+    .stButton > button {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
+        color: #ffffff !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 0.75rem 2rem !important;
+        font-weight: 700 !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 4px 6px rgba(0, 102, 255, 0.2) !important;
+    }
+
+    .stButton > button:hover {
+        box-shadow: 0 8px 16px rgba(0, 102, 255, 0.4) !important;
+        transform: translateY(-2px) !important;
+    }
+
+    .stButton > button:active {
+        transform: translateY(0) !important;
+    }
+
+    /* Input fields */
+    [data-testid="stTextInput"] input,
+    [data-testid="stSlider"] input {
+        background-color: #161b22 !important;
+        border: 1px solid var(--border-color) !important;
+        color: var(--text-primary) !important;
+        border-radius: 6px !important;
+    }
+
+    [data-testid="stTextInput"] input::placeholder {
+        color: var(--text-secondary) !important;
+    }
+
+    /* Slider */
+    [data-testid="stSlider"] {
+        color: var(--primary-color) !important;
+    }
+
+    /* Tabs */
+    [data-testid="stTabs"] [role="tablist"] {
+        background-color: transparent !important;
+        border-bottom: 2px solid var(--border-color) !important;
+    }
+
+    [data-testid="stTabs"] [role="tab"] {
+        color: var(--text-secondary) !important;
+        background-color: transparent !important;
+        border: none !important;
+        padding: 1rem 1.5rem !important;
+    }
+
+    [data-testid="stTabs"] [role="tab"][aria-selected="true"] {
+        color: var(--primary-color) !important;
+        border-bottom: 3px solid var(--primary-color) !important;
+    }
+
+    /* Dataframe */
+    [data-testid="dataframe"] {
+        background-color: #0d1117 !important;
+    }
+
+    .dataframe {
+        background-color: #0d1117 !important;
+        color: var(--text-primary) !important;
+    }
+
+    /* Info/Error boxes */
+    [data-testid="stInfo"],
+    [data-testid="stSuccess"],
+    [data-testid="stWarning"],
+    [data-testid="stError"] {
+        background-color: rgba(0, 102, 255, 0.1) !important;
+        border-left: 4px solid var(--primary-color) !important;
+        border-radius: 6px !important;
+    }
+
+    [data-testid="stError"] {
+        background-color: rgba(255, 56, 56, 0.1) !important;
+        border-left-color: var(--danger-color) !important;
+    }
+
+    /* Markdown */
+    [data-testid="stMarkdown"] {
+        color: var(--text-primary) !important;
+    }
+
+    /* Expander */
+    [data-testid="stExpander"] {
+        background-color: #161b22 !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 6px !important;
+    }
+
+    /* Metric text styling */
+    [data-testid="metric-container"] p {
+        color: var(--text-primary) !important;
+    }
+
+    [data-testid="metric-container"] [data-testid="stMetricValue"] {
+        color: var(--primary-color) !important;
+        font-weight: 700 !important;
+    }
+
+    /* Slider label color */
+    [data-testid="stSlider"] label {
+        color: var(--text-primary) !important;
+    }
+
+    /* Text input label */
+    [data-testid="stTextInput"] label {
+        color: var(--text-primary) !important;
+    }
+
+    /* Write and markdown text */
+    [data-testid="stMarkdownContainer"] p {
+        color: var(--text-primary) !important;
+    }
+
+    [data-testid="stMarkdownContainer"] strong {
+        color: var(--primary-color) !important;
+        font-weight: 600 !important;
+    }
+
+    /* Spinner text */
+    [data-testid="stSpinner"] {
+        color: var(--primary-color) !important;
+    }
+
+    /* Column separators */
+    hr {
+        border-color: var(--border-color) !important;
+    }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--primary-color);
+    }
+
+    /* Selection highlighting */
+    ::selection {
+        background-color: var(--primary-color);
+        color: #fff;
+    }
+
+    /* Fix all white backgrounds */
+    .stApp > header {
+        background-color: var(--bg-dark) !important;
+    }
+
+    .stApp > header::before {
+        background: none !important;
+    }
+
+    .stApp > header::after {
+        background: none !important;
+    }
+
+    /* Streamlit elements background */
+    [data-testid="stVerticalBlock"] {
+        background-color: transparent !important;
+    }
+
+    [data-testid="stVerticalBlockBorderWrapper"] {
+        background-color: transparent !important;
+    }
+
+    /* Remove white decorative elements */
+    .st-emotion-cache-1gvbgyg {
+        background-color: var(--bg-dark) !important;
+    }
+
+    .st-emotion-cache-1jicfl2 {
+        background-color: var(--bg-dark) !important;
+    }
+
+    /* Ensure all root divs are dark */
+    div[class*="st-"] {
+        background-color: transparent !important;
+    }
+
+    /* Modal and overlay backgrounds */
+    .stModal {
+        background-color: var(--bg-dark) !important;
+    }
+
+    /* Alert boxes background */
+    .stAlert {
+        background-color: rgba(0, 102, 255, 0.1) !important;
+    }
+    </style>
+"""

app/ui.py

@@ -0,0 +1,167 @@
+"""UI component functions for the financial dashboard."""
+
+import streamlit as st
+import pandas as pd
+from data import format_financial_value, get_profitability_metrics
+
+
+def display_price_metrics(metrics: dict):
+    """Display key price metrics in columns."""
+    st.markdown('<div class="section-title">📊 Price Metrics</div>', unsafe_allow_html=True)
+
+    col1, col2, col3, col4 = st.columns(4)
+
+    with col1:
+        st.metric("Current Price", f"${metrics['current_price']:.2f}",
+                 f"{metrics['price_change']:+.2f}", delta_color="normal")
+
+    with col2:
+        st.metric("Day Change %", f"{metrics['price_change_pct']:+.2f}%",
+                 None, delta_color="normal")
+
+    with col3:
+        st.metric("52W High", f"${metrics['high_52w']:.2f}")
+
+    with col4:
+        st.metric("52W Low", f"${metrics['low_52w']:.2f}")
+
+
+def display_company_info(profile_info):
+    """Display company information."""
+    st.markdown('<div class="section-title">📋 Company Information</div>', unsafe_allow_html=True)
+
+    if profile_info:
+        info_col1, info_col2 = st.columns(2)
+        with info_col1:
+            st.write(f"**Company Name:** {getattr(profile_info, 'name', 'N/A')}")
+            st.write(f"**Sector:** {getattr(profile_info, 'sector', 'N/A')}")
+            st.write(f"**Industry:** {getattr(profile_info, 'industry', 'N/A')}")
+
+        with info_col2:
+            st.write(f"**Country:** {getattr(profile_info, 'country', 'N/A')}")
+            st.write(f"**Exchange:** {getattr(profile_info, 'exchange', 'N/A')}")
+            st.write(f"**Website:** {getattr(profile_info, 'website', 'N/A')}")
+
+
+def display_financial_metrics(income_stmt: pd.DataFrame):
+    """Display financial metrics from income statement."""
+    st.markdown('<div class="section-title">💰 Financial Metrics</div>', unsafe_allow_html=True)
+
+    latest_income = income_stmt.iloc[0] if len(income_stmt) > 0 else None
+
+    if latest_income is not None:
+        # First row of metrics
+        fin_col1, fin_col2, fin_col3, fin_col4 = st.columns(4)
+
+        with fin_col1:
+            revenue = latest_income.get('total_revenue', 0)
+            if pd.notna(revenue) and revenue > 0:
+                st.metric("Total Revenue", format_financial_value(revenue))
+            else:
+                st.metric("Total Revenue", "N/A")
+
+        with fin_col2:
+            net_income = latest_income.get('net_income', 0)
+            if pd.notna(net_income) and net_income > 0:
+                st.metric("Net Income", format_financial_value(net_income))
+            else:
+                st.metric("Net Income", "N/A")
+
+        with fin_col3:
+            gross_profit = latest_income.get('gross_profit', 0)
+            if pd.notna(gross_profit) and gross_profit > 0:
+                st.metric("Gross Profit", format_financial_value(gross_profit))
+            else:
+                st.metric("Gross Profit", "N/A")
+
+        with fin_col4:
+            operating_income = latest_income.get('operating_income', 0)
+            if pd.notna(operating_income) and operating_income > 0:
+                st.metric("Operating Income", format_financial_value(operating_income))
+            else:
+                st.metric("Operating Income", "N/A")
+
+        # Second row of metrics
+        fin_col5, fin_col6, fin_col7, fin_col8 = st.columns(4)
+
+        with fin_col5:
+            eps = latest_income.get('diluted_earnings_per_share', 0)
+            if pd.notna(eps):
+                st.metric("EPS (Diluted)", f"${eps:.2f}")
+            else:
+                st.metric("EPS (Diluted)", "N/A")
+
+        with fin_col6:
+            ebitda = latest_income.get('ebitda', 0)
+            if pd.notna(ebitda) and ebitda > 0:
+                st.metric("EBITDA", format_financial_value(ebitda))
+            else:
+                st.metric("EBITDA", "N/A")
+
+        with fin_col7:
+            cogs = latest_income.get('cost_of_revenue', 0)
+            if pd.notna(cogs) and cogs > 0:
+                st.metric("Cost of Revenue", format_financial_value(cogs))
+            else:
+                st.metric("Cost of Revenue", "N/A")
+
+        with fin_col8:
+            rd_expense = latest_income.get('research_and_development_expense', 0)
+            if pd.notna(rd_expense) and rd_expense > 0:
+                st.metric("R&D Expense", format_financial_value(rd_expense))
+            else:
+                st.metric("R&D Expense", "N/A")
+
+
+def display_income_statement(income_stmt: pd.DataFrame):
+    """Display formatted income statement table."""
+    st.markdown("### Income Statement")
+
+    if not income_stmt.empty:
+        display_columns = [
+            'period_ending',
+            'total_revenue',
+            'cost_of_revenue',
+            'gross_profit',
+            'operating_income',
+            'net_income',
+            'diluted_earnings_per_share',
+            'ebitda'
+        ]
+
+        available_cols = [col for col in display_columns if col in income_stmt.columns]
+        financial_display = income_stmt[available_cols].copy()
+
+        for col in financial_display.columns:
+            if col != 'period_ending':
+                financial_display[col] = financial_display[col].apply(
+                    lambda x: format_financial_value(x)
+                )
+
+        st.dataframe(financial_display, use_container_width=True, hide_index=True)
+
+
+def display_profitability_metrics(income_stmt: pd.DataFrame):
+    """Display profitability metrics."""
+    st.markdown("### Profitability Metrics")
+
+    prof_col1, prof_col2 = st.columns(2)
+    latest_data = income_stmt.iloc[0]
+    metrics = get_profitability_metrics(latest_data)
+
+    with prof_col1:
+        if "gross_margin" in metrics:
+            st.metric("Gross Margin", f"{metrics['gross_margin']:.2f}%")
+        if "net_margin" in metrics:
+            st.metric("Net Profit Margin", f"{metrics['net_margin']:.2f}%")
+
+    with prof_col2:
+        if "operating_margin" in metrics:
+            st.metric("Operating Margin", f"{metrics['operating_margin']:.2f}%")
+
+        if len(income_stmt) > 1:
+            prev_revenue = income_stmt.iloc[1].get('total_revenue', 0)
+            total_rev = latest_data.get('total_revenue', 0)
+            if prev_revenue and prev_revenue > 0:
+                revenue_growth = ((total_rev - prev_revenue) / prev_revenue) * 100
+                st.metric("Revenue Growth (YoY)", f"{revenue_growth:+.2f}%")