Implement api task fetching in Dashboard component with loading state

taskncoffee-app/src/pages/Dashboard.jsx

@@ -1,10 +1,14 @@
 'use client';
+import { useState, useEffect } from 'react';
 import '../neon.css';
 import './dashboard.css';
 import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
 import { Home, Settings, Bell } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { jwtexp } from '@/lib/utils';
+import { getUserTasks } from '@/api/users.service';
+
+
 const menuItems = [
     { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
     { label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
@@ -12,18 +16,26 @@ const menuItems = [
 ];
 
 export default function Dashboard() {
-    // Mock data from backend
-    const tasksFromBackend = [
-        { title: "testtitle", due_date: "2025-10-14", priority: "medium", id: 1, status: "open" },
-        { title: "title", due_date: "2025-10-15", priority: "high", id: 3, status: "open" },
-        { title: "title title2", due_date: "2025-10-15", priority: "medium", id: 4, status: "closed" },
-        { title: "title title3", due_date: "2025-10-15", priority: "medium", id: 5, status: "open" },
-        { title: "title16", due_date: "2025-10-15", priority: "medium", id: 6, status: "completed" },
-        { title: "super late title", due_date: "2025-10-15", priority: "low", id: 2, status: "open" }
-    ];
-    const token = localStorage.getItem('access_token');
-    const tokenExp = jwtexp(token);
-    console.log(tokenExp);
+    const [tasksFromBackend, setTasksFromBackend] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    // Fetch tasks
+    useEffect(() => {
+        const fetchTasks = async () => {
+            try {
+                const response = await getUserTasks(1);
+                console.log('Tasks from backend:', response);
+                setTasksFromBackend(response);
+            } catch (error) {
+                console.error('Failed to fetch tasks:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchTasks();
+    }, []);
+
     // Get current date and week
     const today = new Date();
     const currentDay = today.getDay();
@@ -76,6 +88,16 @@ export default function Dashboard() {
         };
     });
 
+    if (loading) {
+        return (
+            <div className="dashboard-container">
+                <div className="flex items-center justify-center min-h-screen">
+                    <p className="text-xl">Loading tasks...</p>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div className="dashboard-container">
             {/* Navigation Rail - Material Design 3 */}