Enhanced Admin Dashboard UI with modern layout and user list

Author: Uttam Singh

frontend/src/pages/AdminDashboard.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 export default function AdminDashboard() {
   const [formData, setFormData] = useState({
@@ -10,11 +10,13 @@ export default function AdminDashboard() {
     role: "auditee",
   });
   const [message, setMessage] = useState("");
+  const [users, setUsers] = useState([]);
 
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  // Create new user
   const handleSubmit = async (e) => {
     e.preventDefault();
     setMessage("Creating user...");
@@ -29,6 +31,7 @@ export default function AdminDashboard() {
       const data = await res.json();
       if (data.ok) {
         setMessage("✅ User created successfully!");
+        fetchUsers();
         setFormData({
           name: "",
           email: "",
@@ -45,45 +48,69 @@ export default function AdminDashboard() {
     }
   };
 
+  // Fetch users for admin view
+  const fetchUsers = async () => {
+    try {
+      const res = await fetch(
+        "https://fat-eibl-backend-x1sp.onrender.com/users/all"
+      );
+      const data = await res.json();
+      if (data.ok) setUsers(data.users);
+    } catch (e) {
+      console.error("Failed to load users", e);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
   return (
     <div
       style={{
-        backgroundColor: "#f7faff",
+        background: "linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%)",
         minHeight: "100vh",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        padding: "40px 20px",
+        padding: "50px 20px",
         fontFamily: "'Inter', sans-serif",
       }}
     >
-      {/* Header */}
-      <div style={{ textAlign: "center", marginBottom: "30px" }}>
-        <h1 style={{ color: "#004aad", fontSize: "2rem", fontWeight: 700 }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "40px" }}>
+        <h1
+          style={{
+            fontSize: "2.3rem",
+            color: "#004aad",
+            fontWeight: "700",
+            marginBottom: "10px",
+          }}
+        >
           👨‍💼 Admin Dashboard
         </h1>
-        <p style={{ color: "#5a6a85", fontSize: "1rem" }}>
-          Manage users and assign departments efficiently.
+        <p style={{ color: "#5f6c85", fontSize: "1rem" }}>
+          Manage users, departments, and system access.
         </p>
       </div>
 
-      {/* Card */}
+      {/* FORM CARD */}
       <div
         style={{
-          background: "white",
-          padding: "40px 30px",
-          borderRadius: "16px",
+          background: "#fff",
+          padding: "40px",
+          borderRadius: "20px",
           width: "100%",
-          maxWidth: "550px",
-          boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
-          transition: "0.3s ease-in-out",
+          maxWidth: "600px",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+          marginBottom: "40px",
         }}
       >
         <h2
           style={{
             color: "#004aad",
+            fontWeight: "600",
             marginBottom: "25px",
-            fontSize: "1.3rem",
             borderBottom: "2px solid #004aad",
             display: "inline-block",
             paddingBottom: "5px",
@@ -93,73 +120,52 @@ export default function AdminDashboard() {
         </h2>
 
         <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: "15px" }}>
-            <input
-              type="text"
-              name="name"
-              placeholder="Full Name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              style={inputStyle}
-            />
-          </div>
-
-          <div style={{ marginBottom: "15px" }}>
-            <input
-              type="email"
-              name="email"
-              placeholder="Email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-              style={inputStyle}
-            />
-          </div>
-
-          <div style={{ marginBottom: "15px" }}>
-            <input
-              type="password"
-              name="password"
-              placeholder="Password"
-              value={formData.password}
-              onChange={handleChange}
-              required
-              style={inputStyle}
-            />
-          </div>
-
-          <div style={{ marginBottom: "15px" }}>
-            <input
-              type="text"
-              name="department"
-              placeholder="Department"
-              value={formData.department}
-              onChange={handleChange}
-              style={inputStyle}
-            />
-          </div>
-
-          <div style={{ marginBottom: "15px" }}>
-            <input
-              type="email"
-              name="manager_email"
-              placeholder="Manager Email"
-              value={formData.manager_email}
-              onChange={handleChange}
-              style={inputStyle}
-            />
-          </div>
+          {["name", "email", "password", "department", "manager_email"].map(
+            (field, idx) => (
+              <div key={idx} style={{ marginBottom: "15px" }}>
+                <input
+                  type={field === "password" ? "password" : "text"}
+                  name={field}
+                  placeholder={
+                    field === "manager_email"
+                      ? "Manager Email"
+                      : field.charAt(0).toUpperCase() + field.slice(1)
+                  }
+                  value={formData[field]}
+                  onChange={handleChange}
+                  required={field !== "manager_email"}
+                  style={{
+                    width: "100%",
+                    padding: "12px 15px",
+                    borderRadius: "10px",
+                    border: "1px solid #d0d7e2",
+                    backgroundColor: "#f8faff",
+                    fontSize: "1rem",
+                    outline: "none",
+                    transition: "0.2s",
+                  }}
+                  onFocus={(e) =>
+                    (e.target.style.border = "1px solid #004aad")
+                  }
+                  onBlur={(e) => (e.target.style.border = "1px solid #d0d7e2")}
+                />
+              </div>
+            )
+          )}
 
           <div style={{ marginBottom: "20px" }}>
             <select
               name="role"
               value={formData.role}
               onChange={handleChange}
               style={{
-                ...inputStyle,
+                width: "100%",
+                padding: "12px 15px",
+                borderRadius: "10px",
+                border: "1px solid #d0d7e2",
+                backgroundColor: "#f8faff",
+                fontSize: "1rem",
                 cursor: "pointer",
-                backgroundColor: "#fff",
               }}
             >
               <option value="auditee">Auditee</option>
@@ -174,26 +180,29 @@ export default function AdminDashboard() {
               width: "100%",
               backgroundColor: "#004aad",
               color: "white",
-              padding: "12px",
-              fontSize: "1rem",
+              padding: "14px",
               borderRadius: "10px",
               border: "none",
+              fontSize: "1rem",
+              fontWeight: "600",
               cursor: "pointer",
-              fontWeight: 600,
-              transition: "background 0.3s",
+              transition: "0.3s",
             }}
-            onMouseOver={(e) => (e.target.style.backgroundColor = "#003b85")}
-            onMouseOut={(e) => (e.target.style.backgroundColor = "#004aad")}
+            onMouseOver={(e) =>
+              (e.target.style.backgroundColor = "#003b85")
+            }
+            onMouseOut={(e) =>
+              (e.target.style.backgroundColor = "#004aad")
+            }
           >
             Create User
           </button>
         </form>
 
-        {/* Message Display */}
         {message && (
           <p
             style={{
-              marginTop: "20px",
+              marginTop: "15px",
               textAlign: "center",
               color: message.startsWith("✅")
                 ? "green"
@@ -208,20 +217,86 @@ export default function AdminDashboard() {
         )}
       </div>
 
-      {/* Footer */}
+      {/* USER LIST */}
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "800px",
+          background: "#fff",
+          padding: "25px 30px",
+          borderRadius: "16px",
+          boxShadow: "0 3px 12px rgba(0,0,0,0.08)",
+        }}
+      >
+        <h3
+          style={{
+            color: "#004aad",
+            marginBottom: "15px",
+            borderBottom: "2px solid #004aad",
+            display: "inline-block",
+            paddingBottom: "4px",
+          }}
+        >
+          Registered Users
+        </h3>
+        {users.length === 0 ? (
+          <p style={{ color: "#7d8ba1", textAlign: "center" }}>
+            No users found.
+          </p>
+        ) : (
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              textAlign: "left",
+            }}
+          >
+            <thead>
+              <tr style={{ background: "#f5f9ff" }}>
+                <th style={thStyle}>Name</th>
+                <th style={thStyle}>Email</th>
+                <th style={thStyle}>Department</th>
+                <th style={thStyle}>Role</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u, i) => (
+                <tr
+                  key={i}
+                  style={{
+                    borderBottom: "1px solid #e5e9f2",
+                    backgroundColor: i % 2 === 0 ? "#fafbff" : "white",
+                  }}
+                >
+                  <td style={tdStyle}>{u.name}</td>
+                  <td style={tdStyle}>{u.email}</td>
+                  <td style={tdStyle}>{u.department || "-"}</td>
+                  <td style={tdStyle}>{u.role}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* FOOTER */}
       <p style={{ marginTop: "40px", color: "#7c8ca5", fontSize: "0.9rem" }}>
-        © {new Date().getFullYear()} Edme Insurance Brokers Ltd | Finance Audit Tracker
+        © {new Date().getFullYear()} Edme Insurance Brokers Ltd | Finance Audit
+        Tracker
       </p>
     </div>
   );
 }
 
-const inputStyle = {
-  width: "100%",
-  padding: "10px 14px",
-  borderRadius: "10px",
-  border: "1px solid #ccc",
-  outline: "none",
-  fontSize: "1rem",
-  transition: "border 0.3s ease",
+const thStyle = {
+  padding: "10px 15px",
+  color: "#003b80",
+  fontWeight: "600",
+  borderBottom: "2px solid #004aad",
+};
+
+const tdStyle = {
+  padding: "10px 15px",
+  color: "#333",
+  fontSize: "0.95rem",
 };