Expense Context - Copy this React, Tailwind Component to your project

// contexts/ExpenseContext.jsx import React, { createContext, useContext, useState } from "react"; const ExpenseContext = createContext(); export const ExpenseProvider = ({ children }) => { const [balance, setBalance] = useState(0); const [expenses, setExpenses] = useState([]); const [groupExpenses, setGroupExpenses] = useState([]); const [showProfileModal, setShowProfileModal] = useState(false); const [userCards, setUserCards] = useState([]); const [moneyAdditions, setMoneyAdditions] = useState([]); const [showMonthlyReport, setShowMonthlyReport] = useState(false); const addMoney = (amount) => { setBalance((prev) => prev + parseFloat(amount)); setMoneyAdditions((prev) => [ ...prev, { amount: parseFloat(amount), date: new Date().toISOString(), id: Date.now() }, ]); }; const addExpense = (expense) => { setExpenses((prev) => [...prev, expense]); setBalance((prev) => prev parseFloat(expense.amount)); }; return ( <ExpenseContext.Provider value={{ balance, expenses, groupExpenses, addMoney, addExpense, showProfileModal, setShowProfileModal, userCards, moneyAdditions, showMonthlyReport, setShowMonthlyReport, }} > {children} </ExpenseContext.Provider> ); }; export const useExpense = () => useContext(ExpenseContext); // components/Header.jsx import React from "react"; import { FiUser } from "react icons/fi"; import { useExpense } from "../contexts/ExpenseContext"; const Header = () => { const { setShowProfileModal } = useExpense(); return ( <header className="bg white shadow md p 4 flex justify between items center"> <h1 className="text 2xl font bold text gray 800">Expense Tracker</h1> <button onClick={() => setShowProfileModal(true)} className="p 2 rounded full hover:bg gray 100"> <FiUser className="w 6 h 6" /> </button> </header> ); }; export default Header; // components/Wallet.jsx import React from "react"; import { FiCalendar, FiDollarSign } from "react icons/fi"; import { useExpense } from "../contexts/ExpenseContext"; const Wallet = () => { const { balance, moneyAdditions, setShowMonthlyReport } = useExpense(); return ( <div className="bg white p 6 rounded lg shadow md"> <div className="flex justify between items center mb 4"> <h2 className="text xl font bold">Wallet</h2> <button onClick={() => setShowMonthlyReport(true)} className="text purple 600 hover:text purple 700"> <FiCalendar className="w 5 h 5" /> Monthly Report </button> </div> <div className="text 3xl font bold text green 600">${balance.toFixed(2)}</div> <p className="text gray 600">Total Balance</p> <div className="mt 4"> {moneyAdditions.slice( 3).map((addition) => ( <div key={addition.id} className="flex justify between items center p 2 bg gray 50 rounded"> <p className="font medium">${addition.amount.toFixed(2)}</p> <FiDollarSign className="w 5 h 5 text green 500" /> </div> ))} </div> </div> ); }; export default Wallet; // components/ExpenseTracker.jsx import React from "react"; import Header from "./Header"; import Wallet from "./Wallet"; import { useExpense } from "../contexts/ExpenseContext"; import MonthlyReport from "./MonthlyReport"; const ExpenseTracker = () => { const { showMonthlyReport, setShowMonthlyReport } = useExpense(); return ( <div className="min h screen bg gray 100"> <Header /> <main className="container mx auto px 4 py 8"> <Wallet /> </main> {showMonthlyReport && <MonthlyReport onClose={() => setShowMonthlyReport(false)} />} </div> ); }; export default ExpenseTracker; // App.jsx import React from "react"; import { ExpenseProvider } from "./contexts/ExpenseContext"; import ExpenseTracker from "./components/ExpenseTracker"; const App = () => { return ( <ExpenseProvider> <ExpenseTracker /> </ExpenseProvider> ); }; export default App;