add dashboard page

src/chatbot/dashboard/dashboard_page.py

@@ -0,0 +1,215 @@
+import os
+import sqlite3
+import pandas as pd
+import gradio as gr
+import plotly.graph_objects as go
+import plotly.express as px
+
+from dashboard.visualize_component import (
+    generate_budget_utilization_gauge_chart,
+    generate_deliverable_budget_vs_expense_bar_chart,
+    generate_spending_distribution_pie_chart,
+    generate_daily_spending_bar_chart,
+    generate_cumulative_spending_line_chart,
+    generate_risk_level_distribution_pie_chart,
+    generate_deliverable_timeline_gantt_chart,
+    render_deliverable_summary_cards
+)
+
+DB_PATH = "database/hello_earth_data.db"
+
+# ------------------------ Database Utilities ------------------------
+
+def connect_db():
+    return sqlite3.connect(DB_PATH)
+
+def fetch_df(query, params=None):
+    conn = connect_db()
+    df = pd.read_sql_query(query, conn, params=params or ())
+    conn.close()
+    return df
+
+def get_project_data():
+    return fetch_df("SELECT * FROM Project")
+
+def get_deliverable_data(project_id):
+    return fetch_df("SELECT * FROM Deliverable WHERE project_id = ?", (project_id,))
+
+def get_all_deliverable_budgets(project_id):
+    query = """
+        SELECT d.title, db.*
+        FROM Deliverable_Budget db
+        JOIN Deliverable d ON db.deliverable_id = d.deliverable_id
+        WHERE d.project_id = ?
+    """
+    return fetch_df(query, (project_id,))
+
+def get_all_expenses(project_id):
+    query = """
+        SELECT e.*
+        FROM Expense e
+        JOIN Deliverable d ON e.associated_deliverable_id = d.deliverable_id
+        WHERE d.project_id = ?
+    """
+    return fetch_df(query, (project_id,))
+
+# ------------------------ Business Logic ------------------------
+
+def get_total_expense(df, status=None):
+    if status:
+        df = df[df['status'] == status]
+    return df['total_payment_amount'].sum()
+
+def get_total_budget(df):
+    return df[['wage', 'materials', 'tools_equipment', 'services', 'misc']].sum().sum()
+
+def get_title_by_id(project_options, pid):
+    return next((p['title'] for p in project_options if p['project_id'] == pid), "Unknown")
+
+def filter_expenses(search_term, df):
+    if not search_term:
+        return df
+    search_term = search_term.lower()
+    mask = pd.Series(False, index=df.index)
+    for col in [
+        'expense_id', 'associated_deliverable_id', 'seller_name',
+        'seller_address', 'seller_phone_number', 'buyer_name',
+        'buyer_address', 'transaction_date', 'total_payment_amount',
+        'expense_description', 'status'
+    ]:
+        mask |= df[col].astype(str).str.lower().str.contains(search_term)
+    return df[mask]
+
+# ------------------------ UI Setup ------------------------
+
+def create_dashboard_page():
+    project_list = get_project_data()
+    project_options = project_list[['project_id', 'title']].to_dict("records")
+
+    with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as page:
+        selected_project_id = gr.State()
+        expense_df_state = gr.State()
+
+        # --- Page 1: Project Selection ---
+        with gr.Column(visible=True) as project_selector_page:
+            gr.Markdown("# 🌍 Select a Project")
+            project_dropdown = gr.Dropdown(
+                choices=[(p['title'], p['project_id']) for p in project_options],
+                label="Choose a Project"
+            )
+            project_go_button = gr.Button("View Dashboard")
+
+        # --- Page 2: Dashboard View ---
+        with gr.Column(visible=False) as dashboard_page:
+            dashboard_header = gr.Markdown("")
+            back_button = gr.Button("⬅ Back to Projects")
+
+            with gr.Column():
+                gr.Markdown("## Overall Project Financial Snapshot")
+                with gr.Row():
+                    total_budget_md = gr.Markdown()
+                    total_expense_md = gr.Markdown()
+                    leftover_md = gr.Markdown()
+                gauge_plot = gr.Plot()
+
+                gr.Markdown("## Deliverable-Level Financial Insights")
+                with gr.Row():
+                    bar_chart_plot = gr.Plot()
+                    pie_chart_plot = gr.Plot()
+                with gr.Row():
+                    daily_plot = gr.Plot()
+                    cum_plot = gr.Plot()
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        risk_plot = gr.Plot()
+                    with gr.Column(scale=2):
+                        cards_html = gr.HTML()
+                gantt_plot = gr.Plot()
+
+                gr.Markdown("## 💵 Expense Table")
+                search_box = gr.Textbox(placeholder="Search expenses", label="Search")
+                expense_table = gr.DataFrame()
+
+        # --- Event Handlers ---
+
+        search_box.change(
+            fn=filter_expenses,
+            inputs=[search_box, expense_df_state],
+            outputs=expense_table
+        )
+
+        def go_to_dashboard(project_id):
+            deliverables = get_deliverable_data(project_id)
+            budgets = get_all_deliverable_budgets(project_id)
+            expenses = get_all_expenses(project_id)
+
+            total_budget = get_total_budget(budgets)
+            total_expense = get_total_expense(expenses, status='approved')
+            leftover = total_budget - total_expense
+
+            if leftover < 0:
+                status, color = "⚠️ Over budget", "red"
+            elif leftover < total_budget * 0.1:
+                status, color = "⚠️ Low budget remaining", "orange"
+            else:
+                status, color = "✅ Budget on track", "green"
+
+            return [
+                project_id,
+                gr.update(visible=False),
+                gr.update(visible=True),
+                gr.update(value=f"# 📊 Financial Dashboard — {get_title_by_id(project_options, project_id)}"),
+                gr.update(value=f"### Total Money Granted\n## {total_budget:,.0f}"),
+                gr.update(value=f"### Total Expense Spendings\n## {total_expense:,.0f}\n({(total_expense / total_budget * 100):.1f}% of budget)"),
+                gr.update(value=f"### Leftover Budget\n## {leftover:,.0f}\n<span style='color: {color};'>{status}</span>"),
+                gr.update(value=generate_budget_utilization_gauge_chart(total_budget, total_expense)),
+                gr.update(value=generate_deliverable_budget_vs_expense_bar_chart(budgets, expenses)),
+                gr.update(value=generate_spending_distribution_pie_chart(expenses, budgets)),
+                gr.update(value=generate_daily_spending_bar_chart(expenses)),
+                gr.update(value=generate_cumulative_spending_line_chart(expenses)),
+                gr.update(value=generate_risk_level_distribution_pie_chart(deliverables)),
+                gr.update(value=generate_deliverable_timeline_gantt_chart(deliverables)),
+                gr.update(value=render_deliverable_summary_cards(deliverables)),
+                gr.update(value=expenses),
+                expenses
+            ]
+
+        def go_back_to_project_list():
+            return [gr.update(visible=True), gr.update(visible=False)]
+
+        # --- Button Triggers ---
+
+        project_go_button.click(
+            fn=go_to_dashboard,
+            inputs=project_dropdown,
+            outputs=[
+                selected_project_id,
+                project_selector_page,
+                dashboard_page,
+                dashboard_header,
+                total_budget_md,
+                total_expense_md,
+                leftover_md,
+                gauge_plot,
+                bar_chart_plot,
+                pie_chart_plot,
+                daily_plot,
+                cum_plot,
+                risk_plot,
+                gantt_plot,
+                cards_html,
+                expense_table,
+                expense_df_state
+            ]
+        )
+
+        back_button.click(
+            fn=go_back_to_project_list,
+            outputs=[project_selector_page, dashboard_page]
+        )
+
+    return page
+
+if __name__ == "__main__":
+    page = create_dashboard_page()
+    page.launch()

