Add Personal Finance Dashboard project (Issue #93)

ausarkhan · ausarkhan · commit cb4eec05f270 · 2025-09-17T19:37:51.000Z
diff --git a/Personal_Finance_Dashboard/README.md b/Personal_Finance_Dashboard/README.md
@@ -0,0 +1,26 @@
+# Personal Finance Dashboard
+
+A simple personal finance dashboard to track expenses, set budgets, and visualize spending habits.
+
+## Features
+- Add and view expenses
+- Set and display budget
+- Visualize expenses with Chart.js
+
+## Usage
+1. Install dependencies:
+   ```bash
+   pip install flask
+   ```
+2. Run the Flask app:
+   ```bash
+   python app.py
+   ```
+3. Open your browser at `http://localhost:5000`.
+
+## Requirements
+- Python 3.x
+- Flask
+
+## License
+MIT
diff --git a/Personal_Finance_Dashboard/app.py b/Personal_Finance_Dashboard/app.py
@@ -0,0 +1,35 @@
+"""
+Personal Finance Dashboard (Issue #93)
+Minimal Flask backend + HTML/JS frontend with Chart.js
+"""
+from flask import Flask, request, jsonify, send_from_directory
+import os
+
+app = Flask(__name__)
+
+DATA = {
+    "expenses": [],
+    "budget": 0
+}
+
+@app.route("/api/expenses", methods=["GET", "POST"])
+def expenses():
+    if request.method == "POST":
+        expense = request.json
+        DATA["expenses"].append(expense)
+        return jsonify({"status": "added"}), 201
+    return jsonify(DATA["expenses"])
+
+@app.route("/api/budget", methods=["GET", "POST"])
+def budget():
+    if request.method == "POST":
+        DATA["budget"] = request.json.get("budget", 0)
+        return jsonify({"status": "set"}), 201
+    return jsonify({"budget": DATA["budget"]})
+
+@app.route("/")
+def index():
+    return send_from_directory(".", "dashboard.html")
+
+if __name__ == "__main__":
+    app.run(debug=True)
diff --git a/Personal_Finance_Dashboard/dashboard.html b/Personal_Finance_Dashboard/dashboard.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Personal Finance Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 40px; }
+        .container { max-width: 600px; margin: auto; }
+        input, button { margin: 5px; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h2>Personal Finance Dashboard</h2>
+    <div>
+        <label>Set Budget: </label>
+        <input type="number" id="budgetInput" />
+        <button onclick="setBudget()">Set</button>
+        <span id="budgetDisplay"></span>
+    </div>
+    <div>
+        <label>Add Expense: </label>
+        <input type="text" id="expenseName" placeholder="Name" />
+        <input type="number" id="expenseAmount" placeholder="Amount" />
+        <button onclick="addExpense()">Add</button>
+    </div>
+    <canvas id="expenseChart" width="400" height="200"></canvas>
+</div>
+<script>
+let expenses = [];
+let budget = 0;
+const chartCtx = document.getElementById('expenseChart').getContext('2d');
+let chart;
+
+function fetchBudget() {
+    fetch('/api/budget').then(r => r.json()).then(data => {
+        budget = data.budget;
+        document.getElementById('budgetDisplay').innerText = `Budget: $${budget}`;
+    });
+}
+function setBudget() {
+    const val = Number(document.getElementById('budgetInput').value);
+    fetch('/api/budget', {
+        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({budget: val})
+    }).then(fetchBudget);
+}
+function fetchExpenses() {
+    fetch('/api/expenses').then(r => r.json()).then(data => {
+        expenses = data;
+        updateChart();
+    });
+}
+function addExpense() {
+    const name = document.getElementById('expenseName').value;
+    const amount = Number(document.getElementById('expenseAmount').value);
+    fetch('/api/expenses', {
+        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name, amount})
+    }).then(fetchExpenses);
+}
+function updateChart() {
+    const labels = expenses.map(e => e.name);
+    const data = expenses.map(e => e.amount);
+    if (chart) chart.destroy();
+    chart = new Chart(chartCtx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{ label: 'Expenses', data: data, backgroundColor: '#4caf50' }]
+        },
+        options: {
+            plugins: {
+                title: { display: true, text: `Budget: $${budget} | Total Spent: $${data.reduce((a,b)=>a+b,0)}` }
+            }
+        }
+    });
+}
+fetchBudget();
+fetchExpenses();
+</script>
+</body>
+</html>
diff --git a/Personal_Finance_Dashboard/requirements.txt b/Personal_Finance_Dashboard/requirements.txt
@@ -0,0 +1 @@
+flask
