Enhance Dashboard component to redirect on authentication error and streamline loading state display

taskncoffee-app/src/pages/Dashboard.jsx

@@ -7,6 +7,7 @@ import { Home, Settings, Bell } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { jwtexp } from '@/lib/utils';
 import Calendar from '@/components/Calendar';
+import { useNavigate } from "react-router";
 
 const menuItems = [
     { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
@@ -15,6 +16,7 @@ const menuItems = [
 ];
 
 export default function Dashboard() {
+    const navigate = useNavigate();
     const [loading, setLoading] = useState(true);
     const [authError, setAuthError] = useState(false);
 
@@ -52,40 +54,23 @@ export default function Dashboard() {
         validateAuth();
     }, []);
 
-    // Get current date and week
-
-
-    // Calculate the Monday of current week
-
-    // Group tasks by day
-
-
-
-
-    if (loading) {
-        return (
-            <div className="dashboard-container">
-                <div className="flex items-center justify-center min-h-screen">
-                    <p className="text-xl">Loading dashboard...</p>
-                </div>
-            </div>
-        );
-    }
-
+    // Redirect to login if authentication fails
+    useEffect(() => {
         if (authError) {
+            console.log('Authentication error detected, redirecting to login...');
+            navigate('/');
+        }
+    }, [authError, navigate]);
+
+
+
+    if (loading || 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>
+                    <p className="text-xl">
+                        {loading ? 'Loading dashboard...' : 'Redirecting...'}
+                    </p>
                 </div>
             </div>
         );