src/chatbot/dashboard/visualize_component.py

@@ -0,0 +1,411 @@
+import plotly.graph_objects as go
+import plotly.express as px
+import pandas as pd 
+from datetime import datetime
+
+def generate_budget_utilization_gauge_chart(total_budget, total_expense):
+    """Generate a gauge chart comparing budget vs. total expense."""
+
+    gauge_steps = [
+        {'range': [0, total_budget * 0.7], 'color': '#d4f1dd'},
+        {'range': [total_budget * 0.7, total_budget * 0.9], 'color': '#fff2cc'},
+        {'range': [total_budget * 0.9, total_budget * 1.2], 'color': '#f8d7da'}
+    ]
+
+    gauge_threshold = {
+        'line': {'color': 'red', 'width': 4},
+        'thickness': 0.75,
+        'value': total_budget
+    }
+
+    gauge = go.Indicator(
+        mode="gauge+number+delta",
+        value=total_expense,
+        title={'text': "Total Expense", 'font': {'size': 24}},
+        delta={
+            'reference': total_budget,
+            'increasing': {'color': 'red'},
+            'decreasing': {'color': 'green'}
+        },
+        gauge={
+            'axis': {'range': [None, total_budget * 1.2], 'tickwidth': 1},
+            'bar': {'color': '#1f77b4'},
+            'bgcolor': 'white',
+            'borderwidth': 2,
+            'bordercolor': 'gray',
+            'steps': gauge_steps,
+            'threshold': gauge_threshold
+        }
+    )
+
+    fig = go.Figure(gauge)
+
+    fig.update_layout(
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=300
+    )
+
+    return fig
+
+def generate_deliverable_budget_vs_expense_bar_chart(budget_df, expense_df):
+    """Generate a grouped bar chart comparing budget vs. actual expense per deliverable."""
+
+    # Calculate total budget per deliverable
+    budget_df['total_budget'] = budget_df[['wage', 'materials', 'tools_equipment', 'services', 'misc']].sum(axis=1)
+    budget_df['title'] = budget_df.get('title', pd.Series(["Unnamed Deliverable"] * len(budget_df)))
+
+    # Prepare budget summary
+    budget_summary = budget_df[['title', 'total_budget']].rename(columns={'title': 'deliverable_title'})
+
+    # Summarize expenses per deliverable
+    expense_summary = (
+        expense_df.groupby('associated_deliverable_id')['total_payment_amount']
+        .sum()
+        .reset_index()
+    )
+
+    # Map deliverable titles to expenses
+    deliverable_titles = budget_df[['deliverable_id', 'title']].drop_duplicates()
+    expense_summary = (
+        pd.merge(
+            expense_summary,
+            deliverable_titles,
+            left_on='associated_deliverable_id',
+            right_on='deliverable_id',
+            how='left'
+        )
+        .rename(columns={
+            'title': 'deliverable_title',
+            'total_payment_amount': 'spending'
+        })
+    )
+
+    # Merge budget and expense summaries
+    merged_df = pd.merge(
+        budget_summary,
+        expense_summary[['deliverable_title', 'spending']],
+        on='deliverable_title',
+        how='left'
+    ).fillna({'spending': 0})
+
+    # Create bar chart
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        x=merged_df['deliverable_title'],
+        y=merged_df['total_budget'],
+        name='Budget',
+        marker_color='green'
+    ))
+
+    fig.add_trace(go.Bar(
+        x=merged_df['deliverable_title'],
+        y=merged_df['spending'],
+        name='Expense',
+        marker_color='red'
+    ))
+
+    fig.update_layout(
+        title='Budget vs Expense by Deliverable',
+        barmode='group',
+        xaxis_title='Deliverables',
+        yaxis_title='Amount (THB)',
+        legend=dict(orientation='h', y=-0.2),
+        height=400,
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25)
+    )
+
+    return fig
+
+def generate_spending_distribution_pie_chart(expense_df, budget_df):
+    """Generate a pie chart showing the distribution of spending by deliverables."""
+
+    # Summarize total spending per deliverable
+    spending_summary = (
+        expense_df.groupby('associated_deliverable_id')['total_payment_amount']
+        .sum()
+        .reset_index()
+    )
+
+    # Map deliverable titles
+    deliverable_titles = budget_df[['deliverable_id', 'title']].drop_duplicates()
+    spending_summary = (
+        pd.merge(
+            spending_summary,
+            deliverable_titles,
+            left_on='associated_deliverable_id',
+            right_on='deliverable_id',
+            how='left'
+        )
+        .rename(columns={
+            'title': 'deliverable_title',
+            'total_payment_amount': 'amount'
+        })
+    )
+
+    # Handle missing titles
+    spending_summary['deliverable_title'] = spending_summary['deliverable_title'].fillna("Unnamed Deliverable")
+
+    # Create pie chart
+    fig = px.pie(
+        spending_summary,
+        values='amount',
+        names='deliverable_title',
+        title='Spending by Deliverables',
+        color_discrete_sequence=px.colors.qualitative.Set2
+    )
+
+    fig.update_traces(
+        textinfo='label+value',
+        hoverinfo='label+percent',
+        textposition='inside',
+        insidetextorientation='radial'
+    )
+
+    fig.update_layout(
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=400
+    )
+
+    return fig
+
+def generate_daily_spending_bar_chart(expense_df):
+    """Generate a bar chart showing daily spending amounts."""
+
+    # Prepare date and group by date
+    expense_df['transaction_date'] = pd.to_datetime(expense_df['transaction_date']).dt.date
+    daily_summary = (
+        expense_df.groupby('transaction_date')['total_payment_amount']
+        .sum()
+        .reset_index()
+        .rename(columns={
+            'transaction_date': 'date',
+            'total_payment_amount': 'amount'
+        })
+        .sort_values('date')
+    )
+
+    # Create bar chart
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        x=daily_summary['date'],
+        y=daily_summary['amount'],
+        name='Daily Spending',
+        marker_color='#1f77b4'
+    ))
+
+    fig.update_layout(
+        title='Daily Spending',
+        xaxis_title='Date',
+        yaxis_title='Amount (THB)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=400
+    )
+
+    return fig
+
+def generate_cumulative_spending_line_chart(expense_df):
+    """Generate a line chart showing cumulative spending over time."""
+
+    # Convert to date and summarize spending per day
+    expense_df['transaction_date'] = pd.to_datetime(expense_df['transaction_date']).dt.date
+    daily_summary = (
+        expense_df.groupby('transaction_date')['total_payment_amount']
+        .sum()
+        .reset_index()
+        .rename(columns={'transaction_date': 'date', 'total_payment_amount': 'amount'})
+        .sort_values('date')
+    )
+
+    # Calculate cumulative spending
+    daily_summary['cumulative_amount'] = daily_summary['amount'].cumsum()
+
+    # Create line chart
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=daily_summary['date'],
+        y=daily_summary['cumulative_amount'],
+        mode='lines+markers',
+        name='Cumulative Spending',
+        marker_color='#ff7f0e'
+    ))
+
+    fig.update_layout(
+        title='Cumulative Spending Over Time',
+        xaxis_title='Date',
+        yaxis_title='Cumulative Amount (THB)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=400
+    )
+
+    return fig
+
+def generate_risk_level_distribution_pie_chart(deliverable_df):
+    """Generate a pie chart showing the distribution of deliverables by risk level."""
+
+    risk_summary = (
+        deliverable_df['risk_level']
+        .value_counts()
+        .reset_index(name='count')
+        .rename(columns={'index': 'risk_level'})
+    )
+
+    fig = px.pie(
+        risk_summary,
+        values='count',
+        names='risk_level',
+        title='Distribution of Deliverables by Risk Level',
+        color_discrete_sequence=px.colors.qualitative.Pastel
+    )
+
+    fig.update_traces(
+        textinfo='label+percent',
+        hoverinfo='label+value+percent',
+        textposition='inside'
+    )
+
+    fig.update_layout(
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=400
+    )
+
+    return fig
+
+def generate_deliverable_timeline_gantt_chart(deliverable_df):
+    """Generate a Gantt chart showing deliverables over time, colored by risk level."""
+
+    df = deliverable_df.copy()
+
+    # Ensure proper date format
+    df['start_date'] = pd.to_datetime(df['start_date'])
+    df['end_date'] = pd.to_datetime(df['end_date'])
+
+    # Fill missing values
+    df['title'] = df['title'].fillna("Unnamed Deliverable")
+    df['risk_level'] = df['risk_level'].fillna("Unknown")
+
+    # Create Gantt chart
+    fig = px.timeline(
+        df,
+        x_start='start_date',
+        x_end='end_date',
+        y='title',
+        color='risk_level',
+        title='Deliverable Timeline (Gantt Chart)',
+        hover_data=['status', 'risk_level_rationale']
+    )
+
+    # Reverse Y-axis to have earliest on top
+    fig.update_yaxes(autorange='reversed')
+
+    # Add vertical "Today" line
+    today = datetime.today()
+
+    fig.add_shape(
+        type='line',
+        x0=today,
+        x1=today,
+        y0=0,
+        y1=1,
+        xref='x',
+        yref='paper',
+        line=dict(color='red', width=2, dash='dash')
+    )
+
+    fig.add_annotation(
+        x=today,
+        y=1.02,
+        xref='x',
+        yref='paper',
+        text='Today',
+        showarrow=False,
+        font=dict(color='red', size=12)
+    )
+
+    # Layout customization
+    fig.update_layout(
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(t=50, r=25, l=25, b=25),
+        height=500
+    )
+
+    return fig
+
+def render_deliverable_summary_cards(deliverable_df):
+    """Render a grid of HTML cards summarizing deliverables with risk level and status indicators."""
+
+    def format_date(date_str):
+        if pd.isna(date_str):
+            return "-"
+        return pd.to_datetime(date_str).strftime("%d %b %Y")
+
+    # Define color mappings
+    risk_level_colors = {
+        "green": "#28a745",
+        "yellow": "#ffc107",
+        "red": "#dc3545",
+        "unknown": "#6c757d"
+    }
+
+    status_colors = {
+        "ongoing": "#17a2b8",
+        "done": "#007bff",
+        "reviewing": "#ffc107",
+        "approved": "#28a745"
+    }
+
+    # Start HTML grid
+    cards_html = """
+    <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
+    """
+
+    for _, row in deliverable_df.iterrows():
+        title = row.get('title', 'Untitled Deliverable')
+        deliverable_id = row.get('deliverable_id', '-')
+        status = str(row.get('status', 'N/A')).lower()
+        risk_level = str(row.get('risk_level', 'unknown')).lower()
+
+        status_color = status_colors.get(status, "#6c757d")
+        risk_color = risk_level_colors.get(risk_level, "#6c757d")
+
+        start_date = format_date(row.get('start_date'))
+        end_date = format_date(row.get('end_date'))
+
+        cards_html += f"""
+        <div style='border: 1px solid #dee2e6; border-radius: 10px; padding: 15px; background-color: #ffffff;'>
+            <div style='font-weight: bold; font-size: 1.1em; margin-bottom: 5px;'>
+                {title}
+                <div style='font-size: 0.85em; color: #6c757d;'>ID: {deliverable_id}</div>
+            </div>
+            <div style='margin: 8px 0;'>
+                <span style='padding: 3px 8px; border-radius: 4px; font-size: 0.75em; background-color: {status_color}; color: white; margin-right: 5px;'>
+                    {status.capitalize()}
+                </span>
+                <span style='padding: 3px 8px; border-radius: 4px; font-size: 0.75em; background-color: {risk_color}; color: white;'>
+                    Risk: {risk_level.capitalize()}
+                </span>
+            </div>
+            <div style='font-size: 0.9em; color: #6c757d;'>
+                <strong>Start:</strong> {start_date}<br>
+                <strong>End:</strong> {end_date}
+            </div>
+        </div>
+        """
+
+    cards_html += "</div>"
+    return cards_html

src/chatbot/main.py

@@ -0,0 +1,12 @@
+import gradio as gr
+from dashboard.dashboard_page import create_dashboard_page
+
+dashboard_page = create_dashboard_page()
+
+dashboard = gr.TabbedInterface(
+    [dashboard_page],
+    ["Project"],
+)
+
+if __name__ == "__main__":
+    dashboard.launch()