Connect dashboard to backend /tasks API

Author: Uttam Singh

frontend/src/pages/Dashboard.jsx

@@ -3,65 +3,72 @@ import React, { useEffect, useState } from "react";
 export default function Dashboard() {
   const [tasks, setTasks] = useState([]);
   const [loading, setLoading] = useState(true);
-  const API_URL = import.meta.env.VITE_API_URL || "https://fat-eibl-backend.onrender.com";
+
+  // Backend URL (Render)
+  const API_URL = import.meta.env.VITE_API_URL || "https://fat-eibl-backend-x1sp.onrender.com";
 
   useEffect(() => {
-    const fetchTasks = async () => {
+    async function fetchTasks() {
       try {
-        const response = await fetch(`${API_URL}/tasks`);
-        if (!response.ok) throw new Error("Failed to load tasks");
-        const data = await response.json();
+        const res = await fetch(`${API_URL}/tasks`);
+        if (!res.ok) throw new Error("Failed to fetch tasks");
+        const data = await res.json();
         setTasks(data);
       } catch (err) {
-        console.error("Error loading tasks:", err);
+        console.error("Error fetching data:", err);
       } finally {
         setLoading(false);
       }
-    };
-
+    }
     fetchTasks();
   }, [API_URL]);
 
   return (
-    <div style={{ textAlign: "center", marginTop: "60px", fontFamily: "Arial" }}>
-      <h1 style={{ color: "#0047AB" }}>Finance Audit Dashboard</h1>
-      <h3 style={{ color: "#666" }}>Edme Insurance Brokers Limited</h3>
+    <div style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f8f9fc", minHeight: "100vh", padding: "20px" }}>
+      <h1 style={{ color: "#0047AB", textAlign: "center" }}>Finance Audit Dashboard</h1>
+      <h3 style={{ textAlign: "center", color: "#555" }}>
+        Edme Insurance Brokers Limited
+      </h3>
+
       {loading ? (
-        <p>Loading reports...</p>
+        <p style={{ textAlign: "center" }}>Loading tasks...</p>
       ) : (
-        <table
-          border="1"
-          cellPadding="10"
-          style={{
-            margin: "30px auto",
-            borderCollapse: "collapse",
-            width: "80%",
-            background: "#f9f9f9",
-          }}
-        >
-          <thead>
-            <tr style={{ background: "#0047AB", color: "white" }}>
-              <th>ID</th>
-              <th>Task</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {tasks.length > 0 ? (
-              tasks.map((task) => (
-                <tr key={task.id}>
-                  <td>{task.id}</td>
-                  <td>{task.title}</td>
-                  <td>{task.status}</td>
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan="3">No data available</td>
+        <div style={{ marginTop: "30px" }}>
+          <table
+            style={{
+              borderCollapse: "collapse",
+              margin: "0 auto",
+              width: "90%",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+              backgroundColor: "white",
+            }}
+          >
+            <thead>
+              <tr style={{ backgroundColor: "#0047AB", color: "white" }}>
+                <th style={{ padding: "12px" }}>ID</th>
+                <th style={{ padding: "12px" }}>Task Title</th>
+                <th style={{ padding: "12px" }}>Status</th>
               </tr>
-            )}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {tasks.length > 0 ? (
+                tasks.map((task) => (
+                  <tr key={task.id}>
+                    <td style={{ padding: "10px", textAlign: "center" }}>{task.id}</td>
+                    <td style={{ padding: "10px" }}>{task.title}</td>
+                    <td style={{ padding: "10px", textAlign: "center" }}>{task.status}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan="3" style={{ textAlign: "center", padding: "20px" }}>
+                    No data available
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       )}
     </div>
   );