-
-
-
-
+ const confirmDelete = () => {
+ if (transactionToDelete) {
+ deleteTransaction(transactionToDelete);
+ setTransactionToDelete(null);
+ setShowConfirmModal(false);
+ }
+ };
- {/* Dark Mode Toggle Button */}
+ return (
+ - Dashboard -
-- Track your financial journey with smart insights -
-
+
+ {/* Header */}
+
+ {/* Expense */}
+
+
+
+ + Dashboard +
+ Track your financial journey with smart insights +
+
{/* Income Card */}
@@ -345,40 +312,43 @@ export default function Dashboard() {
-
-
-
-
+
+
+ Total Expense
+
+
+ {formatCurrency(animatedValues.expense)}
+
+
-
+
+ {/* Actions */}
+
+
+
+
+
+
+ Current Balance
+
+ {showBalance ? formatCurrency(animatedValues.balance) : "β’β’β’β’β’β’"}
+
+
+
+
+
+
+ {/* Filters */}
+
+ setSearchTerm(e.target.value)}
+ className="flex-1 p-4 rounded-2xl border"
+ />
+
+
+ {/* Transaction List */}
+
+ {filteredTransactions.length ? (
+ filteredTransactions.map((transaction) => (
+
+
{children}
);
-};
\ No newline at end of file
+};
diff --git a/src/components/undoTransactions.jsx b/src/components/undoTransactions.jsx
new file mode 100644
index 0000000..8779ca8
--- /dev/null
+++ b/src/components/undoTransactions.jsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { useTransactions } from './TransactionContext';
+
+const UndoTransaction = () => {
+ const { lastDeleted, undoDelete } = useTransactions();
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ let timerRef = null;
+ if (lastDeleted) {
+ setShow(true);
+ if (timerRef) clearTimeout(timerRef);
+ timerRef = setTimeout(() => setShow(false), 5000); // Auto-hide after 5s
+ }
+ return () => {
+ if (timerRef) clearTimeout(timerRef);
+ };
+ }, [lastDeleted]);
+
+ if (!show || !lastDeleted) return null;
+
+ return (
+
+
+ {transaction.note}
+
+
+
+ setShowModal(true)} />
)}
diff --git a/src/components/TransactionContext.jsx b/src/components/TransactionContext.jsx
index c319bcf..1013cfd 100644
--- a/src/components/TransactionContext.jsx
+++ b/src/components/TransactionContext.jsx
@@ -1,7 +1,16 @@
import { createContext, useContext, useState, useEffect } from 'react';
-const TransactionContext = createContext();
-
+const TransactionContext = createContext({
+ transactions: [],
+ addTransaction: () => {},
+ deleteTransaction: () => {},
+ undoDelete: () => {},
+ income: 0,
+ expense: 0,
+ lastDeleted: null,
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
export const useTransactions = () => useContext(TransactionContext);
const getTodaysDate = () => {
@@ -18,10 +27,11 @@ export const TransactionProvider = ({ children }) => {
return saved ? JSON.parse(saved) : [];
});
+ const [lastDeleted, setLastDeleted] = useState(null);
const [goals, setGoals] = useState(() => {
const saved = localStorage.getItem('goals');
return saved ? JSON.parse(saved) : [];
- })
+ });
useEffect(() => {
localStorage.setItem('transactions', JSON.stringify(transactions));
@@ -32,75 +42,92 @@ export const TransactionProvider = ({ children }) => {
}, [goals]);
const addTransaction = (transaction) => {
- setTransactions([transaction, ...transactions]);
+ setTransactions((prev) => [transaction, ...prev]);
};
- const addGoal = (goal) => {
- setGoals([goal, ...goals]);
- }
-
+ // β
Merged deleteTransaction with Undo + Goal Refund
const deleteTransaction = (transactionId) => {
- // 1. Find the transaction to be deleted
- const transactionToDelete = transactions.find(t => t.id === transactionId);
+ const transactionToDelete = transactions.find((t) => t.id === transactionId);
+ if (!transactionToDelete) return;
- if (!transactionToDelete) return; // Exit if transaction not found
+ // Save last deleted for Undo feature
+ setLastDeleted(transactionToDelete);
- // 2. Check if it was a contribution to a goal
+ // If it was a goal contribution, refund it
if (transactionToDelete.goalId) {
- // 3. If yes, "refund" the amount from the goal
- const updatedGoals = goals.map(goal => {
- if (goal.id === transactionToDelete.goalId) {
- return {
- ...goal,
- currentAmount: goal.currentAmount - transactionToDelete.amount
- };
- }
- return goal;
- });
+ const updatedGoals = goals.map((goal) =>
+ goal.id === transactionToDelete.goalId
+ ? { ...goal, currentAmount: goal.currentAmount - transactionToDelete.amount }
+ : goal
+ );
setGoals(updatedGoals);
}
- // 4. Finally, delete the transaction itself
- setTransactions(prev => prev.filter(t => t.id !== transactionId));
+ // Remove from transactions
+ const updatedTransactions = transactions.filter((t) => t.id !== transactionId);
+ setTransactions(updatedTransactions);
};
- const income = transactions
- .filter(t => t.type === 'Income')
- .reduce((sum, t) => sum + Number(t.amount), 0);
+ const undoDelete = () => {
+ if (lastDeleted) {
+ setTransactions((prev) => [lastDeleted, ...prev]);
+ setLastDeleted(null);
+ }
+ };
- const expense = transactions
- .filter(t => t.type === 'Expense')
- .reduce((sum, t) => sum + Number(t.amount), 0);
+ const addGoal = (goal) => {
+ setGoals([goal, ...goals]);
+ };
const contributeToGoal = (goalId, amount) => {
- let goalName = '';
-
- const updatedGoals = goals.map(goal => {
- if (goal.id === goalId) {
- goalName = goal.name;
- return { ...goal, currentAmount: goal.currentAmount + amount };
- }
- return goal;
- });
- setGoals(updatedGoals);
-
- const contributionTransaction = {
- id: Date.now(),
- note: `Contribution to "${goalName}"`,
- amount: amount,
- type: 'Expense',
- category: 'Savings',
- date: getTodaysDate(),
- goalId: goalId
- };
- addTransaction(contributionTransaction);
+ let goalName = '';
+ const updatedGoals = goals.map((goal) => {
+ if (goal.id === goalId) {
+ goalName = goal.name;
+ return { ...goal, currentAmount: goal.currentAmount + amount };
+ }
+ return goal;
+ });
+ setGoals(updatedGoals);
+
+ const contributionTransaction = {
+ id: Date.now(),
+ note: `Contribution to "${goalName}"`,
+ amount: amount,
+ type: 'Expense',
+ category: 'Savings',
+ date: getTodaysDate(),
+ goalId: goalId,
};
+ addTransaction(contributionTransaction);
+ };
+
+ const income = transactions
+ .filter((t) => t.type === 'Income')
+ .reduce((sum, t) => sum + (isNaN(Number(t.amount)) ? 0 : Number(t.amount)), 0);
+
+ const expense = transactions
+ .filter((t) => t.type === 'Expense')
+ .reduce((sum, t) => sum + (isNaN(Number(t.amount)) ? 0 : Number(t.amount)), 0);
return (
+ {transaction.type === "Expense" ? "-" : "+"}
+ {formatCurrency(transaction.amount)}
+
+
{filteredAndSortedTransactions.map((transaction, index) => (
setShowConfirmModal(false)}
+ />
+
+
+ {filteredAndSortedTransactions.length === 0 && (
+
+
+ {/* Undo */}
+
+
+
+
+ ))
+ ) : (
+
+
+ No transactions found.
+ )} +
+ Transaction deleted
+
+
+ );
+};
+
+export default UndoTransaction;
diff --git a/src/index.css b/src/index.css
index f1d8c73..9220e89 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,8 @@
@import "tailwindcss";
+@keyframes slideIn {
+ from { transform: translateY(50px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+.animate-slideIn {
+ animation: slideIn 0.3s ease-out;
+}
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..b8a621a 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
+import './style.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/vite.config.js b/vite.config.js
index d04576b..cd7870e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
-// https://vite.dev/config/
export default defineConfig({
- plugins: [react({babel: {
- plugins: ['styled-jsx/babel'],
- },}), tailwindcss() ],
-})
+ plugins: [
+ react({
+ babel: {
+ plugins: ["styled-jsx/babel"],
+ },
+ }),
+ ],
+});