New Front end code

// src/components/Navbar.js
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const Navbar = () => {
const { user, logout } = useAuth();
const navigate = useNavigate();

const handleLogout = () => {
logout();
navigate('/login');
};

return (
<nav className="bg-white shadow">
<div className="container mx-auto px-4">
<div className="flex justify-between items-center h-16">
<Link to="/" className="text-xl font-bold">OEP Achievers</Link>
<div className="flex items-center space-x-4">
{user ? (
<>
<Link to="/dashboard" className="hover:text-blue-500">Dashboard</Link>
<Link to="/courses" className="hover:text-blue-500">Courses</Link>
{user.role === 'INSTRUCTOR' && (
<Link to="/create-course" className="hover:text-blue-500">Create Course</Link>
)}
<button onClick={handleLogout} className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600" >
Logout
</button>
</>
) : (
<>
<Link to="/login" className="hover:text-blue-500">Login</Link>
<Link to="/register" className="hover:text-blue-500">Register</Link>
</>
)}
</div>
</div>
</div>
</nav>
);
};

// src/components/courses/CourseList.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../../api/api';

const CourseList = () => {
const [courses, setCourses] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');

useEffect(() => {
const fetchCourses = async () => {
try {
const response = await api.getPublishedCourses();
setCourses(response.data);
} catch (err) {
setError('Failed to load courses');
} finally {
setLoading(false);
}
};

fetchCourses();

}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div className="text-red-500">{error}</div>;

return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{courses.map(course => (
<div key={course.id} className="bg-white rounded-lg shadow p-6">
<h3 className="text-xl font-bold mb-2">{course.title}</h3>
<p className="text-gray-600 mb-4">{course.description}</p>
<div className="flex justify-between items-center">
<span className="text-blue-500">{course.price}</span> <Link to={`/courses/{course.id}`}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
View Details
</Link>
</div>
</div>
))}
</div>
);
};

// src/components/dashboard/Dashboard.js
import React, { useState, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { api } from '../../api/api';

const Dashboard = () => {
const { user } = useAuth();
const [enrollments, setEnrollments] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchEnrollments = async () => {
if (user?.id) {
try {
const response = await api.getStudentEnrollments(user.id);
setEnrollments(response.data);
} catch (error) {
console.error('Failed to fetch enrollments:', error);
} finally {
setLoading(false);
}
}
};

fetchEnrollments();

}, [user]);

if (loading) return <div>Loading...</div>;

return (
<div className="space-y-6">
<h2 className="text-2xl font-bold">Welcome, {user?.fullName}</h2>

  {user?.role === 'STUDENT' && (
    <div>
      <h3 className="text-xl font-semibold mb-4">Your Enrolled Courses</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {enrollments.map(enrollment => (
          <div key={enrollment.id} className="bg-white p-4 rounded-lg shadow">
            <h4 className="font-bold">{enrollment.course.title}</h4>
            <div className="mt-2">
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div 
                  className="bg-blue-600 h-2.5 rounded-full" 
                  style={{ width: `${enrollment.progress}%` }}
                ></div>
              </div>
              <span className="text-sm text-gray-600">
                Progress: {enrollment.progress}%
              </span>
            </div>
            <div className="mt-2">
              Status: {enrollment.status}
            </div>
          </div>
        ))}
      </div>
    </div>
  )}
</div>

);
};