Refactor Dashboard component to handle authentication errors and improve token validation logic

taskncoffee-app/src/pages/Dashboard.jsx

@@ -18,11 +18,32 @@ const menuItems = [
 export default function Dashboard() {
     const [tasksFromBackend, setTasksFromBackend] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [authError, setAuthError] = useState(false);
 
     // Fetch tasks
     useEffect(() => {
+        console.log('Dashboard useEffect triggered');
         const fetchTasks = async () => {
             try {
+                console.log('Starting fetchTasks...');
+                const token = localStorage.getItem('access_token');
+                if (token) {
+                    console.log('Token found, validating...');
+                    const isTokenValid = await jwtexp(token);
+                    if (!isTokenValid) {
+                        console.error('Token validation failed');
+                        setAuthError(true);
+                        setLoading(false);
+                        return;
+                    }
+                } else {
+                    console.error('No access token found');
+                    setAuthError(true);
+                    setLoading(false);
+                    return;
+                }
+
+                console.log('Fetching user tasks...');
                 const response = await getUserTasks(1);
                 console.log('Tasks from backend:', response);
                 setTasksFromBackend(response);
@@ -98,6 +119,25 @@ export default function Dashboard() {
         );
     }
 
+    if (authError) {
+        return (
+            <div className="dashboard-container">
+                <div className="flex items-center justify-center min-h-screen">
+                    <div className="text-center">
+                        <p className="text-xl text-red-500 mb-4">Authentication Error</p>
+                        <p className="text-gray-600">Please log in again</p>
+                        <button
+                            onClick={() => window.location.href = '/login'}
+                            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                        >
+                            Go to Login
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div className="dashboard-container">
             {/* Navigation Rail - Material Design 3 */}