small-projects/budgeting_website/templates/dashboard.html

<!-- templates/dashboard.html -->
{% extends "layout.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-4">Financial Overview</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="card metric-card h-100">
            <div class="metric-label">Total Income</div>
            <div class="metric-value positive">${{ "%0.2f"|format(metrics['total_income']) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card metric-card h-100">
            <div class="metric-label">Total Expenses</div>
            <div class="metric-value negative">${{ "%0.2f"|format(metrics['total_expenses']) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card metric-card h-100">
            <div class="metric-label">Net Worth</div>
            <div class="metric-value neutral">${{ "%0.2f"|format(metrics['net_worth']) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card metric-card h-100">
            <div class="metric-label">Current Month Expenses</div>
            <div class="metric-value negative">${{ "%0.2f"|format(metrics['current_month_expenses']) }}</div>
            <div class="small {% if metrics['expense_change'] < 0 %}positive{% elif metrics['expense_change'] > 0 %}negative{% else %}neutral{% endif %}">
                {% if metrics['expense_change'] < 0 %}
                ▼ {{ metrics['expense_change']|abs }}% from last month
                {% elif metrics['expense_change'] > 0 %}
                ▲ {{ metrics['expense_change'] }}% from last month
                {% else %}
                No change from last month
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">Smart Recommendations</h5>
    </div>
    <div class="card-body">
        <ul class="list-group list-group-flush">
            {% for tip in recommendations %}
                <li class="list-group-item">💡 {{ tip | safe }}</li>
            {% endfor %}
        </ul>
    </div>
</div>



<div class="row mt-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">Monthly Income and Expenses</div>
            <div class="card-body">
                <div class="chart-container" id="monthly-trend-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">Spending by Category</div>
            <div class="card-body">
                <div class="chart-container" id="category-pie-chart"></div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">Monthly Summary</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Month</th>
                                <th>Income</th>
                                <th>Expenses</th>
                                <th>Savings</th>
                                <th>Savings Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for month in monthly_summary %}
                            <tr>
                                <td>{{ month['Month'] }}</td>
                                <td class="positive">${{ "%0.2f"|format(month['Total_Income']) }}</td>
                                <td class="negative">${{ "%0.2f"|format(month['Total_Expenses']) }}</td>
                                <td class="{% if month['Savings'] >= 0 %}positive{% else %}negative{% endif %}">
                                    ${{ "%0.2f"|format(month['Savings']) }}
                                </td>
                                <td>
                                    {% if month['Total_Income'] > 0 %}
                                        {{ month['Savings_Rate'] }}%
                                    {% else %}
                                        N/A
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">Recent Transactions</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Description</th>
                                <th>Amount</th>
                                <th>Account</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for transaction in recent_transactions %}
                            <tr>
                                <td>{{ transaction['Date'].strftime('%Y-%m-%d') }}</td>
                                <td>{{ transaction['Name of sender/receiver'] }}</td>
                                <td class="{% if transaction['Amount'] >= 0 %}positive{% else %}negative{% endif %}">
                                    ${{ "%0.2f"|format(transaction['Amount']) }}
                                </td>
                                <td>{{ transaction['Account'] }}</td>
                                <td>{{ transaction['Status'] }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="text-center mt-3">
                    <a href="/transactions" class="btn btn-outline-primary">View All Transactions</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Render monthly trend chart
    var monthlyTrendData = {{ monthly_trend_chart|safe }};
    Plotly.newPlot('monthly-trend-chart', monthlyTrendData.data, monthlyTrendData.layout);
    
    // Render category pie chart
    var categoryPieData = {{ category_pie_chart|safe }};
    Plotly.newPlot('category-pie-chart', categoryPieData.data, categoryPieData.layout);
    
    // Resize charts when window is resized
    window.addEventListener('resize', function() {
        Plotly.relayout('monthly-trend-chart', {
            'width': document.getElementById('monthly-trend-chart').offsetWidth
        });
        Plotly.relayout('category-pie-chart', {
            'width': document.getElementById('category-pie-chart').offsetWidth
        });
    });
</script>
{% endblock %}