Skip to content

Feature/create budget transaction forms #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Limeload merged 2 commits into from
Oct 23, 2025
Merged

Feature/create budget transaction forms #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3269c13
Update: Updated backend to support latest frontend changes.
Aditya-JOSH Oct 23, 2025
fa14784
Add: Created reusable components for budgets, updated forms and added…
Aditya-JOSH Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/controllers/api/v1/budgets_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ def show
# PATCH/PUT /api/v1/budgets/:id
def update
if @budget.update(budget_params)
render json: @budget, status: :ok
render json: BudgetSerializer.new(@budget).serializable_hash[:data], status: :ok
else
render json: { errors: @budget.errors.full_messages }, status: :unprocessable_entity
end
Expand Down
8 changes: 8 additions & 0 deletions app/models/budget.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,12 @@ class Budget < ApplicationRecord

validates :name, presence: true
validates :financial_goal, presence: true, numericality: { greater_than: 0 }

def total_spent
transactions.sum(:amount)
end

def remaining_amount
financial_goal - total_spent
end
end
8 changes: 8 additions & 0 deletions app/serializers/budget_serializer.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ class BudgetSerializer

attributes :id, :name, :financial_goal, :created_at, :updated_at

attribute :spent do |budget|
budget.total_spent
end

attribute :remaining do |budget|
budget.remaining_amount
end

has_many :transactions
belongs_to :user
end
2 changes: 1 addition & 1 deletion client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import './App.css';
import { AuthProvider } from './contexts/AuthContext';
import Layout from './components/Layout';
import Dashboard from './components/Dashboard';
import Budgets from './components/Budgets';
import Budgets from './components/Budgets/Budgets';
import Transactions from './components/Transactions/Transactions';
import Categories from './components/Categories';
import Analytics from './components/Analytics';
Expand Down
253 changes: 0 additions & 253 deletions client/src/components/Budgets.js
View file
Open in desktop

This file was deleted.

56 changes: 56 additions & 0 deletions client/src/components/Budgets/BudgetCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import { Edit, Trash2, Eye } from 'lucide-react';

const BudgetCard = ({ budget, onEdit, onDelete }) => {
const progressPercent = Math.min((budget.spent / budget.financial_goal) * 100, 100);

return (
<div className="budget-card">
<div className="budget-header">
<div className="budget-title">
<h3>{budget.name}</h3>
<span className="budget-date">Created {budget.created_at}</span>
</div>
<div className="budget-actions">
<button className="btn-icon" onClick={() => onEdit(budget)} title="Edit Budget">
<Edit size={16} />
</button>
<button className="btn-icon" onClick={() => onDelete(budget.id)} title="Delete Budget">
<Trash2 size={16} />
</button>
</div>
</div>

<div className="budget-stats">
<div className="stat-item">
<span className="stat-label">Goal</span>
<span className="stat-value">${budget.financial_goal.toLocaleString()}</span>
</div>
<div className="stat-item">
<span className="stat-label">Spent</span>
<span className="stat-value spent">${budget.spent.toLocaleString()}</span>
</div>
<div className="stat-item">
<span className="stat-label">Remaining</span>
<span className="stat-value remaining">${budget.remaining.toLocaleString()}</span>
</div>
</div>

<div className="budget-progress">
<div className="progress-bar">
<div className="progress-fill" style={{ width: `${progressPercent}%` }}></div>
</div>
<div className="progress-text">{progressPercent.toFixed(1)}% used</div>
</div>

<div className="budget-footer">
<button className="btn btn-outline">
<Eye size={16} />
View Details
</button>
</div>
</div>
);
};

export default BudgetCard;
Loading
Loading