Here’s the detailed implementation for all pages, their CSS files, and the

context for session management, all rewritten comprehensively.

1. Project Structure

src/

├── components/

│ ├── LandingPage.js

│ ├── Login.js

│ ├── Signup.js

│ ├── Navbar.js

│ ├── Home.js

│ ├── TransactionHistory.js

│ ├── AddTransaction.js

│ ├── Reports.js

│ ├── ChatBuddy.js

│ └── Profile.js

├── App.js

├── index.js

├── api/

│ └── api.js

├── styles/

│ ├── App.css

│ └── Components.css

└── context/

├── SessionContext.js

└── SessionProvider.js

2. Session Management

context/SessionContext.js
import { createContext } from 'react';

const SessionContext = createContext(null);

export default SessionContext;

context/SessionProvider.js

import React, { useState, useEffect } from 'react';

import SessionContext from './SessionContext';

const SessionProvider = ({ children }) => {

const [session, setSession] = useState(null);

useEffect(() => {

const user = JSON.parse(localStorage.getItem('user'));

if (user) setSession(user);

}, []);

const login = (userData) => {

setSession(userData);

localStorage.setItem('user', JSON.stringify(userData));

};

const logout = () => {

setSession(null);

localStorage.removeItem('user');

};

return (

<SessionContext.Provider value={{ session, login, logout }}>

 {children}

</SessionContext.Provider>

);

};

export default SessionProvider;

3. API Configuration

api/api.js

import axios from 'axios';

const api = axios.create({

baseURL: 'http://localhost:5000/api', // Update as per your backend URL

headers: {

'Content-Type': 'application/json',

},

});

api.interceptors.request.use((config) => {

const token = localStorage.getItem('token');

if (token) {

config.headers['Authorization'] = `Bearer ${token}`;

return config;

});

export default api;

4. Pages Implementation
LandingPage.js

import React from 'react';

import { Link } from 'react-router-dom';

import '../styles/Components.css';

const LandingPage = () => (

<div className="landing-page">

<h1>Welcome to Personal Finance Tracker</h1>

<p>Track your income, expenses, and savings efficiently.</p>

<div className="landing-actions">

<Link to="/login">

<button className="btn">Login</button>

</Link>

<Link to="/signup">

<button className="btn">Signup</button>

</Link>

</div>

</div>

);

export default LandingPage;

Login.js

import React, { useState, useContext } from 'react';

import { useNavigate } from 'react-router-dom';

import SessionContext from '../context/SessionContext';

import api from '../api/api';

const Login = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const { login } = useContext(SessionContext);

const navigate = useNavigate();

const handleLogin = async (e) => {

e.preventDefault();

try {

const response = await api.post('/auth/login', { email, password });

login(response.data.user);

navigate('/home');

} catch (error) {

alert('Login failed. Please check your credentials.');

};

return (

<div className="login-container">

<h2>Login</h2>

<form onSubmit={handleLogin}>

<input

type="email"

placeholder="Email"

value={email}

onChange={(e) => setEmail(e.target.value)}

required

/>

<input

type="password"

placeholder="Password"
 value={password}

onChange={(e) => setPassword(e.target.value)}

required

/>

<button type="submit">Login</button>

</form>

</div>

);

};

export default Login;

Signup.js

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

import api from '../api/api';

const Signup = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [name, setName] = useState('');

const navigate = useNavigate();

const handleSignup = async (e) => {

e.preventDefault();

try {

await api.post('/auth/signup', { name, email, password });

navigate('/login');

} catch (error) {

alert('Signup failed. Please try again.');

 }

};

return (

<div className="signup-container">

<h2>Signup</h2>

<form onSubmit={handleSignup}>

<input

type="text"

placeholder="Name"

value={name}

onChange={(e) => setName(e.target.value)}

required

/>

<input

type="email"

placeholder="Email"

value={email}

onChange={(e) => setEmail(e.target.value)}

required

/>

<input

type="password"

placeholder="Password"

value={password}

onChange={(e) => setPassword(e.target.value)}

required

/>

<button type="submit">Signup</button>
 </form>

</div>

);

};

