);
-}
+};
-export default Categories;
+export default Categories;
\ No newline at end of file
diff --git a/client/src/components/Dashboard.js b/client/src/components/Dashboard.js
new file mode 100644
index 0000000..41feabf
--- /dev/null
+++ b/client/src/components/Dashboard.js
@@ -0,0 +1,244 @@
+import React, { useState, useEffect } from 'react';
+import {
+ DollarSign,
+ TrendingUp,
+ TrendingDown,
+ PlusCircle,
+ Eye,
+ Edit,
+ Trash2
+} from 'lucide-react';
+import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+const Dashboard = () => {
+ const [budgets, setBudgets] = useState([]);
+ const [recentTransactions, setRecentTransactions] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ // Mock data for now - will be replaced with API calls
+ useEffect(() => {
+ // Simulate API call
+ setTimeout(() => {
+ setBudgets([
+ {
+ id: 1,
+ name: 'Monthly Budget',
+ financial_goal: 3000,
+ spent: 1850,
+ remaining: 1150
+ },
+ {
+ id: 2,
+ name: 'Vacation Fund',
+ financial_goal: 5000,
+ spent: 1200,
+ remaining: 3800
+ }
+ ]);
+
+ setRecentTransactions([
+ { id: 1, description: 'Grocery Shopping', amount: 150, category: 'Food', date: '2024-01-15' },
+ { id: 2, description: 'Gas Station', amount: 45, category: 'Transportation', date: '2024-01-14' },
+ { id: 3, description: 'Coffee Shop', amount: 12, category: 'Food', date: '2024-01-13' },
+ { id: 4, description: 'Movie Tickets', amount: 25, category: 'Entertainment', date: '2024-01-12' },
+ { id: 5, description: 'Online Shopping', amount: 89, category: 'Shopping', date: '2024-01-11' }
+ ]);
+
+ setLoading(false);
+ }, 1000);
+ }, []);
+
+ const totalBudget = budgets.reduce((sum, budget) => sum + budget.financial_goal, 0);
+ const totalSpent = budgets.reduce((sum, budget) => sum + budget.spent, 0);
+ const totalRemaining = totalBudget - totalSpent;
+
+ // Chart data
+ const categoryData = [
+ { name: 'Food', value: 400, color: '#8884d8' },
+ { name: 'Transportation', value: 300, color: '#82ca9d' },
+ { name: 'Entertainment', value: 200, color: '#ffc658' },
+ { name: 'Shopping', value: 150, color: '#ff7300' },
+ { name: 'Utilities', value: 100, color: '#00ff00' }
+ ];
+
+ const monthlyData = [
+ { month: 'Jan', spent: 1850, budget: 3000 },
+ { month: 'Feb', spent: 2100, budget: 3000 },
+ { month: 'Mar', spent: 1950, budget: 3000 },
+ { month: 'Apr', spent: 2200, budget: 3000 },
+ { month: 'May', spent: 1800, budget: 3000 },
+ { month: 'Jun', spent: 2400, budget: 3000 }
+ ];
+
+ if (loading) {
+ return (
+
+ );
+};
+
+export default Dashboard;
diff --git a/client/src/components/Layout.js b/client/src/components/Layout.js
new file mode 100644
index 0000000..120d520
--- /dev/null
+++ b/client/src/components/Layout.js
@@ -0,0 +1,163 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import {
+ Home,
+ Wallet,
+ List,
+ Tag,
+ Settings,
+ Menu,
+ X,
+ TrendingUp,
+ DollarSign,
+ LogOut,
+ User
+} from 'lucide-react';
+import ThemeToggle from './ThemeToggle';
+import { useAuth } from '../contexts/AuthContext';
+
+const Layout = ({ children }) => {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+ const [showUserMenu, setShowUserMenu] = useState(false);
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { user, logout } = useAuth();
+ const userMenuRef = useRef(null);
+
+ // Close user menu when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+ setShowUserMenu(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ const navigation = [
+ { name: 'Dashboard', href: '/', icon: Home },
+ { name: 'Budgets', href: '/budgets', icon: Wallet },
+ { name: 'Transactions', href: '/transactions', icon: List },
+ { name: 'Categories', href: '/categories', icon: Tag },
+ { name: 'Analytics', href: '/analytics', icon: TrendingUp },
+ ];
+
+ const isActive = (path) => {
+ if (path === '/') {
+ return location.pathname === '/';
+ }
+ return location.pathname.startsWith(path);
+ };
+
+ const handleLogout = async () => {
+ await logout();
+ navigate('/login');
+ };
+
+ return (
+
+ {/* Mobile sidebar overlay */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+
+ SpendWise
+
+
setSidebarOpen(false)}
+ >
+
+
+
+
+ {navigation.map((item) => {
+ const Icon = item.icon;
+ return (
+ {item.name}
+
+ );
+ })}
+
+
+
+
+
+
+ {/* Main content */}
+
+ {/* Top bar */}
+
+ setSidebarOpen(true)}
+ >
+
+
+
+
+
setShowUserMenu(!showUserMenu)}
+ >
+ {user?.name?.charAt(0) || 'U'}
+
+ {showUserMenu && (
+
+
+ {user?.name || 'User'}
+ {user?.email || 'user@example.com'}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {/* Page content */}
+
+ {children}
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/client/src/components/Transactions.js b/client/src/components/Transactions.js
new file mode 100644
index 0000000..0025560
--- /dev/null
+++ b/client/src/components/Transactions.js
@@ -0,0 +1,387 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { PlusCircle, Edit, Trash2, Search, Filter, Calendar } from 'lucide-react';
+
+const Transactions = () => {
+ const [transactions, setTransactions] = useState([]);
+ const [budgets, setBudgets] = useState([]);
+ const [categories, setCategories] = useState([]);
+ const [showForm, setShowForm] = useState(false);
+ const [editingTransaction, setEditingTransaction] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [selectedBudget, setSelectedBudget] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState('');
+
+ const { register, handleSubmit, reset, formState: { errors } } = useForm();
+
+ useEffect(() => {
+ // Mock data - will be replaced with API calls
+ setTimeout(() => {
+ setBudgets([
+ { id: 1, name: 'Monthly Budget' },
+ { id: 2, name: 'Vacation Fund' },
+ { id: 3, name: 'Emergency Fund' }
+ ]);
+
+ setCategories([
+ { id: 1, name: 'Food' },
+ { id: 2, name: 'Transportation' },
+ { id: 3, name: 'Entertainment' },
+ { id: 4, name: 'Shopping' },
+ { id: 5, name: 'Utilities' },
+ { id: 6, name: 'Healthcare' }
+ ]);
+
+ setTransactions([
+ {
+ id: 1,
+ description: 'Grocery Shopping',
+ amount: 150.00,
+ date: '2024-01-15',
+ budget_id: 1,
+ category_id: 1,
+ budget_name: 'Monthly Budget',
+ category_name: 'Food'
+ },
+ {
+ id: 2,
+ description: 'Gas Station',
+ amount: 45.00,
+ date: '2024-01-14',
+ budget_id: 1,
+ category_id: 2,
+ budget_name: 'Monthly Budget',
+ category_name: 'Transportation'
+ },
+ {
+ id: 3,
+ description: 'Coffee Shop',
+ amount: 12.50,
+ date: '2024-01-13',
+ budget_id: 1,
+ category_id: 1,
+ budget_name: 'Monthly Budget',
+ category_name: 'Food'
+ },
+ {
+ id: 4,
+ description: 'Movie Tickets',
+ amount: 25.00,
+ date: '2024-01-12',
+ budget_id: 1,
+ category_id: 3,
+ budget_name: 'Monthly Budget',
+ category_name: 'Entertainment'
+ },
+ {
+ id: 5,
+ description: 'Online Shopping',
+ amount: 89.99,
+ date: '2024-01-11',
+ budget_id: 1,
+ category_id: 4,
+ budget_name: 'Monthly Budget',
+ category_name: 'Shopping'
+ }
+ ]);
+
+ setLoading(false);
+ }, 1000);
+ }, []);
+
+ const onSubmit = (data) => {
+ const transactionData = {
+ ...data,
+ amount: parseFloat(data.amount),
+ budget_id: parseInt(data.budget_id),
+ category_id: parseInt(data.category_id)
+ };
+
+ if (editingTransaction) {
+ // Update existing transaction
+ setTransactions(transactions.map(transaction =>
+ transaction.id === editingTransaction.id
+ ? {
+ ...transaction,
+ ...transactionData,
+ budget_name: budgets.find(b => b.id === parseInt(data.budget_id))?.name || '',
+ category_name: categories.find(c => c.id === parseInt(data.category_id))?.name || ''
+ }
+ : transaction
+ ));
+ } else {
+ // Add new transaction
+ const newTransaction = {
+ ...transactionData,
+ id: Date.now(),
+ budget_name: budgets.find(b => b.id === parseInt(data.budget_id))?.name || '',
+ category_name: categories.find(c => c.id === parseInt(data.category_id))?.name || ''
+ };
+ setTransactions([newTransaction, ...transactions]);
+ }
+
+ reset();
+ setShowForm(false);
+ setEditingTransaction(null);
+ };
+
+ const handleEdit = (transaction) => {
+ setEditingTransaction(transaction);
+ reset({
+ description: transaction.description,
+ amount: transaction.amount,
+ date: transaction.date,
+ budget_id: transaction.budget_id,
+ category_id: transaction.category_id
+ });
+ setShowForm(true);
+ };
+
+ const handleDelete = (transactionId) => {
+ if (window.confirm('Are you sure you want to delete this transaction?')) {
+ setTransactions(transactions.filter(transaction => transaction.id !== transactionId));
+ }
+ };
+
+ const handleCancel = () => {
+ setShowForm(false);
+ setEditingTransaction(null);
+ reset();
+ };
+
+ // Filter transactions
+ const filteredTransactions = transactions.filter(transaction => {
+ const matchesSearch = transaction.description.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchesBudget = !selectedBudget || transaction.budget_id === parseInt(selectedBudget);
+ const matchesCategory = !selectedCategory || transaction.category_id === parseInt(selectedCategory);
+
+ return matchesSearch && matchesBudget && matchesCategory;
+ });
+
+ const totalAmount = filteredTransactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+
+ if (loading) {
+ return (
+
+
+
Loading transactions...
+
+ );
+ }
+
+ return (
+
+
+
+
Transactions
+
Track and manage your spending
+
+
setShowForm(true)}
+ >
+
+
+
+ {/* Transaction Form */}
+ {showForm && (
+
+
+
{editingTransaction ? 'Edit Transaction' : 'Add New Transaction'}
+
+
+
+
+ )}
+
+ {/* Filters */}
+
+
+
+
+
+
+ setSelectedBudget(e.target.value)}
+ >
+ All Budgets
+ {budgets.map(budget => (
+
+ {budget.name}
+
+ ))}
+
+
+
+
+ setSelectedCategory(e.target.value)}
+ >
+ All Categories
+ {categories.map(category => (
+
+ {category.name}
+
+ ))}
+
+
+
+
+
+ {filteredTransactions.length} transactions
+ Total: ${totalAmount.toFixed(2)}
+
+
+
+ {/* Transactions List */}
+
+ {filteredTransactions.length === 0 ? (
+
+
+
No transactions found
+
Add your first transaction to start tracking your spending
+
setShowForm(true)}
+ >
+
+
+ ) : (
+ filteredTransactions.map((transaction) => (
+
+
+
+
{transaction.description}
+
+ {transaction.category_name}
+ {transaction.budget_name}
+ {transaction.date}
+
+
+
+ -${transaction.amount.toFixed(2)}
+
+
+
+
+ handleEdit(transaction)}
+ title="Edit Transaction"
+ >
+
+ handleDelete(transaction.id)}
+ title="Delete Transaction"
+ >
+
+
+
+ ))
+ )}
+
+
+ );
+};
+
+export default Transactions;
diff --git a/client/src/components/auth/ForgotPassword.js b/client/src/components/auth/ForgotPassword.js
new file mode 100644
index 0000000..70dc2be
--- /dev/null
+++ b/client/src/components/auth/ForgotPassword.js
@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Link } from 'react-router-dom';
+import { Mail, ArrowLeft, CheckCircle, AlertCircle } from 'lucide-react';
+
+const ForgotPassword = () => {
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isSubmitted, setIsSubmitted] = useState(false);
+ const [error, setError] = useState('');
+
+ const { register, handleSubmit, formState: { errors } } = useForm();
+
+ const onSubmit = async (data) => {
+ setIsSubmitting(true);
+ setError('');
+
+ try {
+ // Simulate API call
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Mock successful password reset request
+ setIsSubmitted(true);
+ } catch (err) {
+ setError('Failed to send reset email. Please try again.');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ if (isSubmitted) {
+ return (
+
+
+
+
+
Check Your Email
+
We've sent password reset instructions to your email address
+
+
+
+
+
Reset Email Sent
+
+ Please check your email inbox and follow the instructions to reset your password.
+ The link will expire in 1 hour.
+
+
+
+
+
+ Didn't receive the email?
+ setIsSubmitted(false)}
+ >
+ Try again
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
Forgot Password?
+
No worries! Enter your email and we'll send you reset instructions
+
+
+
+
+
+
+ Remember your password?
+
+
+ Don't have an account?
+
+
+
+
+
Need Help?
+
+ If you're having trouble accessing your account, please contact our support team.
+ We're here to help you get back on track with your financial goals.
+
+
+
+
+ );
+};
+
+export default ForgotPassword;
diff --git a/client/src/components/auth/Login.js b/client/src/components/auth/Login.js
new file mode 100644
index 0000000..83af8ed
--- /dev/null
+++ b/client/src/components/auth/Login.js
@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, Link } from 'react-router-dom';
+import { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+
+const Login = () => {
+ const [showPassword, setShowPassword] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const navigate = useNavigate();
+ const { login, error, clearError, isAuthenticated } = useAuth();
+
+ const { register, handleSubmit, formState: { errors } } = useForm({
+ defaultValues: {
+ email: '',
+ password: ''
+ }
+ });
+
+ useEffect(() => {
+ if (isAuthenticated) navigate('/');
+ }, [isAuthenticated, navigate]);
+
+ useEffect(() => {
+ clearError();
+ }, [clearError]);
+
+ const onSubmit = async (data) => {
+ setIsSubmitting(true);
+ const result = await login(data);
+ if (result.success) navigate('/');
+ setIsSubmitting(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ Don't have an account?{' '}
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/client/src/components/auth/ProtectedRoute.js b/client/src/components/auth/ProtectedRoute.js
new file mode 100644
index 0000000..5618248
--- /dev/null
+++ b/client/src/components/auth/ProtectedRoute.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+
+const ProtectedRoute = ({ children }) => {
+ const { isAuthenticated, loading } = useAuth();
+ const location = useLocation();
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ // Redirect to login page with return url
+ return
;
+ }
+
+ return children;
+};
+
+export default ProtectedRoute;
diff --git a/client/src/components/auth/Signup.js b/client/src/components/auth/Signup.js
new file mode 100644
index 0000000..1f80622
--- /dev/null
+++ b/client/src/components/auth/Signup.js
@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, Link } from 'react-router-dom';
+import { Mail, Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+
+const Signup = () => {
+ const [showPassword, setShowPassword] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const navigate = useNavigate();
+ const { register: registerUser, error, clearError, isAuthenticated } = useAuth();
+
+ const { register, handleSubmit, formState: { errors } } = useForm({
+ defaultValues: {
+ name: '',
+ email: '',
+ password: ''
+ }
+ });
+
+ useEffect(() => {
+ if (isAuthenticated) navigate('/');
+ }, [isAuthenticated, navigate]);
+
+ useEffect(() => {
+ clearError();
+ }, [clearError]);
+
+ const onSubmit = async (data) => {
+ setIsSubmitting(true);
+ const result = await registerUser({
+ name: data.name,
+ email: data.email,
+ password: data.password
+ });
+ if (result.success) navigate('/');
+ setIsSubmitting(false);
+ };
+
+ return (
+
+
+
+
+
Create Your Account
+
+
+
+
+
+
+ Already have an account?{' '}
+
+
+
+
+ );
+};
+
+export default Signup;
diff --git a/client/src/contexts/AuthContext.js b/client/src/contexts/AuthContext.js
new file mode 100644
index 0000000..ea9b952
--- /dev/null
+++ b/client/src/contexts/AuthContext.js
@@ -0,0 +1,179 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+
+const AuthContext = createContext();
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+};
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const checkAuthStatus = useCallback(async () => {
+ try {
+ const savedUser = localStorage.getItem('user');
+ const savedToken = localStorage.getItem('authToken');
+
+ if (savedUser && savedToken) {
+ // Verify token is still valid
+ try {
+ // In a real app, you'd verify the token with the server
+ const userData = JSON.parse(savedUser);
+ setUser(userData);
+ } catch (err) {
+ // Token is invalid, clear storage
+ clearAuthData();
+ }
+ }
+ } catch (err) {
+ console.error('Auth check failed:', err);
+ clearAuthData();
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ // Check for existing session on app load
+ checkAuthStatus();
+ }, [checkAuthStatus]);
+
+ const login = async (credentials) => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ // For now, we'll use mock authentication
+ // In production, this would be: const response = await authAPI.login(credentials);
+
+ // Simulate API call
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ // Mock successful login
+ const userData = {
+ id: 1,
+ email: credentials.email,
+ name: 'John Doe',
+ role: 'user',
+ created_at: new Date().toISOString()
+ };
+
+ const token = 'mock-jwt-token-' + Date.now();
+
+ // Store auth data
+ localStorage.setItem('user', JSON.stringify(userData));
+ localStorage.setItem('authToken', token);
+
+ setUser(userData);
+ return { success: true, user: userData };
+
+ } catch (err) {
+ const errorMessage = err.response?.data?.message || 'Login failed. Please try again.';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const register = async (userData) => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ // For now, we'll use mock registration
+ // In production, this would be: const response = await authAPI.register(userData);
+
+ // Simulate API call
+ await new Promise(resolve => setTimeout(resolve, 1500));
+
+ // Mock successful registration
+ const newUser = {
+ id: Date.now(),
+ email: userData.email,
+ name: userData.name,
+ role: 'user',
+ created_at: new Date().toISOString()
+ };
+
+ const token = 'mock-jwt-token-' + Date.now();
+
+ // Store auth data
+ localStorage.setItem('user', JSON.stringify(newUser));
+ localStorage.setItem('authToken', token);
+
+ setUser(newUser);
+ return { success: true, user: newUser };
+
+ } catch (err) {
+ const errorMessage = err.response?.data?.message || 'Registration failed. Please try again.';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const logout = async () => {
+ setLoading(true);
+
+ try {
+ // In production, you might want to call the logout API
+ // await authAPI.logout();
+
+ clearAuthData();
+ setUser(null);
+ return { success: true };
+
+ } catch (err) {
+ console.error('Logout error:', err);
+ // Even if API call fails, clear local data
+ clearAuthData();
+ setUser(null);
+ return { success: true };
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const clearAuthData = () => {
+ localStorage.removeItem('user');
+ localStorage.removeItem('authToken');
+ setUser(null);
+ setError(null);
+ };
+
+ const updateUser = (updatedUser) => {
+ const newUserData = { ...user, ...updatedUser };
+ localStorage.setItem('user', JSON.stringify(newUserData));
+ setUser(newUserData);
+ };
+
+ const clearError = () => {
+ setError(null);
+ };
+
+ const value = {
+ user,
+ loading,
+ error,
+ login,
+ register,
+ logout,
+ updateUser,
+ clearError,
+ isAuthenticated: !!user
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/client/src/index.css b/client/src/index.css
index 50fabf6..6dced73 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,20 +3,60 @@
@tailwind utilities;
.theme-transition * {
- transition: background-color 0.4s ease, color 0.4s ease;
+ transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
+/* Light Theme */
[data-theme="light"] {
- --background: #fdf6e3;
- --text-color: #000;
- --toggle-color: #282c34;
+ --background: #ffffff;
+ --sidebar-bg: #f8fafc;
+ --header-bg: #ffffff;
+ --card-bg: #ffffff;
+ --input-bg: #ffffff;
+ --text-color: #1a202c;
+ --text-muted: #718096;
+ --border-color: #e2e8f0;
+ --hover-bg: #f7fafc;
+ --active-bg: #edf2f7;
+ --primary-color: #3182ce;
+ --primary-hover: #2c5aa0;
+ --primary-bg: #ebf8ff;
+ --secondary-color: #f7fafc;
+ --success-color: #38a169;
+ --success-bg: #f0fff4;
+ --danger-color: #e53e3e;
+ --danger-bg: #fed7d7;
+ --warning-color: #d69e2e;
+ --warning-bg: #fefcbf;
+ --progress-bg: #e2e8f0;
+ --toggle-color: #4a5568;
transition: all 1s ease;
}
+/* Dark Theme */
[data-theme="dark"] {
- --background: #282c34;
- --text-color: #fff;
- --toggle-color: #fdf6e3;
+ --background: #1a202c;
+ --sidebar-bg: #2d3748;
+ --header-bg: #2d3748;
+ --card-bg: #2d3748;
+ --input-bg: #4a5568;
+ --text-color: #f7fafc;
+ --text-muted: #a0aec0;
+ --border-color: #4a5568;
+ --hover-bg: #4a5568;
+ --active-bg: #2d3748;
+ --primary-color: #63b3ed;
+ --primary-hover: #4299e1;
+ --primary-bg: #2b6cb0;
+ --secondary-color: #4a5568;
+ --success-color: #68d391;
+ --success-bg: #22543d;
+ --danger-color: #fc8181;
+ --danger-bg: #742a2a;
+ --warning-color: #f6e05e;
+ --warning-bg: #744210;
+ --progress-bg: #4a5568;
+ --toggle-color: #f7fafc;
transition: all 1s ease;
}
@@ -27,6 +67,8 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: var(--background);
+ color: var(--text-color);
}
code {
@@ -34,17 +76,735 @@ code {
monospace;
}
+/* Theme Toggle */
.toggleBtn {
background-color: transparent;
border: none;
+ padding: 0.5rem;
+ border-radius: 0.5rem;
+ transition: background-color 0.2s ease;
}
.toggleBtn:hover {
cursor: pointer;
+ background-color: var(--hover-bg);
}
.moon, .sun {
color: var(--toggle-color);
fill: var(--toggle-color);
transition: color 0.3s ease, fill 0.3s ease;
+}
+
+/* Authentication Styles */
+.auth-container {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, var(--background) 0%, var(--sidebar-bg) 100%);
+ padding: 2rem;
+}
+
+.auth-card {
+ width: 100%;
+ max-width: 450px;
+ background-color: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 1rem;
+ padding: 2.5rem;
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
+ position: relative;
+ overflow: hidden;
+}
+
+.auth-card.signup-card {
+ max-width: 500px;
+}
+
+.auth-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, var(--primary-color), var(--success-color));
+}
+
+.auth-header {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.auth-header .logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.logo-icon {
+ font-size: 2rem;
+}
+
+.auth-header h2 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 0.5rem 0;
+}
+
+.auth-header p {
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.auth-form {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.input-group {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.input-group svg {
+ position: absolute;
+ left: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ z-index: 1;
+}
+
+.input-group input {
+ width: 100%;
+ padding: 1rem 3rem 1rem 3rem; /* extra right padding for toggle */
+ border: 1px solid var(--border-color);
+ border-radius: 0.5rem;
+ background-color: var(--input-bg);
+ color: var(--text-color);
+ font-size: 1rem;
+ transition: all 0.2s ease;
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ box-sizing: border-box;
+ height: 3.5rem;
+}
+
+.input-group input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.password-toggle {
+ position: absolute;
+ right: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 0.25rem;
+ transition: color 0.2s ease;
+}
+
+.password-toggle:hover {
+ color: var(--text-color);
+}
+
+.form-options {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 0.875rem;
+}
+
+.checkbox-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ color: var(--text-color);
+}
+
+.checkbox-label input[type="checkbox"] {
+ width: auto;
+ margin: 0;
+}
+
+.forgot-password {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.forgot-password:hover {
+ color: var(--primary-hover);
+}
+
+.error-message {
+ background-color: var(--danger-bg);
+ color: var(--danger-color);
+ padding: 0.75rem;
+ border-radius: 0.5rem;
+ font-size: 0.875rem;
+ margin-bottom: 1rem;
+}
+
+.auth-footer {
+ text-align: center;
+ margin-top: 1.5rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.auth-footer p {
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.auth-link {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.auth-link:hover {
+ color: var(--primary-hover);
+}
+
+/* Enhanced Authentication Styles */
+.auth-divider {
+ position: relative;
+ text-align: center;
+ margin: 1.5rem 0;
+}
+
+.auth-divider::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: var(--border-color);
+}
+
+.auth-divider span {
+ background-color: var(--card-bg);
+ padding: 0 1rem;
+ color: var(--text-muted);
+ font-size: 0.875rem;
+}
+
+.auth-features {
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.auth-features h4 {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 1rem 0;
+}
+
+.auth-features ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.auth-features li {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-size: 0.875rem;
+ color: var(--text-muted);
+ margin-bottom: 0.5rem;
+}
+
+.auth-features li svg {
+ color: var(--success-color);
+ flex-shrink: 0;
+}
+
+.password-strength {
+ margin-top: 0.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.strength-bar {
+ flex: 1;
+ height: 4px;
+ background-color: var(--progress-bg);
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.strength-fill {
+ height: 100%;
+ transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+.strength-text {
+ font-size: 0.75rem;
+ font-weight: 500;
+ min-width: 60px;
+}
+
+.terms-label {
+ font-size: 0.875rem;
+ line-height: 1.5;
+}
+
+.terms-link {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.terms-link:hover {
+ text-decoration: underline;
+}
+
+.success-message {
+ text-align: center;
+ padding: 2rem 0;
+}
+
+.success-message svg {
+ color: var(--success-color);
+ margin-bottom: 1rem;
+}
+
+.success-message h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 0.5rem 0;
+}
+
+.success-message p {
+ color: var(--text-muted);
+ margin: 0;
+ line-height: 1.5;
+}
+
+.help-text {
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.help-text h4 {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 0.5rem 0;
+}
+
+.help-text p {
+ font-size: 0.875rem;
+ color: var(--text-muted);
+ margin: 0;
+ line-height: 1.5;
+}
+
+/* Enhanced User Menu */
+.user-menu {
+ position: relative;
+}
+
+.user-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ background-color: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 0.75rem;
+ padding: 1rem;
+ min-width: 220px;
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+}
+
+.user-info {
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid var(--border-color);
+ margin-bottom: 0.75rem;
+}
+
+.user-name {
+ font-weight: 600;
+ color: var(--text-color);
+ display: block;
+ font-size: 0.875rem;
+}
+
+.user-email {
+ font-size: 0.75rem;
+ color: var(--text-muted);
+ display: block;
+ margin-top: 0.25rem;
+}
+
+.user-menu-items {
+ display: flex;
+ flex-direction: column;
+}
+
+.user-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.5rem;
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 0.875rem;
+ cursor: pointer;
+ border-radius: 0.375rem;
+ transition: background-color 0.2s ease;
+ width: 100%;
+ text-align: left;
+}
+
+.user-menu-item:hover {
+ background-color: var(--hover-bg);
+}
+
+.user-menu-item.logout-btn {
+ color: var(--danger-color);
+}
+
+.user-menu-item.logout-btn:hover {
+ background-color: var(--danger-bg);
+}
+
+.user-menu-divider {
+ border: none;
+ height: 1px;
+ background-color: var(--border-color);
+ margin: 0.5rem 0;
+}
+
+/* Loading Spinner Small */
+.loading-spinner.small {
+ width: 16px;
+ height: 16px;
+ border-width: 2px;
+}
+
+/* Dashboard Specific Styles */
+.dashboard-header {
+ margin-bottom: 2rem;
+}
+
+.dashboard-header h1 {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--text-color);
+ margin: 0 0 0.5rem 0;
+}
+
+.dashboard-header p {
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.budgets-section,
+.recent-transactions {
+ margin-bottom: 2rem;
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+}
+
+.section-header h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0;
+}
+
+/* Budget Form Styles */
+.budget-form-container,
+.transaction-form-container,
+.category-form-container {
+ background-color: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 0.75rem;
+ padding: 2rem;
+ margin-bottom: 2rem;
+}
+
+.budget-form,
+.transaction-form,
+.category-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+/* Categories Specific Styles */
+.categories-summary {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.summary-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 0.75rem;
+ background-color: var(--primary-bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+}
+
+.summary-content h3 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--text-color);
+ margin: 0 0 0.25rem 0;
+}
+
+.summary-content p {
+ font-size: 0.875rem;
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.category-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 0.5rem;
+ background-color: var(--primary-bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+}
+
+.category-stats {
+ margin-top: 0.5rem;
+}
+
+.transaction-count {
+ font-size: 0.875rem;
+ color: var(--text-muted);
+}
+
+.category-warning {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--warning-color);
+ margin-top: 0.5rem;
+ padding: 0.5rem;
+ background-color: var(--warning-bg);
+ border-radius: 0.25rem;
+}
+
+.usage-tips {
+ background-color: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 0.75rem;
+ padding: 1.5rem;
+ margin-top: 2rem;
+}
+
+.usage-tips h3 {
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 1rem 0;
+}
+
+.usage-tips ul {
+ margin: 0;
+ padding-left: 1.5rem;
+}
+
+.usage-tips li {
+ color: var(--text-muted);
+ margin-bottom: 0.5rem;
+}
+
+/* Analytics Specific Styles */
+.analytics-summary {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.time-range-select {
+ padding: 0.75rem;
+ border: 1px solid var(--border-color);
+ border-radius: 0.5rem;
+ background-color: var(--input-bg);
+ color: var(--text-color);
+ font-size: 0.875rem;
+}
+
+.budget-performance-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.budget-performance-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem;
+ background-color: var(--hover-bg);
+ border-radius: 0.5rem;
+}
+
+.budget-info h4 {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--text-color);
+ margin: 0 0 0.25rem 0;
+}
+
+.budget-info span {
+ font-size: 0.75rem;
+ color: var(--text-muted);
+}
+
+.budget-progress {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ min-width: 200px;
+}
+
+.insights-section {
+ margin-top: 2rem;
+}
+
+.insights-section h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 1.5rem 0;
+}
+
+.insights-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+}
+
+.insight-card {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ padding: 1.5rem;
+ border-radius: 0.75rem;
+ border: 1px solid var(--border-color);
+}
+
+.insight-card.positive {
+ background-color: var(--success-bg);
+ border-color: var(--success-color);
+}
+
+.insight-card.warning {
+ background-color: var(--warning-bg);
+ border-color: var(--warning-color);
+}
+
+.insight-card svg {
+ color: var(--text-color);
+ margin-top: 0.25rem;
+}
+
+.insight-content h4 {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text-color);
+ margin: 0 0 0.5rem 0;
+}
+
+.insight-content p {
+ font-size: 0.875rem;
+ color: var(--text-muted);
+ margin: 0;
+ line-height: 1.5;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+ .auth-container {
+ padding: 1rem;
+ }
+
+ .auth-card {
+ padding: 1.5rem;
+ }
+
+ .page-content {
+ padding: 1rem;
+ }
+
+ .budget-stats {
+ grid-template-columns: 1fr;
+ gap: 0.5rem;
+ }
+
+ .transaction-main {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+
+ .transaction-actions {
+ margin-left: 0;
+ margin-top: 0.5rem;
+ }
+
+ .insights-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .budget-performance-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+
+ .budget-progress {
+ width: 100%;
+ min-width: auto;
+ }
}
\ No newline at end of file
diff --git a/client/src/services/api.js b/client/src/services/api.js
index 45e12be..6a35e5e 100644
--- a/client/src/services/api.js
+++ b/client/src/services/api.js
@@ -1,11 +1,83 @@
import axios from 'axios';
+// Create axios instance with base configuration
const api = axios.create({
- baseURL: process.env.REACT_APP_API_URL,
+ baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api/v1',
headers: {
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
- withCredentials: true
});
+// Add request interceptor to include auth token
+api.interceptors.request.use(
+ (config) => {
+ const token = localStorage.getItem('authToken');
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+ },
+ (error) => {
+ return Promise.reject(error);
+ }
+);
+
+// Add response interceptor for error handling
+api.interceptors.response.use(
+ (response) => response,
+ (error) => {
+ if (error.response?.status === 401) {
+ // Handle unauthorized access
+ localStorage.removeItem('authToken');
+ localStorage.removeItem('user');
+ window.location.href = '/login';
+ }
+ return Promise.reject(error);
+ }
+);
+
+// Auth API
+export const authAPI = {
+ login: (credentials) => api.post('/auth/login', credentials),
+ register: (userData) => api.post('/auth/register', userData),
+ logout: () => api.post('/auth/logout'),
+ refreshToken: () => api.post('/auth/refresh'),
+};
+
+// Budgets API
+export const budgetsAPI = {
+ getAll: () => api.get('/budgets'),
+ getById: (id) => api.get(`/budgets/${id}`),
+ create: (budgetData) => api.post('/budgets', budgetData),
+ update: (id, budgetData) => api.put(`/budgets/${id}`, budgetData),
+ delete: (id) => api.delete(`/budgets/${id}`),
+};
+
+// Categories API
+export const categoriesAPI = {
+ getAll: (params = {}) => api.get('/categories', { params }),
+ getById: (id) => api.get(`/categories/${id}`),
+ create: (categoryData) => api.post('/categories', categoryData),
+ update: (id, categoryData) => api.put(`/categories/${id}`, categoryData),
+ delete: (id) => api.delete(`/categories/${id}`),
+};
+
+// Transactions API
+export const transactionsAPI = {
+ getAll: (budgetId, params = {}) => api.get(`/budgets/${budgetId}/transactions`, { params }),
+ getById: (budgetId, transactionId) => api.get(`/budgets/${budgetId}/transactions/${transactionId}`),
+ create: (budgetId, transactionData) => api.post(`/budgets/${budgetId}/transactions`, transactionData),
+ update: (budgetId, transactionId, transactionData) =>
+ api.put(`/budgets/${budgetId}/transactions/${transactionId}`, transactionData),
+ delete: (budgetId, transactionId) => api.delete(`/budgets/${budgetId}/transactions/${transactionId}`),
+};
+
+// Analytics API
+export const analyticsAPI = {
+ getSpendingTrend: (params = {}) => api.get('/analytics/spending-trend', { params }),
+ getCategoryBreakdown: (params = {}) => api.get('/analytics/category-breakdown', { params }),
+ getBudgetPerformance: (params = {}) => api.get('/analytics/budget-performance', { params }),
+ getMonthlyComparison: (params = {}) => api.get('/analytics/monthly-comparison', { params }),
+};
+
export default api;