feat: Add toast notifications

frontend/package.json

@@ -17,6 +17,8 @@
     "react": "^19.1.1",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.1",
+    "react-hot-toast": "^2.6.0",
+    "react-router-dom": "^7.9.1"
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.1",
     "react-toastify": "^11.0.5"

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import WelcomePage from './pages/WelcomePage';
 import ProtectedRoute from './components/ProtectedRoute';
 import SetupProtectedRoute from './components/SetupProtectedRoute';
 import Layout from './components/Layout';
+import { Toaster } from 'react-hot-toast'
 import SettingsPage from './pages/SettingsPage';
 import RecurringTransactions from './pages/RecurringTransactions';
 import ContactUs from './pages/ContactUs';
@@ -23,6 +24,13 @@ function App() {
         <Route path="/" element={<WelcomePage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
+
+        {/* Protected Routes Wrapper */}
+        <Route 
+          element={
+            <ProtectedRoute>
+              <Layout />
+            </ProtectedRoute>
         <Route path="/contact" element={<ContactUs />} />
         {/* Protected Routes */}
         <Route
@@ -52,6 +60,7 @@ function App() {
         </Route>
       </Routes>
       <ToastContainer />
+      <Toaster position="top-right" reverseOrder={false}/>
     </>
   );
 }

frontend/src/contexts/AuthContext.jsx

@@ -2,6 +2,7 @@ import React, { createContext, useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 import api from '../api/axios';
+import toast from 'react-hot-toast';
 
 const AuthContext = createContext();
 
@@ -24,7 +25,7 @@ export const AuthProvider = ({ children }) => {
           setUser(response.data);
         } catch (error) {
           // Clear invalid token
-          console.error("Token verification failed", error);
+          toast.error("Token verification failed");
           localStorage.removeItem('token');
           setUser(null);
           setToken(null);
@@ -60,6 +61,7 @@ export const AuthProvider = ({ children }) => {
         navigate('/dashboard');
       }
     } catch (error) {
+      toast.error('Login failed');
       console.error('Login failed', error.response?.data);
       setPendingToast({ type: 'error', message: error.response?.data?.message || 'Login failed. Please try again.' });
       throw new Error(error.response?.data?.message || 'Login failed. Please try again.');
@@ -79,6 +81,7 @@ export const AuthProvider = ({ children }) => {
       setPendingToast({ type: 'success', message: 'Signup successful!' });
       navigate('/setup');
     } catch (error) {
+      toast.error('Signup failed');
       console.error('Signup failed', error.response?.data);
       setPendingToast({ type: 'error', message: error.response?.data?.message || 'Signup failed. Please try again.' });
       throw new Error(error.response?.data?.message || 'Signup failed. Please try again.');

frontend/src/pages/DashboardPage.jsx

@@ -6,6 +6,7 @@ import TransactionModal from '../components/TransactionModal';
 import useCurrency from '../hooks/useCurrency';
 import useTheme from '../hooks/useTheme';
 import Spinner from '../components/Spinner';
+import toast from 'react-hot-toast';
 import EmptyState from '../components/EmptyState';
 import { IoWarning } from "react-icons/io5";
 
@@ -62,7 +63,7 @@ const DashboardPage = () => {
       setIncomeCategories(incomeCategoriesRes.data);
       setRecentTransactions(summaryRes.data.recentTransactions || []);
     } catch (error) {
-      console.error("Failed to fetch dashboard data", error);
+      toast.error("Failed to fetch dashboard data");
     } finally {
       setLoading(false);
     }
@@ -94,7 +95,7 @@ const DashboardPage = () => {
       fetchData();
       handleCloseModal();
     } catch (error) {
-      console.error("Failed to save transaction", error);
+      toast.error("Failed to save transaction");
     }
   };
 

frontend/src/pages/ReceiptsPage.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import api from '../api/axios';
+import toast from 'react-hot-toast';
 
 const ReceiptsPage = () => {
   const [file, setFile] = useState(null);
@@ -38,7 +39,7 @@ const ReceiptsPage = () => {
       navigate('/dashboard');
     } catch (err) {
       setError('Upload failed. Please try again.');
-      console.error(err);
+      toast.error('Upload failed. Please try again.');
     } finally {
       setUploading(false);
     }

frontend/src/pages/TransactionsPage.jsx

@@ -6,6 +6,7 @@ import TransactionDetailModal from '../components/TransactionDetailModal'
 import ManageCategoriesModal from '../components/ManageCategoriesModal';
 import Spinner from '../components/Spinner';
 import useCurrency from '../hooks/useCurrency';
+import toast from 'react-hot-toast';
 import EmptyState from '../components/EmptyState';
 
 const handleExportCSV = async () => {
@@ -23,7 +24,7 @@ const handleExportCSV = async () => {
     a.remove();
     window.URL.revokeObjectURL(url);
   } catch (error) {
-    console.error("Failed to export CSV", error);
+    toast.error("Failed to export CSV");
     alert("Failed to export CSV. Please try again.");
   }
 };
@@ -106,7 +107,7 @@ const TransactionsPage = () => {
       setSelectedTransactionIds([]); // Clear selection on data change
 
     } catch (error) {
-      console.error("Failed to fetch transactions data", error);
+      toast.error("Failed to fetch transactions data");
     } finally {
       setLoading(false);
       setIsFiltering(false);
@@ -187,7 +188,7 @@ const TransactionsPage = () => {
       fetchData();
       handleCloseTransactionModal();
     } catch (error) {
-      console.error("Failed to save transaction", error);
+      toast.error("Failed to save transaction");
     }
   };
 
@@ -206,7 +207,7 @@ const TransactionsPage = () => {
           return updatedTransactions;
         });
       } catch (error) {
-        console.error("Failed to delete transaction", error);
+        toast.error("Failed to delete transaction");
       }
     }
   };
@@ -249,7 +250,7 @@ const TransactionsPage = () => {
         await api.delete('/transactions/category', { data: { categoryToDelete } });
         fetchData();
       } catch (error) {
-        console.error("Failed to delete category", error);
+        toast.error("Failed to delete category");
       }
     }
   };