669 lines
22 KiB
HTML
669 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Budget Tracker System</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #a8c8ec 0%, #7fb3d3 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 3.5rem;
|
|
color: #8B7D6B;
|
|
font-weight: 600;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.main-content {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 400px 1fr;
|
|
gap: 40px;
|
|
align-items: start;
|
|
}
|
|
|
|
.left-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.4rem;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 1rem;
|
|
color: #555;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #007bff;
|
|
background: white;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
.btn-primary {
|
|
width: 100%;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #0056b3;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
|
|
}
|
|
|
|
.btn-danger {
|
|
width: 100%;
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #c82333;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
|
|
}
|
|
|
|
.right-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(135, 206, 250, 0.3);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
border: 1px solid rgba(135, 206, 250, 0.5);
|
|
}
|
|
|
|
.stat-card .label {
|
|
font-size: 0.9rem;
|
|
color: #2c5aa0;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-card .value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #1a4480;
|
|
}
|
|
|
|
.history-section h3 {
|
|
font-size: 1.4rem;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.expense-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.expense-table th {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: #555;
|
|
border-bottom: 2px solid #e9ecef;
|
|
}
|
|
|
|
.expense-table td {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
color: #333;
|
|
}
|
|
|
|
.expense-table tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.btn-remove {
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 5px;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.btn-remove:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.stats-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Budget Tracker System</h1>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="layout">
|
|
<!-- Left Panel -->
|
|
<div class="left-panel">
|
|
<!-- Add Budget Section -->
|
|
<div class="card">
|
|
<h3>Add Budget</h3>
|
|
<form id="budget-form">
|
|
<div class="form-group">
|
|
<label for="budget-amount">Budget:</label>
|
|
<input type="number" id="budget-amount" step="0.01" min="0.01" required placeholder="Enter budget amount">
|
|
</div>
|
|
<button type="submit" class="btn-primary">Add Budget</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Add Expense Section -->
|
|
<div class="card">
|
|
<h3>Add Expense</h3>
|
|
<form id="expense-form">
|
|
<div class="form-group">
|
|
<label for="expense-title">Expense Title:</label>
|
|
<input type="text" id="expense-title" required placeholder="Enter expense title">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="expense-amount">Amount:</label>
|
|
<input type="number" id="expense-amount" step="0.01" min="0.01" required placeholder="Enter amount">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="expense-category">Category:</label>
|
|
<select id="expense-category">
|
|
<option value="">No category</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn-primary">Add Expense</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Reset Button -->
|
|
<button class="btn-danger" onclick="resetAll()">Reset All</button>
|
|
</div>
|
|
|
|
<!-- Right Panel -->
|
|
<div class="right-panel">
|
|
<!-- Budget Statistics -->
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="label">Total Budget:</div>
|
|
<div class="value" id="total-budget">0.00</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">Total Expenses:</div>
|
|
<div class="value" id="total-expenses">0.00</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">Budget Left:</div>
|
|
<div class="value" id="budget-left">0.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expense History -->
|
|
<div class="history-section">
|
|
<h3>Expense History:</h3>
|
|
<div id="expenses-loading" class="loading" style="display: none;">Loading expenses...</div>
|
|
<div id="expenses-content">
|
|
<table class="expense-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Expense Name</th>
|
|
<th>Amount</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="expenses-tbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="empty-expenses" class="empty-state" style="display: none;">
|
|
No expenses recorded yet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = 'http://127.0.0.1:5000/api/v1';
|
|
let totalBudget = 0;
|
|
let expenses = [];
|
|
|
|
// Initialize the application
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadCategories();
|
|
loadExpenses();
|
|
loadBudgetFromStorage();
|
|
|
|
// Set up form handlers
|
|
setupFormHandlers();
|
|
});
|
|
|
|
function setupFormHandlers() {
|
|
// Budget form handler
|
|
document.getElementById('budget-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
addBudget();
|
|
});
|
|
|
|
// Expense form handler
|
|
document.getElementById('expense-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
addExpense();
|
|
});
|
|
}
|
|
|
|
function addBudget() {
|
|
const amount = parseFloat(document.getElementById('budget-amount').value);
|
|
|
|
if (amount > 0) {
|
|
totalBudget += amount;
|
|
localStorage.setItem('totalBudget', totalBudget.toString());
|
|
updateBudgetDisplay();
|
|
document.getElementById('budget-form').reset();
|
|
showSuccess('Budget added successfully!');
|
|
}
|
|
}
|
|
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/categories/`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
updateCategoryDropdown(data.data);
|
|
}
|
|
} catch (error) {
|
|
console.log('Categories not available, using default options');
|
|
updateCategoryDropdown([]);
|
|
}
|
|
}
|
|
|
|
function updateCategoryDropdown(categories) {
|
|
const select = document.getElementById('expense-category');
|
|
select.innerHTML = '<option value="">No category</option>';
|
|
|
|
// Add default categories if API is not available
|
|
if (categories.length === 0) {
|
|
const defaultCategories = [
|
|
{ id: 'grocery', name: 'Grocery' },
|
|
{ id: 'electricity', name: 'Electricity' },
|
|
{ id: 'loan', name: 'Loan' },
|
|
{ id: 'shopping', name: 'Shopping' },
|
|
{ id: 'transport', name: 'Transportation' },
|
|
{ id: 'food', name: 'Food & Dining' }
|
|
];
|
|
|
|
defaultCategories.forEach(category => {
|
|
const option = document.createElement('option');
|
|
option.value = category.id;
|
|
option.textContent = category.name;
|
|
select.appendChild(option);
|
|
});
|
|
} else {
|
|
categories.forEach(category => {
|
|
const option = document.createElement('option');
|
|
option.value = category.id;
|
|
option.textContent = category.name;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
async function addExpense() {
|
|
const title = document.getElementById('expense-title').value;
|
|
const amount = parseFloat(document.getElementById('expense-amount').value);
|
|
const categoryId = document.getElementById('expense-category').value;
|
|
|
|
const expense = {
|
|
id: Date.now(),
|
|
title: title,
|
|
amount: amount,
|
|
category: categoryId || 'uncategorized',
|
|
date: new Date().toISOString().split('T')[0]
|
|
};
|
|
|
|
// Try to save to API first
|
|
try {
|
|
const payload = {
|
|
description: title,
|
|
amount: amount,
|
|
type: 'expense',
|
|
transaction_date: expense.date
|
|
};
|
|
|
|
if (categoryId && !isNaN(categoryId)) {
|
|
payload.category_id = parseInt(categoryId);
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE}/transactions/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Successfully saved to API
|
|
showSuccess('Expense added successfully!');
|
|
} else {
|
|
// API failed, save locally
|
|
expenses.push(expense);
|
|
localStorage.setItem('expenses', JSON.stringify(expenses));
|
|
showSuccess('Expense added (saved locally)!');
|
|
}
|
|
} catch (error) {
|
|
// API not available, save locally
|
|
expenses.push(expense);
|
|
localStorage.setItem('expenses', JSON.stringify(expenses));
|
|
showSuccess('Expense added (saved locally)!');
|
|
}
|
|
|
|
// Always update local display
|
|
updateExpensesDisplay();
|
|
updateBudgetDisplay();
|
|
document.getElementById('expense-form').reset();
|
|
}
|
|
|
|
async function loadExpenses() {
|
|
// Try to load from API first
|
|
try {
|
|
const response = await fetch(`${API_BASE}/transactions/?type=expense`);
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.data.length > 0) {
|
|
// Convert API data to local format
|
|
expenses = data.data.map(transaction => ({
|
|
id: transaction.id,
|
|
title: transaction.description,
|
|
amount: parseFloat(transaction.amount),
|
|
category: transaction.category_name || 'uncategorized',
|
|
date: transaction.transaction_date,
|
|
apiId: transaction.id
|
|
}));
|
|
updateExpensesDisplay();
|
|
updateBudgetDisplay();
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.log('API not available, loading from local storage');
|
|
}
|
|
|
|
// Fallback to local storage
|
|
const savedExpenses = localStorage.getItem('expenses');
|
|
if (savedExpenses) {
|
|
expenses = JSON.parse(savedExpenses);
|
|
updateExpensesDisplay();
|
|
updateBudgetDisplay();
|
|
}
|
|
}
|
|
|
|
function loadBudgetFromStorage() {
|
|
const savedBudget = localStorage.getItem('totalBudget');
|
|
if (savedBudget) {
|
|
totalBudget = parseFloat(savedBudget);
|
|
updateBudgetDisplay();
|
|
}
|
|
}
|
|
|
|
function updateExpensesDisplay() {
|
|
const tbody = document.getElementById('expenses-tbody');
|
|
const emptyState = document.getElementById('empty-expenses');
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (expenses.length === 0) {
|
|
emptyState.style.display = 'block';
|
|
document.querySelector('.expense-table').style.display = 'none';
|
|
} else {
|
|
emptyState.style.display = 'none';
|
|
document.querySelector('.expense-table').style.display = 'table';
|
|
|
|
expenses.forEach(expense => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${expense.title}</td>
|
|
<td>$${expense.amount.toFixed(2)}</td>
|
|
<td>
|
|
<button class="btn-remove" onclick="removeExpense(${expense.id})">Remove</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateBudgetDisplay() {
|
|
const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
|
|
const budgetLeft = totalBudget - totalExpenses;
|
|
|
|
document.getElementById('total-budget').textContent = totalBudget.toFixed(2);
|
|
document.getElementById('total-expenses').textContent = totalExpenses.toFixed(2);
|
|
document.getElementById('budget-left').textContent = budgetLeft.toFixed(2);
|
|
|
|
// Change color based on budget status
|
|
const budgetLeftElement = document.getElementById('budget-left');
|
|
if (budgetLeft < 0) {
|
|
budgetLeftElement.style.color = '#dc3545';
|
|
} else if (budgetLeft < totalBudget * 0.2) {
|
|
budgetLeftElement.style.color = '#ffc107';
|
|
} else {
|
|
budgetLeftElement.style.color = '#28a745';
|
|
}
|
|
}
|
|
|
|
async function removeExpense(expenseId) {
|
|
if (!confirm('Are you sure you want to remove this expense?')) return;
|
|
|
|
const expense = expenses.find(e => e.id === expenseId);
|
|
if (!expense) return;
|
|
|
|
// Try to delete from API if it has an API ID
|
|
if (expense.apiId) {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/transactions/${expense.apiId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
showSuccess('Expense removed successfully!');
|
|
}
|
|
} catch (error) {
|
|
console.log('Could not delete from API, removing locally');
|
|
}
|
|
}
|
|
|
|
// Remove from local array
|
|
expenses = expenses.filter(e => e.id !== expenseId);
|
|
localStorage.setItem('expenses', JSON.stringify(expenses));
|
|
|
|
updateExpensesDisplay();
|
|
updateBudgetDisplay();
|
|
showSuccess('Expense removed!');
|
|
}
|
|
|
|
function resetAll() {
|
|
if (!confirm('Are you sure you want to reset all data? This cannot be undone.')) return;
|
|
|
|
totalBudget = 0;
|
|
expenses = [];
|
|
|
|
localStorage.removeItem('totalBudget');
|
|
localStorage.removeItem('expenses');
|
|
|
|
updateBudgetDisplay();
|
|
updateExpensesDisplay();
|
|
|
|
showSuccess('All data has been reset!');
|
|
}
|
|
|
|
function showError(message) {
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error';
|
|
errorDiv.textContent = message;
|
|
document.body.insertBefore(errorDiv, document.body.firstChild);
|
|
|
|
setTimeout(() => {
|
|
errorDiv.remove();
|
|
}, 5000);
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
const successDiv = document.createElement('div');
|
|
successDiv.className = 'success';
|
|
successDiv.textContent = message;
|
|
document.body.insertBefore(successDiv, document.body.firstChild);
|
|
|
|
setTimeout(() => {
|
|
successDiv.remove();
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|