export default Signup;

Navbar.js

import React, { useContext } from 'react';

import { Link } from 'react-router-dom';

import SessionContext from '../context/SessionContext';

const Navbar = () => {

const { session, logout } = useContext(SessionContext);

return (

<nav className="navbar">

<h1>Finance Tracker</h1>

<div className="links">

<Link to="/home">Home</Link>

<Link to="/transactions">Transactions</Link>

<Link to="/reports">Reports</Link>

<Link to="/chat">ChatBuddy</Link>

<Link to="/profile">Profile</Link>

{session ? (

<button onClick={logout}>Logout</button>

):(

<Link to="/login">Login</Link>

)}

</div>
 </nav>

);

};

export default Navbar;

Styling

App.css

body {

margin: 0;

font-family: Arial, sans-serif;

background-color: #f4f4f9;

color: #333;

h1, h2, h3 {

color: #2d3e50;

Components.css

.landing-page {

text-align: center;

padding: 50px;

.landing-actions {

margin-top: 20px;

.btn {
 background-color: #2d3e50;

color: white;

border: none;

padding: 10px 20px;

margin: 5px;

cursor: pointer;

font-size: 16px;

border-radius: 5px;

.btn:hover {

background-color: #1d2937;

.navbar {

display: flex;

justify-content: space-between;

background-color: #2d3e50;

padding: 10px 20px;

.navbar .links a {

color: white;

text-decoration: none;

margin-right: 15px;

.navbar .links a:hover {

text-decoration: underline;
}

This setup includes reusable components with clean session management.

Let me know if you need additional functionality or further customization
for pages like TransactionHistory, AddTransaction, Reports,
ChatBuddy, or Profile!

Here’s the detailed implementation for the TransactionHistory,

AddTransaction, Reports, ChatBuddy, and Profile pages, along with
necessary styling.

TransactionHistory.js

This page displays the user's past transactions with filter and categorize
options.

import React, { useState, useEffect, useContext } from 'react';

import api from '../api/api';

import SessionContext from '../context/SessionContext';

import '../styles/Components.css';

const TransactionHistory = () => {

const { session } = useContext(SessionContext);

const [transactions, setTransactions] = useState([]);

const [filter, setFilter] = useState('all');

useEffect(() => {

const fetchTransactions = async () => {

try {

const response = await api.get(`/transactions?userId=$

{session.id}`);

setTransactions(response.data);

} catch (error) {

console.error('Error fetching transactions:', error);

 }

};

fetchTransactions();

}, [session]);

const handleFilterChange = (e) => setFilter(e.target.value);

const filteredTransactions = transactions.filter((transaction) => {

if (filter === 'all') return true;

return transaction.type === filter;

});

return (

<div className="transaction-history">

<h2>Transaction History</h2>

<div className="filter">

<label>Filter:</label>

<select value={filter} onChange={handleFilterChange}>

<option value="all">All</option>

<option value="income">Income</option>

<option value="expense">Expense</option>

</select>

</div>

<table>

<thead>

<tr>

<th>Date</th>

<th>Description</th>

<th>Category</th>
 <th>Type</th>

<th>Amount</th>

</tr>

</thead>

<tbody>

{filteredTransactions.map((transaction) => (

<tr key={transaction.id}>

<td>{transaction.date}</td>

<td>{transaction.description}</td>

<td>{transaction.category}</td>

<td>{transaction.type}</td>

<td>{transaction.amount}</td>

</tr>

))}

</tbody>

</table>

</div>

);

};

export default TransactionHistory;

AddTransaction.js

Allows users to add a new transaction.

import React, { useState, useContext } from 'react';

import api from '../api/api';

import SessionContext from '../context/SessionContext';

const AddTransaction = () => {

const { session } = useContext(SessionContext);

const [description, setDescription] = useState('');

const [amount, setAmount] = useState('');

const [type, setType] = useState('income');

const [category, setCategory] = useState('');

const [date, setDate] = useState('');

const handleSubmit = async (e) => {

e.preventDefault();

try {

await api.post('/transactions', {

userId: session.id,

description,

amount,

type,

category,

date,

});

alert('Transaction added successfully!');

setDescription('');

setAmount('');

setCategory('');

setDate('');

} catch (error) {

alert('Failed to add transaction.');

};

return (
<div className="add-transaction">

<h2>Add Transaction</h2>

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="Description"

value={description}

onChange={(e) => setDescription(e.target.value)}

required

/>

<input

type="number"

placeholder="Amount"

value={amount}

onChange={(e) => setAmount(e.target.value)}

required

/>

<select value={type} onChange={(e) => setType(e.target.value)}>

<option value="income">Income</option>

<option value="expense">Expense</option>

</select>

<input

type="text"

placeholder="Category"

value={category}

onChange={(e) => setCategory(e.target.value)}

required

/>

<input
 type="date"

value={date}

onChange={(e) => setDate(e.target.value)}

required

/>

<button type="submit">Add Transaction</button>

</form>

</div>

);

};

export default AddTransaction;

Reports.js

Displays charts summarizing financial data.

import React, { useEffect, useState, useContext } from 'react';

import { Pie, Bar } from 'react-chartjs-2';

import api from '../api/api';

import SessionContext from '../context/SessionContext';

const Reports = () => {

const { session } = useContext(SessionContext);

const [chartData, setChartData] = useState(null);

useEffect(() => {

const fetchReportData = async () => {

try {

const response = await api.get(`/reports?userId=${session.id}`);

setChartData(response.data);
 } catch (error) {

console.error('Error fetching report data:', error);

};

fetchReportData();

}, [session]);

if (!chartData) return <p>Loading charts...</p>;

return (

<div className="reports">

<h2>Financial Reports</h2>

<div className="charts">

<div>

<h3>Expense Distribution</h3>

<Pie data={chartData.expenseDistribution} />

</div>

<div>

<h3>Monthly Spending</h3>

<Bar data={chartData.monthlySpending} />

</div>

</div>

</div>

);

};

export default Reports;

ChatBuddy.js
AI-driven chatbot for assistance.

import React, { useState } from 'react';

import api from '../api/api';

const ChatBuddy = () => {

const [messages, setMessages] = useState([]);

const [input, setInput] = useState('');

const handleSend = async () => {

setMessages([...messages, { sender: 'user', text: input }]);

try {

const response = await api.post('/chat', { query: input });

setMessages([...messages, { sender: 'bot', text:

response.data.reply }]);

} catch (error) {

setMessages([...messages, { sender: 'bot', text: 'Error: Unable to

process request' }]);

setInput('');

};

return (

<div className="chat-buddy">

<h2>ChatBuddy</h2>

<div className="chat-window">

{messages.map((msg, idx) => (

<div key={idx} className={`message ${msg.sender}`}>

{msg.text}

</div>

))}
 </div>

<input

type="text"

placeholder="Ask ChatBuddy..."

value={input}

onChange={(e) => setInput(e.target.value)}

/>

<button onClick={handleSend}>Send</button>

</div>

);

};

export default ChatBuddy;

Profile.js

Displays and allows editing of user profile information.

import React, { useState, useContext } from 'react';

import SessionContext from '../context/SessionContext';

import api from '../api/api';

const Profile = () => {

const { session, login } = useContext(SessionContext);

const [name, setName] = useState(session.name);

const [email, setEmail] = useState(session.email);

const handleSave = async () => {

try {

const response = await api.put(`/users/${session.id}`, { name,

email });
 login(response.data.user);

alert('Profile updated successfully.');

} catch (error) {

alert('Failed to update profile.');

};

return (

<div className="profile">

<h2>Profile</h2>

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

placeholder="Name"

/>

<input

type="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

placeholder="Email"

/>

<button onClick={handleSave}>Save</button>

</div>

);

};

export default Profile;

CSS (For Pages)

Add corresponding styles in Components.css to ensure a clean design for

these pages. Let me know if you need more help!